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/auth/__stories__/CreateProfile.stories.tsx

@@ -3,24 +3,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { graphql } from 'msw';
 
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 import { GET_CURRENT_USER } from '../../../modules/users/queries';
-import { mockedOnboardingUsersData } from '../../../testing/mock-data/users';
 import { CreateProfile } from '../CreateProfile';
 
-const meta: Meta<typeof CreateProfile> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateProfile',
   component: CreateProfile,
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof CreateProfile>;
-
-export const Default: Story = {
-  render: getRenderWrapperForPage(<CreateProfile />, '/create/profile'),
+  decorators: [PageDecorator],
+  args: { currentPath: '/create/profile' },
   parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
     msw: [
       graphql.query(
         getOperationName(GET_CURRENT_USER) ?? '',
@@ -34,6 +32,13 @@ export const Default: Story = {
       ),
     ],
   },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof CreateProfile>;
+
+export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await canvas.findByText('Create profile');

front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -3,24 +3,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { graphql } from 'msw';
 
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 import { GET_CURRENT_USER } from '../../../modules/users/queries';
-import { mockedOnboardingUsersData } from '../../../testing/mock-data/users';
 import { CreateWorkspace } from '../CreateWorkspace';
 
-const meta: Meta<typeof CreateWorkspace> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateWorkspace',
   component: CreateWorkspace,
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof CreateWorkspace>;
-
-export const Default: Story = {
-  render: getRenderWrapperForPage(<CreateWorkspace />, '/create/workspace'),
+  decorators: [PageDecorator],
+  args: { currentPath: '/create/workspace' },
   parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
     msw: [
       graphql.query(
         getOperationName(GET_CURRENT_USER) ?? '',
@@ -34,6 +32,13 @@ export const Default: Story = {
       ),
     ],
   },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof CreateWorkspace>;
+
+export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await canvas.findByText('Create your workspace');

front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,14 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/testing-library';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { SignInUp } from '../SignInUp';
 
-const meta: Meta<typeof SignInUp> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/SignInUp',
   component: SignInUp,
+  decorators: [PageDecorator],
+  args: { currentPath: '/sign-in' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+    cookie: {
+      tokenPair: '{}',
+    },
+  },
 };
 
 export default meta;
@@ -16,13 +28,6 @@ export default meta;
 export type Story = StoryObj<typeof SignInUp>;
 
 export const Default: Story = {
-  render: getRenderWrapperForPage(<SignInUp />, '/sign-in'),
-  parameters: {
-    msw: graphqlMocks,
-    cookie: {
-      tokenPair: '{}',
-    },
-  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const continueWithEmailButton = await canvas.findByText(

front/src/pages/companies/__stories__/Companies.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 { Companies } from '../Companies';
 
 import { Story } from './Companies.stories';
 
-const meta: Meta<typeof Companies> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/FilterBy',
   component: Companies,
+  decorators: [PageDecorator],
+  args: { currentPath: '/companies' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export const FilterByName: Story = {
-  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -50,13 +58,9 @@ export const FilterByName: Story = {
     expect(await canvas.findByText('Name:')).toBeInTheDocument();
     expect(await canvas.findByText('Contains Air')).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };
 
 export const FilterByAccountOwner: Story = {
-  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -99,7 +103,4 @@ export const FilterByAccountOwner: Story = {
     expect(await canvas.findByText('Account owner:')).toBeInTheDocument();
     expect(await canvas.findByText('Is Charles Test')).toBeInTheDocument();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -2,22 +2,30 @@ 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 { Companies } from '../Companies';
 
 import { Story } from './Companies.stories';
 
-const meta: Meta<typeof Companies> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/SortBy',
   component: Companies,
+  decorators: [PageDecorator],
+  args: { currentPath: '/companies' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export const SortByName: Story = {
-  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -36,7 +44,4 @@ export const SortByName: Story = {
 
     await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

front/src/pages/companies/__stories__/Companies.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 { Companies } from '../Companies';
 
-const meta: Meta<typeof Companies> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies',
   component: Companies,
+  decorators: [PageDecorator],
+  args: { currentPath: '/companies' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export type Story = StoryObj<typeof Companies>;
 
-export const Default: Story = {
-  render: getRenderWrapperForPage(<Companies />, '/companies'),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
+export const Default: Story = {};

front/src/pages/companies/__stories__/Company.stories.tsx

@@ -10,57 +10,53 @@ import {
 } from '@/activities/queries';
 import { CREATE_COMMENT_THREAD_WITH_COMMENT } from '@/activities/queries/create';
 import { GET_COMPANY } from '@/companies/queries';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedCommentThreads } from '~/testing/mock-data/comment-threads';
 import { mockedCompaniesData } from '~/testing/mock-data/companies';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { CompanyShow } from '../CompanyShow';
 
-const meta: Meta<typeof CompanyShow> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/Company',
   component: CompanyShow,
+  decorators: [PageDecorator],
+  args: { currentPath: '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: [
+      ...graphqlMocks,
+      graphql.query(
+        getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              findManyCommentThreads: mockedCommentThreads,
+            }),
+          );
+        },
+      ),
+      graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            findUniqueCompany: mockedCompaniesData[0],
+          }),
+        );
+      }),
+    ],
+  },
 };
 
 export default meta;
 
 export type Story = StoryObj<typeof CompanyShow>;
 
-const companyShowCommonGraphqlMocks = [
-  graphql.query(
-    getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
-    (req, res, ctx) => {
-      return res(
-        ctx.data({
-          findManyCommentThreads: mockedCommentThreads,
-        }),
-      );
-    },
-  ),
-  graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
-    return res(
-      ctx.data({
-        findUniqueCompany: mockedCompaniesData[0],
-      }),
-    );
-  }),
-];
-
-export const Default: Story = {
-  render: getRenderWrapperForPage(
-    <CompanyShow />,
-    '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
-  ),
-  parameters: {
-    msw: [...graphqlMocks, ...companyShowCommonGraphqlMocks],
-  },
-};
+export const Default: Story = {};
 
 export const EditNote: Story = {
-  render: getRenderWrapperForPage(
-    <CompanyShow />,
-    '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const firstNoteTitle = await canvas.findByText('My very first note');
@@ -84,8 +80,7 @@ export const EditNote: Story = {
   },
   parameters: {
     msw: [
-      ...graphqlMocks,
-      ...companyShowCommonGraphqlMocks,
+      ...meta.parameters?.msw,
       graphql.mutation(
         getOperationName(CREATE_COMMENT_THREAD_WITH_COMMENT) ?? '',
         (req, res, ctx) => {

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -1,14 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { Opportunities } from '../Opportunities';
 
-const meta: Meta<typeof Opportunities> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Opportunities/Default',
   component: Opportunities,
+  decorators: [PageDecorator],
+  args: { currentPath: '/opportunities' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
@@ -16,10 +25,6 @@ export default meta;
 export type Story = StoryObj<typeof Opportunities>;
 
 export const Default: Story = {
-  render: getRenderWrapperForPage(<Opportunities />, '/opportunities'),
-  parameters: {
-    msw: graphqlMocks,
-  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await canvas.findByText('All opportunities');

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 = {};

front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

@@ -1,35 +1,35 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { SettingsProfile } from '../SettingsProfile';
 
-const meta: Meta<typeof SettingsProfile> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
+  decorators: [PageDecorator],
+  args: { currentPath: '/settings/profile' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 
 export type Story = StoryObj<typeof SettingsProfile>;
 
-export const Default: Story = {
-  render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
+export const Default: Story = {};
 
 export const LogOut: Story = {
-  render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const logoutButton = await canvas.findByText('Logout');
     await logoutButton.click();
   },
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -1,14 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
 
-const meta: Meta<typeof SettingsWorkspaceMembers> = {
+const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspaceMembers',
   component: SettingsWorkspaceMembers,
+  decorators: [PageDecorator],
+  args: { currentPath: '/settings/workspace-members' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
@@ -16,13 +25,6 @@ export default meta;
 export type Story = StoryObj<typeof SettingsWorkspaceMembers>;
 
 export const Default: Story = {
-  render: getRenderWrapperForPage(
-    <SettingsWorkspaceMembers />,
-    '/settings/workspace-members',
-  ),
-  parameters: {
-    msw: graphqlMocks,
-  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await canvas.findByText('Copy link');