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/__stories__/App.darkMode.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta } from '@storybook/react';
-
-import { App } from '~/App';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-
-import { Story } from './App.stories';
-import { renderWithDarkMode } from './shared';
-
-const meta: Meta<typeof App> = {
-  title: 'App/App/DarkMode',
-  component: App,
-};
-
-export default meta;
-
-export const DarkMode: Story = {
-  render: () => renderWithDarkMode(true),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};

front/src/__stories__/App.stories.tsx

@@ -1,21 +1,52 @@
+import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
+import { useRecoilState } from 'recoil';
 
+import { currentUserState } from '@/auth/states/currentUserState';
+import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
 import { App } from '~/App';
+import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedUsersData } from '~/testing/mock-data/users';
 
-import { render } from './shared';
+const MockedAuth: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [, setCurrentUser] = useRecoilState(currentUserState);
+  const [, setIsAuthenticating] = useRecoilState(isAuthenticatingState);
+
+  setCurrentUser(mockedUsersData[0]);
+  setIsAuthenticating(false);
+
+  return <>{children}</>;
+};
 
 const meta: Meta<typeof App> = {
   title: 'App/App',
   component: App,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <FullHeightStorybookLayout>
+          <MockedAuth>
+            <Story />
+          </MockedAuth>
+        </FullHeightStorybookLayout>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 export type Story = StoryObj<typeof App>;
 
-export const Default: Story = {
-  render,
+export const Default: Story = {};
+
+export const DarkMode: Story = {
   parameters: {
-    msw: graphqlMocks,
+    theming: {
+      themeOverride: 'dark',
+    },
   },
 };

front/src/__stories__/shared.tsx

@@ -1,42 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider } from '@emotion/react';
-import { useRecoilState } from 'recoil';
-
-import { currentUserState } from '@/auth/states/currentUserState';
-import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
-import { darkTheme } from '@/ui/themes/themes';
-import { App } from '~/App';
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
-import { mockedUsersData } from '~/testing/mock-data/users';
-
-export const render = () => renderWithDarkMode(false);
-
-const MockedAuth: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [, setCurrentUser] = useRecoilState(currentUserState);
-  const [, setIsAuthenticating] = useRecoilState(isAuthenticatingState);
-
-  setCurrentUser(mockedUsersData[0]);
-  setIsAuthenticating(false);
-
-  return <>{children}</>;
-};
-
-export const renderWithDarkMode = (forceDarkMode?: boolean) => {
-  const AppInStoryBook = (
-    <FullHeightStorybookLayout>
-      <MockedAuth>
-        <App />
-      </MockedAuth>
-    </FullHeightStorybookLayout>
-  );
-
-  return (
-    <MemoryRouter>
-      {forceDarkMode ? (
-        <ThemeProvider theme={darkTheme}>{AppInStoryBook}</ThemeProvider>
-      ) : (
-        AppInStoryBook
-      )}
-    </MemoryRouter>
-  );
-};