Use Storybook 8.0.10

jpmorganchase · May 13, 2024 · db1bb55 · db1bb55
1 parent 2926676
commit db1bb55
Show file tree

Hide file tree

Showing 6 changed files with 579 additions and 539 deletions.
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/package.json b/package.json
@@ -55,20 +55,20 @@
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
     "@mswjs/data": "^0.14.0",
-    "@storybook/addon-a11y": "^8.0.0",
-    "@storybook/addon-actions": "^8.0.0",
-    "@storybook/addon-docs": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
-    "@storybook/addon-links": "^8.0.0",
-    "@storybook/addon-mdx-gfm": "^8.0.0",
-    "@storybook/addon-storysource": "^8.0.0",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/manager-api": "^8.0.0",
-    "@storybook/react": "^8.0.0",
-    "@storybook/react-vite": "^8.0.0",
-    "@storybook/test": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
+    "@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",
@@ -111,7 +111,7 @@
     "react-dom": "^18.0.0",
     "rifm": "^0.12.0",
     "sass": "^1.52.3",
-    "storybook": "^8.0.0",
+    "storybook": "^8.0.10",
     "stylelint": "^16.0.0",
     "typescript": "4.6.4",
     "vite": "^4.4.9",

diff --git a/packages/core/stories/dialog/dialog.stories.tsx b/packages/core/stories/dialog/dialog.stories.tsx
@@ -1,4 +1,10 @@
-import { ComponentProps, PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import {
+  ComponentProps,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
 import {
   Button,
   StackLayout,

diff --git a/packages/theme/stories/palettes/opacity.mdx b/packages/theme/stories/palettes/opacity.mdx
@@ -43,6 +43,7 @@ import { OpacityBlock } from "docs/components/OpacityBlock";
   <OpacityBlock opacity="--salt-opacity-40" cssVariable="--salt-palette-opacity-fill" replacementToken="--salt-palette-opacity-disabled" />
 
 {" "}
+
 <OpacityBlock
   opacity="--salt-opacity-40"
   cssVariable="--salt-palette-opacity-stroke"
@@ -53,7 +54,11 @@ import { OpacityBlock } from "docs/components/OpacityBlock";
   cssVariable="--salt-palette-opacity-background"
   replacementToken="--salt-palette-opacity-disabled"
 />
-<OpacityBlock opacity="--salt-opacity-40" cssVariable="--salt-palette-opacity-border" replacementToken="--salt-palette-opacity-disabled" />
+<OpacityBlock
+  opacity="--salt-opacity-40"
+  cssVariable="--salt-palette-opacity-border"
+  replacementToken="--salt-palette-opacity-disabled"
+/>
 
   <OpacityBlock opacity="--salt-opacity-40" cssVariable="--salt-palette-opacity-foreground" replacementToken="--salt-palette-opacity-disabled" />
 </DocGrid>
diff --git a/tooling/css-variable-docgen-components/package.json b/tooling/css-variable-docgen-components/package.json
@@ -7,10 +7,10 @@
     "README.md"
   ],
   "dependencies": {
-    "@storybook/addon-docs": "^8.0.0",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/components": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
     "polished": "^4.0.5"
   }
 }