storybook config domains and react dom context

packages/frontend/.storybook/main.ts

@@ -17,6 +17,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@chromatic-com/storybook'),
     getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('storybook-addon-remix-react-router'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

packages/frontend/package.json

@@ -97,6 +97,7 @@
     "postcss": "^8.4.38",
     "prettier": "^3.1.0",
     "storybook": "^8.0.10",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "vite": "^5.2.0"

packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx

@@ -1,12 +1,10 @@
 import { useState } from 'react';
 
-import {
-  Button,
-  Typography,
-} from '@snowballtools/material-tailwind-react-fork';
+import { Typography } from '@snowballtools/material-tailwind-react-fork';
 
-import { GitRepositoryDetails } from '../../../../types/types';
+import { GitRepositoryDetails } from '../../../../types';
 import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
+import { Button } from 'components/shared/Button';
 
 const RepoConnectedSection = ({
   linkedRepo,
@@ -24,12 +22,8 @@ const RepoConnectedSection = ({
         <Typography variant="small">Connected just now</Typography>
       </div>
       <div>
-        <Button
-          onClick={() => setDisconnectRepoDialogOpen(true)}
-          variant="outlined"
-          size="sm"
-        >
-          ^ Disconnect
+        <Button onClick={() => setDisconnectRepoDialogOpen(true)} size="sm">
+          Disconnect
         </Button>
       </div>
       <DisconnectRepositoryDialog

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -2,13 +2,16 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 
-import {
-  Radio,
-  Typography,
-  Button,
-  Input,
-  Alert,
-} from '@snowballtools/material-tailwind-react-fork';
+import { Heading } from 'components/shared/Heading';
+import { InlineNotification } from 'components/shared/InlineNotification';
+import { Input } from 'components/shared/Input';
+import { Button } from 'components/shared/Button';
+import { Radio } from 'components/shared/Radio';
+
+interface SetupDomainFormValues {
+  domainName: string;
+  isWWW: string;
+}
 
 const SetupDomain = () => {
   const {
@@ -17,32 +20,38 @@ const SetupDomain = () => {
     formState: { isValid },
     watch,
     setValue,
-  } = useForm({
+  } = useForm<SetupDomainFormValues>({
     defaultValues: {
       domainName: '',
       isWWW: 'false',
     },
+    mode: 'onChange',
   });
 
-  const [domainStr, setDomainStr] = useState('');
+  const [domainStr, setDomainStr] = useState<string>('');
   const navigate = useNavigate();
+  const isWWWRadioOptions = [
+    { label: domainStr, value: 'false' },
+    { label: `www.${domainStr}`, value: 'true' },
+  ];
 
   useEffect(() => {
     const subscription = watch((value, { name }) => {
       if (name === 'domainName' && value.domainName) {
         const domainArr = value.domainName.split('www.');
-        setDomainStr(domainArr.length > 1 ? domainArr[1] : domainArr[0]);
+        const cleanedDomain =
+          domainArr.length > 1 ? domainArr[1] : domainArr[0];
+        setDomainStr(cleanedDomain);
 
-        if (value.domainName.startsWith('www.')) {
-          setValue('isWWW', 'true');
-        } else {
-          setValue('isWWW', 'false');
-        }
+        setValue(
+          'isWWW',
+          value.domainName.startsWith('www.') ? 'true' : 'false',
+        );
       }
     });
 
     return () => subscription.unsubscribe();
-  }, [watch]);
+  }, [watch, setValue]);
 
   return (
     <form
@@ -54,60 +63,49 @@ const SetupDomain = () => {
       className="flex flex-col gap-6 w-full"
     >
       <div>
-        <Typography variant="h5">Setup domain name</Typography>
-        <Typography variant="small">
+        <Heading className="text-sky-950 text-lg font-medium leading-normal">
+          Setup domain name
+        </Heading>
+        <p className="text-slate-500 text-sm font-normal leading-tight">
           Add your domain and setup redirects
-        </Typography>
+        </p>
       </div>
 
-      <div className="w-auto">
-        <Typography variant="small">Domain name</Typography>
-        <Input
-          type="text"
-          variant="outlined"
-          size="lg"
-          className="w-full"
-          {...register('domainName', {
-            required: true,
-          })}
-        />
-      </div>
+      <Input
+        size="md"
+        placeholder="example.com"
+        {...register('domainName', {
+          required: true,
+        })}
+        label="Domain name"
+      />
 
       {isValid && (
-        <div>
-          <Typography>Primary domain</Typography>
-          <div className="flex flex-col gap-3">
-            <Radio
-              label={domainStr}
-              {...register('isWWW')}
-              value="false"
-              type="radio"
-            />
-            <Radio
-              label={`www.${domainStr}`}
-              {...register('isWWW')}
-              value="true"
-              type="radio"
-            />
-          </div>
-          <Alert color="blue">
-            <i>^</i> For simplicity, we’ll redirect the{' '}
-            {watch('isWWW') === 'true'
-              ? `non-www variant to www.${domainStr}`
-              : `www variant to ${domainStr}`}
-            . Redirect preferences can be changed later
-          </Alert>
+        <div className="self-stretch flex flex-col gap-4">
+          <Heading className="text-sky-950 text-lg font-medium leading-normal">
+            Primary domain
+          </Heading>
+          <Radio
+            options={isWWWRadioOptions}
+            onValueChange={(value) => setValue('isWWW', value)}
+            value={watch('isWWW')}
+          />
+          <InlineNotification
+            variant="info"
+            title={`For simplicity, we'll redirect the ${
+              watch('isWWW') === 'true'
+                ? `non-www variant to www.${domainStr}`
+                : `www variant to ${domainStr}`
+            }. Redirect preferences can be changed later`}
+          />
         </div>
       )}
 
-      <Button
-        disabled={!isValid}
-        className="w-fit"
-        color={isValid ? 'blue' : 'gray'}
-        type="submit"
-      >
-        <i>^</i> Next
-      </Button>
+      <div className="self-stretch">
+        <Button disabled={!isValid} type="submit">
+          Next
+        </Button>
+      </div>
     </form>
   );
 };

packages/frontend/src/components/projects/project/settings/WebhookCard.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import toast from 'react-hot-toast';
 
 import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
 import { Button } from 'components/shared/Button';
+import { useToast } from 'components/shared/Toast';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -10,6 +10,8 @@ interface WebhookCardProps {
 }
 
 const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
+  const { toast, dismiss } = useToast();
+
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   return (
     <div className="flex justify-between w-full mb-3">
@@ -19,10 +21,15 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
           size="sm"
           onClick={() => {
             navigator.clipboard.writeText(webhookUrl);
-            toast.success('Copied to clipboard');
+            toast({
+              id: 'webhook_copied',
+              title: 'Webhook copied to clipboard',
+              variant: 'success',
+              onDismiss: dismiss,
+            });
           }}
         >
-          C
+          Copy
         </Button>
         <Button
           size="sm"

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -1,13 +1,12 @@
 import toast from 'react-hot-toast';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import {
-  Alert,
-  Button,
-} from '@snowballtools/material-tailwind-react-fork';
 
 import { useGQLClient } from '../../../../../../../context/GQLClientContext';
 import { Heading } from 'components/shared/Heading';
 import { Table } from 'components/shared/Table';
+import { Button } from 'components/shared/Button';
+import { InlineNotification } from 'components/shared/InlineNotification';
+import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -78,12 +77,18 @@ const Config = () => {
         </Table.Body>
       </Table>
 
-      <Alert color="blue">
-        <i>^</i>It can take up to 48 hours for these updates to reflect
-        globally.
-      </Alert>
-      <Button className="w-fit" color="blue" onClick={handleSubmitDomain}>
-        Finish <i>{'>'}</i>
+      <InlineNotification
+        variant="info"
+        title={`It can take up to 48 hours for these updates to reflect
+        globally.`}
+      />
+      <Button
+        className="w-fit"
+        onClick={handleSubmitDomain}
+        variant="primary"
+        rightIcon={<ArrowRightCircleIcon />}
+      >
+        Finish
       </Button>
     </div>
   );

packages/frontend/src/stories/Project/Settings/Config.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-remix-react-router';
+
+import Config from '../../../pages/org-slug/projects/id/settings/domains/add/Config';
+
+const meta: Meta<typeof Config> = {
+  title: 'Project/Settings/Config',
+  component: Config,
+  tags: ['autodocs'],
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        pathParams: { userId: 'me' },
+      },
+      routing: {
+        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add/config',
+      },
+    }),
+  },
+} as Meta<typeof Config>;
+
+export default meta;
+
+type Story = StoryObj<typeof Config>;
+
+export const Default: Story = {};

packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import SetupDomain from 'components/projects/project/settings/SetupDomain';
+import {
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-remix-react-router';
+
+const meta: Meta<typeof SetupDomain> = {
+  title: 'Project/Settings/SetupDomain',
+  component: SetupDomain,
+  tags: ['autodocs'],
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        pathParams: { userId: 'me' },
+      },
+      routing: {
+        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add',
+      },
+    }),
+  },
+} as Meta<typeof SetupDomain>;
+
+export default meta;
+
+type Story = StoryObj<typeof SetupDomain>;
+
+export const Default: Story = {};