storybookjs · ndelangen · Oct 28, 2025 · Jul 20, 2025 · Jul 22, 2025 · Jul 22, 2025
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,6 +20,14 @@ jobs:
       - name: Install dependencies
         run: npm install --ignore-scripts
 
+      - name: Build
+        run: |
+          npm run build
+
+      - name: No git changes
+        run: |
+          git diff --exit-code
+
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.19.0
+v22
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,21 @@
     "packages/*"
   ],
   "devDependencies": {
-    "prettier": "^3.2.5"
+    "prettier": "^3.6.2",
+    "@storybook/addon-designs": "*",
+    "@storybook/addon-docs": "^10.0.0-0",
+    "@storybook/react-vite": "^10.0.0-0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark-gfm": "^4.0.0",
+    "storybook": "^10.0.0-0",
+    "@auto-it/released": "^11.3.0",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.21",
+    "auto": "^11.3.0",
+    "figma-js": "^1.16.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.9.2"
   },
   "scripts": {
     "build": "npm run build --workspaces --if-present",

diff --git a/packages/examples/.storybook/main.ts b/packages/examples/.storybook/main.ts
@@ -1,15 +1,13 @@
 import remarkGfm from "remark-gfm";
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const isTabMode = process.env.STORYBOOK_ADDON_DESIGNS_MODE === "tab";
 
 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",
     {
       name: "@storybook/addon-docs",
       options: {
@@ -30,7 +28,7 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  framework: "@storybook/react-webpack5",
+  framework: "@storybook/react-vite",
 };
 
 export default config;
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -2,18 +2,7 @@
   "name": "examples",
   "version": "10.0.0",
   "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",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "remark-gfm": "^4.0.0",
-    "storybook": "^9.0.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "storybook:tab": "STORYBOOK_ADDON_DESIGNS_MODE=tab npm run storybook",

diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
@@ -6,7 +6,7 @@
     "allowJs": false,
     "resolvePackageJsonImports": true,
     "moduleResolution": "bundler",
-    "module": "esnext"
+    "module": "Preserve"
   },
   "include": ["types.d.ts", ".storybook/**/*.ts", "stories/**/*"]
 }
