diff --git a/front/.storybook/main.js b/front/.storybook/main.js index f248fe2bf..7b43a5b0b 100644 --- a/front/.storybook/main.js +++ b/front/.storybook/main.js @@ -53,7 +53,6 @@ module.exports = { "@storybook/addon-interactions", "@storybook/addon-coverage", "@storybook/addon-styling", - "@storybook/addon-knobs", "storybook-addon-pseudo-states", "storybook-addon-cookie", ], diff --git a/front/package.json b/front/package.json index 33044dead..2eff9bb63 100644 --- a/front/package.json +++ b/front/package.json @@ -108,7 +108,6 @@ "@storybook/addon-coverage": "^0.0.8", "@storybook/addon-essentials": "^7.0.22", "@storybook/addon-interactions": "^7.0.22", - "@storybook/addon-knobs": "^7.0.2", "@storybook/addon-links": "^7.0.22", "@storybook/addon-styling": "^1.3.0", "@storybook/jest": "^0.1.0", diff --git a/front/src/modules/activities/comment/__stories__/Comment.stories.tsx b/front/src/modules/activities/comment/__stories__/Comment.stories.tsx index c05f46119..ced54302d 100644 --- a/front/src/modules/activities/comment/__stories__/Comment.stories.tsx +++ b/front/src/modules/activities/comment/__stories__/Comment.stories.tsx @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; +import { CommentThreadActionBar } from '../../right-drawer/components/CommentThreadActionBar'; import { Comment } from '../Comment'; import { mockComment, mockCommentWithLongValues } from './mock-comment'; @@ -9,17 +10,24 @@ import { mockComment, mockCommentWithLongValues } from './mock-comment'; const meta: Meta = { title: 'Modules/Activity/Comment/Comment', component: Comment, + decorators: [ComponentDecorator], + argTypes: { + actionBar: { + type: 'boolean', + mapping: { + true: , + false: undefined, + }, + }, + }, + args: { comment: mockComment }, }; export default meta; type Story = StoryObj; -export const Default: Story = { - render: getRenderWrapperForComponent(), -}; +export const Default: Story = {}; export const WithLongValues: Story = { - render: getRenderWrapperForComponent( - , - ), + args: { comment: mockCommentWithLongValues }, }; diff --git a/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx b/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx index 6ca2e702e..536a8992d 100644 --- a/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx +++ b/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx @@ -1,7 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { DateTime } from 'luxon'; import { CommentThreadActionBar } from '@/activities/right-drawer/components/CommentThreadActionBar'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; +import { avatarUrl } from '~/testing/mock-data/users'; import { CommentHeader } from '../CommentHeader'; @@ -10,60 +12,76 @@ import { mockComment, mockCommentWithLongValues } from './mock-comment'; const meta: Meta = { title: 'Modules/Activity/Comment/CommentHeader', component: CommentHeader, + decorators: [ComponentDecorator], + argTypes: { + actionBar: { + type: 'boolean', + mapping: { + true: , + false: undefined, + }, + }, + }, + args: { comment: mockComment }, }; export default meta; type Story = StoryObj; -export const Default: Story = { - render: getRenderWrapperForComponent(), +export const Default: Story = {}; + +export const FewHoursAgo: Story = { + args: { + comment: { + ...mockComment, + createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '', + }, + }, }; export const FewDaysAgo: Story = { - render: getRenderWrapperForComponent(), + args: { + comment: { + ...mockComment, + createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '', + }, + }, }; export const FewMonthsAgo: Story = { - render: getRenderWrapperForComponent(), + args: { + comment: { + ...mockComment, + createdAt: DateTime.now().minus({ months: 2 }).toISO() ?? '', + }, + }, }; export const FewYearsAgo: Story = { - render: getRenderWrapperForComponent(), + args: { + comment: { + ...mockComment, + createdAt: DateTime.now().minus({ years: 2 }).toISO() ?? '', + }, + }, }; -export const WithoutAvatar: Story = { - render: getRenderWrapperForComponent( - , - ), +export const WithAvatar: Story = { + args: { + comment: { + ...mockComment, + author: { + ...mockComment.author, + avatarUrl, + }, + }, + }, }; export const WithLongUserName: Story = { - render: getRenderWrapperForComponent( - , - ), + args: { comment: mockCommentWithLongValues }, }; export const WithActionBar: Story = { - render: getRenderWrapperForComponent( - } - />, - ), + args: { actionBar: true }, }; diff --git a/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx b/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx index dfb473a7f..2965d70a6 100644 --- a/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx +++ b/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx @@ -2,33 +2,36 @@ import { MemoryRouter } from 'react-router-dom'; import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; +import { ComponentDecorator } from '~/testing/decorators'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedCommentThreads } from '~/testing/mock-data/comment-threads'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { CommentThreadRelationPicker } from '../CommentThreadRelationPicker'; -const meta: Meta = { - title: 'Modules/Comments/CommentThreadRelationPicker', - component: CommentThreadRelationPicker, - parameters: { - msw: graphqlMocks, - }, -}; - const StyledContainer = styled.div` width: 400px; `; +const meta: Meta = { + title: 'Modules/Comments/CommentThreadRelationPicker', + component: CommentThreadRelationPicker, + decorators: [ + (Story) => ( + + + + + + ), + ComponentDecorator, + ], + args: { commentThread: mockedCommentThreads[0] }, + parameters: { + msw: graphqlMocks, + }, +}; + export default meta; type Story = StoryObj; -export const Default: Story = { - render: getRenderWrapperForComponent( - - - - - , - ), -}; +export const Default: Story = {}; diff --git a/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx b/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx index e4ad69f3b..958483209 100644 --- a/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx +++ b/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx @@ -1,18 +1,19 @@ import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; -import { CellCommentChip } from '../CellCommentChip'; import { CommentChip } from '../CommentChip'; -const meta: Meta = { - title: 'Modules/Comments/CellCommentChip', - component: CellCommentChip, +const meta: Meta = { + title: 'Modules/Comments/CommentChip', + component: CommentChip, + decorators: [ComponentDecorator], + args: { count: 1 }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; const TestCellContainer = styled.div` align-items: center; @@ -36,34 +37,38 @@ const StyledFakeCellText = styled.div` white-space: nowrap; `; -export const OneComment: Story = { - render: getRenderWrapperForComponent(), -}; +export const OneComment: Story = {}; export const TenComments: Story = { - render: getRenderWrapperForComponent(), + args: { count: 10 }, }; export const TooManyComments: Story = { - render: getRenderWrapperForComponent(), + args: { count: 1000 }, }; export const InCellDefault: Story = { - render: getRenderWrapperForComponent( - - Fake short text - - , - ), + args: { count: 12 }, + decorators: [ + (Story) => ( + + Fake short text + + + ), + ], }; export const InCellOverlappingBlur: Story = { - render: getRenderWrapperForComponent( - - - Fake long text to demonstrate ellipsis - - - , - ), + ...InCellDefault, + decorators: [ + (Story) => ( + + + Fake long text to demonstrate ellipsis + + + + ), + ], }; diff --git a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx index 71e9c904b..f8aba7f4c 100644 --- a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx +++ b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx @@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom'; import type { Meta, StoryObj } from '@storybook/react'; import { fireEvent, userEvent, within } from '@storybook/testing-library'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; import { sleep } from '~/testing/sleep'; import { CommandMenu } from '../CommandMenu'; @@ -10,25 +10,22 @@ import { CommandMenu } from '../CommandMenu'; const meta: Meta = { title: 'Modules/CommandMenu/CommandMenu', component: CommandMenu, + decorators: [ + (Story) => ( + + + + ), + ComponentDecorator, + ], }; export default meta; type Story = StoryObj; -export const Default: Story = { - render: getRenderWrapperForComponent( - - - , - ), -}; +export const Default: Story = {}; export const CmdK: Story = { - render: getRenderWrapperForComponent( - - - , - ), play: async ({ canvasElement }) => { fireEvent.keyDown(canvasElement, { key: 'k', diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index 85dd689c6..f7bee3768 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -3,32 +3,41 @@ import { Meta, StoryObj } from '@storybook/react'; import { EntityBoard } from '@/pipeline/components/EntityBoard'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; -import { BoardDecorator } from '~/testing/decorators'; +import { ComponentDecorator } from '~/testing/decorators'; import { graphqlMocks } from '~/testing/graphqlMocks'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; + +import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; +import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope'; +import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; +import { CompanyBoardContext } from '../states/CompanyBoardContext'; const meta: Meta = { title: 'Modules/Companies/Board', component: EntityBoard, - decorators: [BoardDecorator], + decorators: [ + (Story) => ( + + + + + + + ), + ComponentDecorator, + ], + parameters: { + msw: graphqlMocks, + }, }; export default meta; type Story = StoryObj; export const OneColumnBoard: Story = { - render: getRenderWrapperForComponent( - - { - return; - }} - /> - , - , + render: (args) => ( + ), - parameters: { - msw: graphqlMocks, - }, }; diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx index b132d800d..3e2afec8a 100644 --- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx @@ -1,31 +1,61 @@ +import { useEffect } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard'; -import { BoardCardDecorator } from '~/testing/decorators'; +import { ComponentDecorator } from '~/testing/decorators'; import { graphqlMocks } from '~/testing/graphqlMocks'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress'; + +import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; +import { BoardCardContext } from '../../pipeline/states/BoardCardContext'; +import { BoardColumnContext } from '../../pipeline/states/BoardColumnContext'; +import { pipelineProgressIdScopedState } from '../../pipeline/states/pipelineProgressIdScopedState'; +import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope'; +import { useRecoilScopedState } from '../../ui/recoil-scope/hooks/useRecoilScopedState'; +import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; +import { CompanyBoardContext } from '../states/CompanyBoardContext'; + +function HookLoadFakeBoardContextState() { + const [, setPipelineProgressId] = useRecoilScopedState( + pipelineProgressIdScopedState, + BoardCardContext, + ); + const pipelineProgress = mockedPipelineProgressData[1]; + useEffect(() => { + setPipelineProgressId(pipelineProgress?.id || ''); + }, [pipelineProgress?.id, setPipelineProgressId]); + return <>; +} const meta: Meta = { title: 'Modules/Companies/CompanyBoardCard', component: CompanyBoardCard, - decorators: [BoardCardDecorator], + decorators: [ + (Story) => ( + + + + + + + + + + + + ), + ComponentDecorator, + ], + parameters: { + msw: graphqlMocks, + }, }; export default meta; type Story = StoryObj; -const FakeSelectableCompanyBoardCard = () => { - return ( - - - - ); -}; - -export const CompanyCompanyBoardCard: Story = { - render: getRenderWrapperForComponent(), - parameters: { - msw: graphqlMocks, - }, -}; +export const CompanyCompanyBoardCard: Story = {}; diff --git a/front/src/modules/companies/__stories__/CompanyChip.stories.tsx b/front/src/modules/companies/__stories__/CompanyChip.stories.tsx index f97a26fd7..41104a568 100644 --- a/front/src/modules/companies/__stories__/CompanyChip.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyChip.stories.tsx @@ -2,13 +2,23 @@ import { BrowserRouter } from 'react-router-dom'; import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; import { CompanyChip } from '../components/CompanyChip'; const meta: Meta = { title: 'Modules/Companies/CompanyChip', component: CompanyChip, + decorators: [ + (Story) => ( + + + + + + ), + ComponentDecorator, + ], }; export default meta; @@ -31,29 +41,21 @@ const TestCellContainer = styled.div` `; export const SmallName: Story = { - render: getRenderWrapperForComponent( - - - - - , - ), + args: { + id: 'airbnb', + name: 'Airbnb', + picture: 'https://api.faviconkit.com/airbnb.com/144', + }, +}; + +export const Clickable: Story = { + args: { ...SmallName.args, clickable: true }, }; export const BigName: Story = { - render: getRenderWrapperForComponent( - - - - - , - ), + args: { + id: 'google', + name: 'Google with a real big name to overflow the cell', + picture: 'https://api.faviconkit.com/google.com/144', + }, }; diff --git a/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx b/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx index d7e7ef3e2..f03f590a1 100644 --- a/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx +++ b/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx @@ -2,18 +2,10 @@ import { BrowserRouter } from 'react-router-dom'; import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; import { PersonChip } from '../PersonChip'; -const meta: Meta = { - title: 'Modules/People/PersonChip', - component: PersonChip, -}; - -export default meta; -type Story = StoryObj; - const TestCellContainer = styled.div` align-items: center; background: ${({ theme }) => theme.background.primary}; @@ -26,22 +18,28 @@ const TestCellContainer = styled.div` text-wrap: nowrap; `; +const meta: Meta = { + title: 'Modules/People/PersonChip', + component: PersonChip, + decorators: [ + (Story) => ( + + + + + + ), + ComponentDecorator, + ], +}; + +export default meta; +type Story = StoryObj; + export const SmallName: Story = { - render: getRenderWrapperForComponent( - - - - - , - ), + args: { id: 'tim_fake_id', name: 'Tim C.' }, }; export const BigName: Story = { - render: getRenderWrapperForComponent( - - - - - , - ), + args: { id: 'steve_fake_id', name: 'Steve LoremIpsumLoremIpsumLoremIpsum' }, }; diff --git a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx index 2c901fb32..b33eaee01 100644 --- a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx +++ b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx @@ -1,19 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; +import { ComponentDecorator } from '~/testing/decorators'; import { ActionBar } from '../ActionBar'; const meta: Meta = { title: 'UI/ActionBar/ActionBar', component: ActionBar, + decorators: [ComponentDecorator], + args: { children: 'Lorem ipsum', selectedIds: [] }, }; export default meta; type Story = StoryObj; -export const Default: Story = { - render: getRenderWrapperForComponent( - } selectedIds={[]} />, - ), -}; +export const Default: Story = {}; diff --git a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx index cf0ba8339..e23e9a39e 100644 --- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx @@ -45,7 +45,7 @@ const StyledColorSample = styled.div<{ colorName: string }>` width: 12px; `; -const COLOR_OPTIONS = [ +export const COLOR_OPTIONS = [ { name: 'Green', id: 'green' }, { name: 'Turquoise', id: 'turquoise' }, { name: 'Sky', id: 'sky' }, diff --git a/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx b/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx new file mode 100644 index 000000000..ca6eab3b9 --- /dev/null +++ b/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ComponentDecorator } from '~/testing/decorators'; + +import { + BoardColumnEditTitleMenu, + COLOR_OPTIONS, +} from '../BoardColumnEditTitleMenu'; + +const meta: Meta = { + title: 'UI/Board/BoardColumnMenu', + component: BoardColumnEditTitleMenu, + decorators: [ComponentDecorator], + argTypes: { + color: { + control: 'select', + options: COLOR_OPTIONS.map(({ id }) => id), + }, + }, + args: { color: 'green', title: 'Column title' }, +}; + +export default meta; +type Story = StoryObj; + +export const AllTags: Story = {}; diff --git a/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.story.tsx b/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.story.tsx deleted file mode 100644 index 14f66a037..000000000 --- a/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.story.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; - -import { BoardColumnEditTitleMenu } from '../BoardColumnEditTitleMenu'; - -const meta: Meta = { - title: 'UI/Board/BoardColumnMenu', - component: BoardColumnEditTitleMenu, -}; - -export default meta; -type Story = StoryObj; - -export const AllTags: Story = { - render: getRenderWrapperForComponent( - {}} - // eslint-disable-next-line @typescript-eslint/no-empty-function - onTitleEdit={() => {}} - // eslint-disable-next-line @typescript-eslint/no-empty-function - onColumnColorEdit={() => {}} - />, - ), -}; diff --git a/front/src/modules/ui/button/components/__stories__/Button.stories.tsx b/front/src/modules/ui/button/components/__stories__/Button.stories.tsx index 8501c2b59..3a81ce020 100644 --- a/front/src/modules/ui/button/components/__stories__/Button.stories.tsx +++ b/front/src/modules/ui/button/components/__stories__/Button.stories.tsx @@ -1,12 +1,9 @@ -import React from 'react'; import styled from '@emotion/styled'; -import { text, withKnobs } from '@storybook/addon-knobs'; import { expect, jest } from '@storybook/jest'; import type { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/testing-library'; import { IconSearch } from '@/ui/icon'; -import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { Button } from '../Button'; import { ButtonGroup } from '../ButtonGroup'; @@ -15,8 +12,8 @@ type ButtonProps = React.ComponentProps; const StyledContainer = styled.div` display: flex; - flex: 1; flex-direction: column; + padding: 20px; width: 800px; > * + * { margin-top: ${({ theme }) => theme.spacing(4)}; @@ -55,15 +52,6 @@ const StyledButtonContainer = styled.div` padding: ${({ theme }) => theme.spacing(2)}; `; -const meta: Meta = { - title: 'UI/Button/Button', - component: Button, - decorators: [withKnobs], -}; - -export default meta; -type Story = StoryObj; - const variants: ButtonProps['variant'][] = [ 'primary', 'secondary', @@ -73,8 +61,6 @@ const variants: ButtonProps['variant'][] = [ 'danger', ]; -const clickJestFn = jest.fn(); - const states = { 'with-icon': { description: 'With icon', @@ -127,81 +113,16 @@ const states = { }, }; -const ButtonLine: React.FC = ({ variant, ...props }) => ( - <> - {Object.entries(states).map(([state, { description, extraProps }]) => ( - - {description} -