Thaïs
@ -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",
|
||||
],
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 },
|
||||
};
|
||||
|
||||
@ -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 },
|
||||
};
|
||||
|
||||
@ -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 = {};
|
||||
|
||||
@ -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>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
@ -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<typeof CommandMenu> = {
|
||||
title: 'Modules/CommandMenu/CommandMenu',
|
||||
component: CommandMenu,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CommandMenu>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<CommandMenu />
|
||||
</MemoryRouter>,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
export const CmdK: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<CommandMenu />
|
||||
</MemoryRouter>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
fireEvent.keyDown(canvasElement, {
|
||||
key: 'k',
|
||||
|
||||
@ -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<typeof EntityBoard> = {
|
||||
title: 'Modules/Companies/Board',
|
||||
component: EntityBoard,
|
||||
decorators: [BoardDecorator],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecoilScope SpecificContext={CompanyBoardContext}>
|
||||
<HooksCompanyBoard
|
||||
availableFilters={[]}
|
||||
orderBy={defaultPipelineProgressOrderBy}
|
||||
/>
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecoilScope>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof EntityBoard>;
|
||||
|
||||
export const OneColumnBoard: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<EntityBoard
|
||||
boardOptions={opportunitiesBoardOptions}
|
||||
updateSorts={() => {
|
||||
return;
|
||||
}}
|
||||
/>
|
||||
,
|
||||
</MemoryRouter>,
|
||||
render: (args) => (
|
||||
<EntityBoard {...args} boardOptions={opportunitiesBoardOptions} />
|
||||
),
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
@ -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<typeof CompanyBoardCard> = {
|
||||
title: 'Modules/Companies/CompanyBoardCard',
|
||||
component: CompanyBoardCard,
|
||||
decorators: [BoardCardDecorator],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecoilScope SpecificContext={CompanyBoardContext}>
|
||||
<HooksCompanyBoard
|
||||
availableFilters={[]}
|
||||
orderBy={defaultPipelineProgressOrderBy}
|
||||
/>
|
||||
<RecoilScope SpecificContext={BoardColumnContext}>
|
||||
<RecoilScope SpecificContext={BoardCardContext}>
|
||||
<HookLoadFakeBoardContextState />
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecoilScope>
|
||||
</RecoilScope>
|
||||
</RecoilScope>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CompanyBoardCard>;
|
||||
|
||||
const FakeSelectableCompanyBoardCard = () => {
|
||||
return (
|
||||
<MemoryRouter>
|
||||
<CompanyBoardCard />
|
||||
</MemoryRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export const CompanyCompanyBoardCard: Story = {
|
||||
render: getRenderWrapperForComponent(<FakeSelectableCompanyBoardCard />),
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
export const CompanyCompanyBoardCard: Story = {};
|
||||
|
||||
@ -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<typeof CompanyChip> = {
|
||||
title: 'Modules/Companies/CompanyChip',
|
||||
component: CompanyChip,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<Story />
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
@ -31,29 +41,21 @@ const TestCellContainer = styled.div`
|
||||
`;
|
||||
|
||||
export const SmallName: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<CompanyChip
|
||||
id="airbnb"
|
||||
name="Airbnb"
|
||||
picture="https://api.faviconkit.com/airbnb.com/144"
|
||||
/>
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>,
|
||||
),
|
||||
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(
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<CompanyChip
|
||||
id="google"
|
||||
name="Google with a real big name to overflow the cell"
|
||||
picture="https://api.faviconkit.com/google.com/144"
|
||||
/>
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>,
|
||||
),
|
||||
args: {
|
||||
id: 'google',
|
||||
name: 'Google with a real big name to overflow the cell',
|
||||
picture: 'https://api.faviconkit.com/google.com/144',
|
||||
},
|
||||
};
|
||||
|
||||
@ -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<typeof PersonChip> = {
|
||||
title: 'Modules/People/PersonChip',
|
||||
component: PersonChip,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PersonChip>;
|
||||
|
||||
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<typeof PersonChip> = {
|
||||
title: 'Modules/People/PersonChip',
|
||||
component: PersonChip,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<Story />
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PersonChip>;
|
||||
|
||||
export const SmallName: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<PersonChip id="tim_fake_id" name="Tim C." />
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>,
|
||||
),
|
||||
args: { id: 'tim_fake_id', name: 'Tim C.' },
|
||||
};
|
||||
|
||||
export const BigName: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TestCellContainer>
|
||||
<BrowserRouter>
|
||||
<PersonChip id="steve_fake_id" name="Steve J." />
|
||||
</BrowserRouter>
|
||||
</TestCellContainer>,
|
||||
),
|
||||
args: { id: 'steve_fake_id', name: 'Steve LoremIpsumLoremIpsumLoremIpsum' },
|
||||
};
|
||||
|
||||
@ -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<typeof ActionBar> = {
|
||||
title: 'UI/ActionBar/ActionBar',
|
||||
component: ActionBar,
|
||||
decorators: [ComponentDecorator],
|
||||
args: { children: 'Lorem ipsum', selectedIds: [] },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ActionBar>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<ActionBar children={<div />} selectedIds={[]} />,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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<typeof BoardColumnEditTitleMenu> = {
|
||||
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<typeof BoardColumnEditTitleMenu>;
|
||||
|
||||
export const AllTags: Story = {};
|
||||
@ -1,28 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { BoardColumnEditTitleMenu } from '../BoardColumnEditTitleMenu';
|
||||
|
||||
const meta: Meta<typeof BoardColumnEditTitleMenu> = {
|
||||
title: 'UI/Board/BoardColumnMenu',
|
||||
component: BoardColumnEditTitleMenu,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
|
||||
|
||||
export const AllTags: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<BoardColumnEditTitleMenu
|
||||
color="green"
|
||||
title={'Column title'}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
onClose={() => {}}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
onTitleEdit={() => {}}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
onColumnColorEdit={() => {}}
|
||||
/>,
|
||||
),
|
||||
};
|
||||
@ -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<typeof Button>;
|
||||
|
||||
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<typeof Button> = {
|
||||
title: 'UI/Button/Button',
|
||||
component: Button,
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
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<ButtonProps> = ({ variant, ...props }) => (
|
||||
<>
|
||||
{Object.entries(states).map(([state, { description, extraProps }]) => (
|
||||
<StyledButtonContainer key={`${variant}-container-${state}`}>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<Button {...props} {...extraProps(variant ?? '')} variant={variant} />
|
||||
</StyledButtonContainer>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
const ButtonGroupLine: React.FC<ButtonProps> = ({ variant, ...props }) => (
|
||||
<>
|
||||
{Object.entries(states).map(([state, { description, extraProps }]) => (
|
||||
<StyledButtonContainer key={`${variant}-group-container-${state}`}>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
{...props}
|
||||
{...extraProps(`${variant}-left`)}
|
||||
variant={variant}
|
||||
title="Left"
|
||||
/>
|
||||
<Button
|
||||
{...props}
|
||||
{...extraProps(`${variant}-center`)}
|
||||
variant={variant}
|
||||
title="Center"
|
||||
/>
|
||||
<Button
|
||||
{...props}
|
||||
{...extraProps(`${variant}-right`)}
|
||||
variant={variant}
|
||||
title="Right"
|
||||
/>
|
||||
</ButtonGroup>
|
||||
</StyledButtonContainer>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
const generateStory = (
|
||||
size: ButtonProps['size'],
|
||||
type: 'button' | 'group',
|
||||
LineComponent: React.ComponentType<ButtonProps>,
|
||||
): Story => ({
|
||||
render: getRenderWrapperForComponent(
|
||||
<StyledContainer>
|
||||
{variants.map((variant) => (
|
||||
<div key={variant}>
|
||||
<StyledTitle>{variant}</StyledTitle>
|
||||
<StyledLine>
|
||||
<LineComponent
|
||||
size={size}
|
||||
variant={variant}
|
||||
title={text('Text', 'A button title')}
|
||||
/>
|
||||
</StyledLine>
|
||||
</div>
|
||||
))}
|
||||
</StyledContainer>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
let button;
|
||||
if (type === 'group') {
|
||||
button = canvas.getByTestId(`primary-left-button-default`);
|
||||
} else {
|
||||
button = canvas.getByTestId(`primary-button-default`);
|
||||
}
|
||||
|
||||
const numberOfClicks = clickJestFn.mock.calls.length;
|
||||
await userEvent.click(button);
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
|
||||
},
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'UI/Button/Button',
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
pseudo: Object.keys(states).reduce(
|
||||
(acc, state) => ({
|
||||
@ -210,20 +131,105 @@ const generateStory = (
|
||||
(variant) =>
|
||||
variant &&
|
||||
['#left', '#center', '#right'].map(
|
||||
(pos) => `${pos}-${variant}-${type}-${state}`,
|
||||
(pos) => `${pos}-${variant}-button-${state}`,
|
||||
),
|
||||
),
|
||||
}),
|
||||
{},
|
||||
),
|
||||
},
|
||||
});
|
||||
argTypes: { icon: { control: false }, variant: { control: false } },
|
||||
args: { title: 'A button title' },
|
||||
};
|
||||
|
||||
export const MediumSize = generateStory('medium', 'button', ButtonLine);
|
||||
export const SmallSize = generateStory('small', 'button', ButtonLine);
|
||||
export const MediumSizeGroup = generateStory(
|
||||
'medium',
|
||||
'group',
|
||||
ButtonGroupLine,
|
||||
);
|
||||
export const SmallSizeGroup = generateStory('small', 'group', ButtonGroupLine);
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const MediumSize: Story = {
|
||||
args: { size: 'medium' },
|
||||
render: (args) => (
|
||||
<>
|
||||
{variants.map((variant) => (
|
||||
<div key={variant}>
|
||||
<StyledTitle>{variant}</StyledTitle>
|
||||
<StyledLine>
|
||||
{Object.entries(states).map(
|
||||
([state, { description, extraProps }]) => (
|
||||
<StyledButtonContainer key={`${variant}-container-${state}`}>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<Button
|
||||
{...args}
|
||||
{...extraProps(variant ?? '')}
|
||||
variant={variant}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
),
|
||||
)}
|
||||
</StyledLine>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByTestId('primary-button-default');
|
||||
|
||||
const numberOfClicks = clickJestFn.mock.calls.length;
|
||||
await userEvent.click(button);
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
|
||||
},
|
||||
};
|
||||
|
||||
export const SmallSize: Story = {
|
||||
...MediumSize,
|
||||
args: { size: 'small' },
|
||||
};
|
||||
|
||||
export const MediumSizeGroup: Story = {
|
||||
args: { size: 'medium' },
|
||||
render: (args) => (
|
||||
<>
|
||||
{variants.map((variant) => (
|
||||
<div key={variant}>
|
||||
<StyledTitle>{variant}</StyledTitle>
|
||||
<StyledLine>
|
||||
{Object.entries(states).map(
|
||||
([state, { description, extraProps }]) => (
|
||||
<StyledButtonContainer
|
||||
key={`${variant}-group-container-${state}`}
|
||||
>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<ButtonGroup>
|
||||
{['Left', 'Center', 'Right'].map((position) => (
|
||||
<Button
|
||||
{...args}
|
||||
{...extraProps(`${variant}-${position.toLowerCase()}`)}
|
||||
variant={variant}
|
||||
title={position}
|
||||
/>
|
||||
))}
|
||||
</ButtonGroup>
|
||||
</StyledButtonContainer>
|
||||
),
|
||||
)}
|
||||
</StyledLine>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByTestId('primary-left-button-default');
|
||||
|
||||
const numberOfClicks = clickJestFn.mock.calls.length;
|
||||
await userEvent.click(button);
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
|
||||
},
|
||||
};
|
||||
|
||||
export const SmallSizeGroup: Story = {
|
||||
...MediumSizeGroup,
|
||||
args: { size: 'small' },
|
||||
};
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { 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 { IconUser } from '@/ui/icon';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { IconButton } from '../IconButton';
|
||||
|
||||
@ -16,6 +13,7 @@ const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
width: 800px;
|
||||
> * + * {
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
@ -55,7 +53,14 @@ const StyledIconButtonContainer = styled.div`
|
||||
const meta: Meta<typeof IconButton> = {
|
||||
title: 'UI/Button/IconButton',
|
||||
component: IconButton,
|
||||
decorators: [withKnobs],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
],
|
||||
argTypes: { icon: { control: false }, variant: { control: false } },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
@ -101,53 +106,51 @@ const states = {
|
||||
},
|
||||
};
|
||||
|
||||
function IconButtonRow({ variant, size, ...props }: IconButtonProps) {
|
||||
const iconSize = size === 'small' ? 14 : 16;
|
||||
return (
|
||||
export const LargeSize: Story = {
|
||||
args: { size: 'large' },
|
||||
render: (args) => (
|
||||
<>
|
||||
{Object.entries(states).map(([state, { description, extraProps }]) => (
|
||||
<StyledIconButtonContainer key={`${variant}-container-${state}`}>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<IconButton
|
||||
{...props}
|
||||
{...extraProps(variant ?? '')}
|
||||
variant={variant}
|
||||
size={size}
|
||||
icon={<IconUser size={iconSize} />}
|
||||
/>
|
||||
</StyledIconButtonContainer>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const generateStory = (
|
||||
size: IconButtonProps['size'],
|
||||
LineComponent: React.ComponentType<IconButtonProps>,
|
||||
): Story => ({
|
||||
render: getRenderWrapperForComponent(
|
||||
<StyledContainer>
|
||||
{variants.map((variant) => (
|
||||
<div key={variant}>
|
||||
<StyledTitle>{variant}</StyledTitle>
|
||||
<StyledLine>
|
||||
<LineComponent size={size} variant={variant} />
|
||||
{Object.entries(states).map(
|
||||
([state, { description, extraProps }]) => (
|
||||
<StyledIconButtonContainer
|
||||
key={`${variant}-container-${state}`}
|
||||
>
|
||||
<StyledDescription>{description}</StyledDescription>
|
||||
<IconButton
|
||||
{...args}
|
||||
{...extraProps(variant ?? '')}
|
||||
variant={variant}
|
||||
icon={<IconUser size={args.size === 'small' ? 14 : 16} />}
|
||||
/>
|
||||
</StyledIconButtonContainer>
|
||||
),
|
||||
)}
|
||||
</StyledLine>
|
||||
</div>
|
||||
))}
|
||||
</StyledContainer>,
|
||||
</>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const button = canvas.getByTestId(`transparent-button-default`);
|
||||
const button = canvas.getByTestId('transparent-button-default');
|
||||
|
||||
const numberOfClicks = clickJestFn.mock.calls.length;
|
||||
await userEvent.click(button);
|
||||
expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const LargeSize = generateStory('large', IconButtonRow);
|
||||
export const MediumSize = generateStory('medium', IconButtonRow);
|
||||
export const SmallSize = generateStory('small', IconButtonRow);
|
||||
export const MediumSize: Story = {
|
||||
...LargeSize,
|
||||
args: { size: 'medium' },
|
||||
};
|
||||
|
||||
export const SmallSize: Story = {
|
||||
...LargeSize,
|
||||
args: { size: 'small' },
|
||||
};
|
||||
|
||||
@ -3,24 +3,32 @@ import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconBrandGoogle } from '@/ui/icon';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { MainButton } from '../MainButton';
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
const meta: Meta<typeof MainButton> = {
|
||||
title: 'UI/Button/MainButton',
|
||||
component: MainButton,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
icon: {
|
||||
type: 'boolean',
|
||||
mapping: {
|
||||
true: <IconBrandGoogle size={16} stroke={4} />,
|
||||
false: undefined,
|
||||
},
|
||||
},
|
||||
},
|
||||
args: { title: 'A primary Button', onClick: clickJestFn },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MainButton>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const DefaultPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A primary Button" onClick={clickJestFn} />,
|
||||
),
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
@ -32,64 +40,30 @@ export const DefaultPrimary: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIconPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A primary Button"
|
||||
/>,
|
||||
),
|
||||
export const WithIcon: Story = {
|
||||
args: { icon: true },
|
||||
};
|
||||
|
||||
export const WithIconPrimaryDisabled: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A primary Button"
|
||||
disabled
|
||||
/>,
|
||||
),
|
||||
export const DisabledWithIcon: Story = {
|
||||
args: { ...WithIcon.args, disabled: true },
|
||||
};
|
||||
|
||||
export const FullWidthPrimary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A primary Button" fullWidth />,
|
||||
),
|
||||
export const FullWidth: Story = {
|
||||
args: { fullWidth: true },
|
||||
};
|
||||
|
||||
export const DefaultSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
title="A secondary Button"
|
||||
onClick={clickJestFn}
|
||||
variant="secondary"
|
||||
/>,
|
||||
),
|
||||
export const Secondary: Story = {
|
||||
args: { title: 'A secondary Button', variant: 'secondary' },
|
||||
};
|
||||
|
||||
export const WithIconSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A secondary Button"
|
||||
variant="secondary"
|
||||
/>,
|
||||
),
|
||||
export const SecondaryWithIcon: Story = {
|
||||
args: { ...Secondary.args, ...WithIcon.args },
|
||||
};
|
||||
|
||||
export const WithIconSecondaryDisabled: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton
|
||||
icon={<IconBrandGoogle size={16} stroke={4} />}
|
||||
title="A secondary Button"
|
||||
variant="secondary"
|
||||
disabled
|
||||
/>,
|
||||
),
|
||||
export const SecondaryDisabledWithIcon: Story = {
|
||||
args: { ...SecondaryWithIcon.args, disabled: true },
|
||||
};
|
||||
|
||||
export const FullWidthSecondary: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MainButton title="A secondary Button" variant="secondary" fullWidth />,
|
||||
),
|
||||
export const SecondaryFullWidth: Story = {
|
||||
args: { ...Secondary.args, ...FullWidth.args },
|
||||
};
|
||||
|
||||
@ -3,27 +3,23 @@ import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { IconArrowRight } from '@/ui/icon';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { RoundedIconButton } from '../RoundedIconButton';
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
const meta: Meta<typeof RoundedIconButton> = {
|
||||
title: 'UI/Button/RoundedIconButton',
|
||||
component: RoundedIconButton,
|
||||
decorators: [ComponentDecorator],
|
||||
args: { onClick: clickJestFn, icon: <IconArrowRight size={15} /> },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RoundedIconButton>;
|
||||
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<RoundedIconButton
|
||||
onClick={clickJestFn}
|
||||
icon={<IconArrowRight size={15} />}
|
||||
/>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { ColorSchemeCard } from '../ColorSchemeCard';
|
||||
|
||||
@ -16,27 +16,34 @@ const Container = styled.div`
|
||||
const meta: Meta<typeof ColorSchemeCard> = {
|
||||
title: 'UI/ColorScheme/ColorSchemeCard',
|
||||
component: ColorSchemeCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<Container>
|
||||
<Story />
|
||||
</Container>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
argTypes: {
|
||||
variant: { control: false },
|
||||
},
|
||||
args: { selected: false },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ColorSchemeCard>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Container>
|
||||
<ColorSchemeCard variant="light" selected={false} />
|
||||
<ColorSchemeCard variant="dark" selected={false} />
|
||||
<ColorSchemeCard variant="system" selected={false} />
|
||||
</Container>,
|
||||
render: (args) => (
|
||||
<>
|
||||
<ColorSchemeCard variant="light" selected={args.selected} />
|
||||
<ColorSchemeCard variant="dark" selected={args.selected} />
|
||||
<ColorSchemeCard variant="system" selected={args.selected} />
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
export const Selected: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Container>
|
||||
<ColorSchemeCard variant="light" selected={true} />
|
||||
<ColorSchemeCard variant="dark" selected={true} />
|
||||
<ColorSchemeCard variant="system" selected={true} />
|
||||
</Container>,
|
||||
),
|
||||
...Default,
|
||||
args: { selected: true },
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconPlus } from '@/ui/icon/index';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { DropdownMenu } from '../DropdownMenu';
|
||||
import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
|
||||
@ -17,6 +17,11 @@ import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
|
||||
const meta: Meta<typeof DropdownMenu> = {
|
||||
title: 'UI/Dropdown/DropdownMenu',
|
||||
component: DropdownMenu,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
as: { table: { disable: true } },
|
||||
theme: { table: { disable: true } },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
@ -97,236 +102,169 @@ const mockSelectArray = [
|
||||
},
|
||||
];
|
||||
|
||||
const FakeSelectableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
|
||||
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuSelectableItem
|
||||
key={item.id}
|
||||
selected={selectedItem === item.id}
|
||||
onClick={() => setSelectedItem(item.id)}
|
||||
>
|
||||
{hasAvatar && (
|
||||
<Avatar
|
||||
placeholder="A"
|
||||
avatarUrl={item.avatarUrl}
|
||||
size={16}
|
||||
type="squared"
|
||||
/>
|
||||
)}
|
||||
{item.name}
|
||||
</DropdownMenuSelectableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
|
||||
const [selectedItems, setSelectedItems] = useState<string[]>([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuCheckableItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
checked={selectedItems.includes(item.id)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedItems([...selectedItems, item.id]);
|
||||
} else {
|
||||
setSelectedItems(selectedItems.filter((id) => id !== item.id));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{hasAvatar && (
|
||||
<Avatar
|
||||
placeholder="A"
|
||||
avatarUrl={item.avatarUrl}
|
||||
size={16}
|
||||
type="squared"
|
||||
/>
|
||||
)}
|
||||
{item.name}
|
||||
</DropdownMenuCheckableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Empty: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<DropdownMenu>
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<FakeMenuContent />
|
||||
</DropdownMenu>,
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
const DropdownMenuStoryWrapper = ({
|
||||
children,
|
||||
}: React.PropsWithChildren<unknown>) => (
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>{children}</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>
|
||||
);
|
||||
|
||||
export const EmptyWithContentBelow: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<DropdownMenuStoryWrapper>
|
||||
<FakeMenuContent />
|
||||
</DropdownMenuStoryWrapper>,
|
||||
),
|
||||
export const WithContentBelow: Story = {
|
||||
...Empty,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<Story />
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const SimpleMenuItem: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<DropdownMenuStoryWrapper>
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenuStoryWrapper>,
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
export const Search: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuSearch />
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuSearch />
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
const FakeSelectableMenuItemList = () => {
|
||||
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuSelectableItem
|
||||
key={item.id}
|
||||
selected={selectedItem === item.id}
|
||||
onClick={() => setSelectedItem(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</DropdownMenuSelectableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Button: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<DropdownMenuItem>
|
||||
<IconPlus size={16} />
|
||||
<div>Create new</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuItemsContainer>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<DropdownMenuItem>
|
||||
<IconPlus size={16} />
|
||||
<div>Create new</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuItemsContainer>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
export const SelectableMenuItem: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
const FakeSelectableMenuItemWithAvatarList = () => {
|
||||
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuSelectableItem
|
||||
key={item.id}
|
||||
selected={selectedItem === item.id}
|
||||
onClick={() => setSelectedItem(item.id)}
|
||||
>
|
||||
<Avatar
|
||||
placeholder="A"
|
||||
avatarUrl={item.avatarUrl}
|
||||
size={16}
|
||||
type="squared"
|
||||
/>
|
||||
{item.name}
|
||||
</DropdownMenuSelectableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const SelectableMenuItemWithAvatar: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemWithAvatarList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeSelectableMenuItemList hasAvatar />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
const FakeCheckableMenuItemList = () => {
|
||||
const [selectedItems, setSelectedItems] = useState<string[]>([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuCheckableItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
checked={selectedItems.includes(item.id)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedItems([...selectedItems, item.id]);
|
||||
} else {
|
||||
setSelectedItems(selectedItems.filter((id) => id !== item.id));
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</DropdownMenuCheckableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CheckableMenuItem: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeCheckableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeCheckableMenuItemList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
const FakeCheckableMenuItemWithAvatarList = () => {
|
||||
const [selectedItems, setSelectedItems] = useState<string[]>([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{mockSelectArray.map((item) => (
|
||||
<DropdownMenuCheckableItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
checked={selectedItems.includes(item.id)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedItems([...selectedItems, item.id]);
|
||||
} else {
|
||||
setSelectedItems(selectedItems.filter((id) => id !== item.id));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
placeholder="A"
|
||||
avatarUrl={item.avatarUrl}
|
||||
size={16}
|
||||
type="squared"
|
||||
/>
|
||||
{item.name}
|
||||
</DropdownMenuCheckableItem>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CheckableMenuItemWithAvatar: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeBelowContainer>
|
||||
<FakeContentBelow />
|
||||
<MenuAbsolutePositionWrapper>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeCheckableMenuItemWithAvatarList />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</MenuAbsolutePositionWrapper>
|
||||
</FakeBelowContainer>,
|
||||
...WithContentBelow,
|
||||
render: (args) => (
|
||||
<DropdownMenu {...args}>
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<FakeCheckableMenuItemList hasAvatar />
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
),
|
||||
};
|
||||
|
||||
@ -1,23 +1,31 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { IconCalendar } from '@tabler/icons-react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { DateEditableField } from '../DateEditableField';
|
||||
|
||||
const meta: Meta<typeof DateEditableField> = {
|
||||
title: 'UI/EditableField/DateEditableField',
|
||||
component: DateEditableField,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
icon: {
|
||||
type: 'boolean',
|
||||
mapping: {
|
||||
true: <IconCalendar />,
|
||||
false: undefined,
|
||||
},
|
||||
},
|
||||
value: { control: { type: 'date' } },
|
||||
},
|
||||
args: {
|
||||
value: new Date().toISOString(),
|
||||
icon: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof DateEditableField>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<DateEditableField
|
||||
value={new Date().toISOString()}
|
||||
icon={<IconCalendar />}
|
||||
/>,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,24 +1,32 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { IconCurrencyDollar } from '@tabler/icons-react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { NumberEditableField } from '../NumberEditableField';
|
||||
|
||||
const meta: Meta<typeof NumberEditableField> = {
|
||||
title: 'UI/EditableField/NumberEditableField',
|
||||
component: NumberEditableField,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
icon: {
|
||||
type: 'boolean',
|
||||
mapping: {
|
||||
true: <IconCurrencyDollar />,
|
||||
false: undefined,
|
||||
},
|
||||
},
|
||||
value: { control: { type: 'number' } },
|
||||
},
|
||||
args: {
|
||||
value: 10,
|
||||
icon: true,
|
||||
placeholder: 'Number',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NumberEditableField>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<NumberEditableField
|
||||
value={10}
|
||||
icon={<IconCurrencyDollar />}
|
||||
placeholder="Number"
|
||||
/>,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -2,26 +2,38 @@ import { BrowserRouter } from 'react-router-dom';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { IconPhone } from '@tabler/icons-react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { PhoneEditableField } from '../PhoneEditableField';
|
||||
|
||||
const meta: Meta<typeof PhoneEditableField> = {
|
||||
title: 'UI/EditableField/PhoneEditableField',
|
||||
component: PhoneEditableField,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<BrowserRouter>
|
||||
<Story />
|
||||
</BrowserRouter>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
argTypes: {
|
||||
icon: {
|
||||
type: 'boolean',
|
||||
mapping: {
|
||||
true: <IconPhone />,
|
||||
false: undefined,
|
||||
},
|
||||
},
|
||||
},
|
||||
args: {
|
||||
value: '+33714446494',
|
||||
icon: true,
|
||||
placeholder: 'Phone',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PhoneEditableField>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<BrowserRouter>
|
||||
<PhoneEditableField
|
||||
value={'+33714446494'}
|
||||
icon={<IconPhone />}
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</BrowserRouter>,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { IconUser } from '@tabler/icons-react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { TextEditableField } from '../TextEditableField';
|
||||
|
||||
const meta: Meta<typeof TextEditableField> = {
|
||||
title: 'UI/EditableField/TextEditableField',
|
||||
component: TextEditableField,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: {
|
||||
icon: {
|
||||
type: 'boolean',
|
||||
mapping: {
|
||||
true: <IconUser />,
|
||||
false: undefined,
|
||||
},
|
||||
},
|
||||
},
|
||||
args: {
|
||||
value: 'John Doe',
|
||||
icon: true,
|
||||
placeholder: 'Name',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof TextEditableField>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TextEditableField
|
||||
value={'John Doe'}
|
||||
icon={<IconUser />}
|
||||
placeholder="Name"
|
||||
/>,
|
||||
),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { AutosizeTextInput } from '../AutosizeTextInput';
|
||||
|
||||
const meta: Meta<typeof AutosizeTextInput> = {
|
||||
title: 'UI/Inputs/AutosizeTextInput',
|
||||
component: AutosizeTextInput,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof AutosizeTextInput>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(<AutosizeTextInput />),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -4,37 +4,44 @@ import { jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { TextInput } from '../TextInput';
|
||||
|
||||
const changeJestFn = jest.fn();
|
||||
|
||||
const meta: Meta<typeof TextInput> = {
|
||||
title: 'UI/Inputs/TextInput',
|
||||
component: TextInput,
|
||||
decorators: [ComponentDecorator],
|
||||
args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof TextInput>;
|
||||
|
||||
const changeJestFn = jest.fn();
|
||||
|
||||
function FakeTextInput({ onChange }: any) {
|
||||
const [value, setValue] = useState<string>('A good value ');
|
||||
function FakeTextInput({
|
||||
onChange,
|
||||
value: initialValue,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TextInput>) {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
return (
|
||||
<TextInput
|
||||
{...props}
|
||||
value={value}
|
||||
onChange={(text) => {
|
||||
setValue(text);
|
||||
onChange(text);
|
||||
onChange?.(text);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<FakeTextInput onChange={changeJestFn} />,
|
||||
),
|
||||
argTypes: { value: { control: false } },
|
||||
args: { value: 'A good value ' },
|
||||
render: (args) => <FakeTextInput {...args} />,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
@ -47,31 +54,22 @@ export const Default: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Placeholder: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TextInput value="" onChange={changeJestFn} placeholder="Placeholder" />,
|
||||
),
|
||||
};
|
||||
export const Placeholder: Story = {};
|
||||
|
||||
export const FullWidth: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TextInput
|
||||
value="A good value"
|
||||
onChange={changeJestFn}
|
||||
placeholder="Placeholder"
|
||||
fullWidth
|
||||
/>,
|
||||
),
|
||||
args: { value: 'A good value', fullWidth: true },
|
||||
};
|
||||
|
||||
export const WithLabel: Story = {
|
||||
args: { label: 'Lorem ipsum' },
|
||||
};
|
||||
|
||||
export const WithError: Story = {
|
||||
args: { error: 'Lorem ipsum' },
|
||||
};
|
||||
|
||||
export const PasswordInput: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<TextInput
|
||||
onChange={changeJestFn}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>,
|
||||
),
|
||||
args: { type: 'password', placeholder: 'Password' },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
|
||||
@ -3,13 +3,21 @@ import { expect, jest } from '@storybook/jest';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { PrimaryLink } from '../PrimaryLink';
|
||||
|
||||
const meta: Meta<typeof PrimaryLink> = {
|
||||
title: 'UI/Links/PrimaryLink',
|
||||
component: PrimaryLink,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
@ -18,13 +26,7 @@ type Story = StoryObj<typeof PrimaryLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<PrimaryLink href="/test" onClick={clickJestFn}>
|
||||
A primary link
|
||||
</PrimaryLink>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
args: { href: '/test', onClick: clickJestFn, children: 'A primary link' },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { SoonPill } from '../SoonPill';
|
||||
|
||||
const meta: Meta<typeof SoonPill> = {
|
||||
title: 'UI/Accessories/SoonPill',
|
||||
component: SoonPill,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SoonPill>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(<SoonPill />),
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,33 +1,27 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { RightDrawerTopBar } from '../RightDrawerTopBar';
|
||||
|
||||
const meta: Meta<typeof RightDrawerTopBar> = {
|
||||
title: 'UI/RightDrawer/RightDrawerTopBar',
|
||||
component: RightDrawerTopBar,
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: 'text' },
|
||||
defaultValue: 'My Title',
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: '500px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RightDrawerTopBar>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<div style={{ width: '500px' }}>
|
||||
<RightDrawerTopBar />
|
||||
</div>,
|
||||
),
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
actions: { argTypesRegex: '^on.*' },
|
||||
},
|
||||
args: {},
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
|
||||
import { Tag } from '../Tag';
|
||||
|
||||
const meta: Meta<typeof Tag> = {
|
||||
title: 'UI/Accessories/Tag',
|
||||
component: Tag,
|
||||
decorators: [ComponentDecorator],
|
||||
argTypes: { color: { control: false } },
|
||||
args: { text: 'Urgent' },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
@ -26,11 +29,11 @@ const TESTED_COLORS = [
|
||||
];
|
||||
|
||||
export const AllTags: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
render: (args) => (
|
||||
<>
|
||||
{TESTED_COLORS.map((color) => (
|
||||
<Tag text="Urgent" color={color} />
|
||||
<Tag {...args} color={color} />
|
||||
))}
|
||||
</>,
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
@ -1,40 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
import { ComponentDecorator } from '~/testing/decorators';
|
||||
import { avatarUrl } from '~/testing/mock-data/users';
|
||||
|
||||
import { Avatar } from '../Avatar';
|
||||
|
||||
const meta: Meta<typeof Avatar> = {
|
||||
title: 'Modules/Users/Avatar',
|
||||
component: Avatar,
|
||||
decorators: [ComponentDecorator],
|
||||
args: { avatarUrl, size: 16, placeholder: 'L', type: 'rounded' },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Avatar>;
|
||||
|
||||
const avatarUrl =
|
||||
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
|
||||
|
||||
export const Rounded: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Avatar avatarUrl={avatarUrl} size={16} placeholder="L" type="rounded" />,
|
||||
),
|
||||
};
|
||||
export const Rounded: Story = {};
|
||||
|
||||
export const Squared: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Avatar avatarUrl={avatarUrl} size={16} placeholder="L" type="squared" />,
|
||||
),
|
||||
args: { type: 'squared' },
|
||||
};
|
||||
|
||||
export const NoAvatarPictureRounded: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Avatar avatarUrl={''} size={16} placeholder="L" type="rounded" />,
|
||||
),
|
||||
args: { avatarUrl: '' },
|
||||
};
|
||||
|
||||
export const NoAvatarPictureSquared: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<Avatar avatarUrl={''} size={16} placeholder="L" type="squared" />,
|
||||
),
|
||||
args: {
|
||||
...NoAvatarPictureRounded.args,
|
||||
...Squared.args,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
import { useEffect } from 'react';
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
import { Decorator } from '@storybook/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
|
||||
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
|
||||
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 { CellContext } from '@/ui/table/states/CellContext';
|
||||
import { RowContext } from '@/ui/table/states/RowContext';
|
||||
|
||||
import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
|
||||
import { ComponentStorybookLayout } from './ComponentStorybookLayout';
|
||||
import { mockedClient } from './mockedClient';
|
||||
|
||||
@ -39,46 +30,3 @@ export const CellPositionDecorator: Decorator = (Story) => (
|
||||
</RecoilScope>
|
||||
</RecoilScope>
|
||||
);
|
||||
|
||||
export const BoardDecorator: Decorator = (Story) => (
|
||||
<>
|
||||
<RecoilScope SpecificContext={CompanyBoardContext}>
|
||||
<HooksCompanyBoard
|
||||
availableFilters={[]}
|
||||
orderBy={defaultPipelineProgressOrderBy}
|
||||
/>
|
||||
<Story />
|
||||
</RecoilScope>
|
||||
</>
|
||||
);
|
||||
|
||||
function HookLoadFakeBoardContextState() {
|
||||
const [, setPipelineProgressId] = useRecoilScopedState(
|
||||
pipelineProgressIdScopedState,
|
||||
BoardCardContext,
|
||||
);
|
||||
const pipelineProgress = mockedPipelineProgressData[1];
|
||||
useEffect(() => {
|
||||
setPipelineProgressId(pipelineProgress?.id || '');
|
||||
}, [pipelineProgress?.id, setPipelineProgressId]);
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export const BoardCardDecorator: Decorator = (Story) => {
|
||||
return (
|
||||
<>
|
||||
<RecoilScope SpecificContext={CompanyBoardContext}>
|
||||
<HooksCompanyBoard
|
||||
availableFilters={[]}
|
||||
orderBy={defaultPipelineProgressOrderBy}
|
||||
/>
|
||||
<RecoilScope SpecificContext={BoardColumnContext}>
|
||||
<RecoilScope SpecificContext={BoardCardContext}>
|
||||
<HookLoadFakeBoardContextState />
|
||||
<Story />
|
||||
</RecoilScope>
|
||||
</RecoilScope>
|
||||
</RecoilScope>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,6 +2,9 @@ import { ColorScheme, GetCurrentUserQuery } from '~/generated/graphql';
|
||||
|
||||
type MockedUser = GetCurrentUserQuery['currentUser'];
|
||||
|
||||
export const avatarUrl =
|
||||
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
|
||||
|
||||
export const mockedUsersData: Array<MockedUser> = [
|
||||
{
|
||||
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
|
||||
|
||||
@ -35,12 +35,6 @@ export function getRenderWrapperForPage(
|
||||
};
|
||||
}
|
||||
|
||||
export function getRenderWrapperForComponent(children: React.ReactElement) {
|
||||
return function render() {
|
||||
return <ComponentStorybookLayout>{children}</ComponentStorybookLayout>;
|
||||
};
|
||||
}
|
||||
|
||||
export function getRenderWrapperForEntityTableComponent(
|
||||
children: React.ReactElement,
|
||||
) {
|
||||
|
||||
111
front/yarn.lock
111
front/yarn.lock
@ -1409,7 +1409,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
|
||||
integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.22.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
|
||||
integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
|
||||
@ -1713,7 +1713,7 @@
|
||||
source-map "^0.5.7"
|
||||
stylis "4.2.0"
|
||||
|
||||
"@emotion/cache@^11.10.5", "@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
|
||||
"@emotion/cache@^11.10.5", "@emotion/cache@^11.11.0":
|
||||
version "11.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
|
||||
integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
|
||||
@ -1753,7 +1753,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
|
||||
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
|
||||
|
||||
"@emotion/react@^11.10.5", "@emotion/react@^11.10.6", "@emotion/react@^11.8.1":
|
||||
"@emotion/react@^11.10.5", "@emotion/react@^11.10.6":
|
||||
version "11.11.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
|
||||
integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
|
||||
@ -1967,7 +1967,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
|
||||
integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
|
||||
|
||||
"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.3.0":
|
||||
"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.3.0":
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.4.tgz#cf859dde33995a4e7b6ded16c98cb73b2ebfffd0"
|
||||
integrity sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==
|
||||
@ -3729,23 +3729,6 @@
|
||||
polished "^4.2.2"
|
||||
ts-dedent "^2.2.0"
|
||||
|
||||
"@storybook/addon-knobs@^7.0.2":
|
||||
version "7.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz#f28fd180d8a283df6eb67f8f2578f1563b7b7615"
|
||||
integrity sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==
|
||||
dependencies:
|
||||
copy-to-clipboard "^3.3.3"
|
||||
core-js "^3.29.0"
|
||||
escape-html "^1.0.3"
|
||||
fast-deep-equal "^3.1.3"
|
||||
global "^4.4.0"
|
||||
lodash "^4.17.21"
|
||||
prop-types "^15.8.1"
|
||||
qs "^6.11.1"
|
||||
react-colorful "^5.6.1"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
react-select "^5.7.0"
|
||||
|
||||
"@storybook/addon-links@^7.0.22":
|
||||
version "7.0.26"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.0.26.tgz#ae04e6afce9e9618d46a44862a0030a9c412d907"
|
||||
@ -5392,13 +5375,6 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-transition-group@^4.4.0":
|
||||
version "4.4.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
|
||||
integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@>=16", "@types/react@^18.0.25":
|
||||
version "18.2.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
|
||||
@ -8126,13 +8102,6 @@ cookie@^0.4.2:
|
||||
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
|
||||
integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
|
||||
|
||||
copy-to-clipboard@^3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
|
||||
integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
|
||||
dependencies:
|
||||
toggle-selection "^1.0.6"
|
||||
|
||||
core-js-compat@^3.25.1, core-js-compat@^3.31.0:
|
||||
version "3.31.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.1.tgz#5084ad1a46858df50ff89ace152441a63ba7aae0"
|
||||
@ -8150,7 +8119,7 @@ core-js@^2.4.0, core-js@^2.5.0:
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
|
||||
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
|
||||
|
||||
core-js@^3.19.2, core-js@^3.29.0:
|
||||
core-js@^3.19.2:
|
||||
version "3.31.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.1.tgz#f2b0eea9be9da0def2c5fece71064a7e5d687653"
|
||||
integrity sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==
|
||||
@ -8871,14 +8840,6 @@ dom-converter@^0.2.0:
|
||||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-helpers@^5.0.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
|
||||
@ -8905,11 +8866,6 @@ dom-serializer@^2.0.0:
|
||||
domhandler "^5.0.2"
|
||||
entities "^4.2.0"
|
||||
|
||||
dom-walk@^0.1.0:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
|
||||
integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
|
||||
|
||||
domelementtype@1, domelementtype@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
|
||||
@ -9292,7 +9248,7 @@ escalade@^3.1.1:
|
||||
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
|
||||
integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
|
||||
|
||||
escape-html@^1.0.3, escape-html@~1.0.3:
|
||||
escape-html@~1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
|
||||
@ -10469,14 +10425,6 @@ global-prefix@^3.0.0:
|
||||
kind-of "^6.0.2"
|
||||
which "^1.3.1"
|
||||
|
||||
global@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
|
||||
integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
|
||||
dependencies:
|
||||
min-document "^2.19.0"
|
||||
process "^0.11.10"
|
||||
|
||||
globals@^11.1.0:
|
||||
version "11.12.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
|
||||
@ -13785,13 +13733,6 @@ mimic-fn@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
|
||||
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
|
||||
|
||||
min-document@^2.19.0:
|
||||
version "2.19.0"
|
||||
resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
|
||||
integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
|
||||
dependencies:
|
||||
dom-walk "^0.1.0"
|
||||
|
||||
min-indent@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
|
||||
@ -15365,7 +15306,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.1, prompts@^2.4.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -15637,7 +15578,7 @@ qs@6.11.0:
|
||||
dependencies:
|
||||
side-channel "^1.0.4"
|
||||
|
||||
qs@^6.10.0, qs@^6.11.0, qs@^6.11.1, qs@^6.4.0:
|
||||
qs@^6.10.0, qs@^6.11.0, qs@^6.4.0:
|
||||
version "6.11.2"
|
||||
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
|
||||
integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
|
||||
@ -15705,7 +15646,7 @@ react-app-polyfill@^3.0.0:
|
||||
regenerator-runtime "^0.13.9"
|
||||
whatwg-fetch "^3.6.2"
|
||||
|
||||
react-colorful@^5.1.2, react-colorful@^5.6.1:
|
||||
react-colorful@^5.1.2:
|
||||
version "5.6.1"
|
||||
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
|
||||
integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
|
||||
@ -15840,7 +15781,7 @@ react-is@^18.0.0:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||
|
||||
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
|
||||
react-lifecycles-compat@^3.0.0:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
@ -15979,21 +15920,6 @@ react-scripts@5.0.1:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-select@^5.7.0:
|
||||
version "5.7.3"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.3.tgz#fa0dc9a23cad6ff3871ad3829f6083a4b54961a2"
|
||||
integrity sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
"@emotion/cache" "^11.4.0"
|
||||
"@emotion/react" "^11.8.1"
|
||||
"@floating-ui/dom" "^1.0.1"
|
||||
"@types/react-transition-group" "^4.4.0"
|
||||
memoize-one "^6.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-transition-group "^4.3.0"
|
||||
use-isomorphic-layout-effect "^1.1.2"
|
||||
|
||||
react-style-singleton@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
|
||||
@ -16029,16 +15955,6 @@ react-tooltip@^5.13.1:
|
||||
"@floating-ui/dom" "^1.0.0"
|
||||
classnames "^2.3.0"
|
||||
|
||||
react-transition-group@^4.3.0:
|
||||
version "4.4.5"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
|
||||
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
dom-helpers "^5.0.1"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react@^18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
||||
@ -17804,11 +17720,6 @@ to-regex-range@^5.0.1:
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
toggle-selection@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
|
||||
integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
|
||||
|
||||
toidentifier@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
|
||||
@ -18328,7 +18239,7 @@ use-composed-ref@^1.3.0:
|
||||
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
|
||||
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
|
||||
|
||||
use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
|
||||
use-isomorphic-layout-effect@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
Reference in New Issue
Block a user