From 7fc2e4981ccdcee59a04328927d71cb5a02f25a9 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Wed, 29 Jun 2022 09:11:32 +0200 Subject: [PATCH] feat: Stacked layout in Storybook for Chromatic (#2165) --- .changeset/soft-donuts-fix.md | 6 ++ config/storybook/main.ts | 1 - config/storybook/package.json | 2 +- config/storybook/preview.tsx | 110 ++++++++++++++++++++++++---------- pnpm-lock.yaml | 66 ++++---------------- themes/theme-b2b/src/index.ts | 4 +- 6 files changed, 101 insertions(+), 88 deletions(-) create mode 100644 .changeset/soft-donuts-fix.md diff --git a/.changeset/soft-donuts-fix.md b/.changeset/soft-donuts-fix.md new file mode 100644 index 0000000000..639ebd225f --- /dev/null +++ b/.changeset/soft-donuts-fix.md @@ -0,0 +1,6 @@ +--- +"@marigold/storybook-config": minor +"@marigold/theme-b2b": minor +--- + +feat: A stacked layout for Chromatic diff --git a/config/storybook/main.ts b/config/storybook/main.ts index 1555dab4b7..815d7b8048 100644 --- a/config/storybook/main.ts +++ b/config/storybook/main.ts @@ -27,7 +27,6 @@ const config: StorybookConfig = { docs: false, }, }, - 'storybook-addon-themes', '@storybook/addon-interactions', '@storybook/addon-a11y', ], diff --git a/config/storybook/package.json b/config/storybook/package.json index 1321d1c8c5..9bc8582ba6 100644 --- a/config/storybook/package.json +++ b/config/storybook/package.json @@ -34,8 +34,8 @@ "@storybook/testing-library": "0.0.11", "@types/react": "18", "babel-loader": "8.2.5", + "chromatic": "^6.6.3", "find-up": "5.0.0", - "storybook-addon-themes": "6.1.0", "tsconfig-paths-webpack-plugin": "3.5.2", "webpack": "4" }, diff --git a/config/storybook/preview.tsx b/config/storybook/preview.tsx index 4f347fe0d9..0a56ac468c 100644 --- a/config/storybook/preview.tsx +++ b/config/storybook/preview.tsx @@ -1,49 +1,97 @@ import React from 'react'; -import { addDecorator, addParameters } from '@storybook/react'; -// @ts-ignore (no types) -import { withThemes } from 'storybook-addon-themes/react'; +import isChromatic from 'chromatic/isChromatic'; +import type { StoryFn } from '@storybook/react'; -import { MarigoldProvider } from '@marigold/components'; +import { Box, MarigoldProvider } from '@marigold/components'; import b2bTheme from '@marigold/theme-b2b'; import coreTheme from '@marigold/theme-core'; import unicornTheme from '@marigold/theme-unicorn'; -// Theme Switch -const themes = { +// Helpers +// --------------- +const THEME = { b2b: b2bTheme, core: coreTheme, unicorn: unicornTheme, -} as const; +}; -type ThemeNames = keyof typeof themes; +type ThemeNames = keyof typeof THEME; -addDecorator(withThemes); -addParameters({ +const Frame = ({ children, title }: any) => ( + + {title} + + {children} + + +); + +// Parameters +// --------------- +export const parameters = { a11y: { element: '#root', - config: {}, - options: {}, }, controls: { expanded: true }, - themes: { - default: localStorage.getItem('marigold-storybook-current-theme') || 'b2b', - clearable: false, - onChange: ({ name }: { name: ThemeNames }) => { - localStorage.setItem('marigold-storybook-current-theme', name); +}; + +// Decorators +// --------------- +export const decorators = [ + (Story: StoryFn, { globals, parameters }: any) => { + const theme = isChromatic() + ? 'stacked' + : globals.theme || parameters.theme || 'b2b'; + + switch (theme) { + case 'stacked': { + return ( + <> + {Object.keys(THEME).map(key => ( + + + + + + ))} + + ); + } + default: { + return ( + + + + ); + } + } + }, +]; + +// Global Types +// --------------- +export const globalTypes = { + // Add theme selector to toolbar + theme: { + name: 'Theme', + description: 'Global theme for components', + toolbar: { + icon: 'paintbrush', + items: [ + ...Object.keys(THEME).map(key => ({ + value: key, + title: key, + })), + { value: 'stacked', title: 'stacked' }, + ], }, - Decorator: ({ - themeName, - children, - }: { - themeName: ThemeNames; - children: React.ReactChild; - }) => ( - {children} - ), - list: (Object.keys(themes) as ThemeNames[]).map(name => ({ - name, - color: themes[name].colors!.primary, - })), }, -}); +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef2ec2850a..2e68938b56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -159,10 +159,10 @@ importers: '@storybook/testing-library': 0.0.11 '@types/react': '18' babel-loader: 8.2.5 + chromatic: ^6.6.3 find-up: 5.0.0 react: 18.1.0 react-dom: 18.1.0 - storybook-addon-themes: 6.1.0 tsconfig-paths-webpack-plugin: 3.5.2 typescript: 4.6.4 webpack: '4' @@ -182,8 +182,8 @@ importers: '@storybook/testing-library': 0.0.11_ef5jwxihqo6n7gxfmzogljlgcm '@types/react': 18.0.12 babel-loader: 8.2.5_tlrwjfnbl7llelxqoonrmw2kde + chromatic: 6.6.3 find-up: 5.0.0 - storybook-addon-themes: 6.1.0_ef5jwxihqo6n7gxfmzogljlgcm tsconfig-paths-webpack-plugin: 3.5.2 webpack: 4.46.0 devDependencies: @@ -7513,28 +7513,6 @@ packages: util-deprecate: 1.0.2 dev: false - /@storybook/components/6.5.7_ef5jwxihqo6n7gxfmzogljlgcm: - resolution: - { - integrity: sha512-xSOaOK8q6bXYkmN4LZKucvXU2HRHqKwwTafFDh5yzsCSEB2VQIJlyo4ePVyv/GJgBUX6+WdSA7c5r5ePXK6IYQ==, - } - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@storybook/client-logger': 6.5.7 - '@storybook/csf': 0.0.2--canary.4566f4d.1 - '@storybook/theming': 6.5.7_ef5jwxihqo6n7gxfmzogljlgcm - '@types/react-syntax-highlighter': 11.0.5 - core-js: 3.22.8 - qs: 6.10.3 - react: 18.1.0 - react-dom: 18.1.0_react@18.1.0 - react-syntax-highlighter: 15.5.0_react@18.1.0 - regenerator-runtime: 0.13.9 - util-deprecate: 1.0.2 - dev: false - /@storybook/core-client/6.5.6_gcxiqyht5f6yd7nugdnl5aeqi4: resolution: { @@ -12685,6 +12663,16 @@ packages: engines: { node: '>=10' } dev: false + /chromatic/6.6.3: + resolution: + { + integrity: sha512-6FS39fAZnQL2A+bECyU469Qo4Th9EYpQ2ciIX/y1Qj+BRQib0N99hab34teYf2bVCD4+WuGMMTdUbt3rp3qcQw==, + } + hasBin: true + dependencies: + '@types/webpack-env': 1.17.0 + dev: false + /chrome-trace-event/1.0.3: resolution: { @@ -29075,36 +29063,6 @@ packages: } dev: false - /storybook-addon-themes/6.1.0_ef5jwxihqo6n7gxfmzogljlgcm: - resolution: - { - integrity: sha512-ZT8aNgrwFVNEOmOPBLNS0WBacjvMFo/bZ83P8MmsJ3Ewqt0AbmPioghTZccARUn/EQ+LrDxyh2D0QgmLaKo07Q==, - } - peerDependencies: - react: '*' - svelte: '*' - vue: '*' - peerDependenciesMeta: - react: - optional: true - svelte: - optional: true - vue: - optional: true - dependencies: - '@storybook/addons': 6.5.7_ef5jwxihqo6n7gxfmzogljlgcm - '@storybook/api': 6.5.7_ef5jwxihqo6n7gxfmzogljlgcm - '@storybook/components': 6.5.7_ef5jwxihqo6n7gxfmzogljlgcm - '@storybook/core-events': 6.5.7 - '@storybook/theming': 6.5.7_ef5jwxihqo6n7gxfmzogljlgcm - core-js: 3.22.8 - global: 4.4.0 - memoizerific: 1.11.3 - react: 18.1.0 - transitivePeerDependencies: - - react-dom - dev: false - /stream-browserify/2.0.2: resolution: { diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts index b5b563747d..28da13acdd 100644 --- a/themes/theme-b2b/src/index.ts +++ b/themes/theme-b2b/src/index.ts @@ -1,3 +1,5 @@ +import type { Theme } from '@marigold/components'; + import { colors } from './colors'; import * as components from './components'; @@ -5,7 +7,7 @@ export const webFontUrl = [ 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap', ] as const; -const theme: any = { +const theme: Theme = { space: { none: 0, xxsmall: 4,