Merge pull request #4874 from penpot/ladybenko-8008-upgrade-storybook8

Upgrade to Storybook 8

frontend/.storybook/main.js

@@ -1,14 +1,22 @@
+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"],
+  core: {
+    builder: "@storybook/builder-vite",
+    options: {
+      viteConfigPath: "../vite.config.js",
+    },
+  },
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
+
-    autodocs: "tag",
+  docs: {},
-  },
 };
 export default config;

frontend/.storybook/preview.js

@@ -1,7 +1,6 @@
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

frontend/package.json

@@ -36,15 +36,16 @@
     "e2e:server": "node ./scripts/e2e-server.js",
     "e2e:test": "playwright test --project default",
     "storybook:compile": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook",
-    "storybook:watch": "yarn run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"storybook dev -p 6006\" \"yarn run watch\"",
+    "storybook:server": "yarn run storybook dev -p 6006 --no-open",
+    "storybook:watch": "yarn run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch\"",
     "storybook:build": "yarn run storybook:compile && storybook build"
   },
   "devDependencies": {
     "@playwright/test": "1.44.1",
-    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/blocks": "^7.6.17",
+    "@storybook/blocks": "^8.2.1",
-    "@storybook/react": "^7.6.17",
+    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^7.6.17",
+    "@storybook/react-vite": "^8.2.1",
     "@types/node": "^20.11.20",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
@@ -79,7 +80,7 @@
     "sass": "^1.77.4",
     "sass-embedded": "^1.77.2",
     "shadow-cljs": "2.28.8",
-    "storybook": "^7.6.17",
+    "storybook": "^8.2.1",
     "svg-sprite": "^2.0.4",
     "typescript": "^5.4.5",
     "vite": "^5.1.4",

frontend/src/app/main/ui/ds/foundations/typography/heading.mdx

@@ -5,19 +5,14 @@ import * as HeadingStories from "./heading.stories";
 
 # Headings
 
-This component will add a heading tag element to our code.
+This component will add a heading tag element (ie. `<h1>`, `<h2>`, etc.) to our code.
 
 ## Technical notes
 
-This components accepts to props:
-
-- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
-- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
-
-You can check passed props to renderized components on hover `level / typography`;
-
 ### Using typography IDs
 
+This component accepts any [typography IDs](?path=/docs/foundations-typography--docs).
+
 There are typography ID definitions you can use in your code rather than typing the
 typography ID by hand.
 

frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx

@@ -20,17 +20,28 @@ export default {
       control: { type: "select" },
     },
   },
+  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}>
+      <Heading {...args}>{children}</Heading>
+    </div>
+  ),
 };
 
 export const AnyHeading = {
   name: "Heading",
-  render: ({ level, typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Heading level={level} typography={typography} {...args}>
-        Lorem ipsum
-      </Heading>
-    </StoryWrapper>
-  ),
   args: {
     level: 1,
     typography: "display",

frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Text } = Components;
-const { StoryWrapper } = Components.storybook;
 const { typography } = Components.meta;
 
 const typographyIds = typography.sort();
@@ -16,31 +15,112 @@ export default {
       control: { type: "select" },
     },
   },
+  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>
+  ),
 };
 
 export const Default = {
-  render: ({ typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>
-        Lorem ipsum
-      </Text>
-    </StoryWrapper>
-  ),
   args: {
     typography: "display",
   },
 };
 
 export const CustomTag = {
-  render: ({ typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Text typography={typography} {...args}>
-        Lorem ipsum
-      </Text>
-    </StoryWrapper>
-  ),
   args: {
     typography: "display",
     as: "li",
   },
 };
+
+export const Display = {
+  args: {
+    typography: "display",
+    children: "Display 400 36px/1.4 Work Sans",
+  },
+};
+
+export const TitleLarge = {
+  args: {
+    typography: "title-large",
+    children: "Title Large 400 24px/1.4 Work Sans",
+  },
+};
+
+export const TitleMedium = {
+  args: {
+    typography: "title-medium",
+    children: "Title Medium 400 20px/1.4 Work Sans",
+  },
+};
+
+export const TitleSmall = {
+  args: {
+    typography: "title-small",
+    children: "Title Small 400 14px/1.2 Work Sans",
+  },
+};
+
+export const HeadlineLarge = {
+  args: {
+    typography: "headline-large",
+    children: "Headline Large 400 18px/1.4 Work Sans",
+  },
+};
+
+export const HeadlineMedium = {
+  args: {
+    typography: "headline-medium",
+    children: "Headline Medium 400 16px/1.4 Work Sans",
+  },
+};
+
+export const HeadlineSmall = {
+  args: {
+    typography: "headline-small",
+    children: "Headline Small 500 12px/1.2 Work Sans",
+  },
+};
+
+export const BodyLarge = {
+  args: {
+    typography: "body-large",
+    children: "Body Large 400 16px/1.4 Work Sans",
+  },
+};
+
+export const BodyMedium = {
+  args: {
+    typography: "body-medium",
+    children: "Body Medium 400 14px/1.3 Work Sans",
+  },
+};
+
+export const BodySmall = {
+  args: {
+    typography: "body-small",
+    children: "Body Small 400 12px/1.3 Work Sans",
+  },
+};
+
+export const CodeFont = {
+  args: {
+    typography: "code-font",
+    children: "Code Font 400 12px/1.2 Roboto Mono",
+  },
+};

frontend/src/app/main/ui/ds/foundations/typography/typography.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta } from "@storybook/blocks";
 import Components from "@target/components";
+import * as TextStories from "../typography/text.stories";
 
 <Meta title="Foundations/Typography" />
 
@@ -53,59 +54,44 @@ for exceptions based on the size of the components.
 
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.Display} />
-  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
-</Canvas>
 
-### Title large `title-large`
+### Title Large `title-large`
 
 Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleLarge} />
-  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
-</Canvas>
 
-### Title medium `title-medium`
+### Title Medium `title-medium`
 
 Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleMedium} />
-  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
-### Title small `title-small`
+### Title Small `title-small`
 
 Uses the same size as body (large).
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.TitleSmall} />
-  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Headline
 
-Page sections/subtitles, or names of less important objects in
+Page sections/subtitles, or names of less important objects in page titles
-page titles (automated action titles, for example). Same line height as title (medium).
+(automated action titles, for example). Same line height as title (medium).
 
-### Headline large `headline-large`
+### Headline Large `headline-large`
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.HeadlineLarge} />
-  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
-### Headline medium `headline-medium`
+### Headline Medium `headline-medium`
-
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
+<Canvas of={TextStories.HeadlineMedium} />
 
 ### Headline small `headline-small`
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.HeadlineSmall} />
-  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Body
 
@@ -113,35 +99,26 @@ page titles (automated action titles, for example). Same line height as title (m
 
 Generic content.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodyLarge} />
-  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
-</Canvas>
 
 ### Body medium `body-medium`
 
 Default UI font. Most commonly used for body text.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodyMedium} />
-  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
-</Canvas>
-
 
 ### Body small `body-small`
 
 Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.BodySmall} />
-  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
-</Canvas>
 
 ## Code font `code-font`
 
 Default style for rendering code blocks.
 
-<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
+<Canvas of={TextStories.CodeFont} />
-  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
-</Canvas>
 
 ## Fonts