Upgrade to Storybook 8.2

.storybook/main.js

@@ -1,15 +1,15 @@
 module.exports = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "../",
     "@chromatic-com/storybook",
-    "@storybook/addon-webpack5-compiler-swc",
   ],
+  managerEntries: [__dirname + "/../src/manager.ts"],
+  previewAnnotations: [__dirname + "/../src/preview.ts"],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {

package.json

@@ -43,7 +43,6 @@
     "dist/**/*"
   ],
   "scripts": {
-    "clean": "rimraf ./dist",
     "start": "concurrently \"yarn storybook --quiet\" \"yarn build:dist --watch\"",
     "storybook": "storybook dev -p 6006",
     "test": "vitest",
@@ -53,33 +52,30 @@
     "prepublish": "yarn clean && yarn build:dist",
     "release": "auto shipit --base-branch=main"
   },
+  "dependencies": {
+    "@storybook/icons": "^1.2.10"
+  },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-typescript": "^7.23.3",
-    "@chromatic-com/storybook": "^1.2.1",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
-    "@storybook/addon-links": "^8.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/core-events": "^8.0.0",
-    "@storybook/icons": "^1.2.9",
-    "@storybook/manager-api": "^8.0.0",
-    "@storybook/preview-api": "^8.0.0",
-    "@storybook/react-webpack5": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
-    "@storybook/types": "^8.0.0",
+    "@chromatic-com/storybook": "^1.7.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
     "@types/node": "^18.19.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "auto": "^11.1.1",
     "concurrently": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "storybook": "^8.0.0",
+    "storybook": "^8.2.9",
     "tsup": "^8.0.1",
     "typescript": "^4.9.4",
+    "vite": "^5.4.2",
     "vitest": "^2.0.5"
   },
+  "peerDependencies": {
+    "storybook": "^8.2.0"
+  },
   "bundler": {
     "exportEntries": [
       "src/index.ts"

src/manager.ts

@@ -1,4 +1,4 @@
-import { addons, types } from "@storybook/manager-api"
+import { addons, types } from "storybook/internal/manager-api"
 
 import { ADDON_ID, TOOL_ID } from "./constants"
 import { PseudoStateTool } from "./manager/PseudoStateTool"

src/manager/PseudoStateTool.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from "react"
-import { IconButton, WithTooltip, TooltipLinkList } from "@storybook/components"
 import { CheckIcon, ButtonIcon } from "@storybook/icons"
-import { useGlobals } from "@storybook/manager-api"
-import { styled, color } from "@storybook/theming"
+import React, { useCallback } from "react"
+import { IconButton, WithTooltip, TooltipLinkList } from "storybook/internal/components"
+import { useGlobals } from "storybook/internal/manager-api"
+import { styled, color } from "storybook/internal/theming"
 
 import { PARAM_KEY, PSEUDO_STATES } from "../constants"
 

src/preview/withPseudoState.ts

@@ -7,9 +7,9 @@ import {
   STORY_CHANGED,
   STORY_RENDERED,
   UPDATE_GLOBALS,
-} from "@storybook/core-events"
-import { DecoratorFunction } from "@storybook/types"
-import { addons, useEffect, useMemo } from "@storybook/preview-api"
+} from "storybook/internal/core-events"
+import { DecoratorFunction } from "storybook/internal/types"
+import { addons, useEffect, useMemo } from "storybook/internal/preview-api"
 
 import { PSEUDO_STATES, PseudoState } from "../constants"
 import { rewriteStyleSheet } from "./rewriteStyleSheet"
@@ -36,8 +36,8 @@ const applyClasses = (element: Element, classnames: Set<string>) => {
 }
 
 function querySelectorPiercingShadowDOM(root: Element | ShadowRoot, selector: string) {
-  const results: Element[] = [];
-  root.querySelectorAll('*').forEach((el) => {
+  const results: Element[] = []
+  root.querySelectorAll("*").forEach((el) => {
     if (el.shadowRoot) {
       results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector))
     }
@@ -60,7 +60,9 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
       querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state))
     } else if (Array.isArray(value)) {
       // explicit selectors API - we have an array (of strings) recursively handle each one
-      value.forEach((sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state)))
+      value.forEach((sel) =>
+        querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state)),
+      )
     }
   })
 