diff --git a/packages/storybook-addon-designs/CHANGELOG.md b/packages/storybook-addon-designs/CHANGELOG.md
@@ -1,3 +1,15 @@
+# v10.0.2 (Tue Jul 22 2025)
+
+#### 🐛 Bug Fix
+
+- feat(figma): migrate url to use embed kit v2 [#270](https://github.com/storybookjs/addon-designs/pull/270) ([@roigiladi](https://github.com/roigiladi))
+
+#### Authors: 1
+
+- Roi Giladi ([@roigiladi](https://github.com/roigiladi))
+
+---
+
 # v10.0.1 (Wed May 28 2025)
 
 #### 🐛 Bug Fix

diff --git a/packages/storybook-addon-designs/package.json b/packages/storybook-addon-designs/package.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",
@@ -36,29 +36,15 @@
   "scripts": {
     "build": "tsup",
     "build:watch": "npm run build -- --watch",
-    "prepublishOnly": "cp ../../README.md ./ && npm run build",
-    "release": "npm run prepublishOnly && auto shipit",
-    "test": "echo 'No tests' && exit 0"
+    "prepublishOnly": "cp ../../README.md ./",
+    "release": "npm run prepublishOnly && auto shipit"
   },
   "dependencies": {
     "@figspec/react": "^1.0.0"
   },
-  "devDependencies": {
-    "@auto-it/released": "^11.1.1",
-    "@types/react": "^18.2.65",
-    "@types/react-dom": "^18.2.21",
-    "@types/webpack-env": "^1.18.4",
-    "auto": "^11.1.1",
-    "figma-js": "^1.16.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 || ^18.0.0",
-    "tsup": "^8.0.2",
-    "storybook": "^9.0.0",
-    "typescript": "^5.7.3"
-  },
   "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 || ^10.0.0-0",
+    "storybook": "^10.0.0 || ^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"
   },

diff --git a/packages/storybook-addon-designs/preset.js b/packages/storybook-addon-designs/preset.js
diff --git a/packages/storybook-addon-designs/src/index.ts b/packages/storybook-addon-designs/src/index.ts
@@ -6,10 +6,6 @@ import { Config } from "./config";
  */
 export const config = (c: Config | Config[]) => c;
 
-if (typeof module !== "undefined" && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
-
 /**
  * Useful exports for third party developers and advanced usages
  */

diff --git a/packages/storybook-addon-designs/src/manager/components/Figma.tsx b/packages/storybook-addon-designs/src/manager/components/Figma.tsx
@@ -29,8 +29,10 @@ export const Figma: FC<Props> = ({ config }) => {
       return config;
     }
 
-    const embedHost = config.embedHost || location.hostname;
-    const url = `https://www.figma.com/embed?embed_host=${embedHost}&url=${config.url}`;
+    const url = createEmbedURL(
+      config.url,
+      config.embedHost || location.hostname,
+    );
 
     return {
       url,
@@ -40,3 +42,15 @@ export const Figma: FC<Props> = ({ config }) => {
 
   return <IFrame defer config={iframeConfig} />;
 };
+
+function createEmbedURL(encodedURL: string, embedHost: string) {
+  const url = new URL(encodedURL);
+  url.hostname = url.hostname.replace(/^www\./, "embed.");
+  url.searchParams.delete("embed_origin");
+  url.searchParams.set("embed-host", embedHost);
+  for (const [key, value] of url.searchParams) {
+    url.searchParams.delete(key);
+    url.searchParams.set(key.replace(/_/g, "-"), value);
+  }
+  return url.href;
+}
diff --git a/packages/storybook-addon-designs/src/manager/register.tsx b/packages/storybook-addon-designs/src/manager/register.tsx
@@ -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";

diff --git a/packages/storybook-addon-designs/src/preset.ts b/packages/storybook-addon-designs/src/preset.ts
@@ -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"),
+        ),
   ];
 };
diff --git a/packages/storybook-addon-designs/tsconfig.json b/packages/storybook-addon-designs/tsconfig.json
@@ -8,7 +8,6 @@
     "moduleResolution": "bundler",
     "jsx": "react",
     "declaration": true,
-    "outDir": "esm",
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
     "removeComments": true

diff --git a/packages/storybook-addon-designs/tsup.config.ts b/packages/storybook-addon-designs/tsup.config.ts
@@ -44,11 +44,11 @@ export default defineConfig(async (options) => {
   } = packageJson;
 
   const commonConfig: Options = {
-    splitting: false,
+    splitting: true,
     minify: !options.watch,
     treeshake: true,
-    sourcemap: true,
-    clean: true,
+    sourcemap: false,
+    clean: false,
   };
 
   const configs: Options[] = [];
@@ -63,7 +63,7 @@ export default defineConfig(async (options) => {
       dts: {
         resolve: true,
       },
-      format: ["esm", "cjs"],
+      format: ["esm"],
       target: [...BROWSER_TARGET, ...NODE_TARGET],
       platform: "neutral",
       external: [...globalManagerPackages, ...globalPreviewPackages],
@@ -94,7 +94,7 @@ export default defineConfig(async (options) => {
       dts: {
         resolve: true,
       },
-      format: ["esm", "cjs"],
+      format: ["esm"],
       target: BROWSER_TARGET,
       platform: "browser",
       external: globalPreviewPackages,
@@ -108,7 +108,7 @@ export default defineConfig(async (options) => {
     configs.push({
       ...commonConfig,
       entry: nodeEntries,
-      format: ["cjs"],
+      format: ["esm"],
       target: NODE_TARGET,
       platform: "node",
     });