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/actions/create-team-account-server-actions.ts

@@ -0,0 +1,58 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { z } from 'zod';
+
+import { Logger } from '@kit/shared/logger';
+import { requireAuth } from '@kit/supabase/require-auth';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+import { CreateTeamSchema } from '../schema/create-team.schema';
+import { CreateTeamAccountService } from '../services/create-team-account.service';
+
+const TEAM_ACCOUNTS_HOME_PATH = z
+  .string({
+    required_error: 'variable TEAM_ACCOUNTS_HOME_PATH is required',
+  })
+  .min(1)
+  .parse(process.env.TEAM_ACCOUNTS_HOME_PATH);
+
+export async function createOrganizationAccountAction(
+  params: z.infer<typeof CreateTeamSchema>,
+) {
+  const { name: accountName } = CreateTeamSchema.parse(params);
+
+  const client = getSupabaseServerActionClient();
+  const service = new CreateTeamAccountService(client);
+  const session = await requireAuth(client);
+
+  if (session.error) {
+    redirect(session.redirectTo);
+  }
+
+  const userId = session.data.user.id;
+
+  const createAccountResponse = await service.createNewOrganizationAccount({
+    name: accountName,
+    userId,
+  });
+
+  if (createAccountResponse.error) {
+    Logger.error(
+      {
+        userId,
+        error: createAccountResponse.error,
+        name: 'accounts',
+      },
+      `Error creating organization account`,
+    );
+
+    throw new Error('Error creating organization account');
+  }
+
+  const accountHomePath =
+    TEAM_ACCOUNTS_HOME_PATH + '/' + createAccountResponse.data.slug;
+
+  redirect(accountHomePath);
+}

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'} />

packages/features/team-accounts/src/schema/create-team.schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const CreateTeamSchema = z.object({
+  name: z.string().min(2).max(50),
+});

packages/features/team-accounts/src/schema/delete-invitation.schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
 
 export const DeleteInvitationSchema = z.object({
-  invitationId: z.bigint(),
+  invitationId: z.number().int(),
 });

packages/features/team-accounts/src/services/create-team-account.service.ts

@@ -0,0 +1,21 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { Logger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export class CreateTeamAccountService {
+  private readonly namespace = 'accounts.create-team-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  createNewOrganizationAccount(params: { name: string; userId: string }) {
+    Logger.info(
+      { ...params, namespace: this.namespace },
+      `Creating new organization account...`,
+    );
+
+    return this.client.rpc('create_account', {
+      account_name: params.name,
+    });
+  }
+}