From 12caffd5d34273f29ef1a0391299c2f336afddfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20L=C3=B3pez=20=C3=9Abeda?= Date: Wed, 30 Oct 2024 11:33:31 +0100 Subject: [PATCH 1/2] build: simplify theming on sb --- .storybook/preview.tsx | 54 +++-------------------------- .storybook/theming/DocContainer.tsx | 13 +++++++ .storybook/theming/constants.ts | 5 +++ .storybook/theming/decorator.ts | 15 ++++++++ .storybook/theming/index.ts | 4 +++ .storybook/theming/ui.tsx | 24 +++++++++++++ 6 files changed, 66 insertions(+), 49 deletions(-) create mode 100644 .storybook/theming/DocContainer.tsx create mode 100644 .storybook/theming/constants.ts create mode 100644 .storybook/theming/decorator.ts create mode 100644 .storybook/theming/index.ts create mode 100644 .storybook/theming/ui.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 754459b..d1a0a1c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; -import { ThemeProvider } from 'styled-components'; -import { Preview, ReactRenderer } from '@storybook/react'; -import { DocsContainer } from '@storybook/blocks'; -import { create } from '@storybook/theming/create'; -import { withThemeFromJSXProvider } from '@storybook/addon-themes'; - -import { light, dark } from '@devoinc/genesys-brand-devo'; +import { Preview } from '@storybook/react'; +import { PREFER_UI_THEME, DocContainer, themeDecorator } from './theming'; import '@devoinc/genesys-base-styles/dist/css/styles.min.css'; import './preview.scss'; @@ -25,51 +20,12 @@ export const createCustomComponents = (tagsList: (keyof React.ReactHTML)[]) => { }, {}); }; -const customLightTheme = create({ - base: 'light', - fontBase: '"Poppins", sans-serif', - fontCode: '"Mono Font", monospace', - textColor: '#5B6870', - textInverseColor: 'rgba(255,255,255,0.9)', -}); -const customDarkTheme = create({ - base: 'dark', - fontBase: '"Poppins", sans-serif', - fontCode: '"Mono Font", monospace', -}); - -// const THEME_CHANNEL = 'globalsUpdated'; - -const preferTheme = - window?.matchMedia && - window?.matchMedia('(prefers-color-scheme: dark)')?.matches - ? 'dark' - : 'light'; - const preview: Preview = { - decorators: [ - // Themes - withThemeFromJSXProvider({ - themes: { - light, - dark, - }, - defaultTheme: preferTheme, - Provider: ThemeProvider, - }), - ], - + decorators: themeDecorator, parameters: { docs: { - theme: preferTheme === 'dark' ? customDarkTheme : customLightTheme, - container: ({ context, children }) => ( - // Theme for the doc -
- - {children} - -
- ), + theme: PREFER_UI_THEME, + container: DocContainer, components: createCustomComponents([ 'div', 'h1', diff --git a/.storybook/theming/DocContainer.tsx b/.storybook/theming/DocContainer.tsx new file mode 100644 index 0000000..45d23db --- /dev/null +++ b/.storybook/theming/DocContainer.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { DocsContainer as SBDocsContainer } from '@storybook/blocks'; + +import { light } from '@devoinc/genesys-brand-devo'; + +export const DocContainer = ({ context, children }) => ( +
+ + {children} + +
+); diff --git a/.storybook/theming/constants.ts b/.storybook/theming/constants.ts new file mode 100644 index 0000000..9f89673 --- /dev/null +++ b/.storybook/theming/constants.ts @@ -0,0 +1,5 @@ +export const PREFER_THEME = + window?.matchMedia && + window?.matchMedia('(prefers-color-scheme: dark)')?.matches + ? 'dark' + : 'light'; diff --git a/.storybook/theming/decorator.ts b/.storybook/theming/decorator.ts new file mode 100644 index 0000000..0891f02 --- /dev/null +++ b/.storybook/theming/decorator.ts @@ -0,0 +1,15 @@ +import { ReactRenderer } from '@storybook/react'; +import { withThemeFromJSXProvider } from '@storybook/addon-themes'; +import { light, dark } from '@devoinc/genesys-brand-devo'; +import { ThemeProvider } from 'styled-components'; + +import { PREFER_THEME } from './constants'; + +export const themeDecorator = withThemeFromJSXProvider({ + themes: { + light, + dark, + }, + defaultTheme: PREFER_THEME, + Provider: ThemeProvider, +}); diff --git a/.storybook/theming/index.ts b/.storybook/theming/index.ts new file mode 100644 index 0000000..5c19c8e --- /dev/null +++ b/.storybook/theming/index.ts @@ -0,0 +1,4 @@ +export * from './ui'; +export * from './decorator'; +export * from './constants'; +export * from './DocContainer'; diff --git a/.storybook/theming/ui.tsx b/.storybook/theming/ui.tsx new file mode 100644 index 0000000..ef866c8 --- /dev/null +++ b/.storybook/theming/ui.tsx @@ -0,0 +1,24 @@ +import { create } from '@storybook/theming/create'; + +import { PREFER_THEME } from './constants'; + +const uiLightTheme = create({ + base: 'light', + fontBase: '"Poppins", sans-serif', + fontCode: '"Mono Font", monospace', + textColor: '#5B6870', + textInverseColor: 'rgba(255,255,255,0.9)', +}); + +const uiDarkTheme = create({ + base: 'dark', + fontBase: '"Poppins", sans-serif', + fontCode: '"Mono Font", monospace', +}); + +export const uiThemeMap = { + light: uiLightTheme, + dark: uiDarkTheme, +}; + +export const PREFER_UI_THEME = uiThemeMap[PREFER_THEME]; From 116fd6903ef2bb4952c37d17bc7495006010d90a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20L=C3=B3pez=20=C3=9Abeda?= Date: Wed, 30 Oct 2024 13:02:53 +0100 Subject: [PATCH 2/2] build: prefer light theme always --- .storybook/theming/decorator.ts | 4 ++-- .storybook/theming/ui.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.storybook/theming/decorator.ts b/.storybook/theming/decorator.ts index 0891f02..c9ca4fc 100644 --- a/.storybook/theming/decorator.ts +++ b/.storybook/theming/decorator.ts @@ -3,13 +3,13 @@ import { withThemeFromJSXProvider } from '@storybook/addon-themes'; import { light, dark } from '@devoinc/genesys-brand-devo'; import { ThemeProvider } from 'styled-components'; -import { PREFER_THEME } from './constants'; +// import { PREFER_THEME } from './constants'; export const themeDecorator = withThemeFromJSXProvider({ themes: { light, dark, }, - defaultTheme: PREFER_THEME, + defaultTheme: 'light', // PREFER_THEME, Provider: ThemeProvider, }); diff --git a/.storybook/theming/ui.tsx b/.storybook/theming/ui.tsx index ef866c8..2803e6a 100644 --- a/.storybook/theming/ui.tsx +++ b/.storybook/theming/ui.tsx @@ -1,6 +1,6 @@ import { create } from '@storybook/theming/create'; -import { PREFER_THEME } from './constants'; +// import { PREFER_THEME } from './constants'; const uiLightTheme = create({ base: 'light', @@ -21,4 +21,4 @@ export const uiThemeMap = { dark: uiDarkTheme, }; -export const PREFER_UI_THEME = uiThemeMap[PREFER_THEME]; +export const PREFER_UI_THEME = uiThemeMap.light; // uiThemeMap[PREFER_THEME];