upgrade to sb10 (esm-only)

Author: ndelangen

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package-lock.json

@@ -6,7 +6,7 @@
     "packages/*"
   ],
   "devDependencies": {
-    "prettier": "^3.2.5"
+    "prettier": "^3.6.2"
   },
   "scripts": {
     "build": "npm run build --workspaces --if-present",

package.json

@@ -7,7 +7,6 @@ const config: StorybookConfig = {
   stories: ["../stories/**/*.mdx", "../stories/**/*.stories.{js,jsx,ts,tsx}"],
   staticDirs: ["../assets"],
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-designs",
     "@storybook/addon-webpack5-compiler-swc",
     {

packages/examples/.storybook/main.ts

@@ -4,15 +4,14 @@
   "private": true,
   "devDependencies": {
     "@storybook/addon-designs": "*",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-links": "^9.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/react": "^9.0.0",
-    "@storybook/react-webpack5": "^9.0.0",
+    "@storybook/addon-docs": "^10.0.0-0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+    "@storybook/react": "^10.0.0-0",
+    "@storybook/react-webpack5": "^10.0.0-0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-gfm": "^4.0.0",
-    "storybook": "^9.0.0"
+    "storybook": "^10.0.0-0"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",

packages/examples/package.json

@@ -6,7 +6,7 @@
     "allowJs": false,
     "resolvePackageJsonImports": true,
     "moduleResolution": "bundler",
-    "module": "esnext"
+    "module": "Preserve"
   },
   "include": ["types.d.ts", ".storybook/**/*.ts", "stories/**/*"]
 }

packages/examples/tsconfig.json

@@ -14,19 +14,19 @@
   "repository": "git@github.com:storybookjs/addon-designs.git",
   "license": "MIT",
   "author": "pocka <pockawoooh@gmail.com>",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./blocks": "./dist/blocks.mjs",
+    "./blocks": "./dist/blocks.js",
+    "./register-panel": "./dist/register-panel.js",
+    "./register-tab": "./dist/register-tab.js",
     "./preset": "./dist/preset.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -53,12 +53,12 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^18.0.0",
     "tsup": "^8.0.2",
-    "storybook": "^9.0.0",
-    "typescript": "^5.7.3"
+    "storybook": "^10.0.0-0",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@storybook/addon-docs": "^0.0.0-0 || ^9.0.0 || ^9.1.0-0",
-    "storybook": "^0.0.0-0 || ^9.0.0 || ^9.1.0-0",
+    "@storybook/addon-docs": "^10.0.0-0",
+    "storybook": "^10.0.0-0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },

packages/storybook-addon-designs/package.json

@@ -1,7 +1,6 @@
-/** @jsx jsx */
+import React from "react";
 import { addons, types, useParameter } from "storybook/manager-api";
 import { AddonPanel } from "storybook/internal/components";
-import { jsx } from "storybook/theming";
 
 import { AddonName, PanelName, ParameterName } from "../constants";
 import { ErrorBoundary } from "./components/ErrorBoundary";

packages/storybook-addon-designs/preset.js

@@ -1,11 +1,17 @@
+import { fileURLToPath } from "node:url";
+
 export const managerEntries = (
   entries = [],
   options: { renderTarget?: "tab" | "panel" } = {},
 ) => {
   return [
     ...entries,
     options.renderTarget === "tab"
-      ? require.resolve("./register-tab.mjs")
-      : require.resolve("./register-panel.mjs"),
+      ? fileURLToPath(
+          import.meta.resolve("@storybook/addon-designs/register-tab"),
+        )
+      : fileURLToPath(
+          import.meta.resolve("@storybook/addon-designs/register-panel"),
+        ),
   ];
 };