Storybook fix dark mode (#4865)

preview has now also a dark background & added a one click change theme
button

<img width="994" alt="Bildschirmfoto 2024-04-06 um 18 27 45"
src="https://github.com/twentyhq/twenty/assets/48770548/95f12617-e48f-4492-9b51-13410aff43ee">

package.json

@@ -209,7 +209,6 @@
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addon-themes": "^8.0.0",
     "@storybook/blocks": "^7.6.3",
     "@storybook/core-server": "7.6.3",
     "@storybook/jest": "^0.2.3",
@@ -299,6 +298,7 @@
     "storybook": "^7.6.3",
     "storybook-addon-cookie": "^3.2.0",
     "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook-dark-mode": "^4.0.1",
     "supertest": "^6.1.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.2.3",

packages/twenty-front/.storybook/main.ts

@@ -33,7 +33,7 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
-    '@storybook/addon-themes',
+    'storybook-dark-mode',
     'storybook-addon-cookie',
     'storybook-addon-pseudo-states',
   ],

packages/twenty-front/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+    [data-is-storybook="true"] {
+        background-color: transparent!important;
+    }
+</style>

packages/twenty-front/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { Preview } from '@storybook/react';
-import { Preview, ReactRenderer } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { useDarkMode } from 'storybook-dark-mode';
 
 import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
 import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
