From 46ba6d014daed60c6187568d9863a5246804aa2d Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:16:31 -0400 Subject: [PATCH 01/10] fix duplicate styling (#67) --- packages/frontend/src/components/shared/Calendar/Calendar.css | 2 +- packages/frontend/tailwind.config.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.css b/packages/frontend/src/components/shared/Calendar/Calendar.css index 85ce4182..49bf10d3 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.css +++ b/packages/frontend/src/components/shared/Calendar/Calendar.css @@ -30,7 +30,7 @@ abbr[title] { @apply !text-elements-disabled !bg-transparent; } -.react-calendar__month-view__days__day--neighboringMonth { +.react-calendar__month-view__days__day--neighboringMonth:focus-visible { @apply !text-elements-disabled !bg-transparent; } diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index 7ad42dca..f561b2c6 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -14,9 +14,6 @@ export default withMT({ xxs: '400px', xs: '480px', }, - zIndex: { - tooltip: '52', - }, letterSpacing: { tight: '-0.084px', }, @@ -178,6 +175,7 @@ export default withMT({ 4.5: '1.125rem', }, zIndex: { + tooltip: '52', toast: '9999', }, animation: { From 7dce1d66ae8707f215b2ca766de50e9efb72cd80 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:19:31 -0400 Subject: [PATCH 02/10] remove x padding padding from general tab (#68) --- .../src/pages/org-slug/projects/id/settings/General.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx index 25302ae8..92f6d708 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx @@ -166,7 +166,7 @@ const GeneralTabPanel = () => { setSelectedTransferOrganization(org.org); setOpenTransferDialog(!openTransferDialog); })} - className="self-stretch space-y-3 px-2" + className="self-stretch space-y-3" > Transfer project @@ -197,7 +197,7 @@ const GeneralTabPanel = () => { from={project.organization.name} to={selectedUserOrgName} /> -
+
Delete project From 5dc4d28b5094fbe6f78696fa2057808f159518f8 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:22:33 -0400 Subject: [PATCH 03/10] MemberCard remove x padding (#69) --- .../src/components/projects/project/settings/MemberCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx index d31d47f6..bf6e598f 100644 --- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx @@ -80,7 +80,7 @@ const MemberCard = ({ return (
{member.name && ( From a69dd71117b5cce2dadd8bfbe1c5c80f182d3ee9 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:26:31 -0400 Subject: [PATCH 04/10] DeleteProjectDialog update to Modal (#70) --- .../project/settings/DeleteProjectDialog.tsx | 92 +++++++------------ 1 file changed, 35 insertions(+), 57 deletions(-) diff --git a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx index 552216ea..b3285e82 100644 --- a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx +++ b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx @@ -1,20 +1,13 @@ import { useCallback } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useForm } from 'react-hook-form'; -import { Project } from 'gql-client'; -import { - Button, - Dialog, - DialogHeader, - DialogBody, - DialogFooter, - Input, - Typography, -} from '@snowballtools/material-tailwind-react-fork'; - -import { useGQLClient } from '../../../../context/GQLClientContext'; +import { useGQLClient } from 'context/GQLClientContext'; import { useToast } from 'components/shared/Toast'; +import { Modal } from 'components/shared/Modal'; +import { Button } from 'components/shared/Button'; +import { Input } from 'components/shared/Input'; +import { Project } from 'gql-client'; interface DeleteProjectDialogProp { open: boolean; @@ -60,51 +53,36 @@ const DeleteProjectDialog = ({ }, [client, project, handleOpen]); return ( - - -
Delete project?
- - -
- - - Deleting your project is irreversible. Enter your project’s - name  - ({project.name}) -  below to confirm you want to permanently delete it: - - value === project.name, - })} - /> - - ^ Deleting your project is irreversible. - - - - - - -
- + + + Delete project? +
+ + value === project.name, + })} + helperText="Deleting your project is irreversible." + /> + + + + + +
+ + ); }; From c72cbce61502ab3c7d7bc221b3a2f7d66fca3603 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:29:35 -0400 Subject: [PATCH 05/10] AddEnvironmentVariableRow padding (#71) --- .../settings/AddEnvironmentVariableRow.tsx | 15 ++++----------- .../settings/EditEnvironmentVariableRow.tsx | 2 +- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx index b29b4aa4..68c52d64 100644 --- a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx @@ -19,7 +19,7 @@ const AddEnvironmentVariableRow = ({ isDeleteDisabled, }: AddEnvironmentVariableRowProps) => { return ( -
+
-
- -
+
); }; diff --git a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx index 95661806..fe93e7ad 100644 --- a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx @@ -86,7 +86,7 @@ const EditEnvironmentVariableRow = ({ return ( <> -
+
Key From 17cf878168d478c69703435c1be1aa1fc6f354f7 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:33:33 -0400 Subject: [PATCH 06/10] [1/n][Storybook] Settings (#72) --- packages/frontend/package.json | 2 +- .../frontend/src/stories/MockStoriesData.ts | 65 +++++++++++++++++++ ... => AddEnvironmentVariableRow.stories.tsx} | 37 ++++++++++- .../Settings/AddMemberDialog.stories.tsx | 31 +++++++++ .../Settings/DeleteProjectDialog.stories.tsx | 50 ++++++++++++++ .../DisplayEnvironmentVariables.stories.tsx | 29 +++++++++ 6 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 packages/frontend/src/stories/MockStoriesData.ts rename packages/frontend/src/stories/Project/Settings/{General.stories.tsx => AddEnvironmentVariableRow.stories.tsx} (63%) create mode 100644 packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx create mode 100644 packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx create mode 100644 packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 0f741c0c..0ae20f9b 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -102,4 +102,4 @@ "typescript": "^5.3.3", "vite": "^5.2.0" } -} \ No newline at end of file +} diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts new file mode 100644 index 00000000..ce8e90c6 --- /dev/null +++ b/packages/frontend/src/stories/MockStoriesData.ts @@ -0,0 +1,65 @@ +import { + User, + Project, + Organization, + Role, + OrganizationMember, + ProjectMember, +} from 'gql-client'; + +export const user: User = { + id: '1', + email: 'helloworld@helloworld.com', + isVerified: true, + createdAt: '2021-08-01T00:00:00.000Z', + name: 'Hello World', + updatedAt: '2021-08-01T00:00:00.000Z', + gitHubToken: 'GitHub Token', +}; + +const organizationMember: OrganizationMember = { + id: '1', + member: user, + role: Role.Owner, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const organization: Organization = { + id: '1', + name: 'Organization', + slug: 'organization', + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + members: [organizationMember], + projects: [], +}; + +const member: ProjectMember = { + id: '1', + member: user, + permissions: [], + isPending: false, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const project: Project = { + id: '1', + name: 'Project', + owner: user, + deployments: [], + repository: 'Repository', + prodBranch: 'Prod Branch', + description: 'Description', + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + framework: 'NextJS', + environmentVariables: [], + organization: organization, + template: 'Template', + members: [member], + webhooks: ['beepboop'], + icon: 'Icon', + subDomain: 'SubDomain', +}; diff --git a/packages/frontend/src/stories/Project/Settings/General.stories.tsx b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx similarity index 63% rename from packages/frontend/src/stories/Project/Settings/General.stories.tsx rename to packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx index 9851e20b..20fef69d 100644 --- a/packages/frontend/src/stories/Project/Settings/General.stories.tsx +++ b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx @@ -21,10 +21,45 @@ const meta: Meta = { }, }), }, -} as Meta; + argTypes: { + onDelete: { + action: 'delete', + }, + register: { + action: 'register', + }, + index: { + type: 'number', + }, + isDeleteDisabled: { + type: 'boolean', + }, + }, + args: { + isDeleteDisabled: false, + }, +}; export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const DisabledDelete: Story = { + args: { + isDeleteDisabled: true, + }, +}; + +export const First: Story = { + args: { + index: 0, + }, +}; + +export const Second: Story = { + args: { + index: 1, + }, +}; diff --git a/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx new file mode 100644 index 00000000..8c7a55c8 --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import AddMemberDialog from 'components/projects/project/settings/AddMemberDialog'; + +const meta: Meta = { + title: 'Project/Settings/AddMemberDialog', + component: AddMemberDialog, + tags: ['autodocs'], + argTypes: { + open: { + control: { + type: 'boolean', + }, + }, + handleOpen: { + action: 'open', + }, + handleAddMember: { + action: 'addMember', + }, + }, + args: { + open: true, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx new file mode 100644 index 00000000..025a61dd --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx @@ -0,0 +1,50 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { + reactRouterParameters, + withRouter, +} from 'storybook-addon-remix-react-router'; + +import DeleteProjectDialog from 'components/projects/project/settings/DeleteProjectDialog'; +import { project } from '../../MockStoriesData'; + +const meta: Meta = { + title: 'Project/Settings/DeleteProjectDialog', + component: DeleteProjectDialog, + 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', + }, + }), + }, + argTypes: { + open: { + control: { + type: 'boolean', + }, + }, + handleOpen: { + action: 'open', + }, + project: { + control: { + type: 'object', + }, + }, + }, + args: { + open: true, + project: project, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx new file mode 100644 index 00000000..3548a35b --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables'; + +const meta: Meta = { + title: 'Project/Settings/DisplayEnvironmentVariables', + component: DisplayEnvironmentVariables, + argTypes: { + environment: { + control: { + type: 'object', + }, + }, + variables: { + control: { + type: 'object', + }, + }, + onUpdate: { + action: 'update', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; From 41666568f523bba3b4c0427683aae5b7534de501 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:36:31 -0400 Subject: [PATCH 07/10] AddEnvironmentVariableRow button alignment to bottom (#73) --- .../projects/project/settings/AddEnvironmentVariableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx index 68c52d64..016e852b 100644 --- a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx @@ -19,7 +19,7 @@ const AddEnvironmentVariableRow = ({ isDeleteDisabled, }: AddEnvironmentVariableRowProps) => { return ( -
+
Date: Thu, 16 May 2024 20:39:42 -0400 Subject: [PATCH 08/10] EditEnvironmentVariableRow cleanup (#74) --- .../settings/EditEnvironmentVariableRow.tsx | 174 ++++++++++-------- .../shared/CustomIcon/EditBigIcon.tsx | 26 +++ .../shared/CustomIcon/HideEyeOffIcon.tsx | 18 ++ .../shared/CustomIcon/ShowEyeIcon.tsx | 18 ++ .../src/components/shared/CustomIcon/index.ts | 3 + .../Components/Icons/EditBigIcon.stories.tsx | 29 +++ .../Icons/HideEyeOffIcon.stories.tsx | 29 +++ .../Components/Icons/ShowEyeIcon.stories.tsx | 29 +++ .../frontend/src/stories/MockStoriesData.ts | 59 +++++- .../EditEnvironmentVariableRow.stories.tsx | 28 +++ 10 files changed, 328 insertions(+), 85 deletions(-) create mode 100644 packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx diff --git a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx index fe93e7ad..7f7a519e 100644 --- a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx @@ -1,16 +1,20 @@ import { useCallback, useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; -import { EnvironmentVariable } from 'gql-client'; - -import { - IconButton, - Typography, -} from '@snowballtools/material-tailwind-react-fork'; import { useGQLClient } from 'context/GQLClientContext'; import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog'; import { Input } from 'components/shared/Input'; +import { Button } from 'components/shared/Button'; +import { + CheckRoundFilledIcon, + CrossIcon, + EditBigIcon, + HideEyeOffIcon, + ShowEyeIcon, + TrashIcon, +} from 'components/shared/CustomIcon'; +import { EnvironmentVariable } from 'gql-client'; +import { useToast } from 'components/shared/Toast'; const ShowPasswordIcon = ({ handler, @@ -26,19 +30,24 @@ const ShowPasswordIcon = ({ }} className="cursor-pointer" > - {isVisible ? '-' : '+'} + {isVisible ? : } ); }; +export interface EditEnvironmentVariableRowProps { + variable: EnvironmentVariable; + onUpdate: () => Promise; + isFirstVariable?: boolean; +} + const EditEnvironmentVariableRow = ({ variable, onUpdate, -}: { - variable: EnvironmentVariable; - onUpdate: () => Promise; -}) => { + isFirstVariable = false, +}: EditEnvironmentVariableRowProps) => { const client = useGQLClient(); + const { toast, dismiss } = useToast(); const { handleSubmit, register, reset } = useForm({ defaultValues: { @@ -58,9 +67,19 @@ const EditEnvironmentVariableRow = ({ if (isEnvironmentVariableRemoved) { await onUpdate(); setDeleteDialogOpen((preVal) => !preVal); - toast.success('Variable deleted'); + toast({ + id: 'variable_deleted', + title: 'Variable deleted', + variant: 'success', + onDismiss: dismiss, + }); } else { - toast.error('Variable not deleted'); + toast({ + id: 'variable_not_deleted', + title: 'Variable not deleted', + variant: 'error', + onDismiss: dismiss, + }); } }, [variable, onUpdate]); @@ -71,10 +90,21 @@ const EditEnvironmentVariableRow = ({ if (isEnvironmentVariableUpdated) { await onUpdate(); - toast.success('Variable edited'); + toast({ + id: 'variable_updated', + title: 'Variable edited', + variant: 'success', + onDismiss: dismiss, + }); + setEdit((preVal) => !preVal); } else { - toast.error('Variable not edited'); + toast({ + id: 'variable_not_updated', + title: 'Variable not edited', + variant: 'error', + onDismiss: dismiss, + }); } }, [variable, onUpdate], @@ -86,71 +116,55 @@ const EditEnvironmentVariableRow = ({ return ( <> -
-
- Key - -
-
- Value - { - setShowPassword((prevShowPassword) => !prevShowPassword); - }} - isVisible={showPassword} - /> +
+ + { + setShowPassword((prevShowPassword) => !prevShowPassword); + }} + isVisible={showPassword || edit} + /> + } + {...register(`value`)} + /> + +
- {edit ? ( - <> -
- - {'S'} - -
-
- { - reset(); - setEdit((preVal) => !preVal); - }} - > - {'C'} - -
- - ) : ( - <> -
- { - setEdit((preVal) => !preVal); - }} - > - {'E'} - -
-
- setDeleteDialogOpen((preVal) => !preVal)} - > - {'D'} - -
- - )} + }} + > + {edit ? : } +
setDeleteDialogOpen((preVal) => !preVal)} diff --git a/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx new file mode 100644 index 00000000..0e69acef --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx @@ -0,0 +1,26 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const EditBigIcon: React.FC = (props) => { + return ( + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx new file mode 100644 index 00000000..dd95373f --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx @@ -0,0 +1,18 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const HideEyeOffIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx new file mode 100644 index 00000000..17aa1744 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx @@ -0,0 +1,18 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const ShowEyeIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index cfa0f2dc..2a7feddf 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -73,6 +73,9 @@ export * from './SwitchIcon'; export * from './CollaboratorsIcon'; export * from './ChevronUpSmallIcon'; export * from './ChevronDownSmallIcon'; +export * from './EditBigIcon'; +export * from './ShowEyeIcon'; +export * from './HideEyeOffIcon'; // Templates export * from './templates'; diff --git a/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx new file mode 100644 index 00000000..d91df2b9 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { EditBigIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/EditBigIcon', + component: EditBigIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx new file mode 100644 index 00000000..ba8e2817 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { HideEyeOffIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/HideEyeOffIcon', + component: HideEyeOffIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx new file mode 100644 index 00000000..dbe81967 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ShowEyeIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ShowEyeIcon', + component: ShowEyeIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts index ce8e90c6..c3e3ac25 100644 --- a/packages/frontend/src/stories/MockStoriesData.ts +++ b/packages/frontend/src/stories/MockStoriesData.ts @@ -5,6 +5,12 @@ import { Role, OrganizationMember, ProjectMember, + EnvironmentVariable, + Deployment, + DeploymentStatus, + DomainStatus, + Domain, + Environment, } from 'gql-client'; export const user: User = { @@ -17,7 +23,7 @@ export const user: User = { gitHubToken: 'GitHub Token', }; -const organizationMember: OrganizationMember = { +export const organizationMember: OrganizationMember = { id: '1', member: user, role: Role.Owner, @@ -35,7 +41,7 @@ export const organization: Organization = { projects: [], }; -const member: ProjectMember = { +export const member: ProjectMember = { id: '1', member: user, permissions: [], @@ -44,18 +50,61 @@ const member: ProjectMember = { updatedAt: '2021-08-01T00:00:00.000Z', }; +export const environmentVariable0: EnvironmentVariable = { + id: '1', + key: 'API_KEY', + value: '123456', + environment: Environment.Development, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const environmentVariable1: EnvironmentVariable = { + id: '2', + key: 'API_KEY_2', + value: '123456', + environment: Environment.Development, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const domain0: Domain = { + id: '1', + name: 'Domain', + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + branch: 'Branch', + status: DomainStatus.Live, + redirectTo: null, +}; + +export const deployment0: Deployment = { + id: '1', + url: 'https://deployment.com', + status: DeploymentStatus.Ready, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + branch: 'Branch', + environment: Environment.Development, + isCurrent: true, + commitHash: 'Commit Hash', + domain: domain0, + commitMessage: 'Commit Message', + createdBy: user, +}; + export const project: Project = { id: '1', - name: 'Project', + name: 'GithubUsername-ProjectName', owner: user, - deployments: [], + deployments: [deployment0], repository: 'Repository', prodBranch: 'Prod Branch', description: 'Description', createdAt: '2021-08-01T00:00:00.000Z', updatedAt: '2021-08-01T00:00:00.000Z', framework: 'NextJS', - environmentVariables: [], + environmentVariables: [environmentVariable0, environmentVariable1], organization: organization, template: 'Template', members: [member], diff --git a/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx b/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx new file mode 100644 index 00000000..811b0ea4 --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import EditEnvironmentVariableRow from 'components/projects/project/settings/EditEnvironmentVariableRow'; +import { environmentVariable0 } from '../../MockStoriesData'; + +const meta: Meta = { + title: 'Project/Settings/EditEnvironmentVariableRow', + component: EditEnvironmentVariableRow, + argTypes: { + variable: { + control: { + type: 'object', + }, + }, + onUpdate: { + action: 'update', + }, + }, + args: { + variable: environmentVariable0, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; From f01bdf2de775c2b7e7cd9141441590f80db77fcf Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:42:29 -0400 Subject: [PATCH 09/10] [2/n][Storybook] Settings - EnvironmentVariables (#75) --- .../Settings/AddEnvironmentVariableRow.stories.tsx | 4 ++-- .../Settings/DisplayEnvironmentVariables.stories.tsx | 9 +++++++++ packages/frontend/vite.config.ts | 4 ++-- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx index 20fef69d..458bfa70 100644 --- a/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx +++ b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx @@ -29,10 +29,10 @@ const meta: Meta = { action: 'register', }, index: { - type: 'number', + type: 'number', }, isDeleteDisabled: { - type: 'boolean', + type: 'boolean', }, }, args: { diff --git a/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx index 3548a35b..a3ccc0a8 100644 --- a/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx +++ b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx @@ -1,6 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables'; +import { + environmentVariable0, + environmentVariable1, +} from '../../MockStoriesData'; +import { Environment } from 'gql-client'; const meta: Meta = { title: 'Project/Settings/DisplayEnvironmentVariables', @@ -20,6 +25,10 @@ const meta: Meta = { action: 'update', }, }, + args: { + environment: Environment.Development, + variables: [environmentVariable0, environmentVariable1], + }, }; export default meta; diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts index d9bb608b..e40bea3b 100644 --- a/packages/frontend/vite.config.ts +++ b/packages/frontend/vite.config.ts @@ -1,9 +1,9 @@ -import { defineConfig } from 'vite'; +import { defineConfig, PluginOption } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react()] as PluginOption[], resolve: { alias: { utils: '/src/utils', From 2074e08a0c405251ed947e997c0a235b68ab3083 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:45:32 -0400 Subject: [PATCH 10/10] [3/n][Storybook] Settings - Delete Project Dialog (#76) --- .../stories/Project/Settings/DeleteProjectDialog.stories.tsx | 2 +- .../src/stories/Project/Settings/SetupDomains.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx index 025a61dd..e3fe7f7e 100644 --- a/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx +++ b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx @@ -18,7 +18,7 @@ const meta: Meta = { pathParams: { userId: 'me' }, }, routing: { - path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add/config', + path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings', }, }), }, diff --git a/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx b/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx index 560dbe74..7c416099 100644 --- a/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx +++ b/packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx @@ -17,7 +17,7 @@ const meta: Meta = { pathParams: { userId: 'me' }, }, routing: { - path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add', + path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains', }, }), },