Refactor code for readability and order

Made several changes across different files primarily focusing on readability. Arranged CSS classes in a standardized order for easier reading and maintenance. Arranged and formatted import lines, function declarations, and component return statements for legibility. Removed unnecessary React imports in some files.

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -112,7 +112,7 @@ export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
         style={{
           height: `calc(100vh - 64px)`,
         }}
-        className="sticky top-2 hidden w-80 shrink-0 border-r p-4 lg:flex overflow-y-auto"
+        className="sticky top-2 hidden w-80 shrink-0 overflow-y-auto border-r p-4 lg:flex"
       >
         <Tree pages={pages} level={0} activePath={activePath} />
       </aside>

apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts

@@ -15,7 +15,7 @@ async function docsLoader(language: string | undefined) {
   const { items: pages } = await cms.getContentItems({
     collection: 'documentation',
     language,
-    limit: 500
+    limit: 500,
   });
 
   return pages;

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,4 +1,5 @@
 import { User } from '@supabase/supabase-js';
+
 import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';

packages/billing/core/src/services/billing-strategy-provider.service.ts

@@ -67,11 +67,11 @@ export abstract class BillingStrategyProviderService {
     amount: number;
   }>;
 
-  abstract getSubscription(
-    subscriptionId: string,
-  ): Promise<UpsertSubscriptionParams & {
+  abstract getSubscription(subscriptionId: string): Promise<
+    UpsertSubscriptionParams & {
       // we can't always guarantee that the target account id will be present
       // so we need to make it optional and let the consumer handle it
       target_account_id: string | undefined;
-  }>;
+    }
+  >;
 }

packages/billing/stripe/src/services/stripe-webhook-handler.service.ts

@@ -88,9 +88,7 @@ export class StripeWebhookHandlerService
       onSubscriptionDeleted: (subscriptionId: string) => Promise<unknown>;
       onPaymentSucceeded: (sessionId: string) => Promise<unknown>;
       onPaymentFailed: (sessionId: string) => Promise<unknown>;
-      onInvoicePaid: (
-        data: UpsertSubscriptionParams,
-      ) => Promise<unknown>;
+      onInvoicePaid: (data: UpsertSubscriptionParams) => Promise<unknown>;
       onEvent?(event: Stripe.Event): Promise<unknown>;
     },
   ) {
@@ -294,9 +292,7 @@ export class StripeWebhookHandlerService
 
   private async handleInvoicePaid(
     event: Stripe.InvoicePaidEvent,
-    onInvoicePaid: (
-      data: UpsertSubscriptionParams,
-    ) => Promise<unknown>,
+    onInvoicePaid: (data: UpsertSubscriptionParams) => Promise<unknown>,
   ) {
     const stripe = await this.loadStripe();
 

packages/email-templates/src/components/body-style.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export function BodyStyle() {
   return (
     <style>

packages/email-templates/src/components/content.tsx

@@ -1,5 +1,4 @@
 import { Container } from '@react-email/components';
-import * as React from 'react';
 
 export function EmailContent(
   props: React.PropsWithChildren<{
@@ -9,7 +8,7 @@ export function EmailContent(
   return (
     <Container
       className={
-        'rounded-xl my-[8px] px-[24px] py-[12px] mx-auto border border-solid border-[#eeeeee] ' +
+        'mx-auto my-[8px] rounded-xl border border-solid border-[#eeeeee] px-[24px] py-[12px] ' +
           props.className || ''
       }
     >

packages/email-templates/src/components/cta-button.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@react-email/components';
-import * as React from 'react';
 
 export function CtaButton(
   props: React.PropsWithChildren<{
@@ -8,7 +7,7 @@ export function CtaButton(
 ) {
   return (
     <Button
-      className="w-full bg-[#000000] rounded text-white text-[14px] font-semibold no-underline text-center py-3"
+      className="w-full rounded bg-[#000000] py-3 text-center text-[14px] font-semibold text-white no-underline"
       href={props.href}
     >
       {props.children}

packages/email-templates/src/components/footer.tsx

@@ -1,10 +1,9 @@
 import { Container, Text } from '@react-email/components';
-import * as React from 'react';
 
 export function EmailFooter(props: React.PropsWithChildren) {
   return (
     <Container>
-      <Text className="text-[12px] leading-[24px] text-gray-300 px-4">
+      <Text className="px-4 text-[12px] leading-[24px] text-gray-300">
         {props.children}
       </Text>
     </Container>

packages/email-templates/src/components/header.tsx

@@ -1,10 +1,5 @@
 import { Container } from '@react-email/components';
-import * as React from 'react';
 
 export function EmailHeader(props: React.PropsWithChildren) {
-  return (
-    <Container>
-      {props.children}
-    </Container>
-  );
+  return <Container>{props.children}</Container>;
 }

packages/email-templates/src/components/heading.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { Heading } from '@react-email/components';
 
 export function EmailHeading(props: React.PropsWithChildren) {
   return (
-    <Heading className="text-black font-sans tracking-tight text-[20px] font-normal p-0 mx-0">
+    <Heading className="mx-0 p-0 font-sans text-[20px] font-normal tracking-tight text-black">
       {props.children}
     </Heading>
   );

packages/email-templates/src/components/wrapper.tsx

@@ -1,5 +1,4 @@
 import { Container } from '@react-email/components';
-import * as React from 'react';
 
 export function EmailWrapper(
   props: React.PropsWithChildren<{
@@ -21,7 +20,7 @@ export function EmailWrapper(
           backgroundColor: '#fff',
           margin: 'auto',
         }}
-        className={'my-[36px] mx-auto px-4 ' + props.className || ''}
+        className={'mx-auto my-[36px] px-4 ' + props.className || ''}
       >
         {props.children}
       </Container>

packages/features/auth/src/components/update-password-form.tsx

@@ -3,11 +3,7 @@
 import Link from 'next/link';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  CheckIcon,
-  ExclamationTriangleIcon,
-} from '@radix-ui/react-icons';
-
+import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { ArrowRightIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';

packages/ui/src/shadcn/form.tsx

@@ -7,9 +7,9 @@ import { Slot } from '@radix-ui/react-slot';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 
+import { Trans } from '../makerkit/trans';
 import { cn } from '../utils';
 import { Label } from './label';
-import {Trans} from "../makerkit/trans";
 
 const Form = FormProvider;
 
@@ -157,7 +157,11 @@ const FormMessage = React.forwardRef<
       className={cn('text-[0.8rem] font-medium text-destructive', className)}
       {...props}
     >
-      {typeof body === 'string' ? <Trans i18nKey={body} defaults={body} /> : body}
+      {typeof body === 'string' ? (
+        <Trans i18nKey={body} defaults={body} />
+      ) : (
+        body
+      )}
     </p>
   );
 });