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(