Update storybook monorepo to v8 (major) (#3111)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · May 13, 2024 · 0170ebd · 0170ebd
1 parent 6b65b07
commit 0170ebd
Show file tree

Hide file tree

Showing 67 changed files with 2,424 additions and 3,352 deletions.
diff --git a/.storybook/SaltTheme.js → .storybook/SaltTheme.ts b/.storybook/SaltTheme.js → .storybook/SaltTheme.ts
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -10,9 +10,11 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  stories: ["../packages/*/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  stories: ["../packages/*/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
   staticDirs: ["../docs/public"],
-
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
   addons: [
     {
       name: "@storybook/addon-essentials",
@@ -29,7 +31,6 @@ const config: StorybookConfig = {
   ],
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import("vite");
-    // customize the Vite config here
 
     const customConfig: UserConfig = {
       plugins: [cssInline(), cssVariableDocgen()],

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import saltTheme from "./SaltTheme";
 
 addons.setConfig({

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,4 @@
-import type { ArgTypes, Parameters } from "@storybook/react";
-import type { GlobalTypes } from "@storybook/csf";
+import type { Parameters, GlobalTypes, ArgTypes } from "@storybook/types";
 import "@salt-ds/theme/index.css";
 import "@salt-ds/theme/css/theme-next.css";
 import "@fontsource/open-sans/300.css";
@@ -142,7 +141,7 @@ export const globalTypes: GlobalTypes = {
 };
 
 export const argTypes: ArgTypes = {
-  ref: { control: { type: null } },
+  ref: { control: false },
 };
 
 export const parameters: Parameters = {

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -4,55 +4,72 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import IstanbulPlugin from "vite-plugin-istanbul";
 import { isCI } from "ci-info";
 import path from "path";
-import { mergeConfig, UserConfig } from "vite";
+import { UserConfig } from "vite";
 import { version as reactVersion } from "react";
 // @ts-ignore
 import installCoverageTask from "@cypress/code-coverage/task";
 import { cssInline } from "css-inline-plugin";
 
-let viteConfig: UserConfig = {
-  plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()],
-  define: {
-    "process.env": {},
-  },
-  server: {
-    watch: {
-      ignored: ["**/coverage"],
+async function getViteConfig(config: UserConfig) {
+  const { mergeConfig } = await import("vite");
+  let viteConfig: UserConfig = {
+    plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()],
+    define: {
+      "process.env": {},
     },
-  },
-  build: {
-    sourcemap: true,
-  },
-  resolve: {
-    alias: {
-      "cypress/react18": reactVersion.startsWith("18")
-        ? "cypress/react18"
-        : "cypress/react",
+    server: {
+      watch: {
+        ignored: ["**/coverage"],
+      },
+    },
+    build: {
+      sourcemap: true,
     },
-  },
-};
-if (isCI) {
-  viteConfig = mergeConfig(viteConfig, {
     resolve: {
       alias: {
-        "@salt-ds/core": path.resolve(__dirname, "./dist/salt-ds-core"),
-        "@salt-ds/data-grid": path.resolve(
-          __dirname,
-          "./dist/salt-ds-data-grid"
-        ),
-        "@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
-        "@salt-ds/icons": path.resolve(__dirname, "./dist/salt-ds-icons"),
+        "cypress/react18": reactVersion.startsWith("18")
+          ? "cypress/react18"
+          : "cypress/react",
       },
     },
-    optimizeDeps: {
-      include: [
-        "@salt-ds/core",
-        "@salt-ds/data-grid",
-        "@salt-ds/lab",
-        "@salt-ds/icons",
-      ],
-    },
-  } as UserConfig);
+  };
+
+  if (reactVersion.startsWith("16") || reactVersion.startsWith("17")) {
+    viteConfig = mergeConfig(viteConfig, {
+      resolve: {
+        alias: {
+          "@storybook/react-dom-shim":
+            "@storybook/react-dom-shim/dist/react-16",
+        },
+      },
+    });
+  }
+
+  if (isCI) {
+    viteConfig = mergeConfig(viteConfig, {
+      resolve: {
+        alias: {
+          "@salt-ds/core": path.resolve(__dirname, "./dist/salt-ds-core"),
+          "@salt-ds/data-grid": path.resolve(
+            __dirname,
+            "./dist/salt-ds-data-grid"
+          ),
+          "@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
+          "@salt-ds/icons": path.resolve(__dirname, "./dist/salt-ds-icons"),
+        },
+      },
+      optimizeDeps: {
+        include: [
+          "@salt-ds/core",
+          "@salt-ds/data-grid",
+          "@salt-ds/lab",
+          "@salt-ds/icons",
+        ],
+      },
+    } as UserConfig);
+  }
+
+  return mergeConfig(config, viteConfig);
 }
 
 export default defineConfig({
@@ -75,7 +92,7 @@ export default defineConfig({
     devServer: {
       framework: "react",
       bundler: "vite",
-      viteConfig,
+      viteConfig: getViteConfig,
     },
     specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
   },

diff --git a/docs/blocks/help-and-support.doc.mdx → docs/blocks/help-and-support.mdx b/docs/blocks/help-and-support.doc.mdx → docs/blocks/help-and-support.mdx
diff --git a/package.json b/package.json
@@ -55,19 +55,20 @@
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
     "@mswjs/data": "^0.14.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-mdx-gfm": "7.4.6",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addons": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "7.4.6",
-    "@storybook/test": "^7.4.5",
-    "@storybook/theming": "^7.4.5",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-docs": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-mdx-gfm": "^8.0.10",
+    "@storybook/addon-storysource": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/manager-api": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/cypress": "^10.0.0",
     "@testing-library/dom": "^10.0.0",
@@ -98,7 +99,7 @@
     "eslint-plugin-cypress": "^3.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-local-rules": "^2.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.8.0",
     "mockdate": "^3.0.5",
     "modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch",
     "msw": "^1.2.1",
@@ -110,7 +111,7 @@
     "react-dom": "^18.0.0",
     "rifm": "^0.12.0",
     "sass": "^1.52.3",
-    "storybook": "7.4.6",
+    "storybook": "^8.0.10",
     "stylelint": "^16.0.0",
     "typescript": "4.6.4",
     "vite": "^4.4.9",

diff --git a/packages/core/stories/border-layout/border-layout.stories.tsx b/packages/core/stories/border-layout/border-layout.stories.tsx
@@ -17,7 +17,7 @@ export default {
     rowGap: {
       type: "number",
     },
-    children: { control: { type: null } },
+    children: { control: false },
   },
 } as Meta<typeof BorderLayout>;
 

diff --git a/packages/core/stories/combo-box/combo-box.stories.tsx b/packages/core/stories/combo-box/combo-box.stories.tsx
@@ -22,13 +22,6 @@ import { usStateExampleData } from "../assets/exampleData";
 export default {
   title: "Core/Combo Box",
   component: ComboBox,
-  parameters: {
-    docs: {
-      source: {
-        code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554",
-      },
-    },
-  },
 } as Meta<typeof ComboBox>;
 
 const usStates = usStateExampleData.slice(0, 10);

diff --git a/packages/core/stories/dialog/dialog.stories.tsx b/packages/core/stories/dialog/dialog.stories.tsx
@@ -1,5 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import {
+  ComponentProps,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
 import {
   Button,
   StackLayout,
@@ -9,6 +14,7 @@ import {
   DialogContent,
   DialogCloseButton,
   DialogProps,
+  DialogContentProps,
 } from "@salt-ds/core";
 import { StoryFn, Meta } from "@storybook/react";
 import "./dialog.stories.css";
@@ -33,7 +39,10 @@ const UnmountLogger = () => {
 };
 
 const DialogTemplate: StoryFn<
-  DialogProps & { header: string; preheader: string; content: ReactNode }
+  Omit<DialogProps, "content"> &
+    Pick<ComponentProps<typeof DialogHeader>, "header" | "preheader"> & {
+      content: DialogContentProps["children"];
+    }
 > = ({
   header,
   preheader,
@@ -99,51 +108,54 @@ export const LongContent = DialogTemplate.bind({});
 LongContent.args = {
   header: "Congratulations! You have created a Dialog.",
   content: (
-    <StackLayout>
-      <div>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry's standard dummy text ever
-        since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book.
-      </div>
-      <div>
-        It has survived not only five centuries, but also the leap into
-        electronic typesetting, remaining essentially unchanged. It was
-        popularised in the 1960s with the release of Letraset sheets containing
-        Lorem Ipsum passages, and more recently with desktop publishing software
-        like Aldus PageMaker including versions of Lorem Ipsum.
-      </div>
-      <div>
-        It is a long established fact that a reader will be distracted by the
-        readable content of a page when looking at its layout. The point of
-        using Lorem Ipsum is that it has a more-or-less normal distribution of
-        letters, as opposed to using 'Content here, content here', making it
-        look like readable English.
-      </div>
-      <div>
-        Many desktop publishing packages and web page editors now use Lorem
-        Ipsum as their default model text, and a search for 'lorem ipsum' will
-        uncover many web sites still in their infancy. Various versions have
-        evolved over the years, sometimes by accident, sometimes on purpose
-        (injected humour and the like).
-      </div>
-      <div>
-        Contrary to popular belief, Lorem Ipsum is not simply random text. It
-        has roots in a piece of classical Latin literature from 45 BC, making it
-        over 2000 years old. Richard McClintock, a Latin professor at
-        Hampden-Sydney College in Virginia, looked up one of the more obscure
-        Latin words, consectetur, from a Lorem Ipsum passage, and going through
-        the cites of the word in classical literature, discovered the
-        undoubtable source.
-      </div>
-      <div>
-        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
-        Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
-        in 45 BC. This book is a treatise on the theory of ethics, very popular
-        during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
-        dolor sit amet..", comes from a line in section 1.10.32.
-      </div>
-    </StackLayout>
+    <>
+      <StackLayout>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book.
+        </div>
+        <div>
+          It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged. It was
+          popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop
+          publishing software like Aldus PageMaker including versions of Lorem
+          Ipsum.
+        </div>
+        <div>
+          It is a long established fact that a reader will be distracted by the
+          readable content of a page when looking at its layout. The point of
+          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          letters, as opposed to using 'Content here, content here', making it
+          look like readable English.
+        </div>
+        <div>
+          Many desktop publishing packages and web page editors now use Lorem
+          Ipsum as their default model text, and a search for 'lorem ipsum' will
+          uncover many web sites still in their infancy. Various versions have
+          evolved over the years, sometimes by accident, sometimes on purpose
+          (injected humour and the like).
+        </div>
+        <div>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It
+          has roots in a piece of classical Latin literature from 45 BC, making
+          it over 2000 years old. Richard McClintock, a Latin professor at
+          Hampden-Sydney College in Virginia, looked up one of the more obscure
+          Latin words, consectetur, from a Lorem Ipsum passage, and going
+          through the cites of the word in classical literature, discovered the
+          undoubtable source.
+        </div>
+        <div>
+          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
+          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
+          in 45 BC. This book is a treatise on the theory of ethics, very
+          popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
+          ipsum dolor sit amet..", comes from a line in section 1.10.32.
+        </div>
+      </StackLayout>
+    </>
   ),
 };