admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: use ComponentDecorator (#800)

Browse Source 
Related to #702
This commit is contained in:
Thaïs
2023-07-21 21:02:21 +02:00
committed by GitHub
parent 79fccb0404
commit 56cff63c4b
36 changed files with 777 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/modules/activities/comment/__stories__/Comment.stories.tsx
View File

@ -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<typeof Comment> = {
title: 'Modules/Activity/Comment/Comment',
component: Comment,
decorators: [ComponentDecorator],
argTypes: {
actionBar: {
type: 'boolean',
mapping: {
true: <CommentThreadActionBar commentThreadId="test-id" />,
false: undefined,
},
},
},
args: { comment: mockComment },
};
export default meta;
type Story = StoryObj<typeof Comment>;
export const Default: Story = {
render: getRenderWrapperForComponent(<Comment comment={mockComment} />),
};
export const Default: Story = {};
export const WithLongValues: Story = {
render: getRenderWrapperForComponent(
<Comment comment={mockCommentWithLongValues} />,
),
args: { comment: mockCommentWithLongValues },
};

88
front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx
View File

@ -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<typeof CommentHeader> = {
title: 'Modules/Activity/Comment/CommentHeader',
component: CommentHeader,
decorators: [ComponentDecorator],
argTypes: {
actionBar: {
type: 'boolean',
mapping: {
true: <CommentThreadActionBar commentThreadId="test-id" />,
false: undefined,
},
},
},
args: { comment: mockComment },
};
export default meta;
type Story = StoryObj<typeof CommentHeader>;
export const Default: Story = {
render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
export const Default: Story = {};
export const FewHoursAgo: Story = {
args: {
comment: {
...mockComment,
createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
},
},
};
export const FewDaysAgo: Story = {
render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
args: {
comment: {
...mockComment,
createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
},
},
};
export const FewMonthsAgo: Story = {
render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
args: {
comment: {
...mockComment,
createdAt: DateTime.now().minus({ months: 2 }).toISO() ?? '',
},
},
};
export const FewYearsAgo: Story = {
render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
args: {
comment: {
...mockComment,
createdAt: DateTime.now().minus({ years: 2 }).toISO() ?? '',
},
},
};
export const WithoutAvatar: Story = {
render: getRenderWrapperForComponent(
<CommentHeader
comment={{
...mockComment,
author: {
...mockComment.author,
avatarUrl: '',
},
}}
/>,
),
export const WithAvatar: Story = {
args: {
comment: {
...mockComment,
author: {
...mockComment.author,
avatarUrl,
},
},
},
};
export const WithLongUserName: Story = {
render: getRenderWrapperForComponent(
<CommentHeader
comment={{
...mockCommentWithLongValues,
author: {
...mockCommentWithLongValues.author,
avatarUrl: '',
},
}}
/>,
),
args: { comment: mockCommentWithLongValues },
};
export const WithActionBar: Story = {
render: getRenderWrapperForComponent(
<CommentHeader
comment={mockComment}
actionBar={<CommentThreadActionBar commentThreadId="test-id" />}
/>,
),
args: { actionBar: true },
};

39
front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx
View File

@ -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<typeof CommentThreadRelationPicker> = {
title: 'Modules/Comments/CommentThreadRelationPicker',
component: CommentThreadRelationPicker,
parameters: {
msw: graphqlMocks,
},
};
const StyledContainer = styled.div`
width: 400px;
`;
const meta: Meta<typeof CommentThreadRelationPicker> = {
title: 'Modules/Comments/CommentThreadRelationPicker',
component: CommentThreadRelationPicker,
decorators: [
(Story) => (
<MemoryRouter>
<StyledContainer>
<Story />
</StyledContainer>
</MemoryRouter>
),
ComponentDecorator,
],
args: { commentThread: mockedCommentThreads[0] },
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof CommentThreadRelationPicker>;
export const Default: Story = {
render: getRenderWrapperForComponent(
<MemoryRouter>
<StyledContainer>
<CommentThreadRelationPicker commentThread={mockedCommentThreads[0]} />
</StyledContainer>
</MemoryRouter>,
),
};
export const Default: Story = {};

55
front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
View File

@ -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<typeof CellCommentChip> = {
title: 'Modules/Comments/CellCommentChip',
component: CellCommentChip,
const meta: Meta<typeof CommentChip> = {
title: 'Modules/Comments/CommentChip',
component: CommentChip,
decorators: [ComponentDecorator],
args: { count: 1 },
};
export default meta;
type Story = StoryObj<typeof CellCommentChip>;
type Story = StoryObj<typeof CommentChip>;
const TestCellContainer = styled.div`
align-items: center;
@ -36,34 +37,38 @@ const StyledFakeCellText = styled.div`
white-space: nowrap;
`;
export const OneComment: Story = {
render: getRenderWrapperForComponent(<CommentChip count={1} />),
};
export const OneComment: Story = {};
export const TenComments: Story = {
render: getRenderWrapperForComponent(<CommentChip count={10} />),
args: { count: 10 },
};
export const TooManyComments: Story = {
render: getRenderWrapperForComponent(<CommentChip count={1000} />),
args: { count: 1000 },
};
export const InCellDefault: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
args: { count: 12 },
decorators: [
(Story) => (
<TestCellContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<Story />
</TestCellContainer>
),
],
};
export const InCellOverlappingBlur: Story = {
render: getRenderWrapperForComponent(
<TestCellContainer>
<StyledFakeCellText>
Fake long text to demonstrate ellipsis
</StyledFakeCellText>
<CellCommentChip count={12} />
</TestCellContainer>,
),
...InCellDefault,
decorators: [
(Story) => (
<TestCellContainer>
<StyledFakeCellText>
Fake long text to demonstrate ellipsis
</StyledFakeCellText>
<Story />
</TestCellContainer>
),
],
};