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

Docs/storybook improvements (#877)

Browse Source 
* docs: use PageDecorator

* docs: use decorators in TableHeader stories

* docs: use theming parameter in App stories

* docs: enable auto-generated docs for stories

Closes #702
This commit is contained in:
Thaïs
2023-07-24 20:06:37 +02:00
committed by GitHub
parent 07180af8c0
commit c16d420d17
23 changed files with 339 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/testing/decorators/PageDecorator.tsx Normal file
View File

@ -0,0 +1,30 @@
import { HotkeysProvider } from 'react-hotkeys-hook';
import { MemoryRouter } from 'react-router-dom';
import { Decorator } from '@storybook/react';
import { ClientConfigProvider } from '../../modules/client-config/components/ClientConfigProvider';
import { INITIAL_HOTKEYS_SCOPES } from '../../modules/ui/hotkey/constants';
import { DefaultLayout } from '../../modules/ui/layout/components/DefaultLayout';
import { UserProvider } from '../../modules/users/components/UserProvider';
import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
export type PageDecoratorArgs = { currentPath: string };
export const PageDecorator: Decorator<{ currentPath: string }> = (
Story,
{ args },
) => (
<UserProvider>
<ClientConfigProvider>
<HotkeysProvider initiallyActiveScopes={INITIAL_HOTKEYS_SCOPES}>
<MemoryRouter initialEntries={[args.currentPath]}>
<FullHeightStorybookLayout>
<DefaultLayout>
<Story />
</DefaultLayout>
</FullHeightStorybookLayout>
</MemoryRouter>
</HotkeysProvider>
</ClientConfigProvider>
</UserProvider>
);

55
front/src/testing/renderWrappers.tsx
View File

@ -1,55 +0,0 @@
import React from 'react';
import { HotkeysProvider } from 'react-hotkeys-hook';
import { MemoryRouter } from 'react-router-dom';
import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
import { INITIAL_HOTKEYS_SCOPES } from '@/ui/hotkey/constants';
import { DefaultLayout } from '@/ui/layout/components/DefaultLayout';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { HooksEntityTable } from '@/ui/table/components/HooksEntityTable';
import { TableContext } from '@/ui/table/states/TableContext';
import { UserProvider } from '@/users/components/UserProvider';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { ComponentStorybookLayout } from './ComponentStorybookLayout';
import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
export function getRenderWrapperForPage(
children: React.ReactElement,
currentPath: string,
) {
return function render() {
return (
<UserProvider>
<ClientConfigProvider>
<HotkeysProvider initiallyActiveScopes={INITIAL_HOTKEYS_SCOPES}>
<MemoryRouter initialEntries={[currentPath]}>
<FullHeightStorybookLayout>
<DefaultLayout>{children}</DefaultLayout>
</FullHeightStorybookLayout>
</MemoryRouter>
</HotkeysProvider>
</ClientConfigProvider>
</UserProvider>
);
};
}
export function getRenderWrapperForEntityTableComponent(
children: React.ReactElement,
) {
return function Render() {
return (
<RecoilScope SpecificContext={TableContext}>
{/*
TODO: add company mocked loader
<CompanyEntityTableData */}
<HooksEntityTable
availableFilters={companiesFilters}
numberOfColumns={5}
/>
<ComponentStorybookLayout>{children}</ComponentStorybookLayout>
</RecoilScope>
);
};
}