@nx/storybook 24.0.0-rc.1 → 24.0.1

package/dist/src/migrations/update-23-0-0/migrate-create-nodes-v2-to-create-nodes.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = migrateCreateNodesV2ToCreateNodes;
 exports.rewriteCreateNodesV2Imports = rewriteCreateNodesV2Imports;
 const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/js/internal");
 const TS_EXTENSIONS = ['.ts', '.tsx', '.cts', '.mts'];
 const DEPRECATED_NAME = 'createNodesV2';
 const CANONICAL_NAME = 'createNodes';
@@ -41,7 +42,7 @@ async function migrateCreateNodesV2ToCreateNodes(tree) {
  * any `type` modifier, and any default import are left untouched.
  */
 function rewriteCreateNodesV2Imports(source, specifiers) {
-    ts ??= (0, devkit_1.ensurePackage)('typescript', '*');
+    ts ??= (0, internal_1.ensureTypescript)();
     const sourceFile = ts.createSourceFile('tmp.ts', source, ts.ScriptTarget.Latest, 
     /* setParentNodes */ true, ts.ScriptKind.TSX);
     const changes = [];

package/dist/src/migrations/update-24-0-1/adapt-highlight-usage.md

@@ -0,0 +1,107 @@
+# Storybook Highlight Migration Instructions for LLM
+
+## Overview
+
+Storybook 9.1.21 and 10.6.2 changed the Highlight channel API:
+
+- A `HIGHLIGHT` payload that uses `selectors` needs a string `id`. Storybook ignores it otherwise.
+- Menu items no longer accept `clickEvent`. They take `clickable: true`, and a click emits `HIGHLIGHT_MENU_CLICK` with `(highlightId, itemId, details)`.
+- `details.element` no longer has `outerHTML` or `attributes`. It keeps `tagName` and `localName`.
+
+A deterministic pre-pass added an `id` to object literal payloads emitted through an emitter returned by `useChannel`. `impl.agentContext` in the step's `nx_migrate_prompt` block lists every file that uses `storybook/highlight` or `clickEvent`, including the files the pre-pass changed. When you apply these instructions by hand, the next steps the migration printed list the same files. Change only those files and the files Step 2 leads you to. Do not change Highlight code in `node_modules`, payloads that use `elements`, or Storybook and Nx configuration.
+
+## Pre-Migration Checklist
+
+Confirm both conditions before changing anything. If either fails, make no changes and stop.
+
+1. `impl.agentContext` lists at least one file. If that field is absent, use the next steps the migration printed. If you have neither, search the workspace outside `node_modules` for `storybook/highlight` and `clickEvent`, and treat each matching file as listed.
+2. The workspace is on `storybook` 9.1.21 or later in the 9.x line, or on 10.6.2 or later (`storybook` in `package.json`).
+
+## Step 1: Verify the pre-pass
+
+Open each file the pre-pass changed, listed in `impl.changes`. If that field is absent, search the workspace outside `node_modules` for `Math.random().toString(36).slice(2)`. The pre-pass gave each payload an id made of the file path and a random suffix, such as `` `apps/app/.storybook/preview.ts-${Math.random().toString(36).slice(2)}` ``. Every emit gets a new id, so each one adds its own highlight, as Storybook did before the upgrade. Do not re-apply these edits. Step 3 is the only reason to change a generated id.
+
+## Step 2: Find the Highlight usage
+
+In each listed file, find:
+
+- Every `HIGHLIGHT` emit, through any emitter: a `useChannel` emitter, `channel.emit`, or a function that wraps an emit. The event is `HIGHLIGHT` from `storybook/highlight`, under any name or through a namespace import, or its string value `storybook/highlight/add`.
+- Menu items in those payloads. Follow each `menu` value through variables, function calls, spreads and imports to the items it builds.
+- Objects typed `HighlightOptions`, and code that uses `ClickEventDetails` or the `details` of a menu click.
+
+A file that only uses `clickEvent` may have nothing to do with Highlight. Change its objects only after you follow them to the `menu` of a `HIGHLIGHT` payload.
+
+When a listed file re-exports `HIGHLIGHT`, `HighlightOptions` or `ClickEventDetails`, or exports a function that emits `HIGHLIGHT`, search the workspace outside `node_modules` for the files that import it, and treat those files as listed.
+
+## Step 3: Replace `clickEvent` in menu items
+
+For each menu item that sets `clickEvent`, including through an assignment such as `item.clickEvent = '<event>'` or a spread:
+
+1. Replace `clickEvent: '<event>'` with `clickable: true`. Replace a `clickEvent` assignment the same way.
+2. Give the `HIGHLIGHT` payload that carries the menu a fixed, descriptive `id`, replacing a generated one. With a fixed id, a later emit replaces the earlier highlight. If the call emits several times between story renders and each highlight must stay visible, add a unique suffix after a fixed prefix and compare the prefix in the listener.
+3. Search the workspace, outside `node_modules`, for the listener of `<event>`. It can live in a preview file, a story, or a manager or addon file. Move it to `HIGHLIGHT_MENU_CLICK`, imported from `storybook/highlight`. The old listener received `(itemId, details)`. The new one receives `(highlightId, itemId, details)` and must return early when `highlightId` is not the payload's id.
+
+**Before:**
+
+```ts
+emit(HIGHLIGHT, {
+  id: `apps/app/.storybook/preview.ts-${Math.random().toString(36).slice(2)}`,
+  selectors: ['h2'],
+  menu: [
+    [
+      {
+        id: 'details',
+        title: 'Show details',
+        clickEvent: 'my-addon/show-details',
+      },
+    ],
+  ],
+});
+
+channel.on('my-addon/show-details', (itemId, details) => {
+  showDetails(itemId, details);
+});
+```
+
+**After:**
+
+```ts
+import { HIGHLIGHT, HIGHLIGHT_MENU_CLICK } from 'storybook/highlight';
+
+emit(HIGHLIGHT, {
+  id: 'my-addon/headings',
+  selectors: ['h2'],
+  menu: [[{ id: 'details', title: 'Show details', clickable: true }]],
+});
+
+channel.on(HIGHLIGHT_MENU_CLICK, (highlightId, itemId, details) => {
+  if (highlightId !== 'my-addon/headings') return;
+  showDetails(itemId, details);
+});
+```
+
+## Step 4: Stop reading `outerHTML` and `attributes`
+
+For each use of `ClickEventDetails` you found, and for each listener you moved in Step 3, replace reads of `details.element.outerHTML` and `details.element.attributes`. Use `details.element.tagName`, `details.element.localName` or `details.selectors`. If the code needs the element's markup or attributes and nothing else gives them, leave that code unchanged and report it to the user.
+
+## Step 5: Fix objects typed `HighlightOptions`
+
+`HighlightOptions.id` is now required. Give each object of that type without an `id` a unique string `id`. If one object is emitted several times between story renders and each highlight must stay visible, add a unique id where it is emitted instead, and type the object as `Omit<HighlightOptions, 'id'>`.
+
+## Step 6: Give the remaining payloads an id
+
+Make sure each `HIGHLIGHT` payload that uses `selectors` has a unique, non-empty string `id`:
+
+- Without an `id`, add one made of the file path and a random suffix, like the pre-pass. Where `Math` is a local binding, build the id without it, for example with `globalThis.Math.random()` or a fixed string.
+- When the `id` comes from a variable, an argument, a spread or a computed key, keep it, and add a fallback only where it can be missing or empty.
+- When the payload has a type that doesn't allow `id`, such as a `satisfies` type, a parameter type or a type annotation, add `id` to that type.
+
+## Post-Migration Validation
+
+1. Run the `typecheck`, `lint` and `test` targets that exist for the projects owning the changed files, for example `npx nx run-many -t typecheck,lint,test -p <projects>`.
+2. Fix failures caused by this migration and re-run until green.
+3. Search the workspace, outside `node_modules`, for `clickEvent` and confirm no Highlight menu item still uses it.
+
+## Nx-Specific Notes
+
+Highlight code lives in Storybook preview and manager files (`.storybook/preview.*`, `.storybook/manager.*`), in story files, and in addon libraries inside the workspace. Each Storybook project has its own `.storybook` directory.

package/dist/src/migrations/update-24-0-1/add-highlight-ids.d.ts

@@ -0,0 +1,10 @@
+import { type Tree } from '@nx/devkit';
+export default function addHighlightIds(tree: Tree): Promise<{
+    skipAgentic: boolean;
+    nextSteps?: undefined;
+    agentContext?: undefined;
+} | {
+    skipAgentic?: undefined;
+    nextSteps: string[];
+    agentContext: string[];
+}>;

package/dist/src/migrations/update-24-0-1/add-highlight-ids.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = addHighlightIds;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/js/internal");
+const HIGHLIGHT_MODULE = 'storybook/highlight';
+const PREVIEW_API_MODULE = 'storybook/preview-api';
+// The value of the `HIGHLIGHT` constant.
+const HIGHLIGHT_EVENT = 'storybook/highlight/add';
+const HIGHLIGHT_DOCS = 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#highlight-menu-items-emit-a-fixed-highlight_menu_click-event-with-a-mandatory-id';
+const SOURCE_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
+// Story and docs formats whose scripts can use Highlight but aren't parsed here.
+const UNPARSED_FILE_PATTERN = /\.(mdx|svelte|vue)$/;
+const LEADING_NEWLINE = /[ \t]*(\r?\n[ \t]*)/y;
+let ts;
+async function addHighlightIds(tree) {
+    let rewritten = false;
+    const pending = [];
+    // Stories, decorators, preview files and addons can all use Highlight, so
+    // the whole workspace is scanned.
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '.', (filePath) => {
+        const parsable = SOURCE_FILE_PATTERN.test(filePath);
+        if (!parsable && !UNPARSED_FILE_PATTERN.test(filePath)) {
+            return;
+        }
+        const content = tree.read(filePath, 'utf-8');
+        const usesHighlight = content.includes(HIGHLIGHT_MODULE);
+        if (!usesHighlight && !content.includes('clickEvent')) {
+            return;
+        }
+        if (parsable && usesHighlight) {
+            const migrated = addIds(filePath, content);
+            if (migrated !== content) {
+                tree.write(filePath, migrated);
+                rewritten = true;
+            }
+        }
+        // Files are listed even after ids were added: other Highlight usage in
+        // them can take forms that static analysis can't rule out.
+        pending.push(usesHighlight
+            ? `${filePath} uses "${HIGHLIGHT_MODULE}". Make sure each HIGHLIGHT payload with "selectors" has a unique string "id", that menu items use "clickable" instead of "clickEvent", and that code reading click details doesn't use "outerHTML" or "attributes". See ${HIGHLIGHT_DOCS}.`
+            : `${filePath} uses "clickEvent". If it defines Highlight menu items, set "clickable: true" on them and move the "clickEvent" listener to HIGHLIGHT_MENU_CLICK. See ${HIGHLIGHT_DOCS}.`);
+    });
+    if (rewritten) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    if (pending.length === 0) {
+        return { skipAgentic: true };
+    }
+    return { nextSteps: pending, agentContext: pending };
+}
+// Adds an id only to an object literal passed straight to an emitter from
+// `useChannel`, which Storybook types as `(eventName: string, ...args: any)`.
+// Any other payload can have a type that rejects the new property.
+function addIds(filePath, content) {
+    ts ??= (0, internal_1.ensureTypescript)();
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, 
+    /* setParentNodes */ true);
+    if (sourceFile.parseDiagnostics?.length) {
+        return content;
+    }
+    const imports = readImports(sourceFile);
+    if (imports.useChannel.length === 0) {
+        return content;
+    }
+    const checker = createChecker(sourceFile);
+    const isHighlightBinding = createImportBindingCheck(checker, imports.highlight);
+    const isUseChannelBinding = createImportBindingCheck(checker, imports.useChannel);
+    const isHighlightEvent = (node) => ts.isStringLiteralLike(node)
+        ? node.text === HIGHLIGHT_EVENT
+        : isHighlightBinding(node);
+    const isUseChannelEmitter = (callee) => {
+        const declaration = checker.getSymbolAtLocation(callee)?.valueDeclaration;
+        return (declaration !== undefined &&
+            ts.isVariableDeclaration(declaration) &&
+            !declaration.type &&
+            !ts.getJSDocType(declaration) &&
+            declaration.initializer !== undefined &&
+            ts.isCallExpression(declaration.initializer) &&
+            isUseChannelBinding(declaration.initializer.expression));
+    };
+    // A fixed id would make a repeated emit replace the earlier highlight.
+    const id = `\`${escapeTemplateText(filePath)}-\${Math.random().toString(36).slice(2)}\``;
+    const changes = [];
+    const visit = (node) => {
+        if (ts.isCallExpression(node)) {
+            const payload = getAddablePayload(node);
+            if (payload &&
+                isHighlightEvent(node.arguments[0]) &&
+                isUseChannelEmitter(node.expression) &&
+                !hasLocalMath(checker, payload)) {
+                changes.push(insertIdProperty(payload, id, sourceFile));
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return (0, devkit_1.applyChangesToString)(content, changes);
+}
+function readImports(sourceFile) {
+    const imports = { highlight: [], useChannel: [] };
+    for (const statement of sourceFile.statements) {
+        if (!ts.isImportDeclaration(statement) ||
+            !ts.isStringLiteral(statement.moduleSpecifier)) {
+            continue;
+        }
+        const bindings = statement.importClause?.namedBindings;
+        if (!bindings || !ts.isNamedImports(bindings)) {
+            continue;
+        }
+        const moduleName = statement.moduleSpecifier.text;
+        for (const element of bindings.elements) {
+            const imported = (element.propertyName ?? element.name).text;
+            if (moduleName === HIGHLIGHT_MODULE && imported === 'HIGHLIGHT') {
+                imports.highlight.push(element.name);
+            }
+            else if (moduleName === PREVIEW_API_MODULE &&
+                imported === 'useChannel') {
+                imports.useChannel.push(element.name);
+            }
+        }
+    }
+    return imports;
+}
+// Returns the payload when it is an object literal with readable keys that
+// sets neither `id` nor the legacy `elements`, which Storybook gives an id.
+function getAddablePayload(call) {
+    const payload = call.arguments[1];
+    if (!payload || !ts.isObjectLiteralExpression(payload)) {
+        return undefined;
+    }
+    const addable = payload.properties.every((property) => {
+        if (ts.isSpreadAssignment(property)) {
+            return false;
+        }
+        const name = getPropertyName(property.name);
+        return name !== undefined && name !== 'id' && name !== 'elements';
+    });
+    return addable ? payload : undefined;
+}
+function getPropertyName(name) {
+    if (!ts.isComputedPropertyName(name)) {
+        return name.text;
+    }
+    return ts.isStringLiteralLike(name.expression)
+        ? name.expression.text
+        : undefined;
+}
+// A local declaration can reuse an imported name, so names are compared by the
+// symbol the checker binds them to.
+function createImportBindingCheck(checker, bindings) {
+    const importSymbols = new Set(bindings.map((binding) => checker.getSymbolAtLocation(binding)));
+    return (node) => {
+        const symbol = checker.getSymbolAtLocation(node);
+        return symbol !== undefined && importSymbols.has(symbol);
+    };
+}
+function createChecker(sourceFile) {
+    const fileName = sourceFile.fileName;
+    return ts
+        .createProgram([fileName], { noLib: true, noResolve: true, allowJs: true, types: [] }, {
+        getSourceFile: (name) => (name === fileName ? sourceFile : undefined),
+        getDefaultLibFileName: () => 'lib.d.ts',
+        writeFile: () => { },
+        getCurrentDirectory: () => '',
+        getCanonicalFileName: (name) => name,
+        useCaseSensitiveFileNames: () => true,
+        getNewLine: () => '\n',
+        fileExists: (name) => name === fileName,
+        readFile: () => undefined,
+    })
+        .getTypeChecker();
+}
+// Without lib files the global `Math` has no symbol, so any match is a local
+// binding. Imports, type-only ones included, are unresolved aliases.
+function hasLocalMath(checker, node) {
+    return checker
+        .getSymbolsInScope(node, ts.SymbolFlags.Value | ts.SymbolFlags.Alias)
+        .some((symbol) => symbol.name === 'Math');
+}
+function insertIdProperty(literal, id, sourceFile) {
+    const content = sourceFile.text;
+    const index = literal.getStart(sourceFile) + 1;
+    LEADING_NEWLINE.lastIndex = index;
+    const newline = LEADING_NEWLINE.exec(content)?.[1];
+    const text = newline
+        ? `${newline}id: ${id},`
+        : ` id: ${id},${/\s/.test(content[index]) ? '' : ' '}`;
+    return { type: devkit_1.ChangeType.Insert, index, text };
+}
+function escapeTemplateText(text) {
+    return text.replace(/[`\\]|\$\{/g, (match) => `\\${match}`);
+}

package/dist/src/migrations/update-24-0-1/add-highlight-ids.md

@@ -0,0 +1,53 @@
+#### Add ids to Storybook Highlight payloads
+
+Storybook 9.1.21 and 10.6.2 ignore a `HIGHLIGHT` payload that uses `selectors` without a string `id`. Storybook logs a warning in the browser console and draws nothing. Earlier versions drew the highlight and added a new one for every emit.
+
+This migration adds an `id` to the payloads it can change without breaking a type check. These are object literals without an `id`, emitted through an emitter returned by `useChannel` from `storybook/preview-api`, as in the Storybook docs. Storybook types that emitter's payload as `any`. The event can be `HIGHLIGHT` imported from `storybook/highlight` under any name, or its string value `storybook/highlight/add`.
+
+The id is the file path followed by a random suffix, such as `` `apps/app/.storybook/preview.ts-${Math.random().toString(36).slice(2)}` ``. Every emit gets a new id, so each one adds its own highlight, as in earlier versions. Storybook builds the ids of legacy `elements` payloads the same way. To make a later emit replace the earlier highlight, change the id to a fixed string.
+
+The migration then lists every file that uses `storybook/highlight` or `clickEvent`, including the files it changed. In agentic runs, an AI agent finishes the Highlight changes in those files:
+
+- It gives an `id` to the other payloads, such as payloads emitted through `addons.getChannel()`, through a typed emitter or from a variable.
+- It replaces `clickEvent` in menu items with `clickable: true`. A click now emits `HIGHLIGHT_MENU_CLICK` with the highlight id, the menu item id and the click details, so the agent moves the `clickEvent` listener to that event.
+- It replaces reads of `outerHTML` and `attributes` on the `element` of the click details, which no longer has them.
+- It adds an `id` to objects typed `HighlightOptions`, which now requires one.
+
+#### Sample code changes
+
+##### Before
+
+```ts title="apps/app/.storybook/preview.ts"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+export const decorators = [
+  (storyFn) => {
+    const emit = useChannel({});
+    emit(HIGHLIGHT, { selectors: ['h2'] });
+    return storyFn();
+  },
+];
+```
+
+##### After
+
+```ts title="apps/app/.storybook/preview.ts"
+import { useChannel } from 'storybook/preview-api';
+import { HIGHLIGHT } from 'storybook/highlight';
+
+export const decorators = [
+  (storyFn) => {
+    const emit = useChannel({});
+    emit(HIGHLIGHT, {
+      id: `apps/app/.storybook/preview.ts-${Math.random().toString(36).slice(2)}`,
+      selectors: ['h2'],
+    });
+    return storyFn();
+  },
+];
+```
+
+#### Reference
+
+- [Storybook migration guide for Highlight menu items and ids](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#highlight-menu-items-emit-a-fixed-highlight_menu_click-event-with-a-mandatory-id)

package/dist/src/utils/versions.d.ts

@@ -4,7 +4,7 @@ export declare const litVersion = "^2.6.1";
 export declare const tsNodeVersion = "10.9.1";
 export declare const tsLibVersion = "^2.3.0";
 export declare const minSupportedStorybookVersion = "8.0.0";
-export declare const storybookVersion = "^10.5.0";
+export declare const storybookVersion = "^10.6.2";
 export declare const reactVersion = "^18.2.0";
 export declare const viteVersion = "^6.0.0";
 export declare const viteTsconfigPathsVersion = "~4.3.2";

package/dist/src/utils/versions.js

@@ -13,7 +13,7 @@ exports.tsNodeVersion = '10.9.1';
 exports.tsLibVersion = '^2.3.0';
 exports.minSupportedStorybookVersion = '8.0.0';
 // Fresh-install default. Latest supported major.
-exports.storybookVersion = '^10.5.0';
+exports.storybookVersion = '^10.6.2';
 exports.reactVersion = '^18.2.0';
 exports.viteVersion = '^6.0.0';
 exports.viteTsconfigPathsVersion = '~4.3.2';
@@ -24,9 +24,9 @@ const latestVersions = {
     testRunnerVersion: exports.testRunnerVersion,
 };
 const versionMap = {
-    8: { storybookVersion: '^8.6.11', testRunnerVersion: '^0.21.0' },
-    9: { storybookVersion: '^9.0.5', testRunnerVersion: '^0.23.0' },
-    10: { storybookVersion: '^10.5.0', testRunnerVersion: exports.testRunnerVersion },
+    8: { storybookVersion: '^8.6.19', testRunnerVersion: '^0.21.0' },
+    9: { storybookVersion: '^9.1.21', testRunnerVersion: '^0.23.0' },
+    10: { storybookVersion: '^10.6.2', testRunnerVersion: exports.testRunnerVersion },
 };
 function versions(tree) {
     const installedStorybookMajor = storybookMajorVersion(tree);

package/migrations.json

@@ -46,6 +46,16 @@
       "description": "Sets a `readyWhen` that waits for the Storybook port on `@storybook/angular:start-storybook` targets that get no `readyWhen` from their own configuration or `targetDefaults`, so tasks that depend on them with `waitFor: 'ready'` start once Storybook is listening. Also sets `continuous: true` on those targets when neither they nor `targetDefaults` set `continuous` and they don't set `smokeTest`.",
       "implementation": "./dist/src/migrations/update-24-0-0/add-start-storybook-ready-when",
       "documentation": "./dist/src/migrations/update-24-0-0/add-start-storybook-ready-when.md"
+    },
+    "update-24-0-1-add-highlight-ids": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "storybook": ">=9.1.21 <10.0.0 || >=10.6.2"
+      },
+      "description": "Adds an `id` to Storybook `HIGHLIGHT` payloads emitted through `useChannel`, which Storybook 9.1.21 and 10.6.2 ignore without one. An AI prompt then finishes the Highlight changes in every file that uses `storybook/highlight` or `clickEvent`, including menu items that must replace `clickEvent` with `clickable` and a `HIGHLIGHT_MENU_CLICK` listener.",
+      "implementation": "./dist/src/migrations/update-24-0-1/add-highlight-ids",
+      "prompt": "./dist/src/migrations/update-24-0-1/adapt-highlight-usage.md",
+      "documentation": "./dist/src/migrations/update-24-0-1/add-highlight-ids.md"
     }
   },
   "packageJsonUpdates": {
@@ -461,6 +471,410 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "24.0.1-storybook-8": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "storybook": "^8.0.0"
+      },
+      "packages": {
+        "@storybook/angular": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "storybook": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": true
+        },
+        "@storybook/addon-onboarding": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-themes": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-webpack5": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/core-webpack": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/nextjs": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-webpack5": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server-webpack5": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/sveltekit": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-essentials": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-9": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "storybook": "^9.0.0"
+      },
+      "packages": {
+        "@storybook/angular": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "storybook": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": true
+        },
+        "@storybook/addon-onboarding": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-themes": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-webpack5": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/core-webpack": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/nextjs": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-webpack5": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server-webpack5": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/sveltekit": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-a11y": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-vitest": {
+          "version": "^9.1.21",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-10": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "storybook": "^10.0.0"
+      },
+      "packages": {
+        "@storybook/angular": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "storybook": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": true
+        },
+        "@storybook/addon-onboarding": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-themes": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-webpack5": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/core-webpack": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/html-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/nextjs": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/preact-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-webpack5": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/server-webpack5": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/svelte-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/sveltekit": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/vue3-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-a11y": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-vitest": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-core-8": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@storybook/core": ">=8.0.0 <8.6.19"
+      },
+      "packages": {
+        "@storybook/core": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-core-server-8": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@storybook/core-server": ">=8.0.0 <8.6.19"
+      },
+      "packages": {
+        "@storybook/core-server": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-experimental-addon-test-8": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@storybook/experimental-addon-test": ">=8.0.0 <8.6.19"
+      },
+      "packages": {
+        "@storybook/experimental-addon-test": {
+          "version": "^8.6.19",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-storybook-addon-mcp-10": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@storybook/addon-mcp": ">=10.6.0 <10.6.2"
+      },
+      "packages": {
+        "@storybook/addon-mcp": {
+          "version": "^10.6.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-chromatic-storybook-3": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@chromatic-com/storybook": ">=3.0.0 <3.2.8"
+      },
+      "packages": {
+        "@chromatic-com/storybook": {
+          "version": "^3.2.8",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-chromatic-storybook-4": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@chromatic-com/storybook": ">=4.0.0 <4.1.4"
+      },
+      "packages": {
+        "@chromatic-com/storybook": {
+          "version": "^4.1.4",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.1-chromatic-storybook-5": {
+      "version": "24.0.1-beta.0",
+      "requires": {
+        "@chromatic-com/storybook": ">=5.0.0 <5.5.1"
+      },
+      "packages": {
+        "@chromatic-com/storybook": {
+          "version": "^5.5.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "24.0.0-rc.1",
+  "version": "24.0.1",
   "private": false,
   "type": "commonjs",
   "files": [
@@ -97,20 +97,20 @@
     }
   },
   "dependencies": {
-    "@nx/devkit": "24.0.0-rc.1",
+    "@nx/devkit": "24.0.1",
     "@phenomnomnominal/tsquery": "~6.2.0",
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "24.0.0-rc.1",
-    "@nx/js": "24.0.0-rc.1",
-    "@nx/eslint": "24.0.0-rc.1"
+    "@nx/cypress": "24.0.1",
+    "@nx/js": "24.0.1",
+    "@nx/eslint": "24.0.1"
   },
   "devDependencies": {
-    "nx": "24.0.0-rc.1",
+    "nx": "24.0.1",
     "storybook": "9.0.6"
   },
   "peerDependencies": {
-    "@nx/web": "24.0.0-rc.1",
+    "@nx/web": "24.0.1",
     "storybook": ">=8.0.0 <11.0.0"
   },
   "peerDependenciesMeta": {