From 17cf878168d478c69703435c1be1aa1fc6f354f7 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Thu, 16 May 2024 20:33:33 -0400 Subject: [PATCH] [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 = {};