Zen components conversion.

src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx

@@ -1,13 +1,14 @@
 import {
   Form,
-  FormRow,
+  FormField,
   FormButtons,
-  Flexbox,
   TextField,
   Button,
-  Toggle,
-  LoadingButton,
-} from 'react-basics';
+  Switch,
+  FormSubmitButton,
+  Box,
+  useToast,
+} from '@umami/react-zen';
 import { useContext, useState } from 'react';
 import { getRandomChars } from '@/lib/crypto';
 import { useApi, useMessages, useModified } from '@/components/hooks';
@@ -25,6 +26,7 @@ export function ShareUrl({ hostUrl, onSave }: { hostUrl?: string; onSave?: () =>
     mutationFn: (data: any) => post(`/websites/${website.id}`, data),
   });
   const { touch } = useModified();
+  const { toast } = useToast();
 
   const url = `${hostUrl || window?.location.origin || ''}${
     process.env.basePath || ''
@@ -34,7 +36,8 @@ export function ShareUrl({ hostUrl, onSave }: { hostUrl?: string; onSave?: () =>
     setId(generateId());
   };
 
-  const handleCheck = (checked: boolean) => {
+  const handleSwitch = (checked: boolean) => {
+    console.log({ checked });
     const data = {
       name: website.name,
       domain: website.domain,
@@ -42,6 +45,7 @@ export function ShareUrl({ hostUrl, onSave }: { hostUrl?: string; onSave?: () =>
     };
     mutate(data, {
       onSuccess: async () => {
+        toast(formatMessage(messages.saved));
         touch(`website:${website.id}`);
         onSave?.();
       },
@@ -54,6 +58,7 @@ export function ShareUrl({ hostUrl, onSave }: { hostUrl?: string; onSave?: () =>
       { name: website.name, domain: website.domain, shareId: id },
       {
         onSuccess: async () => {
+          toast(formatMessage(messages.saved));
           touch(`website:${website.id}`);
           onSave?.();
         },
@@ -63,27 +68,21 @@ export function ShareUrl({ hostUrl, onSave }: { hostUrl?: string; onSave?: () =>
 
   return (
     <>
-      <Toggle checked={Boolean(id)} onChecked={handleCheck} style={{ marginBottom: 30 }}>
-        {formatMessage(labels.enableShareUrl)}
-      </Toggle>
+      <Box marginBottom="6">
+        <Switch defaultSelected={!!id} isSelected={!!id} onChange={handleSwitch}>
+          {formatMessage(labels.enableShareUrl)}
+        </Switch>
+      </Box>
       {id && (
-        <Form error={error}>
-          <FormRow>
-            <p>{formatMessage(messages.shareUrl)}</p>
-            <Flexbox gap={10}>
-              <TextField value={url} readOnly allowCopy />
-              <Button onClick={handleGenerate}>{formatMessage(labels.regenerate)}</Button>
-            </Flexbox>
-          </FormRow>
-          <FormButtons>
-            <LoadingButton
-              variant="primary"
-              disabled={id === shareId}
-              isLoading={isPending}
-              onClick={handleSave}
-            >
+        <Form onSubmit={handleSave} error={error} values={{ id, url }}>
+          <FormField label={formatMessage(messages.shareUrl)} name="url">
+            <TextField isReadOnly allowCopy />
+          </FormField>
+          <FormButtons justifyContent="space-between">
+            <Button onPress={handleGenerate}>{formatMessage(labels.regenerate)}</Button>
+            <FormSubmitButton variant="primary" isDisabled={id === shareId} isLoading={isPending}>
               {formatMessage(labels.save)}
-            </LoadingButton>
+            </FormSubmitButton>
           </FormButtons>
         </Form>
       )}

src/app/(main)/settings/websites/[websiteId]/TrackingCode.tsx

@@ -1,4 +1,4 @@
-import { TextArea } from 'react-basics';
+import { TextArea } from '@umami/react-zen';
 import { useMessages, useConfig } from '@/components/hooks';
 
 const SCRIPT_NAME = 'script.js';

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -1,9 +1,10 @@
-import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
+import { Button, Modal, DialogTrigger, Dialog, Column } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import { useLogin, useMessages, useModified, useTeams, useTeamUrl } from '@/components/hooks';
 import { WebsiteDeleteForm } from './WebsiteDeleteForm';
 import { WebsiteResetForm } from './WebsiteResetForm';
 import { WebsiteTransferForm } from './WebsiteTransferForm';
+import { ActionForm } from '@/components/layout/ActionForm';
 import { ROLES } from '@/lib/constants';
 
 export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
@@ -39,50 +40,58 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   };
 
   return (
-    <>
+    <Column gap="6">
       <ActionForm
         label={formatMessage(labels.transferWebsite)}
         description={formatMessage(messages.transferWebsite)}
       >
-        <ModalTrigger disabled={!canTransferWebsite}>
-          <Button variant="secondary" disabled={!canTransferWebsite}>
+        <DialogTrigger>
+          <Button variant="secondary" isDisabled={!canTransferWebsite}>
             {formatMessage(labels.transfer)}
           </Button>
-          <Modal title={formatMessage(labels.transferWebsite)}>
-            {(close: () => void) => (
-              <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
-            )}
+          <Modal>
+            <Dialog title={formatMessage(labels.transferWebsite)}>
+              {({ close }) => (
+                <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
+              )}
+            </Dialog>
           </Modal>
-        </ModalTrigger>
+        </DialogTrigger>
       </ActionForm>
+
       <ActionForm
         label={formatMessage(labels.resetWebsite)}
         description={formatMessage(messages.resetWebsiteWarning)}
       >
-        <ModalTrigger>
+        <DialogTrigger>
           <Button variant="secondary">{formatMessage(labels.reset)}</Button>
-          <Modal title={formatMessage(labels.resetWebsite)}>
-            {(close: () => void) => (
-              <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
-            )}
+          <Modal>
+            <Dialog title={formatMessage(labels.resetWebsite)}>
+              {({ close }) => (
+                <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
+              )}
+            </Dialog>
           </Modal>
-        </ModalTrigger>
+        </DialogTrigger>
       </ActionForm>
+
       <ActionForm
         label={formatMessage(labels.deleteWebsite)}
         description={formatMessage(messages.deleteWebsiteWarning)}
       >
-        <ModalTrigger>
+        <DialogTrigger>
           <Button data-test="button-delete" variant="danger">
             {formatMessage(labels.delete)}
           </Button>
-          <Modal title={formatMessage(labels.deleteWebsite)}>
-            {(close: () => void) => (
-              <WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
-            )}
+          <Modal>
+            <Dialog title={formatMessage(labels.deleteWebsite)}>
+              {({ close }) => (
+                <WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
+              )}
+            </Dialog>
           </Modal>
-        </ModalTrigger>
+        </DialogTrigger>
       </ActionForm>
-    </>
+    </Column>
   );
 }

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -26,7 +26,7 @@ export function WebsiteSettings({
         <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>
-              <Icons.ArrowRight />
+              <Icons.Arrow />
             </Icon>
             <Text>{formatMessage(labels.view)}</Text>
           </Button>

src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx

@@ -3,13 +3,13 @@ import {
   Button,
   Form,
   FormButtons,
-  FormRow,
-  LoadingButton,
+  FormField,
+  FormSubmitButton,
   Loading,
-  Dropdown,
-  Item,
-  Flexbox,
-} from 'react-basics';
+  Select,
+  ListItem,
+  Text,
+} from '@umami/react-zen';
 import { useApi, useLogin, useMessages, useTeams } from '@/components/hooks';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { ROLES } from '@/lib/constants';
@@ -28,12 +28,19 @@ export function WebsiteTransferForm({
   const [teamId, setTeamId] = useState<string>(null);
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, isPending, error } = useMutation({
+  const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
   });
   const { result, query } = useTeams(user.id);
   const isTeamWebsite = !!website?.teamId;
 
+  const items = result.data.filter(({ teamUser }) =>
+    teamUser.find(
+      ({ role, userId }) =>
+        [ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
+    ),
+  );
+
   const handleSubmit = async () => {
     mutate(
       {
@@ -53,45 +60,35 @@ export function WebsiteTransferForm({
     setTeamId(key as string);
   };
 
-  const renderValue = (teamId: string) => result?.data?.find(({ id }) => id === teamId)?.name;
-
   if (query.isLoading) {
     return <Loading icon="dots" position="center" />;
   }
 
   return (
-    <Form error={error}>
-      <FormRow>
-        <Flexbox direction="column" gap={20}>
-          {formatMessage(
-            isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
-          )}
-          {!isTeamWebsite && (
-            <Dropdown onChange={handleChange} value={teamId} renderValue={renderValue}>
-              {result.data
-                .filter(({ teamUser }) =>
-                  teamUser.find(
-                    ({ role, userId }) =>
-                      [ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
-                  ),
-                )
-                .map(({ id, name }) => {
-                  return <Item key={id}>{name}</Item>;
-                })}
-            </Dropdown>
-          )}
-        </Flexbox>
-      </FormRow>
-      <FormButtons flex>
-        <LoadingButton
-          variant="primary"
-          isLoading={isPending}
-          disabled={!isTeamWebsite && !teamId}
-          onClick={handleSubmit}
-        >
+    <Form onSubmit={handleSubmit} error={error} values={{ teamId }}>
+      <Text>
+        {formatMessage(
+          isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
+        )}
+      </Text>
+      <FormField name="teamId">
+        {!isTeamWebsite && (
+          <Select onSelectionChange={handleChange} value={teamId}>
+            {items.map(({ id, name }) => {
+              return (
+                <ListItem key={id} id={id}>
+                  {name}
+                </ListItem>
+              );
+            })}
+          </Select>
+        )}
+      </FormField>
+      <FormButtons>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton variant="primary" isDisabled={!isTeamWebsite && !teamId}>
           {formatMessage(labels.transfer)}
-        </LoadingButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );