Files
twenty/front/src/testing/decorators.tsx
Emilien Chauvet 0a319bcf86 Refacto board (#661)
* Refacto pipeline progress board to be entity agnostic

* Abstract hooks as well

* Move files

* Pass specific components as props

* Move board hook to the generic component

* Make dnd and update logic part of the board

* Remove useless call and getch pipelineProgress from hook

* Minot

* improve typing

* Revert "improve typing"

This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659.

* wip

* Get board from initial component

* Move files again

* Lint

* Fix story

* Lint

* Mock pipeline progress

* Fix storybook

* WIP refactor recoil

* Checkpoint: compilation

* Fix dnd

* Fix unselect card

* Checkpoint: compilation

* Checkpoint: New card OK

* Checkpoint: feature complete

* Fix latency for delete

* Linter

* Fix rebase

* Move files

* lint

* Update Stories tests

* lint

* Fix test

* Refactor hook for company progress indexing

* Remove useless type

* Move boardState

* remove gardcoded Id

* Nit

* Fix

* Rename state
2023-07-14 17:51:16 -07:00

80 lines
2.5 KiB
TypeScript

import { useEffect } from 'react';
import { ApolloProvider } from '@apollo/client';
import { Decorator } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { pipeline } from '@/companies/__stories__/mock-data';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { BoardCardContext } from '@/pipeline-progress/states/BoardCardContext';
import { BoardColumnContext } from '@/pipeline-progress/states/BoardColumnContext';
import { pipelineProgressIdScopedState } from '@/pipeline-progress/states/pipelineProgressIdScopedState';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { HookCompanyBoard } from '~/pages/opportunities/HookCompanyBoard';
import { RecoilScope } from '../modules/recoil-scope/components/RecoilScope';
import { CellContext } from '../modules/ui/tables/states/CellContext';
import { RowContext } from '../modules/ui/tables/states/RowContext';
import { ComponentStorybookLayout } from './ComponentStorybookLayout';
import { mockedClient } from './mockedClient';
export const RootDecorator: Decorator = (Story) => (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<Story />
</ApolloProvider>
</RecoilRoot>
);
export const ComponentDecorator: Decorator = (Story) => (
<ComponentStorybookLayout>
<Story />
</ComponentStorybookLayout>
);
export const CellPositionDecorator: Decorator = (Story) => (
<RecoilScope SpecificContext={RowContext}>
<RecoilScope SpecificContext={CellContext}>
<Story />
</RecoilScope>
</RecoilScope>
);
export const BoardDecorator: Decorator = (Story) => (
<>
<HookCompanyBoard />
<RecoilScope SpecificContext={CompanyBoardContext}>
<Story />
</RecoilScope>
</>
);
function HookLoadFakeBoardContextState() {
const [, setPipelineProgressId] = useRecoilScopedState(
pipelineProgressIdScopedState,
BoardCardContext,
);
const pipelineProgress =
pipeline?.pipelineStages?.[0]?.pipelineProgresses?.[0];
useEffect(() => {
setPipelineProgressId(pipelineProgress?.id || '');
}, [pipelineProgress?.id, setPipelineProgressId]);
return <></>;
}
export const BoardCardDecorator: Decorator = (Story) => {
return (
<>
<HookCompanyBoard />
<RecoilScope SpecificContext={CompanyBoardContext}>
<RecoilScope SpecificContext={BoardColumnContext}>
<RecoilScope SpecificContext={BoardCardContext}>
<HookLoadFakeBoardContextState />
<Story />
</RecoilScope>
</RecoilScope>
</RecoilScope>
</>
);
};