From 044dd203868a492d4129eb81a273c1e878473e73 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 22 Apr 2022 14:59:28 +0200 Subject: [PATCH 1/6] Move theme decorator into helper util --- .storybook/main.js | 4 +- .storybook/preview.js | 114 +----------------------------------- src/utils/story-helpers.tsx | 78 ++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 114 deletions(-) create mode 100644 src/utils/story-helpers.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 56d6b3d3c1a..7bace45c3fc 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,7 +3,7 @@ module.exports = { addons: [ '@storybook/addon-a11y', '@storybook/addon-links', - '@storybook/addon-essentials', + {name: '@storybook/addon-essentials', options: {backgrounds: false}}, 'storybook-addon-performance/register', ...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic' ? ['@whitespace/storybook-addon-html'] @@ -13,4 +13,4 @@ module.exports = { options.plugins.push(['open-source', {editor: process.env.NODE_ENV === 'production' ? 'github' : 'vscode'}]) return options } -} \ No newline at end of file +} diff --git a/.storybook/preview.js b/.storybook/preview.js index 7a45a2396fc..cf3e0091f3b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,118 +1,8 @@ import {addons} from '@storybook/addons' -import {ThemeProvider, themeGet, theme, BaseStyles} from '../src' -import styled, {createGlobalStyle} from 'styled-components' -import {addDecorator} from '@storybook/react' import {withPerformance} from 'storybook-addon-performance' +import {withThemeProvider, toolbarTypes} from '../src/utils/story-helpers' -addDecorator(withPerformance) - -// set global theme styles for each story -const GlobalStyle = createGlobalStyle` - body { - background-color: ${themeGet('colors.canvas.default')}; - color: ${themeGet('colors.fg.default')}; - } -` - -// only remove padding for multi-theme view grid -const GlobalStyleMultiTheme = createGlobalStyle` - body { - padding: 0 !important; - } -` - -// duo theme view, this can be extended for more themes -const Wrapper = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 100vh; -` - -// instead of global theme, only theme wrapper for each story -const ThemedSectionStyle = styled.div` - background-color: ${themeGet('colors.canvas.default')}; - color: ${themeGet('colors.fg.default')}; - padding: 1rem; -` - -export const globalTypes = { - colorMode: { - name: 'Color mode', - description: 'Color mode (day, night, auto, all)', - defaultValue: 'day', - toolbar: { - icon: 'paintbrush', - // array of colorMode items - items: ['day', 'night', 'auto', 'all'], - showName: true - } - }, - dayScheme: { - name: 'Day color scheme', - description: 'Day color scheme', - defaultValue: 'light', - toolbar: { - icon: 'circlehollow', - items: Object.keys(theme.colorSchemes), - showName: true - } - }, - nightScheme: { - name: 'Night color scheme', - description: 'Night color scheme', - defaultValue: 'dark', - toolbar: { - icon: 'circle', - items: Object.keys(theme.colorSchemes), - showName: true - } - } -} - -// context.globals.X references items in globalTypes -const withThemeProvider = (Story, context) => { - if (context.globals.colorMode === 'all') { - return ( - - - - - - - - - - -
- -
- - - - - ) - } - - return ( - - - -
- -
- - - ) -} - +export const globalTypes = toolbarTypes export const decorators = [withThemeProvider, withPerformance] addons.setConfig({ diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx new file mode 100644 index 00000000000..2c2c9f51e51 --- /dev/null +++ b/src/utils/story-helpers.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import {Box, ThemeProvider, theme, themeGet, BaseStyles} from '../index' +import {createGlobalStyle} from 'styled-components' +import {StoryContext} from '@storybook/addons' + +// set global theme styles for each story +const GlobalStyle = createGlobalStyle` + body { + background-color: ${themeGet('colors.canvas.default')}; + color: ${themeGet('colors.fg.default')}; + } +` + +// only remove padding for multi-theme view grid +const GlobalStyleMultiTheme = createGlobalStyle` + body { + padding: 0 !important; + } +` + +export const withThemeProvider = (Story: React.FC, context: StoryContext) => { + const {colorScheme} = context.globals + + if (colorScheme === 'all') { + return ( + + + {Object.keys(theme.colorSchemes).map(scheme => ( + + + +
+ +
+ + + + ))} + + ) + } + + return ( + + + +
+ +
+ + + ) +} + +export const toolbarTypes = { + colorScheme: { + name: 'Color scheme', + description: 'Switch color scheme', + defaultValue: 'light', + toolbar: { + icon: 'photo', + items: [...Object.keys(theme.colorSchemes), 'all'], + showName: true + } + } +} From 80d7fff82467c51172f8f106918b274369eb2e0d Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 22 Apr 2022 15:17:23 +0200 Subject: [PATCH 2/6] fix height --- src/utils/story-helpers.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index 2c2c9f51e51..e89026be9dc 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -37,6 +37,7 @@ export const withThemeProvider = (Story: React.FC, context: StoryC Date: Fri, 22 Apr 2022 15:59:45 +0200 Subject: [PATCH 3/6] is addons import the problem? --- src/utils/story-helpers.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index e89026be9dc..87d79d6f133 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -1,7 +1,6 @@ import React from 'react' import {Box, ThemeProvider, theme, themeGet, BaseStyles} from '../index' import {createGlobalStyle} from 'styled-components' -import {StoryContext} from '@storybook/addons' // set global theme styles for each story const GlobalStyle = createGlobalStyle` @@ -18,6 +17,9 @@ const GlobalStyleMultiTheme = createGlobalStyle` } ` +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type StoryContext = Record + export const withThemeProvider = (Story: React.FC, context: StoryContext) => { const {colorScheme} = context.globals From 2830b36775bf45ce828b3f7ae3ce2e1df9ffe3cf Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 22 Apr 2022 16:06:50 +0200 Subject: [PATCH 4/6] does this work better for consumer-tests? --- src/utils/story-helpers.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index 87d79d6f133..369d65002f0 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -1,6 +1,7 @@ import React from 'react' import {Box, ThemeProvider, theme, themeGet, BaseStyles} from '../index' import {createGlobalStyle} from 'styled-components' +import {StoryContext} from '@storybook/addons/dist/ts3.9/public_api' // set global theme styles for each story const GlobalStyle = createGlobalStyle` @@ -17,9 +18,6 @@ const GlobalStyleMultiTheme = createGlobalStyle` } ` -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type StoryContext = Record - export const withThemeProvider = (Story: React.FC, context: StoryContext) => { const {colorScheme} = context.globals From 9839140dcd37e7ebf784d24caa189cf84cb31cd4 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 22 Apr 2022 16:13:31 +0200 Subject: [PATCH 5/6] yep, deep import doesn't work either --- src/utils/story-helpers.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index 369d65002f0..e881d74dc3e 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -1,7 +1,6 @@ import React from 'react' import {Box, ThemeProvider, theme, themeGet, BaseStyles} from '../index' import {createGlobalStyle} from 'styled-components' -import {StoryContext} from '@storybook/addons/dist/ts3.9/public_api' // set global theme styles for each story const GlobalStyle = createGlobalStyle` @@ -18,6 +17,10 @@ const GlobalStyleMultiTheme = createGlobalStyle` } ` +// we don't import StoryContext from storybook because of exports that conflict +// with primer/react more: https://github.com/primer/react/runs/6129115026?check_suite_focus=true +type StoryContext = Record & {globals: {colorScheme: string}} + export const withThemeProvider = (Story: React.FC, context: StoryContext) => { const {colorScheme} = context.globals From 17468f97b308fe1ea51d16ff4232ecda4e7837a2 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 26 Apr 2022 17:07:22 +0200 Subject: [PATCH 6/6] add option to disable theme decorator on a story level --- src/stories/ThemeProvider.stories.tsx | 1 + src/utils/story-helpers.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/stories/ThemeProvider.stories.tsx b/src/stories/ThemeProvider.stories.tsx index 1e927de7534..a091ad19a58 100644 --- a/src/stories/ThemeProvider.stories.tsx +++ b/src/stories/ThemeProvider.stories.tsx @@ -8,6 +8,7 @@ import {createGlobalStyle} from 'styled-components' export default { title: 'Generic behaviors/ThemeProvider', component: ThemeProvider, + parameters: {disableThemeDecorator: true}, argTypes: { theme: { table: { diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index e881d74dc3e..a050824e44e 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -19,9 +19,12 @@ const GlobalStyleMultiTheme = createGlobalStyle` // we don't import StoryContext from storybook because of exports that conflict // with primer/react more: https://github.com/primer/react/runs/6129115026?check_suite_focus=true -type StoryContext = Record & {globals: {colorScheme: string}} +type StoryContext = Record & {globals: {colorScheme: string}; parameters: Record} export const withThemeProvider = (Story: React.FC, context: StoryContext) => { + // used for testing ThemeProvider.stories.tsx + if (context.parameters.disableThemeDecorator) return + const {colorScheme} = context.globals if (colorScheme === 'all') {