From dc91fa0d7fc0b15fe7abed373af1ff18a8ba6732 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Mon, 13 May 2024 15:31:34 -0400 Subject: [PATCH] storybook config domains and react dom context --- packages/frontend/.storybook/main.ts | 1 + packages/frontend/package.json | 1 + .../project/settings/RepoConnectedSection.tsx | 16 +-- .../projects/project/settings/SetupDomain.tsx | 122 +++++++++--------- .../projects/project/settings/WebhookCard.tsx | 13 +- .../id/settings/domains/add/Config.tsx | 25 ++-- .../Project/Settings/Config.stories.tsx | 30 +++++ .../Project/Settings/SetupDomains.stories.tsx | 30 +++++ yarn.lock | 18 +++ 9 files changed, 170 insertions(+), 86 deletions(-) create mode 100644 packages/frontend/src/stories/Project/Settings/Config.stories.tsx create mode 100644 packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts index 1035220a..4feb3df9 100644 --- a/packages/frontend/.storybook/main.ts +++ b/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'), diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 3f139699..3833e1ae 100644 --- a/packages/frontend/package.json +++ b/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" diff --git a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx b/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx index bd9dbf77..a26c3789 100644 --- a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx +++ b/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 = ({ Connected just now
-
{ const { @@ -17,32 +20,38 @@ const SetupDomain = () => { formState: { isValid }, watch, setValue, - } = useForm({ + } = useForm({ defaultValues: { domainName: '', isWWW: 'false', }, + mode: 'onChange', }); - const [domainStr, setDomainStr] = useState(''); + const [domainStr, setDomainStr] = useState(''); 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 (
{ className="flex flex-col gap-6 w-full" >
- Setup domain name - + + Setup domain name + +

Add your domain and setup redirects - +

-
- Domain name - -
+ {isValid && ( -
- Primary domain -
- - -
- - ^ 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 - +
+ + Primary domain + + setValue('isWWW', value)} + value={watch('isWWW')} + /> +
)} - +
+ +
); }; diff --git a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx index 352856f6..145087ac 100644 --- a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx +++ b/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 (
@@ -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
); diff --git a/packages/frontend/src/stories/Project/Settings/Config.stories.tsx b/packages/frontend/src/stories/Project/Settings/Config.stories.tsx new file mode 100644 index 00000000..de831625 --- /dev/null +++ b/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 = { + 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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx b/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx new file mode 100644 index 00000000..560dbe74 --- /dev/null +++ b/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 = { + 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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/yarn.lock b/yarn.lock index ee490751..b79a3f6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8530,6 +8530,11 @@ compare-func@^2.0.0: array-ify "^1.0.0" dot-prop "^5.1.0" +compare-versions@^6.0.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a" + integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg== + compressible@~2.0.16: version "2.0.18" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba" @@ -14701,6 +14706,11 @@ react-hot-toast@^2.4.1: 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" + integrity sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ== + react-is@18.1.0: version "18.1.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" @@ -15764,6 +15774,14 @@ store2@^2.14.2: resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.3.tgz#24077d7ba110711864e4f691d2af941ec533deb5" integrity sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg== +storybook-addon-remix-react-router@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/storybook-addon-remix-react-router/-/storybook-addon-remix-react-router-3.0.0.tgz#e31e3b1ba51481de7c3daaac9f43f72e9c4f00bc" + integrity sha512-0D7VDVf6uX6vgegpCb3v1/TIADxRWomycyj0ZNuVjrCO6w6FwfZ9CHlCK7k9v6CB2uqKjPiaBwmT7odHyy1qYA== + dependencies: + compare-versions "^6.0.0" + react-inspector "6.0.2" + storybook@^8.0.10: version "8.0.10" resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.0.10.tgz#397e7a95641421610ba4741bc63adbb380eed01f"