chore: Broken dark mode in Storybook docs and canvasses (#1426)

RocketChat · Aug 12, 2024 · 9b8c578 · 9b8c578
1 parent 450f099
commit 9b8c578
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 4 deletions.
diff --git a/packages/fuselage-toastbar/.storybook/DocsContainer.tsx b/packages/fuselage-toastbar/.storybook/DocsContainer.tsx
@@ -0,0 +1,25 @@
+import { DocsContainer as BaseContainer } from '@storybook/blocks';
+import { addons } from '@storybook/preview-api';
+import { themes } from '@storybook/theming';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useState } from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+const DocsContainer = (
+  props: ComponentPropsWithoutRef<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;
diff --git a/packages/fuselage-toastbar/.storybook/preview.tsx b/packages/fuselage-toastbar/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import { DarkModeProvider } from '@rocket.chat/layout';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
@@ -6,6 +7,7 @@ import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import ToastBarProvider from '../src/ToastBarProvider';
+import DocsContainer from './DocsContainer';
 import logo from './logo.svg';
 
 import '@rocket.chat/fuselage/dist/fuselage.css';
@@ -21,6 +23,9 @@ export default {
         opacity: 0.5,
       },
     },
+    docs: {
+      container: DocsContainer,
+    },
     options: {
       storySort: {
         method: 'alphabetical',
@@ -29,12 +34,17 @@ export default {
     darkMode: {
       dark: {
         ...themes.dark,
+        appBg: surface.surface.dark.sidebar,
+        appContentBg: surface.surface.dark.light,
+        appPreviewBg: 'transparent',
+        barBg: surface.surface.dark.light,
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,
       },
       light: {
         ...themes.normal,
+        appPreviewBg: 'transparent',
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,

diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
@@ -49,6 +49,7 @@
     "@rocket.chat/eslint-config-alt": "workspace:~",
     "@rocket.chat/fuselage": "workspace:~",
     "@rocket.chat/fuselage-hooks": "workspace:~",
+    "@rocket.chat/fuselage-tokens": "workspace:~",
     "@rocket.chat/layout": "workspace:~",
     "@rocket.chat/prettier-config": "workspace:~",
     "@rocket.chat/styled": "workspace:~",

diff --git a/packages/fuselage/.storybook/DocsContainer.tsx b/packages/fuselage/.storybook/DocsContainer.tsx
@@ -0,0 +1,25 @@
+import { DocsContainer as BaseContainer } from '@storybook/blocks';
+import { addons } from '@storybook/preview-api';
+import { themes } from '@storybook/theming';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useState } from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+const DocsContainer = (
+  props: ComponentPropsWithoutRef<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;
diff --git a/packages/fuselage/.storybook/preview.tsx b/packages/fuselage/.storybook/preview.tsx
@@ -1,11 +1,12 @@
 import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints.json';
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import { PaletteStyleTag } from '../src';
-import { surface } from './helpers';
+import DocsContainer from './DocsContainer';
 import logo from './logo.svg';
 
 import 'normalize.css/normalize.css';
@@ -21,6 +22,9 @@ export default {
         opacity: 0.5,
       },
     },
+    docs: {
+      container: DocsContainer,
+    },
     options: {
       storySort: {
         order: [
@@ -54,15 +58,17 @@ export default {
     darkMode: {
       dark: {
         ...themes.dark,
-        appBg: surface.sidebar,
-        appContentBg: surface.main,
-        barBg: surface.main,
+        appBg: surface.surface.dark.sidebar,
+        appContentBg: surface.surface.dark.light,
+        appPreviewBg: 'transparent',
+        barBg: surface.surface.dark.light,
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,
       },
       light: {
         ...themes.normal,
+        appPreviewBg: 'transparent',
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,

diff --git a/packages/layout/.storybook/DocsContainer.tsx b/packages/layout/.storybook/DocsContainer.tsx
@@ -0,0 +1,25 @@
+import { DocsContainer as BaseContainer } from '@storybook/blocks';
+import { addons } from '@storybook/preview-api';
+import { themes } from '@storybook/theming';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useState } from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+const DocsContainer = (
+  props: ComponentPropsWithoutRef<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;
diff --git a/packages/layout/.storybook/preview.tsx b/packages/layout/.storybook/preview.tsx
@@ -1,10 +1,12 @@
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import { Suspense } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import DarkModeProvider from '../src/DarkModeProvider';
+import DocsContainer from './DocsContainer';
 import logo from './logo.svg';
 
 import '@rocket.chat/fuselage/dist/fuselage.css';
@@ -20,6 +22,9 @@ export default {
         opacity: 0.5,
       },
     },
+    docs: {
+      container: DocsContainer,
+    },
     options: {
       storySort: {
         method: 'alphabetical',
@@ -29,12 +34,17 @@ export default {
     darkMode: {
       dark: {
         ...themes.dark,
+        appBg: surface.surface.dark.sidebar,
+        appContentBg: surface.surface.dark.light,
+        appPreviewBg: 'transparent',
+        barBg: surface.surface.dark.light,
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,
       },
       light: {
         ...themes.normal,
+        appPreviewBg: 'transparent',
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,

diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "@rocket.chat/eslint-config-alt": "workspace:~",
     "@rocket.chat/fuselage": "workspace:~",
+    "@rocket.chat/fuselage-tokens": "workspace:~",
     "@rocket.chat/prettier-config": "workspace:~",
     "@storybook/addon-essentials": "~8.2.7",
     "@storybook/addon-webpack5-compiler-swc": "~1.0.5",

diff --git a/packages/onboarding-ui/.storybook/DocsContainer.tsx b/packages/onboarding-ui/.storybook/DocsContainer.tsx
@@ -0,0 +1,25 @@
+import { DocsContainer as BaseContainer } from '@storybook/blocks';
+import { addons } from '@storybook/preview-api';
+import { themes } from '@storybook/theming';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useState } from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+const DocsContainer = (
+  props: ComponentPropsWithoutRef<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;
diff --git a/packages/onboarding-ui/.storybook/preview.tsx b/packages/onboarding-ui/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import { DarkModeProvider } from '@rocket.chat/layout';
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
@@ -7,6 +8,7 @@ import { I18nextProvider, initReactI18next } from 'react-i18next';
 import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
+import DocsContainer from './DocsContainer';
 import logo from './logo.svg';
 
 import '@rocket.chat/fuselage/dist/fuselage.css';
@@ -40,6 +42,9 @@ export default {
         opacity: 0.5,
       },
     },
+    docs: {
+      container: DocsContainer,
+    },
     options: {
       storySort: {
         method: 'alphabetical',
@@ -48,12 +53,17 @@ export default {
     darkMode: {
       dark: {
         ...themes.dark,
+        appBg: surface.surface.dark.sidebar,
+        appContentBg: surface.surface.dark.light,
+        appPreviewBg: 'transparent',
+        barBg: surface.surface.dark.light,
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,
       },
       light: {
         ...themes.normal,
+        appPreviewBg: 'transparent',
         brandTitle: manifest.name,
         brandImage: logo,
         brandUrl: manifest.homepage,

diff --git a/yarn.lock b/yarn.lock
@@ -4568,6 +4568,7 @@ __metadata:
     "@rocket.chat/eslint-config-alt": "workspace:~"
     "@rocket.chat/fuselage": "workspace:~"
     "@rocket.chat/fuselage-hooks": "workspace:~"
+    "@rocket.chat/fuselage-tokens": "workspace:~"
     "@rocket.chat/layout": "workspace:~"
     "@rocket.chat/prettier-config": "workspace:~"
     "@rocket.chat/styled": "workspace:~"
@@ -4758,6 +4759,7 @@ __metadata:
   dependencies:
     "@rocket.chat/eslint-config-alt": "workspace:~"
     "@rocket.chat/fuselage": "workspace:~"
+    "@rocket.chat/fuselage-tokens": "workspace:~"
     "@rocket.chat/prettier-config": "workspace:~"
     "@storybook/addon-essentials": "npm:~8.2.7"
     "@storybook/addon-webpack5-compiler-swc": "npm:~1.0.5"