Add new story for darkmode (#317)

* Add a new story for dark mode

* Reorganize storybook menu

* Fix command menu margins

* Fix tests

front/src/__stories__/App.darkMode.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/react';
+
+import { App } from '~/App';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedUserJWT } from '~/testing/mock-data/jwt';
+
+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),
+  loaders: [
+    async () => ({
+      accessTokenStored: window.localStorage.setItem(
+        'accessToken',
+        mockedUserJWT,
+      ),
+    }),
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/src/__stories__/App.mdx

@@ -0,0 +1,11 @@
+{ /* App.mdx */ }
+
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as App from './App.stories';
+
+<Meta of={App} />
+
+# App View
+
+<Canvas of={App.Default} />

front/src/__stories__/App.stories.tsx

@@ -1,14 +1,10 @@
-import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
 import type { Meta, StoryObj } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
 
 import { App } from '~/App';
-import { AuthProvider } from '~/providers/AuthProvider';
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedUserJWT } from '~/testing/mock-data/jwt';
-import { mockedClient } from '~/testing/mockedClient';
+
+import { render } from './shared';
 
 const meta: Meta<typeof App> = {
   title: 'App/App',
@@ -16,21 +12,7 @@ const meta: Meta<typeof App> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof App>;
-
-const render = () => (
-  <RecoilRoot>
-    <ApolloProvider client={mockedClient}>
-      <MemoryRouter>
-        <FullHeightStorybookLayout>
-          <AuthProvider>
-            <App />
-          </AuthProvider>
-        </FullHeightStorybookLayout>
-      </MemoryRouter>
-    </ApolloProvider>
-  </RecoilRoot>
-);
+export type Story = StoryObj<typeof App>;
 
 export const Default: Story = {
   render,

front/src/__stories__/shared.tsx

@@ -0,0 +1,36 @@
+import { MemoryRouter } from 'react-router-dom';
+import { ApolloProvider } from '@apollo/client';
+import { ThemeProvider } from '@emotion/react';
+import { RecoilRoot } from 'recoil';
+
+import { darkTheme } from '@/ui/layout/styles/themes';
+import { App } from '~/App';
+import { AuthProvider } from '~/providers/AuthProvider';
+import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
+import { mockedClient } from '~/testing/mockedClient';
+
+export const render = () => renderWithDarkMode(false);
+
+export const renderWithDarkMode = (forceDarkMode?: boolean) => {
+  const AppInStoryBook = (
+    <FullHeightStorybookLayout>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </FullHeightStorybookLayout>
+  );
+
+  return (
+    <RecoilRoot>
+      <ApolloProvider client={mockedClient}>
+        <MemoryRouter>
+          {forceDarkMode ? (
+            <ThemeProvider theme={darkTheme}>{AppInStoryBook}</ThemeProvider>
+          ) : (
+            AppInStoryBook
+          )}
+        </MemoryRouter>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+};