From ebda46f748f762395c2c0e0dfadf0def4c470004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 12 Jul 2024 11:52:31 +0200 Subject: [PATCH] :sparkles: Support theme switching within Storybook --- frontend/.storybook/main.js | 6 +--- frontend/.storybook/preview.js | 32 +++++++++---------- frontend/package.json | 1 + frontend/resources/styles/common/base.scss | 4 +-- .../ui/ds/foundations/assets/icon.stories.jsx | 18 +++-------- .../ds/foundations/assets/raw_svg.stories.jsx | 14 +++----- .../typography/heading.stories.jsx | 6 +--- .../foundations/typography/text.stories.jsx | 32 ++++++++++++------- .../app/main/ui/ds/product/loader.stories.jsx | 7 +--- frontend/yarn.lock | 12 +++++++ 10 files changed, 62 insertions(+), 70 deletions(-) diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index 5d0033def..cd48f83bc 100644 --- a/frontend/.storybook/main.js +++ b/frontend/.storybook/main.js @@ -1,22 +1,18 @@ -import viteConfig from "../vite.config"; - /** @type { import('@storybook/react-vite').StorybookConfig } */ const config = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], staticDirs: ["../resources/public"], - addons: ["@storybook/addon-essentials"], + addons: ["@storybook/addon-essentials", "@storybook/addon-themes"], core: { builder: "@storybook/builder-vite", options: { viteConfigPath: "../vite.config.js", }, }, - framework: { name: "@storybook/react-vite", options: {}, }, - docs: {}, }; export default config; diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index 450e7738f..d15d79b78 100644 --- a/frontend/.storybook/preview.js +++ b/frontend/.storybook/preview.js @@ -1,5 +1,19 @@ +import { withThemeByClassName } from "@storybook/addon-themes"; + +export const decorators = [ + withThemeByClassName({ + themes: { + light: "light", + dark: "default", + }, + defaultTheme: "dark", + parentSelector: "body", + }), +]; + /** @type { import('@storybook/react').Preview } */ const preview = { + decorators: decorators, parameters: { controls: { matchers: { @@ -7,23 +21,7 @@ const preview = { date: /Date$/i, }, }, - backgrounds: { - default: "dark", - values: [ - { - name: "dark", - value: "#18181a", - }, - { - name: "light", - value: "#fff", - }, - { - name: "debug", - value: "#ccc", - }, - ], - }, + backgrounds: { disable: true }, }, }; diff --git a/frontend/package.json b/frontend/package.json index 49a085934..0ac3ff3ba 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -43,6 +43,7 @@ "devDependencies": { "@playwright/test": "1.44.1", "@storybook/addon-essentials": "^8.2.2", + "@storybook/addon-themes": "^8.2.2", "@storybook/blocks": "^8.2.2", "@storybook/react": "^8.2.2", "@storybook/react-vite": "^8.2.2", diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index 62b26317c..f4f67041f 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -19,8 +19,8 @@ $lh-133: 1.33; $size-4: 1rem; body { - background-color: var(--db-primary); - color: var(--df-primary); + background-color: var(--color-background-primary); + color: var(--color-foreground-primary); display: flex; flex-direction: column; font-family: "worksans", "vazirmatn", sans-serif; diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx index c6b93f266..7125a9b18 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx @@ -2,8 +2,7 @@ import * as React from "react"; import Components from "@target/components"; const { Icon } = Components; -const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } = - Components.storybook; +const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook; const { icons } = Components.meta; const iconList = Object.entries(icons) @@ -23,11 +22,12 @@ export default { control: { type: "radio" }, }, }, + render: ({ ...args }) => , }; export const All = { render: ({ size }) => ( - + <>

All Icons

Hover on an icon to see its ID.

@@ -43,7 +43,7 @@ export const All = { ))} - + ), args: { size: "m", @@ -55,11 +55,6 @@ export const All = { }; export const Default = { - render: ({ id, ...args }) => ( - - - - ), args: { id: "pin", }, @@ -69,11 +64,6 @@ export const Default = { }; export const CustomSize = { - render: ({ id, size, ...args }) => ( - - - - ), args: { id: "pin", size: "m", diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx index dcdf6e509..a3c408086 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx @@ -2,8 +2,7 @@ import * as React from "react"; import Components from "@target/components"; const { RawSvg } = Components; -const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } = - Components.storybook; +const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook; const { svgs } = Components.meta; const assetList = Object.entries(svgs) @@ -19,11 +18,12 @@ export default { control: { type: "select" }, }, }, + render: ({ ...args }) => , }; export const All = { render: ({}) => ( - + <>

All SVG Assets

Hover on an asset to see its ID.

@@ -36,7 +36,7 @@ export const All = { ))} - + ), parameters: { controls: { exclude: ["id"] }, @@ -45,12 +45,8 @@ export const All = { }; export const Default = { - render: ({ id, ...args }) => ( - - - - ), args: { id: "brand-gitlab", + width: 200, }, }; diff --git a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx index 7db98e008..5b68ccb81 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx @@ -2,7 +2,6 @@ import * as React from "react"; import Components from "@target/components"; const { Heading } = Components; -const { StoryWrapper } = Components.storybook; const { typography } = Components.meta; const typographyIds = typography.sort(); @@ -33,10 +32,7 @@ export default { }, }, render: ({ style, children, theme, ...args }) => ( - // TODO: this
is a hack until we have proper theming -
- {children} -
+ {children} ), }; diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx index 97f61f6f8..5de7f2d1d 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx @@ -17,22 +17,11 @@ export default { }, parameters: { controls: { exclude: ["children", "theme", "style"] }, - backgrounds: { default: "light" }, }, args: { children: "Lorem ipsum", - theme: "light", - style: { - color: "var(--color-foreground-primary)", - background: "var(--color-background-primary)", - }, }, - render: ({ style, children, theme, ...args }) => ( - // TODO: this
is a hack until we have proper theming -
- {children} -
- ), + render: ({ children, ...args }) => {children}, }; export const Default = { @@ -48,11 +37,20 @@ export const CustomTag = { }, }; +const docsParams = { + parameters: { + themes: { + themeOverride: "light", + }, + }, +}; + export const Display = { args: { typography: "display", children: "Display 400 36px/1.4 Work Sans", }, + ...docsParams, }; export const TitleLarge = { @@ -60,6 +58,7 @@ export const TitleLarge = { typography: "title-large", children: "Title Large 400 24px/1.4 Work Sans", }, + ...docsParams, }; export const TitleMedium = { @@ -67,6 +66,7 @@ export const TitleMedium = { typography: "title-medium", children: "Title Medium 400 20px/1.4 Work Sans", }, + ...docsParams, }; export const TitleSmall = { @@ -74,6 +74,7 @@ export const TitleSmall = { typography: "title-small", children: "Title Small 400 14px/1.2 Work Sans", }, + ...docsParams, }; export const HeadlineLarge = { @@ -81,6 +82,7 @@ export const HeadlineLarge = { typography: "headline-large", children: "Headline Large 400 18px/1.4 Work Sans", }, + ...docsParams, }; export const HeadlineMedium = { @@ -88,6 +90,7 @@ export const HeadlineMedium = { typography: "headline-medium", children: "Headline Medium 400 16px/1.4 Work Sans", }, + ...docsParams, }; export const HeadlineSmall = { @@ -95,6 +98,7 @@ export const HeadlineSmall = { typography: "headline-small", children: "Headline Small 500 12px/1.2 Work Sans", }, + ...docsParams, }; export const BodyLarge = { @@ -102,6 +106,7 @@ export const BodyLarge = { typography: "body-large", children: "Body Large 400 16px/1.4 Work Sans", }, + ...docsParams, }; export const BodyMedium = { @@ -109,6 +114,7 @@ export const BodyMedium = { typography: "body-medium", children: "Body Medium 400 14px/1.3 Work Sans", }, + ...docsParams, }; export const BodySmall = { @@ -116,6 +122,7 @@ export const BodySmall = { typography: "body-small", children: "Body Small 400 12px/1.3 Work Sans", }, + ...docsParams, }; export const CodeFont = { @@ -123,4 +130,5 @@ export const CodeFont = { typography: "code-font", children: "Code Font 400 12px/1.2 Roboto Mono", }, + ...docsParams, }; diff --git a/frontend/src/app/main/ui/ds/product/loader.stories.jsx b/frontend/src/app/main/ui/ds/product/loader.stories.jsx index 963c3f254..5e6d0558d 100644 --- a/frontend/src/app/main/ui/ds/product/loader.stories.jsx +++ b/frontend/src/app/main/ui/ds/product/loader.stories.jsx @@ -2,7 +2,6 @@ import * as React from "react"; import Components from "@target/components"; const { Loader } = Components; -const { StoryWrapper } = Components.storybook; export default { title: "Product/Loader", @@ -10,9 +9,5 @@ export default { }; export const Default = { - render: () => ( - - - - ), + render: () => , }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 23608b21e..94375d2bc 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2763,6 +2763,17 @@ __metadata: languageName: node linkType: hard +"@storybook/addon-themes@npm:^8.2.2": + version: 8.2.2 + resolution: "@storybook/addon-themes@npm:8.2.2" + dependencies: + ts-dedent: "npm:^2.0.0" + peerDependencies: + storybook: ^8.2.2 + checksum: 10c0/d3fc879e9d6b0659e2238b961bf69c701bd801990ccf18c8dc3c6270006caf9d5737a68049af2441767d9f473b9a3baf53bc7adb9d37e978d0b721f7fb4e3a76 + languageName: node + linkType: hard + "@storybook/addon-toolbars@npm:8.2.2": version: 8.2.2 resolution: "@storybook/addon-toolbars@npm:8.2.2" @@ -6599,6 +6610,7 @@ __metadata: dependencies: "@playwright/test": "npm:1.44.1" "@storybook/addon-essentials": "npm:^8.2.2" + "@storybook/addon-themes": "npm:^8.2.2" "@storybook/blocks": "npm:^8.2.2" "@storybook/react": "npm:^8.2.2" "@storybook/react-vite": "npm:^8.2.2"