build(deps): bump storybook to v8

package.json

@@ -39,13 +39,18 @@
     "@prettier/sync": "0.3.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.5",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/html": "6.5.16",
+    "@storybook/addon-a11y": "8.0.5",
+    "@storybook/addon-docs": "8.0.5",
+    "@storybook/addon-interactions": "8.0.5",
+    "@storybook/addon-mdx-gfm": "8.0.5",
+    "@storybook/addon-themes": "8.0.5",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/html": "8.0.5",
+    "@storybook/html-webpack5": "8.0.5",
+    "@storybook/manager-api": "8.0.5",
+    "@storybook/preview-api": "8.0.5",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/testing-library": "0.2.2",
     "@tokens-studio/sd-transforms": "0.12.2",
     "@types/dedent": "0.7.2",
     "@types/eslint": "8.56.0",
@@ -62,7 +67,7 @@
     "@types/sortablejs": "1.15.7",
     "@typescript-eslint/eslint-plugin": "6.16.0",
     "@typescript-eslint/parser": "6.16.0",
-    "@whitespace/storybook-addon-html": "5.0.0",
+    "@whitespace/storybook-addon-html": "6.0.2",
     "autoprefixer": "10.4.16",
     "axe-core": "4.8.3",
     "babel-loader": "8.3.0",
@@ -101,9 +106,8 @@
     "rollup": "3.29.4",
     "semver": "7.5.4",
     "shell-quote": "1.8.1",
-    "storybook": "6.5.16",
-    "storybook-addon-themes": "6.1.0",
-    "storybook-rtl-addon": "0.3.3",
+    "storybook": "8.0.5",
+    "storybook-addon-rtl": "1.0.0",
     "style-dictionary": "3.9.1",
     "stylelint": "15.11.0",
     "stylelint-config-recommended-scss": "12.0.0",
@@ -126,6 +130,7 @@
     "node": "20.10.0"
   },
   "dependencies": {
+    "@storybook/test": "8.0.5",
     "patch-package": "8.0.0"
   }
 }

packages/calcite-components/.storybook/fake-knobs.ts

@@ -0,0 +1,39 @@
+/*
+ * This is a fake version of the knobs API that is used in Storybook stories.
+ *
+ * `@storybook/addon-knobs` does not support Storybook v8+, so this is a placeholder to upgrade to v8 while we discuss the future of knobs.
+ */
+
+export function select(_name: string, _options: string[], defaultValue: string, _groupName?: string): string {
+  return defaultValue;
+}
+
+export function text(_name: string, defaultValue: string, _groupName?: string): string {
+  return defaultValue;
+}
+
+export function color(_name: string, defaultValue: string, _groupName?: string): string {
+  return defaultValue;
+}
+
+export function boolean(
+  name: string,
+  defaultValue: boolean,
+  _groupName?: string,
+  mode: "prop" | "attr" = "attr",
+): string | boolean {
+  if (mode === "prop") {
+    // this mode is for backwards-compatibility with the createComponentHTML util
+    return defaultValue;
+  }
+
+  return defaultValue ? name : "";
+}
+
+export function array(_name: string, defaultValue: string[], _groupName?: string): string[] {
+  return defaultValue;
+}
+
+export function number(_name: string, defaultValue: number, _groupName?: string): number {
+  return defaultValue;
+}

packages/calcite-components/.storybook/helpers.ts

@@ -1,53 +1,14 @@
 import * as icons from "@esri/calcite-ui-icons";
-import { boolean as booleanKnob } from "@storybook/addon-knobs";
-import { Parameters } from "@storybook/api";
-import { ModeName } from "../src/components/interfaces";
-import { MODES } from "../src/utils/resources";
 
 // we can get all unique icon names from all size 16 non-filled icons.
 export const iconNames = Object.keys(icons)
   .filter((iconName) => iconName.endsWith("16"))
