Docs/storybook improvements (#877)

* 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

front/src/pages/people/__stories__/People.filterBy.stories.tsx

@@ -3,23 +3,31 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import assert from 'assert';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
 
-const meta: Meta<typeof People> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/FilterBy',
   component: People,
+  decorators: [PageDecorator],
+  args: { currentPath: '/people' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export const Email: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -49,13 +57,9 @@ export const Email: Story = {
     expect(await canvas.findByText('Email:')).toBeInTheDocument();
     expect(await canvas.findByText('Contains al')).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 export const CompanyName: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -98,7 +102,4 @@ export const CompanyName: Story = {
     expect(await canvas.findByText('Company:')).toBeInTheDocument();
     expect(await canvas.findByText('Is Qonto')).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -7,26 +7,34 @@ import { graphql } from 'msw';
 import { UPDATE_ONE_PERSON } from '@/people/queries';
 import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { Company } from '~/generated/graphql';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { fetchOneFromData } from '~/testing/mock-data';
 import { mockedCompaniesData } from '~/testing/mock-data/companies';
 import { mockedPeopleData } from '~/testing/mock-data/people';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
 
-const meta: Meta<typeof People> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/Input',
   component: People,
+  decorators: [PageDecorator],
+  args: { currentPath: '/people' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export const InteractWithManyRows: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -64,13 +72,9 @@ export const InteractWithManyRows: Story = {
       canvas.queryByTestId('editable-cell-edit-mode-container'),
     ).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 export const CheckCheckboxes: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -95,9 +99,6 @@ export const CheckCheckboxes: Story = {
 
     expect(secondCheckbox.checked).toBe(false);
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 const editRelationMocks = (
@@ -185,7 +186,6 @@ const editRelationMocks = (
 ];
 
 export const EditRelation: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
@@ -229,7 +229,6 @@ export const EditRelation: Story = {
     });
   },
   parameters: {
-    actions: {},
     msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
       name: 'Airbnb',
       domainName: 'airbnb.com',
@@ -238,7 +237,6 @@ export const EditRelation: Story = {
 };
 
 export const SelectRelationWithKeys: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -274,7 +272,6 @@ export const SelectRelationWithKeys: Story = {
     expect(allAirbns.length).toBe(1);
   },
   parameters: {
-    actions: {},
     msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
       name: 'Aircall',
       domainName: 'aircall.io',

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -2,23 +2,31 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
 
-const meta: Meta<typeof People> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/SortBy',
   component: People,
+  decorators: [PageDecorator],
+  args: { currentPath: '/people' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export const Email: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -32,13 +40,9 @@ export const Email: Story = {
 
     expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 export const Cancel: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -59,7 +63,4 @@ export const Cancel: Story = {
       [],
     );
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

front/src/pages/people/__stories__/People.stories.tsx

@@ -1,22 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { People } from '../People';
 
-const meta: Meta<typeof People> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People',
   component: People,
+  decorators: [PageDecorator],
+  args: { currentPath: '/people' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export type Story = StoryObj<typeof People>;
 
-export const Default: Story = {
-  render: getRenderWrapperForPage(<People />, '/people'),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
+export const Default: Story = {};

front/src/pages/people/__stories__/Person.stories.tsx

@@ -1,30 +1,35 @@
 import { Route, Routes } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
-import {} from '@storybook/react';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPeopleData } from '~/testing/mock-data/people';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { PersonShow } from '../PersonShow';
 
-const meta: Meta<typeof PersonShow> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/Person',
   component: PersonShow,
+  decorators: [
+    (Story) => (
+      <Routes>
+        <Route path="/person/:personId" element={<Story />} />
+      </Routes>
+    ),
+    PageDecorator,
+  ],
+  args: { currentPath: `/person/${mockedPeopleData[0].id}` },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export type Story = StoryObj<typeof PersonShow>;
 
-export const Default: Story = {
-  render: getRenderWrapperForPage(
-    <Routes>
-      <Route path="/person/:personId" element={<PersonShow />} />
-    </Routes>,
-    `/person/${mockedPeopleData[0].id}`,
-  ),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
+export const Default: Story = {};