Zen components conversion.

src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx

@@ -4,7 +4,7 @@ import { Icons } from '@/components/icons';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { ROLES } from '@/lib/constants';
 import { useContext, useState } from 'react';
-import { Flexbox, Item, Tabs } from 'react-basics';
+import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
@@ -26,16 +26,22 @@ export function TeamDetails({ teamId }: { teamId: string }) {
     ) && user.role !== ROLES.viewOnly;
 
   return (
-    <Flexbox direction="column">
+    <Column>
       <PageHeader title={team?.name} icon={<Icons.Users />}>
         {!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
       </PageHeader>
-      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
-        <Item key="details">{formatMessage(labels.details)}</Item>
-        {isTeamOwner && <Item key="manage">{formatMessage(labels.manage)}</Item>}
+      <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+        <TabList>
+          <Tab id="details">{formatMessage(labels.details)}</Tab>
+          {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
+        </TabList>
+        <TabPanel id="details">
+          <TeamEditForm teamId={teamId} allowEdit={canEdit} />
+        </TabPanel>
+        <TabPanel id="manage">
+          <TeamManage teamId={teamId} />
+        </TabPanel>
       </Tabs>
-      {tab === 'details' && <TeamEditForm teamId={teamId} allowEdit={canEdit} />}
-      {tab === 'manage' && <TeamManage teamId={teamId} />}
-    </Flexbox>
+    </Column>
   );
 }

src/app/(main)/teams/[teamId]/settings/team/TeamEditForm.tsx

@@ -1,20 +1,18 @@
 import {
-  SubmitButton,
   Form,
-  FormInput,
-  FormRow,
+  FormField,
   FormButtons,
+  FormSubmitButton,
   TextField,
   Button,
-  Flexbox,
-  useToasts,
-} from 'react-basics';
+  useToast,
+} from '@umami/react-zen';
 import { getRandomChars } from '@/lib/crypto';
-import { useContext, useRef, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 
-const generateId = () => getRandomChars(16);
+const generateId = () => `team_${getRandomChars(16)}`;
 
 export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?: boolean }) {
   const team = useContext(TeamContext);
@@ -23,57 +21,48 @@ export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/teams/${teamId}`, data),
   });
-  const ref = useRef(null);
   const [accessCode, setAccessCode] = useState(team.accessCode);
-  const { showToast } = useToasts();
+  const { toast } = useToast();
   const { touch } = useModified();
   const cloudMode = !!process.env.cloudMode;
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        ref.current.reset(data);
         touch('teams');
-        showToast({ message: formatMessage(messages.saved), variant: 'success' });
+        toast(formatMessage(messages.saved));
       },
     });
   };
 
   const handleRegenerate = () => {
-    const code = generateId();
-    ref.current.setValue('accessCode', code, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-    setAccessCode(code);
+    setAccessCode(generateId());
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={team}>
-      <FormRow label={formatMessage(labels.teamId)}>
-        <TextField value={teamId} readOnly allowCopy />
-      </FormRow>
-      <FormRow label={formatMessage(labels.name)}>
-        {allowEdit && (
-          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
-            <TextField />
-          </FormInput>
-        )}
+    <Form onSubmit={handleSubmit} error={error} values={{ ...team, accessCode }}>
+      <FormField name="id" label={formatMessage(labels.teamId)}>
+        <TextField isReadOnly allowCopy />
+      </FormField>
+      <FormField
+        name="name"
+        label={formatMessage(labels.name)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        {allowEdit && <TextField />}
         {!allowEdit && team.name}
-      </FormRow>
+      </FormField>
       {!cloudMode && allowEdit && (
-        <FormRow label={formatMessage(labels.accessCode)}>
-          <Flexbox gap={10}>
-            <TextField value={accessCode} readOnly allowCopy />
-            {allowEdit && (
-              <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
-            )}
-          </Flexbox>
-        </FormRow>
+        <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
+          <TextField isReadOnly allowCopy />
+        </FormField>
       )}
       {allowEdit && (
-        <FormButtons>
-          <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        <FormButtons justifyContent="space-between">
+          {allowEdit && (
+            <Button onPress={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+          )}
+          <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
         </FormButtons>
       )}
     </Form>

src/app/(main)/teams/[teamId]/settings/team/TeamManage.tsx

@@ -1,6 +1,7 @@
 import { useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
-import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
+import { Button, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
+import { ActionForm } from '@/components/layout/ActionForm';
 import { TeamDeleteForm } from './TeamDeleteForm';
 
 export function TeamManage({ teamId }: { teamId: string }) {
@@ -18,14 +19,14 @@ export function TeamManage({ teamId }: { teamId: string }) {
       label={formatMessage(labels.deleteTeam)}
       description={formatMessage(messages.deleteTeamWarning)}
     >
-      <ModalTrigger>
+      <DialogTrigger>
         <Button variant="danger">{formatMessage(labels.delete)}</Button>
-        <Modal title={formatMessage(labels.deleteTeam)}>
-          {(close: () => void) => (
-            <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />
-          )}
+        <Modal>
+          <Dialog title={formatMessage(labels.deleteTeam)}>
+            {({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
+          </Dialog>
         </Modal>
-      </ModalTrigger>
+      </DialogTrigger>
     </ActionForm>
   );
 }