From 9b8c578dc33e692f431cf3207820995017472ffe Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 12 Aug 2024 18:49:27 -0300 Subject: [PATCH] chore: Broken dark mode in Storybook docs and canvasses (#1426) --- .../.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ .../fuselage-toastbar/.storybook/preview.tsx | 10 ++++++++ packages/fuselage-toastbar/package.json | 1 + .../fuselage/.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/fuselage/.storybook/preview.tsx | 14 ++++++++--- packages/layout/.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/layout/.storybook/preview.tsx | 10 ++++++++ packages/layout/package.json | 1 + .../.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/onboarding-ui/.storybook/preview.tsx | 10 ++++++++ yarn.lock | 2 ++ 11 files changed, 144 insertions(+), 4 deletions(-) create mode 100644 packages/fuselage-toastbar/.storybook/DocsContainer.tsx create mode 100644 packages/fuselage/.storybook/DocsContainer.tsx create mode 100644 packages/layout/.storybook/DocsContainer.tsx create mode 100644 packages/onboarding-ui/.storybook/DocsContainer.tsx diff --git a/packages/fuselage-toastbar/.storybook/DocsContainer.tsx b/packages/fuselage-toastbar/.storybook/DocsContainer.tsx new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ 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 +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/fuselage-toastbar/.storybook/preview.tsx b/packages/fuselage-toastbar/.storybook/preview.tsx index 98e05e34dc..84e45f20bc 100644 --- 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 index c68d5e73fe..f4bb0c72f0 100644 --- 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 new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ 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 +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/fuselage/.storybook/preview.tsx b/packages/fuselage/.storybook/preview.tsx index 41a655e7e0..018dcd49de 100644 --- 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 new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ 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 +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/layout/.storybook/preview.tsx b/packages/layout/.storybook/preview.tsx index 32ac3919ba..ff7c305e16 100644 --- a/packages/layout/.storybook/preview.tsx +++ b/packages/layout/.storybook/preview.tsx @@ -1,3 +1,4 @@ +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'; @@ -5,6 +6,7 @@ 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 index c1ce381bea..8d748af33a 100644 --- 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 new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ 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 +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/onboarding-ui/.storybook/preview.tsx b/packages/onboarding-ui/.storybook/preview.tsx index d47e975aed..dfd16aff53 100644 --- 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 index 8227bdd260..87f850ce9c 100644 --- 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"