Add new story for darkmode (#317)

* Add a new story for dark mode

* Reorganize storybook menu

* Fix command menu margins

* Fix tests

front/.storybook/preview.ts

@@ -4,7 +4,6 @@ import { ThemeProvider } from '@emotion/react';
 import { withThemeFromJSXProvider } from "@storybook/addon-styling";
 import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes';
 
-
 initialize();
 
 const preview: Preview = {

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>
+  );
+};

front/src/modules/comments/components/__stories__/CommentChip.stories.tsx

@@ -7,7 +7,7 @@ import { CellCommentChip } from '../CellCommentChip';
 import { CommentChip } from '../CommentChip';
 
 const meta: Meta<typeof CellCommentChip> = {
-  title: 'Comments/CellCommentChip',
+  title: 'Modules/Comments/CellCommentChip',
   component: CellCommentChip,
 };
 

front/src/modules/comments/components/__stories__/CommentHeader.stories.tsx

@@ -9,7 +9,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { CommentHeader } from '../CommentHeader';
 
 const meta: Meta<typeof CommentHeader> = {
-  title: 'Comments/CommentHeader',
+  title: 'Modules/Comments/CommentHeader',
   component: CommentHeader,
 };
 

front/src/modules/comments/components/__stories__/CommentThreadRelationPicker.stories.tsx

@@ -8,7 +8,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { CommentThreadRelationPicker } from '../CommentThreadRelationPicker';
 
 const meta: Meta<typeof CommentThreadRelationPicker> = {
-  title: 'Comments/CommentThreadRelationPicker',
+  title: 'Modules/Comments/CommentThreadRelationPicker',
   component: CommentThreadRelationPicker,
   parameters: {
     msw: graphqlMocks,

front/src/modules/search/components/CommandMenuStyles.tsx

@@ -10,7 +10,6 @@ export const StyledDialog = styled(Command.Dialog)`
   max-width: 640px;
   overflow: hidden;
   padding: 0;
-  padding: 25px;
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);

front/src/modules/search/components/__stories__/CommandMenu.stories.tsx

@@ -5,7 +5,7 @@ import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 import { CommandMenu } from '../CommandMenu';
 
 const meta: Meta<typeof CommandMenu> = {
-  title: 'Pages/Search/CommandMenu',
+  title: 'Modules/Search/CommandMenu',
   component: CommandMenu,
 };
 

front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx

@@ -16,7 +16,7 @@ import { DropdownMenuSelectableItem } from '../DropdownMenuSelectableItem';
 import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
 
 const meta: Meta<typeof DropdownMenu> = {
-  title: 'Components/DropdownMenu',
+  title: 'UI/Menu/DropdownMenu',
   component: DropdownMenu,
 };
 

front/src/modules/ui/layout/states/isThemeEnabledState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const isThemeEnabledState = atom<boolean>({
-  key: 'isThemeEnabledState',
-  default: true,
-});

front/src/modules/users/components/__stories__/Avatar.stories.tsx

@@ -5,7 +5,7 @@ import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 import { Avatar } from '../Avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Components/Common/Avatar',
+  title: 'Modules/Users/Avatar',
   component: Avatar,
 };
 

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

@@ -7,7 +7,7 @@ import { SettingsProfile } from '../SettingsProfile';
 import { render } from './shared';
 
 const meta: Meta<typeof SettingsProfile> = {
-  title: 'Pages/SettingsProfile',
+  title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
 };