@nx/storybook 17.0.2 → 17.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -15,9 +20,9 @@
 
 <hr>
 
-# Nx: Smart, Fast and Extensible Build System
+# Nx: Smart Monorepos · Fast CI
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
 This package is a [Storybook plugin for Nx](https://nx.dev/packages/storybook).
 
@@ -59,5 +64,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/generators.json

@@ -3,14 +3,14 @@
   "version": "0.1",
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init",
+      "factory": "./src/generators/init/init#initGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
       "description": "Add Storybook configuration to the workspace.",
       "aliases": ["ng-add"],
       "hidden": true
     },
     "configuration": {
-      "factory": "./src/generators/configuration/configuration",
+      "factory": "./src/generators/configuration/configuration#configurationGeneratorInternal",
       "schema": "./src/generators/configuration/schema.json",
       "description": "Add Storybook configuration to a UI library or an application.",
       "hidden": false

package/migrations.json

@@ -50,6 +50,137 @@
     }
   },
   "packageJsonUpdates": {
+    "17.2.0-beta.2": {
+      "version": "17.2.0-beta.2",
+      "packages": {
+        "vite": {
+          "version": "^5.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "17.1.0-beta.4": {
+      "version": "17.1.0-beta.4",
+      "packages": {
+        "@storybook/testing-library": {
+          "version": "^0.2.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/jest": {
+          "version": "^0.2.3",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "17.1.0": {
+      "version": "17.1.0-beta.3",
+      "packages": {
+        "@storybook/test-runner": {
+          "version": "^0.13.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/core-server": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/angular": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-vite": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-webpack5": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-webpack5": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-a11y": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-actions": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-backgrounds": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-controls": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-docs": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-essentials": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-interactions": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-mdx-gfm": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-highlight": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-jest": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-links": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-measure": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-outline": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots-puppeteer": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storysource": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-toolbars": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-viewport": {
+          "version": "^7.5.3",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
     "17.0.0": {
       "version": "17.0.0-rc.3",
       "packages": {
@@ -832,6 +963,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "18.2.0": {
+      "version": "18.2.0-beta.1",
+      "packages": {
+        "core-js": {
+          "version": "3.36.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -30,14 +30,14 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
+    "@nx/devkit": "17.0.4",
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "semver": "7.5.3",
+    "semver": "^7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "17.0.2",
-    "@nx/devkit": "17.0.2",
-    "@nx/js": "17.0.2",
-    "@nx/eslint": "17.0.2",
-    "@nrwl/storybook": "17.0.2"
+    "@nx/cypress": "17.0.4",
+    "@nx/js": "17.0.4",
+    "@nx/eslint": "17.0.4",
+    "@nrwl/storybook": "17.0.4"
   },
   "publishConfig": {
     "access": "public"

package/plugin.d.ts

@@ -0,0 +1 @@
+export { createNodes, StorybookPluginOptions, createDependencies, } from './src/plugins/plugin';

package/plugin.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDependencies = exports.createNodes = void 0;
+var plugin_1 = require("./src/plugins/plugin");
+Object.defineProperty(exports, "createNodes", { enumerable: true, get: function () { return plugin_1.createNodes; } });
+Object.defineProperty(exports, "createDependencies", { enumerable: true, get: function () { return plugin_1.createDependencies; } });

package/presets/cypress.d.ts

@@ -1,20 +1 @@
-export declare function nxE2EStorybookPreset(filePath: string): {
-    baseUrl: string;
-    fileServerFolder: string;
-    supportFile: string;
-    specPattern: string;
-    fixturesFolder: string;
-    videosFolder: string;
-    screenshotsFolder: string;
-    chromeWebSecurity: boolean;
-} | {
-    baseUrl: string;
-    setupNodeEvents(on: any): void;
-    fileServerFolder: string;
-    supportFile: string;
-    specPattern: string;
-    fixturesFolder: string;
-    videosFolder: string;
-    screenshotsFolder: string;
-    chromeWebSecurity: boolean;
-};
+export declare function nxE2EStorybookPreset(filePath: string): any;

package/src/executors/build-storybook/build-storybook.impl.js

@@ -5,7 +5,7 @@ const build = require("@storybook/core-server");
 const utilities_1 = require("../../utils/utilities");
 async function buildStorybookExecutor(options, context) {
     (0, utilities_1.storybookConfigExistsCheck)(options.configDir, context.projectName);
-    const storybook7 = (0, utilities_1.storybookMajorVersion)() === 7;
+    const storybook7 = (0, utilities_1.storybookMajorVersion)() >= 7;
     if (!storybook7) {
         throw (0, utilities_1.pleaseUpgrade)();
     }

package/src/executors/storybook/storybook.impl.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const build = require("@storybook/core-server");
 const utilities_1 = require("../../utils/utilities");
 async function* storybookExecutor(options, context) {
-    const storybook7 = (0, utilities_1.storybookMajorVersion)() === 7;
+    const storybook7 = (0, utilities_1.storybookMajorVersion)() >= 7;
     if (!storybook7) {
         throw (0, utilities_1.pleaseUpgrade)();
     }

package/src/generators/configuration/configuration.d.ts

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from './schema';
-export declare function configurationGenerator(tree: Tree, rawSchema: StorybookConfigureSchema): Promise<GeneratorCallback>;
+export declare function configurationGenerator(tree: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
+export declare function configurationGeneratorInternal(tree: Tree, rawSchema: StorybookConfigureSchema): Promise<GeneratorCallback>;
 export default configurationGenerator;

package/src/generators/configuration/configuration.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configurationGenerator = void 0;
+exports.configurationGeneratorInternal = exports.configurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
 const cypress_project_1 = require("../cypress-project/cypress-project");
 const init_1 = require("../init/init");
 const util_functions_1 = require("./lib/util-functions");
@@ -9,40 +10,62 @@ const eslint_1 = require("@nx/eslint");
 const utilities_1 = require("../../utils/utilities");
 const versions_1 = require("../../utils/versions");
 const interaction_testing_utils_1 = require("./lib/interaction-testing.utils");
-async function configurationGenerator(tree, rawSchema) {
+const ensure_dependencies_1 = require("./lib/ensure-dependencies");
+const edit_root_tsconfig_1 = require("./lib/edit-root-tsconfig");
+function configurationGenerator(tree, schema) {
+    return configurationGeneratorInternal(tree, { addPlugin: false, ...schema });
+}
+exports.configurationGenerator = configurationGenerator;
+async function configurationGeneratorInternal(tree, rawSchema) {
     if ((0, utilities_1.storybookMajorVersion)() === 6) {
         throw new Error((0, utilities_1.pleaseUpgrade)());
     }
-    const schema = normalizeSchema(rawSchema);
+    const schema = normalizeSchema(tree, rawSchema);
     const tasks = [];
-    const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.name);
-    const { nextBuildTarget, compiler, viteBuildTarget } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
-    let viteConfigFilePath;
-    if (viteBuildTarget) {
-        viteConfigFilePath = (0, util_functions_1.getViteConfigFilePath)(tree, root, targets[viteBuildTarget]?.options?.configFile);
-    }
-    if (viteBuildTarget) {
+    const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
+    const { compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
+    const viteConfig = (0, util_functions_1.findViteConfig)(tree, root);
+    const viteConfigFilePath = viteConfig?.fullConfigPath;
+    const viteConfigFileName = viteConfig?.viteConfigFileName;
+    const nextConfigFilePath = (0, util_functions_1.findNextConfig)(tree, root);
+    const metroConfigFilePath = (0, util_functions_1.findMetroConfig)(tree, root);
+    if (viteConfigFilePath) {
         if (schema.uiFramework === '@storybook/react-webpack5') {
-            devkit_1.logger.info(`Your project ${schema.name} uses Vite as a bundler.
+            devkit_1.logger.info(`Your project ${schema.project} uses Vite as a bundler.
         Nx will configure Storybook for this project to use Vite as well.`);
             schema.uiFramework = '@storybook/react-vite';
         }
         if (schema.uiFramework === '@storybook/web-components-webpack5') {
-            devkit_1.logger.info(`Your project ${schema.name} uses Vite as a bundler.
+            devkit_1.logger.info(`Your project ${schema.project} uses Vite as a bundler.
         Nx will configure Storybook for this project to use Vite as well.`);
             schema.uiFramework = '@storybook/web-components-vite';
         }
     }
-    if (nextBuildTarget) {
+    if (nextConfigFilePath) {
         schema.uiFramework = '@storybook/nextjs';
     }
+    const jsInitTask = await (0, js_1.initGenerator)(tree, {
+        ...schema,
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
     const initTask = await (0, init_1.initGenerator)(tree, {
-        uiFramework: schema.uiFramework,
-        js: schema.js,
+        skipFormat: true,
+        addPlugin: schema.addPlugin,
     });
     tasks.push(initTask);
-    const mainDir = !!nextBuildTarget && projectType === 'application' ? 'components' : 'src';
-    (0, util_functions_1.createProjectStorybookDir)(tree, schema.name, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), schema.interactionTests, mainDir, !!nextBuildTarget, compiler === 'swc', !!viteBuildTarget || schema.uiFramework.endsWith('-vite'), viteConfigFilePath);
+    tasks.push((0, ensure_dependencies_1.ensureDependencies)(tree, { uiFramework: schema.uiFramework }));
+    (0, edit_root_tsconfig_1.editRootTsConfig)(tree);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/storybook/plugin'
+        : p.plugin === '@nx/storybook/plugin');
+    const mainDir = !!nextConfigFilePath && projectType === 'application'
+        ? 'components'
+        : 'src';
+    const usesVite = !!viteConfigFilePath || schema.uiFramework?.endsWith('-vite');
+    const useReactNative = !!metroConfigFilePath;
+    (0, util_functions_1.createProjectStorybookDir)(tree, schema.project, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), schema.interactionTests, mainDir, !!nextConfigFilePath, compiler === 'swc', usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName, useReactNative);
     if (schema.uiFramework !== '@storybook/angular') {
         (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
     }
@@ -52,21 +75,30 @@ async function configurationGenerator(tree, rawSchema) {
     (0, util_functions_1.updateLintConfig)(tree, schema);
     (0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
     (0, util_functions_1.addStorybookToNamedInputs)(tree);
-    if (schema.uiFramework === '@storybook/angular') {
-        (0, util_functions_1.addAngularStorybookTask)(tree, schema.name, schema.interactionTests);
+    if (!hasPlugin) {
+        (0, util_functions_1.addStorybookToTargetDefaults)(tree);
     }
-    else {
-        (0, util_functions_1.addStorybookTask)(tree, schema.name, schema.uiFramework, schema.interactionTests);
+    let devDeps = {};
+    if (!hasPlugin || schema.addExplicitTargets) {
+        if (schema.uiFramework === '@storybook/angular') {
+            (0, util_functions_1.addAngularStorybookTarget)(tree, schema.project, schema.interactionTests);
+        }
+        else {
+            (0, util_functions_1.addStorybookTarget)(tree, schema.project, schema.uiFramework, schema.interactionTests);
+        }
+        if (schema.configureStaticServe) {
+            await (0, util_functions_1.addStaticTarget)(tree, schema);
+        }
     }
-    if (schema.configureStaticServe) {
-        (0, util_functions_1.addStaticTarget)(tree, schema);
+    else {
+        devDeps['storybook'] = versions_1.storybookVersion;
     }
-    // TODO(katerina): Nx 18 -> remove Cypress
+    // TODO(katerina): Nx 19 -> remove Cypress
     if (schema.configureCypress) {
-        const e2eProject = await (0, util_functions_1.getE2EProjectName)(tree, schema.name);
+        const e2eProject = await (0, util_functions_1.getE2EProjectName)(tree, schema.project);
         if (!e2eProject) {
             const cypressTask = await (0, cypress_project_1.cypressProjectGenerator)(tree, {
-                name: schema.name,
+                name: schema.project,
                 js: schema.js,
                 linter: schema.linter,
                 directory: schema.cypressDirectory,
@@ -79,13 +111,15 @@ async function configurationGenerator(tree, rawSchema) {
             tasks.push(cypressTask);
         }
         else {
-            devkit_1.logger.warn(`There is already an e2e project setup for ${schema.name}, called ${e2eProject}.`);
+            devkit_1.logger.warn(`There is already an e2e project setup for ${schema.project}, called ${e2eProject}.`);
         }
     }
-    let devDeps = {};
     if (schema.tsConfiguration) {
         devDeps['ts-node'] = versions_1.tsNodeVersion;
     }
+    if (usesVite && !viteConfigFilePath) {
+        devDeps['tslib'] = versions_1.tsLibVersion;
+    }
     if (schema.interactionTests) {
         devDeps = {
             ...devDeps,
@@ -99,8 +133,7 @@ async function configurationGenerator(tree, rawSchema) {
         schema.uiFramework === '@storybook/react-webpack5') {
         devDeps['core-js'] = versions_1.coreJsVersion;
     }
-    if (schema.uiFramework.endsWith('-vite') &&
-        (!viteBuildTarget || !viteConfigFilePath)) {
+    if (schema.uiFramework?.endsWith('-vite') && !viteConfigFilePath) {
         // This means that the user has selected a Vite framework
         // but the project does not have Vite configuration.
         // We need to install the @nx/vite plugin in order to be able to use
@@ -113,13 +146,17 @@ async function configurationGenerator(tree, rawSchema) {
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.configurationGenerator = configurationGenerator;
-function normalizeSchema(schema) {
+exports.configurationGeneratorInternal = configurationGeneratorInternal;
+function normalizeSchema(tree, schema) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
     const defaults = {
         interactionTests: true,
         linter: eslint_1.Linter.EsLint,
         js: false,
         tsConfiguration: true,
+        addPlugin,
     };
     return {
         ...defaults,

package/src/generators/configuration/lib/edit-root-tsconfig.d.ts

@@ -0,0 +1,8 @@
+import { type Tree } from '@nx/devkit';
+/**
+ * This is a temporary fix for Storybook to support TypeScript configuration files.
+ * The issue is that if there is a root tsconfig.json file, Storybook will use it, and
+ * ignore the tsconfig.json file in the .storybook folder. This results in module being set
+ * to esnext, and Storybook does not recognise the main.ts code as a module.
+ */
+export declare function editRootTsConfig(tree: Tree): void;

package/src/generators/configuration/lib/edit-root-tsconfig.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editRootTsConfig = void 0;
+const devkit_1 = require("@nx/devkit");
+/**
+ * This is a temporary fix for Storybook to support TypeScript configuration files.
+ * The issue is that if there is a root tsconfig.json file, Storybook will use it, and
+ * ignore the tsconfig.json file in the .storybook folder. This results in module being set
+ * to esnext, and Storybook does not recognise the main.ts code as a module.
+ */
+function editRootTsConfig(tree) {
+    if (!tree.exists('tsconfig.json')) {
+        return;
+    }
+    (0, devkit_1.updateJson)(tree, 'tsconfig.json', (json) => {
+        if (json['ts-node']) {
+            json['ts-node'] = {
+                ...json['ts-node'],
+                compilerOptions: {
+                    ...(json['ts-node'].compilerOptions ?? {}),
+                    module: 'commonjs',
+                },
+            };
+        }
+        else {
+            json['ts-node'] = {
+                compilerOptions: {
+                    module: 'commonjs',
+                },
+            };
+        }
+        return json;
+    });
+}
+exports.editRootTsConfig = editRootTsConfig;

package/src/generators/configuration/lib/ensure-dependencies.d.ts

@@ -0,0 +1,6 @@
+import { type Tree } from '@nx/devkit';
+import type { StorybookConfigureSchema } from '../schema';
+export type EnsureDependenciesOptions = {
+    uiFramework?: StorybookConfigureSchema['uiFramework'];
+};
+export declare function ensureDependencies(tree: Tree, options: EnsureDependenciesOptions): import("@nx/devkit").GeneratorCallback;

package/src/generators/configuration/lib/ensure-dependencies.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const semver_1 = require("semver");
+const utilities_1 = require("../../../utils/utilities");
+const versions_1 = require("../../../utils/versions");
+function ensureDependencies(tree, options) {
+    let storybook7VersionToInstall = versions_1.storybookVersion;
+    if ((0, utilities_1.storybookMajorVersion)() >= 7 &&
+        (0, utilities_1.getInstalledStorybookVersion)() &&
+        (0, semver_1.gte)((0, utilities_1.getInstalledStorybookVersion)(), '7.0.0')) {
+        storybook7VersionToInstall = (0, utilities_1.getInstalledStorybookVersion)();
+    }
+    const dependencies = {};
+    const devDependencies = {
+        '@storybook/core-server': storybook7VersionToInstall,
+        '@storybook/addon-essentials': storybook7VersionToInstall,
+    };
+    const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
+    packageJson.dependencies ??= {};
+    packageJson.devDependencies ??= {};
+    // Needed for Storybook 7
+    // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
+    if (!packageJson.dependencies['react'] &&
+        !packageJson.devDependencies['react']) {
+        dependencies['react'] = versions_1.reactVersion;
+    }
+    if (!packageJson.dependencies['react-dom'] &&
+        !packageJson.devDependencies['react-dom']) {
+        dependencies['react-dom'] = versions_1.reactVersion;
+    }
+    if (options.uiFramework) {
+        devDependencies[options.uiFramework] = storybook7VersionToInstall;
+        const isPnpm = (0, devkit_1.detectPackageManager)(tree.root) === 'pnpm';
+        if (isPnpm) {
+            // If it's pnpm, it needs the framework without the builder
+            // as a dependency too (eg. @storybook/react)
+            const matchResult = options.uiFramework?.match(/^@storybook\/(\w+)/);
+            const uiFrameworkWithoutBuilder = matchResult ? matchResult[0] : null;
+            if (uiFrameworkWithoutBuilder) {
+                devDependencies[uiFrameworkWithoutBuilder] = storybook7VersionToInstall;
+            }
+        }
+        if (options.uiFramework === '@storybook/vue3-vite') {
+            if (!packageJson.dependencies['@storybook/vue3'] &&
+                !packageJson.devDependencies['@storybook/vue3']) {
+                devDependencies['@storybook/vue3'] = storybook7VersionToInstall;
+            }
+        }
+        if (options.uiFramework === '@storybook/angular') {
+            if (!packageJson.dependencies['@angular/forms'] &&
+                !packageJson.devDependencies['@angular/forms']) {
+                devDependencies['@angular/forms'] = '*';
+            }
+        }
+        if (options.uiFramework === '@storybook/web-components-vite' ||
+            options.uiFramework === '@storybook/web-components-webpack5') {
+            devDependencies['lit'] = versions_1.litVersion;
+        }
+        if (options.uiFramework.endsWith('-vite')) {
+            if (!packageJson.dependencies['vite'] &&
+                !packageJson.devDependencies['vite']) {
+                devDependencies['vite'] = versions_1.viteVersion;
+            }
+        }
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, devDependencies);
+}
+exports.ensureDependencies = ensureDependencies;

package/src/generators/configuration/lib/util-functions.d.ts

@@ -1,9 +1,9 @@
 import { Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from '../schema';
 import { UiFramework } from '../../../utils/models';
-export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: UiFramework, interactionTests: boolean): void;
-export declare function addAngularStorybookTask(tree: Tree, projectName: string, interactionTests: boolean): void;
-export declare function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema): void;
+export declare function addStorybookTarget(tree: Tree, projectName: string, uiFramework: UiFramework, interactionTests: boolean): void;
+export declare function addAngularStorybookTarget(tree: Tree, projectName: string, interactionTests: boolean): void;
+export declare function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema): Promise<void>;
 export declare function createStorybookTsconfigFile(tree: Tree, projectRoot: string, uiFramework: UiFramework, isRootProject: boolean, mainDir: 'components' | 'src'): void;
 export declare function editTsconfigBaseJson(tree: Tree): void;
 export declare function configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
@@ -18,12 +18,18 @@ export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookC
 export declare function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function normalizeSchema(schema: StorybookConfigureSchema): StorybookConfigureSchema;
 export declare function addStorybookToNamedInputs(tree: Tree): void;
-export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, interactionTests: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string): void;
+export declare function addStorybookToTargetDefaults(tree: Tree, setCache?: boolean): void;
+export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, interactionTests: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string, hasPlugin?: boolean, viteConfigFileName?: string, useReactNative?: boolean): void;
 export declare function getTsConfigPath(tree: Tree, projectName: string, path?: string): string;
 export declare function addBuildStorybookToCacheableOperations(tree: Tree): void;
 export declare function projectIsRootProjectInStandaloneWorkspace(projectRoot: string): boolean;
 export declare function workspaceHasRootProject(tree: Tree): boolean;
 export declare function rootFileIsTs(tree: Tree, rootFileName: string, tsConfiguration: boolean): boolean;
 export declare function getE2EProjectName(tree: Tree, mainProject: string): Promise<string | undefined>;
-export declare function getViteConfigFilePath(tree: Tree, projectRoot: string, configFile?: string): string | undefined;
+export declare function findViteConfig(tree: Tree, projectRoot: string): {
+    fullConfigPath: string | undefined;
+    viteConfigFileName: string | undefined;
+};
+export declare function findNextConfig(tree: Tree, projectRoot: string): string | undefined;
+export declare function findMetroConfig(tree: Tree, projectRoot: string): string | undefined;
 export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;