✨ Support theme switching within Storybook

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;

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 },
   },
 };
 

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",

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;

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 }) => <Icon {...args} />,
 };
 
 export const All = {
   render: ({ size }) => (
-    <StoryWrapper theme="default">
+    <>
       <StoryHeader>
         <h1>All Icons</h1>
         <p>Hover on an icon to see its ID.</p>
@@ -43,7 +43,7 @@ export const All = {
           </StoryGridCell>
         ))}
       </StoryGrid>
-    </StoryWrapper>
+    </>
   ),
   args: {
     size: "m",
@@ -55,11 +55,6 @@ export const All = {
 };
 
 export const Default = {
-  render: ({ id, ...args }) => (
-    <StoryWrapper theme="default">
-      <Icon id={id} {...args} />
-    </StoryWrapper>
-  ),
   args: {
     id: "pin",
   },
@@ -69,11 +64,6 @@ export const Default = {
 };
 
 export const CustomSize = {
-  render: ({ id, size, ...args }) => (
-    <StoryWrapper theme="default">
-      <Icon id={id} size={size} {...args} />
-    </StoryWrapper>
-  ),
   args: {
     id: "pin",
     size: "m",

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 }) => <RawSvg {...args} />,
 };
 
 export const All = {
   render: ({}) => (
-    <StoryWrapper theme="light">
+    <>
       <StoryHeader>
         <h1>All SVG Assets</h1>
         <p>Hover on an asset to see its ID.</p>
@@ -36,7 +36,7 @@ export const All = {
           </StoryGridCell>
         ))}
       </StoryGrid>
-    </StoryWrapper>
+    </>
   ),
   parameters: {
     controls: { exclude: ["id"] },
@@ -45,12 +45,8 @@ export const All = {
 };
 
 export const Default = {
-  render: ({ id, ...args }) => (
-    <StoryWrapper theme="default">
-      <RawSvg id={id} {...args} width="200" />
-    </StoryWrapper>
-  ),
   args: {
     id: "brand-gitlab",
+    width: 200,
   },
 };

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 <div> is a hack until we have proper theming
-    <div style={style} className={theme}>
-      <Heading {...args}>{children}</Heading>
-    </div>
+    <Heading {...args}>{children}</Heading>
   ),
 };
 

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 <div> is a hack until we have proper theming
-    <div style={style} className={theme}>
-      <Text {...args}>{children}</Text>
-    </div>
-  ),
+  render: ({ children, ...args }) => <Text {...args}>{children}</Text>,
 };
 
 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,
 };

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: () => (
-    <StoryWrapper theme="default">
-      <Loader title="Loading" />
-    </StoryWrapper>
-  ),
+  render: () => <Loader title="Loading" />,
 };

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"