Refactor: components/shared

### TL;DR

Removed the dependency on `react-hot-toast` in favor of a custom implementation for toast notifications.

### What changed?

1. Removed `react-hot-toast` from `package.json` and `yarn.lock`. 
2. Updated `EnvironmentVariables` and `Config` to use the custom toast notification system.

### Why make this change?

To reduce bundle size and have more control over the toast notification system.

### How to test?

1. Navigate to the Environment Variables settings for a project. Try adding and removing environment variables to see the new toast notifications in action.
2. Navigate to the Domains settings for a project and try adding a new domain to view the custom toast notifications.

---

packages/frontend/package.json

@@ -62,7 +62,6 @@
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
-    "react-hot-toast": "^2.4.1",
     "react-oauth-popup": "^1.0.5",
     "react-router-dom": "^6.20.1",
     "react-timer-hook": "^3.0.7",

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
-  Chip,
   Typography,
   Menu,
   MenuHandler,
@@ -15,6 +14,15 @@ import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 import { useToast } from 'components/shared/Toast';
+import { Tag } from 'components/shared/Tag';
+import {
+  CheckIcon,
+  CrossIcon,
+  GearIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
+import { Button } from 'components/shared/Button';
 
 enum RefreshStatus {
   IDLE,
@@ -79,22 +87,29 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <Typography variant="h6">
-            <i>^</i> {domain.name}
-          </Typography>
-          <Chip
-            className="w-fit capitalize"
-            value={domain.status}
-            color={domain.status === DomainStatus.Live ? 'green' : 'orange'}
-            variant="ghost"
-            icon={<i>^</i>}
-          />
+          <Heading as="h6" className="flex-col">
+            {domain.name}{' '}
+            <Tag
+              type={
+                domain.status === DomainStatus.Live ? 'positive' : 'negative'
+              }
+              leftIcon={
+                domain.status === DomainStatus.Live ? (
+                  <CheckIcon />
+                ) : (
+                  <CrossIcon />
+                )
+              }
+            >
+              {domain.status}
+            </Tag>
+          </Heading>
         </div>
 
         <div className="flex justify-start gap-1">
           <i
             id="refresh"
-            className="cursor-pointer w-8 h-8"
+            className="cursor-pointer"
             onClick={() => {
               SetRefreshStatus(RefreshStatus.CHECKING);
               setTimeout(() => {
@@ -102,11 +117,17 @@ const DomainCard = ({
               }, CHECK_FAIL_TIMEOUT);
             }}
           >
-            {refreshStatus === RefreshStatus.CHECKING ? 'L' : 'R'}
+            {refreshStatus === RefreshStatus.CHECKING ? (
+              <LoadingIcon className="animate-spin" />
+            ) : (
+              'L'
+            )}
           </i>
           <Menu placement="bottom-end">
             <MenuHandler>
-              <button className="border-2 rounded-full w-8 h-8">...</button>
+              <Button iconOnly>
+                <GearIcon />
+              </Button>
             </MenuHandler>
             <MenuList>
               <MenuItem
@@ -143,13 +164,13 @@ const DomainCard = ({
       {domain.status === DomainStatus.Pending && (
         <Card className="bg-slate-100 p-4 text-sm">
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small">
+            <Heading>
               ^ Add these records to your domain and refresh to check
-            </Typography>
+            </Heading>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography variant="small" className="text-blue-500">
+            <Heading className="text-blue-500">
               ^ Checking records for {domain.name}
-            </Typography>
+            </Heading>
           ) : (
             <div className="flex gap-2 text-red-500 mb-2">
               <div className="grow">

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
 
 import {
@@ -9,10 +8,11 @@ import {
   Option,
 } from '@snowballtools/material-tailwind-react-fork';
 
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { Modal } from 'components/shared/Modal';
 import { Button } from 'components/shared/Button';
 import { Input } from 'components/shared/Input';
+import { useToast } from 'components/shared/Toast';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
@@ -40,6 +40,7 @@ const EditDomainDialog = ({
   onUpdate,
 }: EditDomainDialogProp) => {
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const getRedirectUrl = (domain: Domain) => {
     const redirectDomain = domain.redirectTo;
@@ -99,10 +100,20 @@ const EditDomainDialog = ({
 
       if (updateDomain) {
         await onUpdate();
-        toast.success(`Domain ${domain.name} has been updated`);
+        toast({
+          id: 'domain_id_updated',
+          title: `Domain ${domain.name} has been updated`,
+          variant: 'success',
+          onDismiss: dismiss,
+        });
       } else {
         reset();
-        toast.error(`Error updating domain ${domain.name}`);
+        toast({
+          id: 'domain_id_error_update',
+          title: `Error updating domain ${domain.name}`,
+          variant: 'error',
+          onDismiss: dismiss,
+        });
       }
 
       handleOpen();

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

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
+import { Input } from 'components/shared/Input';
+import { CopyIcon, TrashIcon } from 'components/shared/CustomIcon';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -14,11 +16,12 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   return (
-    <div className="flex justify-between w-full mb-3">
-      {webhookUrl}
+    <div className="flex justify-between w-full mb-3 gap-3">
+      <Input value={webhookUrl} disabled />
       <div className="flex gap-3">
         <Button
-          size="sm"
+          iconOnly
+          size="md"
           onClick={() => {
             navigator.clipboard.writeText(webhookUrl);
             toast({
@@ -29,16 +32,17 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             });
           }}
         >
-          Copy
+          <CopyIcon />
         </Button>
         <Button
-          size="sm"
+          iconOnly
+          size="md"
           variant="danger"
           onClick={() => {
             setDeleteDialogOpen(true);
           }}
         >
-          X
+          <TrashIcon />
         </Button>
       </div>
       <DeleteWebhookDialog

packages/frontend/src/components/shared/index.ts

@@ -0,0 +1,27 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { Calendar } from './Calendar';
+export { Checkbox } from './Checkbox';
+export { DatePicker } from './DatePicker';
+export { DotBorder } from './DotBorder';
+export { Heading } from './Heading';
+export { IconWithFrame } from './IconWithFrame';
+export { InlineNotification } from './InlineNotification';
+export { Input } from './Input';
+export { Modal } from './Modal';
+export { OverflownText } from './OverflownText';
+export { Radio } from './Radio';
+export { SegmentedControls } from './SegmentedControls';
+export { Select } from './Select';
+export { Sidebar } from './Sidebar';
+export { Step } from './Steps';
+export { Switch } from './Switch';
+export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { Tag } from './Tag';
+export { useToast } from './Toast';
+export { Tooltip } from './Tooltip';
+export { UserSelect } from './UserSelect';
+export { VerifyCodeInput } from './VerifyCodeInput';
+export { WavyBorder } from './WavyBorder';

packages/frontend/src/pages/org-slug/index.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { Project } from 'gql-client';
-import { Button } from 'components/shared/Button';
 
-import { PlusIcon } from 'components/shared/CustomIcon';
 import { ProjectCard } from 'components/projects/ProjectCard';
-import { Heading } from 'components/shared/Heading';
-import { Badge } from 'components/shared/Badge';
+import { Heading, Badge, Button } from 'components/shared';
+import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
 
 const Projects = () => {
   const client = useGQLClient();

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useState } from 'react';
-import { Domain, DomainStatus } from 'gql-client';
 import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import { useOctokit } from '../../../../context/OctokitContext';
+import { useOctokit } from 'context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
-import { useGQLClient } from '../../../../context/GQLClientContext';
-import { Button } from 'components/shared/Button';
-import { Heading } from 'components/shared/Heading';
-import { Avatar } from 'components/shared/Avatar';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Button, Heading, Avatar, Tag } from 'components/shared';
 import { getInitials } from 'utils/geInitials';
 import {
   BranchStrokeIcon,
@@ -18,12 +15,12 @@ import {
   GithubStrokeIcon,
   GlobeIcon,
   LinkIcon,
+  CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
-import { Tag } from 'components/shared/Tag';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
-import { CalendarDaysIcon } from 'components/shared/CustomIcon/CalendarDaysIcon';
 import { relativeTimeMs } from 'utils/time';
+import { Domain, DomainStatus } from 'gql-client';
 
 const COMMITS_PER_PAGE = 4;
 

packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
-import { Environment, EnvironmentVariable } from 'gql-client';
 
 import { Collapse } from '@snowballtools/material-tailwind-react-fork';
 
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
-import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { EnvironmentVariablesFormValues } from '../../../../../types';
 import HorizontalLine from 'components/HorizontalLine';
 import { Heading } from 'components/shared/Heading';
@@ -17,10 +15,13 @@ import { Checkbox } from 'components/shared/Checkbox';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
+import { useToast } from 'components/shared/Toast';
+import { Environment, EnvironmentVariable } from 'gql-client';
 
 export const EnvironmentVariablesTabPanel = () => {
   const { id } = useParams();
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const [environmentVariables, setEnvironmentVariables] = useState<
     EnvironmentVariable[]
@@ -118,13 +119,25 @@ export const EnvironmentVariablesTabPanel = () => {
 
         fetchEnvironmentVariables(id);
 
-        toast.success(
-          createFormData.variables.length > 1
-            ? `${createFormData.variables.length} variables added`
-            : `Variable added`,
-        );
+        toast({
+          id:
+            createFormData.variables.length > 1
+              ? 'env_variable_added'
+              : 'env_variables_added',
+          title:
+            createFormData.variables.length > 1
+              ? `${createFormData.variables.length} variables added`
+              : `Variable added`,
+          variant: 'success',
+          onDismiss: dismiss,
+        });
       } else {
-        toast.error('Environment variables not added');
+        toast({
+          id: 'env_variables_not_added',
+          title: 'Environment variables not added',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
       }
     },
     [id, client],

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

@@ -1,12 +1,12 @@
-import toast from 'react-hot-toast';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
-import { useGQLClient } from '../../../../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { Table } from 'components/shared/Table';
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
+import { useToast } from 'components/shared/Toast';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -14,15 +14,26 @@ const Config = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const primaryDomainName = searchParams.get('name');
+  const { toast, dismiss } = useToast();
 
   const handleSubmitDomain = async () => {
     if (primaryDomainName === null) {
-      toast.error('Cannot resolve domain name');
+      toast({
+        id: 'unresolvable_domain_name',
+        title: 'Cannot resolve domain name',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
       return;
     }
 
     if (id === undefined) {
-      toast.error('Cannot find project');
+      toast({
+        id: 'domain_cannot_find_project',
+        title: 'Cannot find project',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
       return;
     }
 
@@ -31,10 +42,20 @@ const Config = () => {
     });
 
     if (isAdded) {
-      toast.success('Domain added successfully');
+      toast({
+        id: 'domain_added_successfully',
+        title: 'Domain added successfully',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
       navigate(`/${orgSlug}/projects/${id}/settings/domains`);
     } else {
-      toast.error('Error adding domain');
+      toast({
+        id: 'generic_error_adding_domain',
+        title: 'Error adding domaint',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 

packages/frontend/src/stories/MockStoriesData.ts

@@ -11,6 +11,7 @@ import {
   DomainStatus,
   Domain,
   Environment,
+  Permission,
 } from 'gql-client';
 
 export const user: User = {
@@ -44,7 +45,7 @@ export const organization: Organization = {
 export const member: ProjectMember = {
   id: '1',
   member: user,
-  permissions: [],
+  permissions: [Permission.Edit],
   isPending: false,
   createdAt: '2021-08-01T00:00:00.000Z',
   updatedAt: '2021-08-01T00:00:00.000Z',
@@ -70,7 +71,7 @@ export const environmentVariable1: EnvironmentVariable = {
 
 export const domain0: Domain = {
   id: '1',
-  name: 'Domain',
+  name: 'domain.com',
   createdAt: '2021-08-01T00:00:00.000Z',
   updatedAt: '2021-08-01T00:00:00.000Z',
   branch: 'Branch',
@@ -78,6 +79,16 @@ export const domain0: Domain = {
   redirectTo: null,
 };
 
+export const domain1: Domain = {
+  id: '2',
+  name: 'www.domain.com',
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+  branch: 'Branch',
+  status: DomainStatus.Live,
+  redirectTo: domain0,
+};
+
 export const deployment0: Deployment = {
   id: '1',
   url: 'https://deployment.com',

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

@@ -0,0 +1,48 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import DomainCard from 'components/projects/project/settings/DomainCard';
+import { domain0, domain1, project } from '../../MockStoriesData';
+
+const meta: Meta<typeof DomainCard> = {
+  title: 'Project/Settings/DomainCard',
+  component: DomainCard,
+  tags: ['autodocs'],
+  argTypes: {
+    domains: {
+      control: {
+        type: 'object',
+      },
+    },
+    domain: {
+      control: {
+        type: 'object',
+      },
+    },
+    branches: {
+      control: {
+        type: 'object',
+      },
+    },
+    project: {
+      control: {
+        type: 'object',
+      },
+    },
+    onUpdate: {
+      action: 'update',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DomainCard>;
+
+export const Default: Story = {
+  args: {
+    domains: [domain0, domain1],
+    domain: domain0,
+    branches: ['main'],
+    project: project,
+  },
+};

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

@@ -0,0 +1,43 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import EditDomainDialog from 'components/projects/project/settings/EditDomainDialog';
+
+const meta: Meta<typeof EditDomainDialog> = {
+  title: 'Components/EditDomainDialog',
+  component: EditDomainDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    domains: {
+      control: {
+        type: 'object',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    handleOpen: {
+      action: 'open',
+    },
+    domain: {
+      control: {
+        type: 'object',
+      },
+    },
+    branches: {
+      control: {
+        type: 'object',
+      },
+    },
+    onUpdate: {
+      action: 'update',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EditDomainDialog>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import WebhookCard from 'components/projects/project/settings/WebhookCard';
+
+const meta: Meta<typeof WebhookCard> = {
+  title: 'Project/Settings/WebhookCard',
+  component: WebhookCard,
+  tags: ['autodocs'],
+  argTypes: {
+    webhookUrl: {
+      control: {
+        type: 'text',
+      },
+    },
+    onDelete: {
+      action: 'delete',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WebhookCard>;
+
+export const Default: Story = {
+  args: {
+    webhookUrl: 'https://api.retool.com',
+  },
+};

yarn.lock

@@ -11264,11 +11264,6 @@ globby@11.1.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-goober@^2.1.10:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
-  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
-
 google-protobuf@^3.19.4:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
@@ -15328,13 +15323,6 @@ react-hook-form@^7.49.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"
   integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==
 
-react-hot-toast@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
-  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
-  dependencies:
-    goober "^2.1.10"
-
 react-inspector@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"