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/team-accounts/src/components/create-team-account-dialog.tsx

@@ -0,0 +1,128 @@
+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 { createOrganizationAccountAction } from '../actions/create-team-account-server-actions';
+import { CreateTeamSchema } from '../schema/create-team.schema';
+
+export function CreateTeamAccountDialog(
+  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 CreateTeamSchema>>({
+    defaultValues: {
+      name: '',
+    },
+    resolver: zodResolver(CreateTeamSchema),
+  });
+
+  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/team-accounts/src/components/invitations/account-invitations-table.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
+import { Ellipsis } from 'lucide-react';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -126,7 +126,7 @@ function ActionsDropdown({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant={'ghost'} size={'icon'}>
-            <EllipsisIcon className={'h-5 w-5'} />
+            <Ellipsis className={'h-5 w-5'} />
           </Button>
         </DropdownMenuTrigger>
 

packages/features/team-accounts/src/components/invitations/delete-invitation-dialog.tsx

@@ -17,7 +17,7 @@ import { deleteInvitationAction } from '../../actions/account-invitations-server
 export const DeleteInvitationDialog: React.FC<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  invitationId: string;
+  invitationId: number;
 }> = ({ isOpen, setIsOpen, invitationId }) => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -45,7 +45,7 @@ function DeleteInvitationForm({
   invitationId,
   setIsOpen,
 }: {
-  invitationId: string;
+  invitationId: number;
   setIsOpen: (isOpen: boolean) => void;
 }) {
   const [isSubmitting, startTransition] = useTransition();

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
+import { Ellipsis } from 'lucide-react';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -189,7 +189,7 @@ function ActionsDropdown({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant={'ghost'} size={'icon'}>
-            <EllipsisIcon className={'h-5 w-5'} />
+            <Ellipsis className={'h-5 w-5'} />
           </Button>
         </DropdownMenuTrigger>
 

packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -3,7 +3,7 @@
 import { useState, useTransition } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PlusIcon, XIcon } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -181,7 +181,7 @@ function InviteMembersForm({
                               form.clearErrors(emailInputName);
                             }}
                           >
-                            <XIcon className={'h-4 lg:h-5'} />
+                            <X className={'h-4 lg:h-5'} />
                           </Button>
                         </TooltipTrigger>
 
@@ -208,7 +208,7 @@ function InviteMembersForm({
               }}
             >
               <span className={'flex items-center space-x-2'}>
-                <PlusIcon className={'h-4'} />
+                <Plus className={'h-4'} />
 
                 <span>
                   <Trans i18nKey={'organization:addAnotherMemberButtonLabel'} />