Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

packages/features/accounts/src/components/account-selector.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 
 import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons';
-import { CheckIcon, PlusIcon } from 'lucide-react';
+import { Check, Plus } from 'lucide-react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
 import { Button } from '@kit/ui/button';
@@ -19,7 +19,7 @@ import { If } from '@kit/ui/if';
 import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
 import { cn } from '@kit/ui/utils';
 
-import { CreateOrganizationAccountDialog } from './create-organization-account-dialog';
+import { CreateTeamAccountDialog } from '../../../team-accounts/src/components/create-team-account-dialog';
 
 interface AccountSelectorProps {
   accounts: Array<{
@@ -64,7 +64,7 @@ export function AccountSelector({
 
   const Icon = (props: { item: string }) => {
     return (
-      <CheckIcon
+      <Check
         className={cn(
           'ml-auto h-4 w-4',
           value === props.item ? 'opacity-100' : 'opacity-0',
@@ -196,7 +196,7 @@ export function AccountSelector({
                       setOpen(false);
                     }}
                   >
-                    <PlusIcon className="mr-2 h-4 w-4" />
+                    <Plus className="mr-2 h-4 w-4" />
 
                     <span>Create Organization</span>
                   </Button>
@@ -208,7 +208,7 @@ export function AccountSelector({
       </Popover>
 
       <If condition={features.enableOrganizationCreation}>
-        <CreateOrganizationAccountDialog
+        <CreateTeamAccountDialog
           isOpen={isCreatingAccount}
           setIsOpen={setIsCreatingAccount}
         />

packages/features/accounts/src/components/create-organization-account-dialog.tsx

@@ -1,128 +0,0 @@
-import { useState, useTransition } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-import { Button } from '@kit/ui/button';
-import { Dialog, DialogContent, DialogTitle } from '@kit/ui/dialog';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@kit/ui/form';
-import { If } from '@kit/ui/if';
-import { Input } from '@kit/ui/input';
-import { Trans } from '@kit/ui/trans';
-
-import { CreateOrganizationAccountSchema } from '../schema/create-organization.schema';
-import { createOrganizationAccountAction } from '../server/accounts-server-actions';
-
-export function CreateOrganizationAccountDialog(
-  props: React.PropsWithChildren<{
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-  }>,
-) {
-  return (
-    <Dialog open={props.isOpen} onOpenChange={props.setIsOpen}>
-      <DialogContent>
-        <DialogTitle>
-          <Trans i18nKey={'organization:createOrganizationModalHeading'} />
-        </DialogTitle>
-
-        <CreateOrganizationAccountForm />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CreateOrganizationAccountForm() {
-  const [error, setError] = useState<boolean>();
-  const [pending, startTransition] = useTransition();
-
-  const form = useForm<z.infer<typeof CreateOrganizationAccountSchema>>({
-    defaultValues: {
-      name: '',
-    },
-    resolver: zodResolver(CreateOrganizationAccountSchema),
-  });
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit((data) => {
-          startTransition(async () => {
-            try {
-              await createOrganizationAccountAction(data);
-            } catch (error) {
-              setError(true);
-            }
-          });
-        })}
-      >
-        <div className={'flex flex-col space-y-4'}>
-          <If condition={error}>
-            <CreateOrganizationErrorAlert />
-          </If>
-
-          <FormField
-            name={'name'}
-            render={({ field }) => {
-              return (
-                <FormItem>
-                  <FormLabel>
-                    <Trans i18nKey={'organization:organizationNameLabel'} />
-                  </FormLabel>
-
-                  <FormControl>
-                    <Input
-                      data-test={'create-organization-name-input'}
-                      required
-                      minLength={2}
-                      maxLength={50}
-                      placeholder={''}
-                      {...field}
-                    />
-                  </FormControl>
-
-                  <FormDescription>
-                    Your organization name should be unique and descriptive.
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              );
-            }}
-          />
-
-          <Button
-            data-test={'confirm-create-organization-button'}
-            disabled={pending}
-          >
-            <Trans i18nKey={'organization:createOrganizationSubmitLabel'} />
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-function CreateOrganizationErrorAlert() {
-  return (
-    <Alert variant={'destructive'}>
-      <AlertTitle>
-        <Trans i18nKey={'organization:createOrganizationErrorHeading'} />
-      </AlertTitle>
-
-      <AlertDescription>
-        <Trans i18nKey={'organization:createOrganizationErrorMessage'} />
-      </AlertDescription>
-    </Alert>
-  );
-}

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -7,11 +7,11 @@ import Link from 'next/link';
 import type { Session } from '@supabase/gotrue-js';
 
 import {
-  EllipsisVerticalIcon,
-  HomeIcon,
-  LogOutIcon,
-  MessageCircleQuestionIcon,
-  ShieldIcon,
+  EllipsisVertical,
+  Home,
+  LogOut,
+  MessageCircleQuestion,
+  Shield,
 } from 'lucide-react';
 
 import {
@@ -87,7 +87,7 @@ export function PersonalAccountDropdown({
             </span>
           </div>
 
-          <EllipsisVerticalIcon
+          <EllipsisVertical
             className={'text-muted-foreground hidden h-8 group-hover:flex'}
           />
         </If>
@@ -119,7 +119,7 @@ export function PersonalAccountDropdown({
             className={'s-full flex items-center space-x-2'}
             href={paths.home}
           >
-            <HomeIcon className={'h-5'} />
+            <Home className={'h-5'} />
 
             <span>
               <Trans i18nKey={'common:homeTabLabel'} />
@@ -131,7 +131,7 @@ export function PersonalAccountDropdown({
 
         <DropdownMenuItem asChild>
           <Link className={'s-full flex items-center space-x-2'} href={'/docs'}>
-            <MessageCircleQuestionIcon className={'h-5'} />
+            <MessageCircleQuestion className={'h-5'} />
 
             <span>
               <Trans i18nKey={'common:documentation'} />
@@ -147,7 +147,7 @@ export function PersonalAccountDropdown({
               className={'s-full flex items-center space-x-2'}
               href={'/admin'}
             >
-              <ShieldIcon className={'h-5'} />
+              <Shield className={'h-5'} />
 
               <span>Admin</span>
             </Link>
@@ -162,7 +162,7 @@ export function PersonalAccountDropdown({
           onClick={signOutRequested}
         >
           <span className={'flex w-full items-center space-x-2'}>
-            <LogOutIcon className={'h-5'} />
+            <LogOut className={'h-5'} />
 
             <span>
               <Trans i18nKey={'auth:signOut'} />

packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx

@@ -18,6 +18,8 @@ import { Heading } from '@kit/ui/heading';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
+import { deletePersonalAccountAction } from '../../server/personal-accounts-server-actions';
+
 export function AccountDangerZone() {
   return <DeleteAccountContainer />;
 }
@@ -72,7 +74,7 @@ function DeleteAccountForm() {
   return (
     <Form {...form}>
       <form
-        action={deleteUserAccountAction}
+        action={deletePersonalAccountAction}
         className={'flex flex-col space-y-4'}
       >
         <div className={'flex flex-col space-y-6'}>
@@ -99,6 +101,7 @@ function DeleteAccountForm() {
               <Input
                 data-test={'delete-account-input-field'}
                 required
+                name={'confirmation'}
                 type={'text'}
                 className={'w-full'}
                 placeholder={''}

packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx

@@ -9,7 +9,7 @@ export function UpdateEmailFormContainer(props: { callbackPath: string }) {
   const { data: user, isPending } = useUser();
 
   if (isPending) {
-    return <LoadingOverlay />;
+    return <LoadingOverlay fullPage={false} />;
   }
 
   if (!user) {

packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx

@@ -15,7 +15,7 @@ export function UpdatePasswordFormContainer(
   const { data: user, isPending } = useUser();
 
   if (isPending) {
-    return <LoadingOverlay />;
+    return <LoadingOverlay fullPage={false} />;
   }
 
   const canUpdatePassword = user.identities?.some(