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/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) => {