-  .map((iconName) => iconName.replace("16", ""));
-
-// custom boolean will start up a knob but only add the prop if it is true
-// if you'd instead like `attr="true|false" set the standalone option to false
-export const boolean = (prop, value, standalone = true) => {
-  const knob = booleanKnob(prop, value);
-  const propValue = (standalone && knob) || !standalone ? prop : "";
-  const attrValue = standalone ? "" : `="${knob}"`;
-  return `${propValue}${attrValue}`;
-};
-
-export interface Story {
-  (): string;
-  decorators?: ((Story: Story) => DocumentFragment)[];
-  parameters?: Parameters;
-}
-
-export const setKnobs = ({ story, knobs }: { story: string; knobs: { name: string; value: string }[] }) => {
-  return `window.location.href = "?path=/story/${story}${knobs
-    .map(({ name, value }) => `&knob-${name}=${value}`)
-    .join("")}"`;
-};
-
-export const setMode = (value: ModeName) => `${MODES.map(
-  (mode) => `document.body.classList.toggle('${mode.className}', ${(mode.name === value).toString()});`,
-).join("")}
-`;
-
-export const toggleCentered: string = `document.body.classList.toggle('sb-main-centered');`;
-
-/**
- * This helps create different storybook builds for internal and screenshot test environments
- */
-export function storyFilters(): {
-  excludeStories: RegExp | string[];
-} {
-  return {
-    excludeStories: process.env.STORYBOOK_SCREENSHOT_TEST_BUILD
-      ? /.*_NoTest$/
-      : process.env.STORYBOOK_SCREENSHOT_LOCAL_BUILD
-        ? []
-        : /.*_TestOnly$/,
-  };
-}
+  .map((iconName) => iconName.replace("16", ""))
+  .sort((a, b) => {
+    const iPrefixedNumberIconNamePattern = /^i(\d)/;
+    return a
+      .replace(iPrefixedNumberIconNamePattern, "$1")
+      .localeCompare(b.replace(iPrefixedNumberIconNamePattern, "$1"));
+  });
+
+export { boolean } from "./fake-knobs";

packages/calcite-components/.storybook/main.ts

@@ -1,27 +1,35 @@
 module.exports = {
   addons: [
     "@storybook/addon-a11y",
+    "@storybook/addon-docs",
     "@storybook/addon-interactions",
-    "@storybook/addon-knobs",
-    "@storybook/testing-library",
+    "@storybook/addon-mdx-gfm",
+    "@storybook/addon-themes",
+    "@storybook/addon-webpack5-compiler-babel",
     "@whitespace/storybook-addon-html",
-    "storybook-addon-themes",
-    "storybook-rtl-addon",
+    "storybook-addon-rtl",
   ],
+
+  framework: {
+    name: "@storybook/html-webpack5",
+    options: {},
+  },
+
   staticDirs: ["../__docs-temp__"],
-  stories: ["../src/**/*.stories.@(mdx|ts)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.ts"],
+
   babel: async (options) => {
     return {
       ...options,
       presets: [
-        ...options.presets,
-
         // we need to set this up to enable custom Storybook doc components
         // https://storybook.js.org/docs/html/writing-docs/docs-page#with-a-custom-component
         "@babel/preset-react",
+        "@babel/preset-typescript",
       ],
     };
   },
+
   previewHead: (head: string): string =>
     `
     ${head}
@@ -35,6 +43,7 @@ module.exports = {
         : ""
     }
   `,
+
   managerHead: (head: string): string => {
     if (process.env.STORYBOOK_SCREENSHOT_TEST_BUILD || process.env.STORYBOOK_SCREENSHOT_LOCAL_BUILD) {
       return head;

packages/calcite-components/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import cheerio from "cheerio";
 import theme from "./theme";
 

packages/calcite-components/.storybook/preview-head.html

@@ -31,30 +31,12 @@
     max-width: 100%;
   }
 
-  #root > calcite-flow,
-  #root > calcite-panel {
+  #storybook-root > calcite-flow,
+  #storybook-root > calcite-panel {
     height: 400px;
   }
 
   #properties {
     margin-top: 1rem;
   }
 </style>