@@ -30,14 +30,16 @@ initialize({
 
 const preview: Preview = {
   decorators: [
-    withThemeFromJSXProvider<ReactRenderer>({
+    (Story) => {
-      themes: {
+      const mode = useDarkMode() ? 'Dark' : 'Light';
-        light: THEME_LIGHT,
+
-        dark: THEME_DARK,
+      const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
-      },
+      return (
-      defaultTheme: 'light',
+        <ThemeProvider theme={theme}>
-      Provider: ThemeProvider,
+          <Story />
-    }),
+        </ThemeProvider>
+      );
+    },
     RootDecorator,
     mswDecorator,
   ],

packages/twenty-front/src/testing/ComponentStorybookLayout.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 
 const StyledLayout = styled.div<{ width?: number }>`
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 5px;
 
   display: flex;

packages/twenty-ui/.storybook/main.ts

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
-    '@storybook/addon-themes',
+    'storybook-dark-mode',
     'storybook-addon-cookie',
     'storybook-addon-pseudo-states',
   ],

packages/twenty-ui/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+    [data-is-storybook="true"] {
+        background-color: transparent!important;
+    }
+</style>

packages/twenty-ui/.storybook/preview.ts

@@ -1,21 +0,0 @@
-import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import { Preview, ReactRenderer } from '@storybook/react';
-
-import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
-
-const preview: Preview = {
-  // TODO: Add toggle for darkTheme.
-  decorators: [
-    withThemeFromJSXProvider<ReactRenderer>({
-      themes: {
-        light: THEME_LIGHT,
-        dark: THEME_DARK,
-      },
-      defaultTheme: 'light',
-      Provider: ThemeProvider,
-    }),
-  ],
-};
-
-export default preview;

packages/twenty-ui/.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import { ThemeProvider } from '@emotion/react';
+import { Preview } from '@storybook/react';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      const mode = useDarkMode() ? 'Dark' : 'Light';
+
+      const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

yarn.lock

@@ -10502,7 +10502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.0.2":
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -13180,15 +13180,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-themes@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "@storybook/addon-themes@npm:8.0.0"
-  dependencies:
-    ts-dedent: "npm:^2.0.0"
-  checksum: 4a095d69c67a84c9f496573cb91c230b8ac82a5a94b79bed95b3c0986585e6d65ea6f1b85bc8c4e2bbac1a4270775e193708665ba1de656b4a3cd02a029ee6fb
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-toolbars@npm:7.6.7":
   version: 7.6.7
   resolution: "@storybook/addon-toolbars@npm:7.6.7"
@@ -13365,6 +13356,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:8.0.6":
+  version: 8.0.6
+  resolution: "@storybook/channels@npm:8.0.6"
+  dependencies:
+    "@storybook/client-logger": "npm:8.0.6"
+    "@storybook/core-events": "npm:8.0.6"
+    "@storybook/global": "npm:^5.0.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 1df4a4e7e3259b959c94d5d4275aeed9fa0c8c139654fb0a6b0c943ec508fa21dd3915cfb276e1f1f363ffd4359ac284e0e05460aa7cc94bd8e0c2138a26a527
+  languageName: node
+  linkType: hard
+
 "@storybook/cli@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/cli@npm:7.6.17"
@@ -13443,6 +13447,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:8.0.6":
+  version: 8.0.6
+  resolution: "@storybook/client-logger@npm:8.0.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 8b40a8031d6ec311b5761a95651090b1d07cbece014f623ce9d6e81f3fbb8b6bb75bc535cea88e2ecc4e52994ee718698aaae08d7311e597d926e9395c686b4d
+  languageName: node
+  linkType: hard
+
 "@storybook/codemod@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/codemod@npm:7.6.17"
@@ -13486,6 +13499,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/components@npm:^8.0.0":
+  version: 8.0.6
+  resolution: "@storybook/components@npm:8.0.6"
+  dependencies:
+    "@radix-ui/react-slot": "npm:^1.0.2"
+    "@storybook/client-logger": "npm:8.0.6"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.5"
+    "@storybook/theming": "npm:8.0.6"
+    "@storybook/types": "npm:8.0.6"
+    memoizerific: "npm:^1.11.3"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: a848bcce56920fa5894f6452cbba988a507d47b52a83992dd6dbe565ef83ec72bb441358c18667a7011eb2d73e14ea20daf27799847f51380696faa407de314a
+  languageName: node
+  linkType: hard
+
 "@storybook/core-client@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/core-client@npm:7.6.17"
@@ -13626,6 +13659,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:8.0.6, @storybook/core-events@npm:^8.0.0":
+  version: 8.0.6
+  resolution: "@storybook/core-events@npm:8.0.6"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  checksum: 4771b9c959cbb5434ed410a373100d2a012cec65e2c23205c22c27a5273297ff389d0dd507e20277006ac30f19135bb4505cadac052f2f43d91c2bd9063a5b70
+  languageName: node
+  linkType: hard
+
 "@storybook/core-server@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/core-server@npm:7.6.17"
@@ -13866,7 +13908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/icons@npm:^1.2.9":
+"@storybook/icons@npm:^1.2.5, @storybook/icons@npm:^1.2.9":
   version: 1.2.9
   resolution: "@storybook/icons@npm:1.2.9"
   peerDependencies:
@@ -13925,6 +13967,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager-api@npm:^8.0.0":
+  version: 8.0.6
+  resolution: "@storybook/manager-api@npm:8.0.6"
+  dependencies:
+    "@storybook/channels": "npm:8.0.6"
+    "@storybook/client-logger": "npm:8.0.6"
+    "@storybook/core-events": "npm:8.0.6"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.5"
+    "@storybook/router": "npm:8.0.6"
+    "@storybook/theming": "npm:8.0.6"
+    "@storybook/types": "npm:8.0.6"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    store2: "npm:^2.14.2"
+    telejson: "npm:^7.2.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 719bef42fee448286ca20f82e7a831ef073ee7732118e434930e25a1f9cd838e4be82e7c66e0d6803c4b40e8195a9e43c4b3b6d2b00ae65a4aef65a7d1674905
+  languageName: node
+  linkType: hard
+
 "@storybook/manager@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/manager@npm:7.6.17"
@@ -14169,6 +14234,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:8.0.6":
+  version: 8.0.6
+  resolution: "@storybook/router@npm:8.0.6"
+  dependencies:
+    "@storybook/client-logger": "npm:8.0.6"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+  checksum: 62a852b3e3f0f92d36a6b43cca350f4370a4f67e8964cb67aad8d1dfe3f7deab8561584ffa10aa69c0028edbc62b8e2fb0c1c949bdaf5a697238354edd43fb31
+  languageName: node
+  linkType: hard
+
 "@storybook/telemetry@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/telemetry@npm:7.6.17"
@@ -14301,6 +14377,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:8.0.6, @storybook/theming@npm:^8.0.0":
+  version: 8.0.6
+  resolution: "@storybook/theming@npm:8.0.6"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
+    "@storybook/client-logger": "npm:8.0.6"
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 4870e3d517f93f09937e5d53b1724ad1a39a8990ad232eb2bc1724fe70968cf6b51ffe73d010d0ddd5893d3e87981a491d2506114427dea97ee97e65e942e3e2
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/types@npm:7.6.17"
@@ -14337,6 +14433,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/types@npm:8.0.6":
+  version: 8.0.6
+  resolution: "@storybook/types@npm:8.0.6"
+  dependencies:
+    "@storybook/channels": "npm:8.0.6"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 160f94dfe1502475e3568956f181982e2a4e1ad2d2e1ae0443148490423f313b807139af436f6cfe956b89837a9e4523f45043e55494ef52b2ab833c1003606e
+  languageName: node
+  linkType: hard
+
 "@stylistic/eslint-plugin-js@npm:1.5.3, @stylistic/eslint-plugin-js@npm:^1.5.3":
   version: 1.5.3
   resolution: "@stylistic/eslint-plugin-js@npm:1.5.3"
@@ -43778,6 +43885,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-dark-mode@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "storybook-dark-mode@npm:4.0.1"
+  dependencies:
+    "@storybook/components": "npm:^8.0.0"
+    "@storybook/core-events": "npm:^8.0.0"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.5"
+    "@storybook/manager-api": "npm:^8.0.0"
+    "@storybook/theming": "npm:^8.0.0"
+    fast-deep-equal: "npm:^3.1.3"
+    memoizerific: "npm:^1.11.3"
+  checksum: 201e13e7bbed85ad7a52d65984da9347b0ecaf1458ec569a6645a5e6dc04638b8aa61ed52a56a775321f801f1a035444b6d0d715624aa217f7d6ea7671060d3e
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^7.6.3":
   version: 7.6.17
   resolution: "storybook@npm:7.6.17"
@@ -45675,7 +45798,6 @@ __metadata:
     "@storybook/addon-interactions": "npm:^7.6.7"
     "@storybook/addon-links": "npm:^7.6.7"
     "@storybook/addon-onboarding": "npm:^1.0.10"
-    "@storybook/addon-themes": "npm:^8.0.0"
     "@storybook/blocks": "npm:^7.6.3"
     "@storybook/core-server": "npm:7.6.3"
     "@storybook/icons": "npm:^1.2.9"
@@ -45878,6 +46000,7 @@ __metadata:
     storybook: "npm:^7.6.3"
     storybook-addon-cookie: "npm:^3.2.0"
     storybook-addon-pseudo-states: "npm:^2.1.2"
+    storybook-dark-mode: "npm:^4.0.1"
     stripe: "npm:^14.17.0"
     supertest: "npm:^6.1.3"
     ts-jest: "npm:^29.1.1"