@@ -89,7 +91,7 @@ const updateShadowHost = (shadowHost: Element) => {
     .filter((classname) => classname.match(/^pseudo-(.(?!-all))+$/))
     .forEach((classname) => classnames.add(classname))
   // Adopt "pseudo-*-all" classes from ancestors (across shadow boundaries)
-  for (let node = shadowHost.parentNode; node;) {
+  for (let node = shadowHost.parentNode; node; ) {
     if (node instanceof ShadowRoot) {
       node = node.host
       continue
@@ -121,13 +123,13 @@ const equals = (a: PseudoStateConfig = {}, b: PseudoStateConfig = {}) =>
   b !== null &&
   Object.keys(a).length === Object.keys(b).length &&
   (Object.keys(a) as PseudoState[]).every(
-    (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+    (key) => JSON.stringify(a[key]) === JSON.stringify(b[key]),
   )
 
 // Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
 export const withPseudoState: DecoratorFunction = (
   StoryFn,
-  { viewMode, parameters, id, globals: globalsArgs }
+  { viewMode, parameters, id, globals: globalsArgs },
 ) => {
   const { pseudo: parameter } = parameters
   const { pseudo: globals } = globalsArgs

stories/Button.stories.js → src/stories/Button.stories.jsx

@@ -1,6 +1,6 @@
-import { FORCE_REMOUNT } from "@storybook/core-events"
-import { useChannel, useStoryContext } from "@storybook/preview-api"
 import React from "react"
+import { FORCE_REMOUNT } from "storybook/internal/core-events"
+import { useChannel, useStoryContext } from "storybook/internal/preview-api"
 
 import { Button } from "./Button"
 import "./grid.css"

stories/CSSAtRules.stories.js → src/stories/CSSAtRules.stories.jsx

@@ -1,6 +1,6 @@
-import { FORCE_REMOUNT } from "@storybook/core-events"
-import { useChannel, useStoryContext } from "@storybook/preview-api"
 import React from "react"
+import { FORCE_REMOUNT } from "storybook/internal/core-events"
+import { useChannel, useStoryContext } from "storybook/internal/preview-api"
 
 import { Button } from "./CSSAtRules"
 import "./grid.css"

tsup.config.ts

@@ -1,20 +1,20 @@
-import { defineConfig, type Options } from "tsup";
-import { readFile } from "fs/promises";
-import { globalPackages as globalManagerPackages } from "@storybook/manager/globals";
-import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals";
+import { defineConfig, type Options } from "tsup"
+import { readFile } from "fs/promises"
+import { globalPackages as globalManagerPackages } from "storybook/internal/manager/globals"
+import { globalPackages as globalPreviewPackages } from "storybook/internal/preview/globals"
 
 // The current browsers supported by Storybook v7
-const BROWSER_TARGET: Options['target'] = ["chrome100", "safari15", "firefox91"];
-const NODE_TARGET: Options['target'] = ["node18"];
+const BROWSER_TARGET: Options["target"] = ["chrome100", "safari15", "firefox91"]
+const NODE_TARGET: Options["target"] = ["node18"]
 
 type BundlerConfig = {
   bundler?: {
-    exportEntries?: string[];
-    nodeEntries?: string[];
-    managerEntries?: string[];
-    previewEntries?: string[];
-  };
-};
+    exportEntries?: string[]
+    nodeEntries?: string[]
+    managerEntries?: string[]
+    previewEntries?: string[]
+  }
+}
 
 export default defineConfig(async (options) => {
   // reading the three types of entries from package.json, which has the following structure:
@@ -27,25 +27,25 @@ export default defineConfig(async (options) => {
   //     "nodeEntries": ["./src/preset.ts"]
   //   }
   // }
-  const packageJson = await readFile('./package.json', 'utf8').then(JSON.parse) as BundlerConfig;
+  const packageJson = (await readFile("./package.json", "utf8").then(JSON.parse)) as BundlerConfig
   const {
     bundler: {
       exportEntries = [],
       managerEntries = [],
       previewEntries = [],
       nodeEntries = [],
     } = {},
-  } = packageJson;
+  } = packageJson
 
   const commonConfig: Options = {
     splitting: false,
     minify: !options.watch,
     treeshake: true,
-    sourcemap: true,
+    sourcemap: false,
     clean: true,
-  };
+  }
 
-  const configs: Options[] = [];
+  const configs: Options[] = []
 
   // export entries are entries meant to be manually imported by the user
   // they are not meant to be loaded by the manager or preview
@@ -61,7 +61,7 @@ export default defineConfig(async (options) => {
       target: [...BROWSER_TARGET, ...NODE_TARGET],
       platform: "neutral",
       external: [...globalManagerPackages, ...globalPreviewPackages],
-    });
+    })
   }
 
   // manager entries are entries meant to be loaded into the manager UI
@@ -75,7 +75,7 @@ export default defineConfig(async (options) => {
       target: BROWSER_TARGET,
       platform: "browser",
       external: globalManagerPackages,
-    });
+    })
   }
 
   // preview entries are entries meant to be loaded into the preview iframe
@@ -92,7 +92,7 @@ export default defineConfig(async (options) => {
       target: BROWSER_TARGET,
       platform: "browser",
       external: globalPreviewPackages,
-    });
+    })
   }
 
   // node entries are entries meant to be used in node-only
@@ -105,8 +105,8 @@ export default defineConfig(async (options) => {
       format: ["cjs"],
       target: NODE_TARGET,
       platform: "node",
-    });
+    })
   }
 
-  return configs;
-});
+  return configs
+})

vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})