Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

packages/features/admin/src/components/admin-delete-account-dialog.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useAction } from 'next-safe-action/hooks';
 import { useForm } from 'react-hook-form';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -35,22 +34,15 @@ import { DeleteAccountSchema } from '../lib/server/schema/admin-actions.schema';
 export function AdminDeleteAccountDialog(
   props: React.PropsWithChildren<{
     accountId: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
   }>,
 ) {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState<boolean>(false);
-
-  const form = useForm({
-    resolver: zodResolver(DeleteAccountSchema),
-    defaultValues: {
-      accountId: props.accountId,
-      confirmation: '',
-    },
-  });
-
   return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
+    <AlertDialog open={props.open} onOpenChange={props.onOpenChange}>
+      <If condition={props.children}>
+        <AlertDialogTrigger render={props.children as React.ReactElement} />
+      </If>
 
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -63,73 +55,75 @@ export function AdminDeleteAccountDialog(
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <Form {...form}>
-          <form
-            data-form={'admin-delete-account-form'}
-            className={'flex flex-col space-y-8'}
-            onSubmit={form.handleSubmit((data) => {
-              startTransition(async () => {
-                try {
-                  await deleteAccountAction(data);
-                  setError(false);
-                } catch {
-                  setError(true);
-                }
-              });
-            })}
-          >
-            <If condition={error}>
-              <Alert variant={'destructive'}>
-                <AlertTitle>Error</AlertTitle>
-
-                <AlertDescription>
-                  There was an error deleting the account. Please check the
-                  server logs to see what went wrong.
-                </AlertDescription>
-              </Alert>
-            </If>
-
-            <FormField
-              name={'confirmation'}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    Type <b>CONFIRM</b> to confirm
-                  </FormLabel>
-
-                  <FormControl>
-                    <Input
-                      pattern={'CONFIRM'}
-                      required
-                      placeholder={'Type CONFIRM to confirm'}
-                      {...field}
-                    />
-                  </FormControl>
-
-                  <FormDescription>
-                    Are you sure you want to do this? This action cannot be
-                    undone.
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-
-              <Button
-                disabled={pending}
-                type={'submit'}
-                variant={'destructive'}
-              >
-                {pending ? 'Deleting...' : 'Delete'}
-              </Button>
-            </AlertDialogFooter>
-          </form>
-        </Form>
+        <DeleteAccountForm accountId={props.accountId} />
       </AlertDialogContent>
     </AlertDialog>
   );
 }
+
+function DeleteAccountForm(props: { accountId: string }) {
+  const { execute, isPending, hasErrored } = useAction(deleteAccountAction);
+
+  const form = useForm({
+    resolver: zodResolver(DeleteAccountSchema),
+    defaultValues: {
+      accountId: props.accountId,
+      confirmation: '',
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        data-test={'admin-delete-account-form'}
+        className={'flex flex-col space-y-8'}
+        onSubmit={form.handleSubmit((data) => execute(data))}
+      >
+        <If condition={hasErrored}>
+          <Alert variant={'destructive'}>
+            <AlertTitle>Error</AlertTitle>
+
+            <AlertDescription>
+              There was an error deleting the account. Please check the server
+              logs to see what went wrong.
+            </AlertDescription>
+          </Alert>
+        </If>
+
+        <FormField
+          name={'confirmation'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                Type <b>CONFIRM</b> to confirm
+              </FormLabel>
+
+              <FormControl>
+                <Input
+                  pattern={'CONFIRM'}
+                  required
+                  placeholder={'Type CONFIRM to confirm'}
+                  {...field}
+                />
+              </FormControl>
+
+              <FormDescription>
+                Are you sure you want to do this? This action cannot be undone.
+              </FormDescription>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+          <Button disabled={isPending} type={'submit'} variant={'destructive'}>
+            {isPending ? 'Deleting...' : 'Delete'}
+          </Button>
+        </AlertDialogFooter>
+      </form>
+    </Form>
+  );
+}