-
-<script>
-  window.addEventListener(
-    "load",
-    () => {
-      document.addEventListener("keydown", (event) => {
-        const bubbledFromComponentStory = event
-          .composedPath()
-          .some((element) => element.tagName?.toLowerCase().startsWith("calcite-"));
-
-        if (bubbledFromComponentStory) {
-          event.stopPropagation();
-        }
-      });
-    },
-    { once: true },
-  );
-</script>

packages/calcite-components/.storybook/preview.ts

@@ -1,35 +1,18 @@
-import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme";
-import { withDirection } from "storybook-rtl-addon";
-import { modes } from "./utils";
+import { themeDecorator } from "./utils";
 
 declare global {
   interface Window {}
 }
 
-const modeBodyClassDecorator = (Story: () => any, context: any) => {
-  const modes = context.parameters.modes;
+export const decorators = [themeDecorator];
 
-  modes?.list?.forEach((mode: Mode) => {
-    const isDefault = mode.name === modes.default;
-    if (Array.isArray(mode.class)) {
-      mode.class.forEach((className) => document.body.classList.toggle(className, isDefault));
-    } else {
-      mode.class && document.body.classList.toggle(mode.class, isDefault);
-    }
-  });
-
-  return Story();
-};
-
-export const decorators = [withDirection, modeBodyClassDecorator];
 export const parameters = {
   a11y: {
     element: "#root",
     config: {},
     options: {},
     manual: false,
   },
-  modes,
   layout: "centered",
   options: {
     storySort: {

packages/calcite-components/.storybook/utils.tsx

@@ -1,88 +1,30 @@
 /* @jsx React.createElement */
 
-import {
-  array,
-  boolean,
-  button,
-  color,
-  date,
-  files,
-  number,
-  object,
-  optionsKnob as options,
-  radios,
-  select,
-  text,
-} from "@storybook/addon-knobs";
 import { CSS_UTILITY } from "../src/utils/resources";
 
-import { colors } from "../../../node_modules/@esri/calcite-colors/dist/colors";
 import { Description, DocsPage } from "@storybook/addon-docs";
-import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme";
+import { withThemeByClassName } from "@storybook/addon-themes";
 import React from "react";
 import { Scale } from "../src/components/interfaces";
 import { html } from "../support/formatting";
 import { Breakpoints } from "../src/utils/responsive";
 
-const autoValue = {
-  name: "Auto",
-  value: colors["blk-200"],
-};
-
-const lightValue = {
-  name: "Light",
-  value: colors["blk-005"],
-};
-
-const darkValue = {
-  name: "Dark",
-  value: colors["blk-210"],
-};
-
-const list: Mode[] = [
-  {
-    name: lightValue.name,
-    class: CSS_UTILITY.lightMode,
-    color: lightValue.value,
-  },
-  {
-    name: darkValue.name,
-    class: CSS_UTILITY.darkMode,
-    color: darkValue.value,
-  },
-  {
-    name: autoValue.name,
-    class: CSS_UTILITY.autoMode,
-    color: autoValue.value,
+export const themeDecorator = withThemeByClassName({
+  themes: {
+    auto: CSS_UTILITY.autoMode,
+    light: CSS_UTILITY.lightMode,
+    dark: CSS_UTILITY.darkMode,
   },
-];
-
-export const modes = {
-  default: lightValue.name,
-  list,
-};
+  defaultTheme: "light",
+});
 
 export const modesDarkDefault = {
-  default: darkValue.name,
-  list,
+  themeOverride: "dark",
 };
 
 export interface KnobbedAttribute {
   name: string;
-  value: ReturnType<
-    | typeof boolean
-    | typeof color
-    | typeof date
-    | typeof number
-    | typeof array
-    | typeof files
-    | typeof button
-    | typeof object
-    | typeof radios
-    | typeof options
-    | typeof select
-    | typeof text
-  >;
+  value: ReturnType<any>;
 }
 
 export interface SimpleAttribute {