Upgrade Storybook to v10 (CMEM-7140)

.storybook/main.js

@@ -1,19 +1,20 @@
 const sass = require("sass");
 const path = require("path");
 const sassRenderSyncConfig = require("./../scripts/sassConfig");
+const { silenceDeprecations } = require("../scripts/sassDeprecationConfig");
 
 module.exports = {
     stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
     addons: [
         "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-jest",
+        "@storybook/addon-docs",
+        "@storybook/addon-a11y",
         {
             name: "@storybook/preset-scss",
             options: {
                 sassLoaderOptions: {
                     implementation: sass,
-                    sassOptions: sassRenderSyncConfig,
+                    sassOptions: {...sassRenderSyncConfig, silenceDeprecations},
                 },
             },
         },
@@ -98,7 +99,4 @@ module.exports = {
         };
         return config;
     },
-    docs: {
-        autodocs: true,
-    },
 };

.storybook/preview.js

@@ -1,36 +1,24 @@
-import { withTests } from "@storybook/addon-jest";
-
 import "./styles.scss";
 
-const getJestResults = () => {
-    try {
-        return require("../.jest-test-results.json");
-    } catch (err) {
-        return {};
-    }
-};
-
-const jestResults = getJestResults();
-
-export const decorators = [
-    withTests({
-        results: jestResults,
-    }),
-];
-
 export const parameters = {
     options: {
         storySort: {
             order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
         },
     },
-    actions: {
-        argTypesRegex: "^on[A-Z].*",
-    },
     controls: {
         matchers: {
             color: /(background|color)$/i,
             date: /Date$/,
         },
     },
 };
+
+const preview = {
+    // Enables auto-generated documentation for all stories
+    // @see https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters,
+};
+
+export default preview;

package.json

@@ -120,16 +120,15 @@
         "@eslint/compat": "^2.1.0",
         "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^10.0.1",
-        "@storybook/addon-actions": "^8.6.14",
-        "@storybook/addon-essentials": "^8.6.18",
-        "@storybook/addon-jest": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.18",
+        "@storybook/addon-a11y": "^10.4.0",
+        "@storybook/addon-docs": "^10.4.0",
+        "@storybook/addon-links": "^10.4.0",
+        "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+        "@storybook/cli": "^10.4.0",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.18",
-        "@storybook/react-webpack5": "^8.6.18",
-        "@storybook/test": "^8.6.18",
+        "@storybook/react": "^10.4.0",
+        "@storybook/react-webpack5": "^10.4.0",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/he": "^1.2.3",
@@ -143,7 +142,7 @@
         "@typescript-eslint/eslint-plugin": "^8.59.3",
         "@typescript-eslint/parser": "^8.59.3",
         "babel-jest": "^30.4.1",
-        "chromatic": "^13.3.4",
+        "chromatic": "^16.10.1",
         "eslint": "^10.3.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.1.1",
@@ -164,7 +163,7 @@
         "rimraf": "^6.1.3",
         "sass": "^1.99.0",
         "sass-loader": "^16.0.8",
-        "storybook": "^8.6.18",
+        "storybook": "^10.4.0",
         "stylelint": "^17.11.0",
         "stylelint-config-recess-order": "^7.7.0",
         "stylelint-config-standard-scss": "^17.0.0",
@@ -180,13 +179,11 @@
         "react": ">=18"
     },
     "resolutions": {
-        "node-sass-package-importer/**/postcss": "^8.5.6",
+        "node-sass-package-importer/**/postcss": "^8.5.10",
         "hast-util-from-parse5": "8.0.0",
-        "**/lodash": "^4.18.0",
+        "**/lodash": "^4.18.1",
         "**/minimatch": "^3.1.4",
-        "**/tar": "^7.5.11",
-        "**/fast-uri": "^3.1.2",
-        "**/serialize-javascript": "^7.0.3"
+        "**/serialize-javascript": "^7.0.5"
     },
     "husky": {
         "hooks": {

scripts/compile-sass.ts

@@ -3,13 +3,14 @@ import * as sass from "sass";
 import yargs from "yargs";
 
 import sassRenderSyncConfig from "./sassConfig";
+import { silenceDeprecations } from "./sassDeprecationConfig"
 
 const args = yargs(process.argv.slice(2)).argv as any;
 
 const styles = sass.renderSync({
     importer: tildeImporter(),
     ...sassRenderSyncConfig,
-    silenceDeprecations: ["import", "legacy-js-api"],
+    silenceDeprecations: silenceDeprecations as sass.DeprecationOrId[],
     file: "src/index.scss",
     includePaths: ["node_modules"], // Carbon does not use tilde import syntax
 });

scripts/sassDeprecationConfig.js

@@ -0,0 +1,3 @@
+module.exports = {
+    silenceDeprecations: ["import", "legacy-js-api"],
+}

src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -7,7 +7,7 @@ import {
     Position,
 } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import {
     Background as BackgroundV12,
     BackgroundVariant as BackgroundVariantV12,

src/components/Application/tests/ApplicationViewability.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { expect } from "@storybook/test";
 import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -25,19 +24,14 @@ describe("ApplicationViewability", () => {
          * Looks like it is not too easy to include and test them.
          * So we only test for the correct CSS class.
          */
-        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `hide=screen`", () => {
         applyViewabilityAndCheckClass({ hide: "screen" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
     it("should be visible on `hide=print`", () => {
         applyViewabilityAndCheckClass({ hide: "print" });
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `show=print`", () => {
         applyViewabilityAndCheckClass({ show: "print" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
 });

src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";

src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,7 +4,7 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 

src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { AlertDialog } from "./../../../../index";
 import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";

src/components/Dialog/stories/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 

src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Notification } from "../Notification/Notification";

src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";

src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, StickyTarget } from "../../../../index";
 
@@ -10,7 +10,7 @@ export default {
     argTypes: {},
 } as Meta<typeof StickyTarget>;
 
-const Template: Story<typeof StickyTarget> = (args) => (
+const Template: StoryFn<typeof StickyTarget> = (args) => (
     <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
         <HtmlContentBlock>
             {args.getConnectedElement && args.to !== "bottom" && (

src/components/Tooltip/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Tooltip } from "../../index";