@nx/storybook 17.3.0-beta.2 → 17.3.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "17.3.0-beta.2",
+  "version": "17.3.0-beta.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.3.0-beta.4",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "17.3.0-beta.2",
-    "@nx/devkit": "17.3.0-beta.2",
-    "@nx/js": "17.3.0-beta.2",
-    "@nx/eslint": "17.3.0-beta.2",
-    "@nrwl/storybook": "17.3.0-beta.2"
+    "@nx/cypress": "17.3.0-beta.4",
+    "@nx/js": "17.3.0-beta.4",
+    "@nx/eslint": "17.3.0-beta.4",
+    "@nrwl/storybook": "17.3.0-beta.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/src/generators/configuration/configuration.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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,6 +10,8 @@ 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");
+const ensure_dependencies_1 = require("./lib/ensure-dependencies");
+const edit_root_tsconfig_1 = require("./lib/edit-root-tsconfig");
 async function configurationGenerator(tree, rawSchema) {
     if ((0, utilities_1.storybookMajorVersion)() === 6) {
         throw new Error((0, utilities_1.pleaseUpgrade)());
@@ -16,12 +19,10 @@ async function configurationGenerator(tree, rawSchema) {
     const schema = normalizeSchema(rawSchema);
     const tasks = [];
     const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
-    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 { compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
+    const viteConfigFilePath = (0, util_functions_1.findViteConfig)(tree, root);
+    const nextConfigFilePath = (0, util_functions_1.findNextConfig)(tree, root);
+    if (viteConfigFilePath) {
         if (schema.uiFramework === '@storybook/react-webpack5') {
             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.`);
@@ -33,17 +34,27 @@ async function configurationGenerator(tree, rawSchema) {
             schema.uiFramework = '@storybook/web-components-vite';
         }
     }
-    if (nextBuildTarget) {
+    if (nextConfigFilePath) {
         schema.uiFramework = '@storybook/nextjs';
     }
-    const initTask = await (0, init_1.initGenerator)(tree, {
-        uiFramework: schema.uiFramework,
-        js: schema.js,
+    const jsInitTask = await (0, js_1.initGenerator)(tree, {
+        ...schema,
+        skipFormat: true,
     });
+    tasks.push(jsInitTask);
+    const initTask = await (0, init_1.initGenerator)(tree, { skipFormat: true });
     tasks.push(initTask);
-    const mainDir = !!nextBuildTarget && projectType === 'application' ? 'components' : 'src';
-    const usesVite = !!viteBuildTarget || schema.uiFramework.endsWith('-vite');
-    (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, !!nextBuildTarget, compiler === 'swc', usesVite, 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');
+    (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);
     if (schema.uiFramework !== '@storybook/angular') {
         (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
     }
@@ -53,14 +64,20 @@ 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.project, schema.interactionTests);
+    let devDeps = {};
+    if (!hasPlugin) {
+        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) {
+            (0, util_functions_1.addStaticTarget)(tree, schema);
+        }
     }
     else {
-        (0, util_functions_1.addStorybookTask)(tree, schema.project, schema.uiFramework, schema.interactionTests);
-    }
-    if (schema.configureStaticServe) {
-        (0, util_functions_1.addStaticTarget)(tree, schema);
+        devDeps['storybook'] = versions_1.storybookVersion;
     }
     // TODO(katerina): Nx 18 -> remove Cypress
     if (schema.configureCypress) {
@@ -83,7 +100,6 @@ async function configurationGenerator(tree, rawSchema) {
             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;
     }
@@ -103,8 +119,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

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,86 @@
+"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) {
+        if (options.uiFramework === '@storybook/react-native') {
+            devDependencies['@storybook/react-native'] = versions_1.storybookReactNativeVersion;
+        }
+        else {
+            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 === '@storybook/react-native') {
+            devDependencies['@storybook/addon-ondevice-actions'] =
+                versions_1.storybookReactNativeVersion;
+            devDependencies['@storybook/addon-ondevice-backgrounds'] =
+                versions_1.storybookReactNativeVersion;
+            devDependencies['@storybook/addon-ondevice-controls'] =
+                versions_1.storybookReactNativeVersion;
+            devDependencies['@storybook/addon-ondevice-notes'] =
+                versions_1.storybookReactNativeVersion;
+        }
+        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,8 +1,8 @@
 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 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): void;
 export declare function createStorybookTsconfigFile(tree: Tree, projectRoot: string, uiFramework: UiFramework, isRootProject: boolean, mainDir: 'components' | 'src'): void;
 export declare function editTsconfigBaseJson(tree: Tree): void;
@@ -25,5 +25,6 @@ export declare function projectIsRootProjectInStandaloneWorkspace(projectRoot: s
 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): string | undefined;
+export declare function findNextConfig(tree: Tree, projectRoot: string): string | undefined;
 export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;

package/src/generators/configuration/lib/util-functions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renameAndMoveOldTsConfig = exports.getViteConfigFilePath = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.editTsconfigBaseJson = exports.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTask = exports.addStorybookTask = void 0;
+exports.renameAndMoveOldTsConfig = exports.findNextConfig = exports.findViteConfig = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.editTsconfigBaseJson = exports.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTarget = exports.addStorybookTarget = void 0;
 const devkit_1 = require("@nx/devkit");
 const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
 const eslint_1 = require("@nx/eslint");
@@ -10,7 +10,7 @@ const versions_1 = require("../../../utils/versions");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 const DEFAULT_PORT = 4400;
-function addStorybookTask(tree, projectName, uiFramework, interactionTests) {
+function addStorybookTarget(tree, projectName, uiFramework, interactionTests) {
     if (uiFramework === '@storybook/react-native') {
         return;
     }
@@ -50,8 +50,8 @@ function addStorybookTask(tree, projectName, uiFramework, interactionTests) {
     }
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfig);
 }
-exports.addStorybookTask = addStorybookTask;
-function addAngularStorybookTask(tree, projectName, interactionTests) {
+exports.addStorybookTarget = addStorybookTarget;
+function addAngularStorybookTarget(tree, projectName, interactionTests) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { ngBuildTarget } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(projectConfig.targets);
     projectConfig.targets['storybook'] = {
@@ -93,7 +93,7 @@ function addAngularStorybookTask(tree, projectName, interactionTests) {
     }
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfig);
 }
-exports.addAngularStorybookTask = addAngularStorybookTask;
+exports.addAngularStorybookTarget = addAngularStorybookTarget;
 function addStaticTarget(tree, opts) {
     const nrwlWeb = (0, devkit_1.ensurePackage)('@nx/web', versions_1.nxVersion);
     nrwlWeb.webStaticServeGenerator(tree, {
@@ -479,16 +479,26 @@ async function getE2EProjectName(tree, mainProject) {
     return e2eProject;
 }
 exports.getE2EProjectName = getE2EProjectName;
-function getViteConfigFilePath(tree, projectRoot, configFile) {
-    return configFile && tree.exists(configFile)
-        ? configFile
-        : tree.exists((0, devkit_1.joinPathFragments)(`${projectRoot}/vite.config.ts`))
-            ? (0, devkit_1.joinPathFragments)(`${projectRoot}/vite.config.ts`)
-            : tree.exists((0, devkit_1.joinPathFragments)(`${projectRoot}/vite.config.js`))
-                ? (0, devkit_1.joinPathFragments)(`${projectRoot}/vite.config.js`)
-                : undefined;
+function findViteConfig(tree, projectRoot) {
+    const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];
+    for (const ext of allowsExt) {
+        const viteConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `vite.config.${ext}`);
+        if (tree.exists(viteConfigPath)) {
+            return viteConfigPath;
+        }
+    }
+}
+exports.findViteConfig = findViteConfig;
+function findNextConfig(tree, projectRoot) {
+    const allowsExt = ['js', 'mjs', 'cjs'];
+    for (const ext of allowsExt) {
+        const nextConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `next.config.${ext}`);
+        if (tree.exists(nextConfigPath)) {
+            return nextConfigPath;
+        }
+    }
 }
-exports.getViteConfigFilePath = getViteConfigFilePath;
+exports.findNextConfig = findNextConfig;
 function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree) {
     if (pathToStorybookConfigFile && tree.exists(pathToStorybookConfigFile)) {
         (0, devkit_1.updateJson)(tree, pathToStorybookConfigFile, (json) => {

package/src/generators/cypress-project/cypress-project.d.ts

@@ -1,4 +1,4 @@
-import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
 import { Linter } from '@nx/eslint';
 export interface CypressConfigureSchema {
     name: string;
@@ -10,6 +10,6 @@ export interface CypressConfigureSchema {
     skipFormat?: boolean;
     projectNameAndRootFormat?: 'as-provided' | 'derived';
 }
-export declare function cypressProjectGenerator(tree: Tree, schema: CypressConfigureSchema): Promise<GeneratorCallback>;
-export declare function cypressProjectGeneratorInternal(tree: Tree, schema: CypressConfigureSchema): Promise<GeneratorCallback>;
+export declare function cypressProjectGenerator(tree: Tree, schema: CypressConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function cypressProjectGeneratorInternal(tree: Tree, schema: CypressConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressProjectGenerator;

package/src/generators/cypress-project/cypress-project.js

@@ -15,7 +15,7 @@ async function cypressProjectGenerator(tree, schema) {
 }
 exports.cypressProjectGenerator = cypressProjectGenerator;
 async function cypressProjectGeneratorInternal(tree, schema) {
-    const { configurationGenerator, cypressInitGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
     const e2eName = schema.name ? `${schema.name}-e2e` : undefined;
     const { projectName, projectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
         name: e2eName,
@@ -26,10 +26,6 @@ async function cypressProjectGeneratorInternal(tree, schema) {
     });
     const libConfig = (0, devkit_1.readProjectConfiguration)(tree, schema.name);
     const libRoot = libConfig.root;
-    const tasks = [];
-    if (!projectAlreadyHasCypress(tree)) {
-        tasks.push(await cypressInitGenerator(tree, {}));
-    }
     (0, devkit_1.addProjectConfiguration)(tree, projectName, {
         root: projectRoot,
         projectType: 'application',
@@ -37,7 +33,7 @@ async function cypressProjectGeneratorInternal(tree, schema) {
         targets: {},
         implicitDependencies: [projectName],
     });
-    const installTask = await configurationGenerator(tree, {
+    const cypressTask = await configurationGenerator(tree, {
         project: projectName,
         js: schema.js,
         linter: schema.linter,
@@ -45,7 +41,6 @@ async function cypressProjectGeneratorInternal(tree, schema) {
         devServerTarget: `${schema.name}:storybook`,
         skipFormat: true,
     });
-    tasks.push(installTask);
     const generatedCypressProjectName = (0, project_name_1.getE2eProjectName)(schema.name, libRoot, schema.directory);
     removeUnneededFiles(tree, generatedCypressProjectName, schema.js);
     addBaseUrlToCypressConfig(tree, generatedCypressProjectName);
@@ -57,7 +52,7 @@ async function cypressProjectGeneratorInternal(tree, schema) {
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return (0, devkit_1.runTasksInSerial)(...tasks);
+    return cypressTask;
 }
 exports.cypressProjectGeneratorInternal = cypressProjectGeneratorInternal;
 function removeUnneededFiles(tree, projectName, js) {

package/src/generators/init/init.js

@@ -2,88 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const js_1 = require("@nx/js");
-const versions_1 = require("../../utils/versions");
-const utilities_1 = require("../../utils/utilities");
 const semver_1 = require("semver");
-function checkDependenciesInstalled(host, schema) {
-    const packageJson = (0, devkit_1.readJson)(host, 'package.json');
-    const devDependencies = {};
-    const dependencies = {};
-    packageJson.dependencies = packageJson.dependencies || {};
-    packageJson.devDependencices = packageJson.devDependencices || {};
-    // base deps
-    devDependencies['@nx/storybook'] = versions_1.nxVersion;
-    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)();
-    }
-    // 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;
-    }
-    devDependencies['@storybook/core-server'] = storybook7VersionToInstall;
-    devDependencies['@storybook/addon-essentials'] = storybook7VersionToInstall;
-    if (schema.uiFramework) {
-        if (schema.uiFramework === '@storybook/react-native') {
-            devDependencies['@storybook/react-native'] = versions_1.storybookReactNativeVersion;
-        }
-        else {
-            devDependencies[schema.uiFramework] = storybook7VersionToInstall;
-            const isPnpm = (0, devkit_1.detectPackageManager)(host.root) === 'pnpm';
-            if (isPnpm) {
-                // If it's pnpm, it needs the framework without the builder
-                // as a dependency too (eg. @storybook/react)
-                const matchResult = schema.uiFramework?.match(/^@storybook\/(\w+)/);
-                const uiFrameworkWithoutBuilder = matchResult ? matchResult[0] : null;
-                if (uiFrameworkWithoutBuilder) {
-                    devDependencies[uiFrameworkWithoutBuilder] =
-                        storybook7VersionToInstall;
-                }
-            }
-        }
-        if (schema.uiFramework === '@storybook/vue3-vite') {
-            if (!packageJson.dependencies['@storybook/vue3'] &&
-                !packageJson.devDependencies['@storybook/vue3']) {
-                devDependencies['@storybook/vue3'] = storybook7VersionToInstall;
-            }
-        }
-        if (schema.uiFramework === '@storybook/angular') {
-            if (!packageJson.dependencies['@angular/forms'] &&
-                !packageJson.devDependencies['@angular/forms']) {
-                devDependencies['@angular/forms'] = '*';
-            }
-        }
-        if (schema.uiFramework === '@storybook/web-components-vite' ||
-            schema.uiFramework === '@storybook/web-components-webpack5') {
-            devDependencies['lit'] = versions_1.litVersion;
-        }
-        if (schema.uiFramework === '@storybook/react-native') {
-            devDependencies['@storybook/addon-ondevice-actions'] =
-                versions_1.storybookReactNativeVersion;
-            devDependencies['@storybook/addon-ondevice-backgrounds'] =
-                versions_1.storybookReactNativeVersion;
-            devDependencies['@storybook/addon-ondevice-controls'] =
-                versions_1.storybookReactNativeVersion;
-            devDependencies['@storybook/addon-ondevice-notes'] =
-                versions_1.storybookReactNativeVersion;
-        }
-        if (schema.uiFramework.endsWith('-vite')) {
-            if (!packageJson.dependencies['vite'] &&
-                !packageJson.devDependencies['vite']) {
-                devDependencies['vite'] = versions_1.viteVersion;
-            }
+const utilities_1 = require("../../utils/utilities");
+const versions_1 = require("../../utils/versions");
+function checkDependenciesInstalled(host) {
+    const devDependencies = {
+        '@nx/storybook': versions_1.nxVersion,
+    };
+    if (process.env.NX_PCV3 === 'true') {
+        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)();
         }
+        devDependencies['storybook'] = storybook7VersionToInstall;
     }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }
 function addCacheableOperation(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -97,6 +32,7 @@ function addCacheableOperation(tree) {
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }
 function moveToDevDependencies(tree) {
+    let updated = false;
     (0, devkit_1.updateJson)(tree, 'package.json', (packageJson) => {
         packageJson.dependencies = packageJson.dependencies || {};
         packageJson.devDependencies = packageJson.devDependencies || {};
@@ -104,49 +40,25 @@ function moveToDevDependencies(tree) {
             packageJson.devDependencies['@nx/storybook'] =
                 packageJson.dependencies['@nx/storybook'];
             delete packageJson.dependencies['@nx/storybook'];
+            updated = true;
         }
         return packageJson;
     });
-}
-/**
- * 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')) {
-        (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;
-        });
-    }
+    return updated ? () => (0, devkit_1.installPackagesTask)(tree) : () => { };
 }
 async function initGenerator(tree, schema) {
-    const tasks = [];
-    tasks.push(await (0, js_1.initGenerator)(tree, {
-        ...schema,
-        skipFormat: true,
-    }));
-    tasks.push(checkDependenciesInstalled(tree, schema));
-    moveToDevDependencies(tree);
-    editRootTsConfig(tree);
     addCacheableOperation(tree);
+    if (process.env.NX_PCV3 === 'true') {
+        (0, utilities_1.addPlugin)(tree);
+    }
+    const tasks = [];
+    if (!schema.skipPackageJson) {
+        tasks.push(moveToDevDependencies(tree));
+        tasks.push(checkDependenciesInstalled(tree));
+    }
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.initGenerator = initGenerator;

package/src/generators/init/schema.d.ts

@@ -1,6 +1,4 @@
-import { UiFramework } from '../../utils/models';
-
 export interface Schema {
-  uiFramework: UiFramework;
-  js?: boolean;
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
 }

package/src/generators/init/schema.json

@@ -5,41 +5,14 @@
   "$id": "init-storybook-plugin",
   "type": "object",
   "properties": {
-    "uiFramework": {
-      "type": "string",
-      "description": "Storybook UI Framework to use.",
-      "enum": [
-        "@storybook/angular",
-        "@storybook/html-webpack5",
-        "@storybook/nextjs",
-        "@storybook/preact-webpack5",
-        "@storybook/react-webpack5",
-        "@storybook/react-vite",
-        "@storybook/server-webpack5",
-        "@storybook/svelte-webpack5",
-        "@storybook/svelte-vite",
-        "@storybook/sveltekit",
-        "@storybook/vue-webpack5",
-        "@storybook/vue-vite",
-        "@storybook/vue3-webpack5",
-        "@storybook/vue3-vite",
-        "@storybook/web-components-webpack5",
-        "@storybook/web-components-vite",
-        "@storybook/react",
-        "@storybook/html",
-        "@storybook/web-components",
-        "@storybook/vue",
-        "@storybook/vue3",
-        "@storybook/svelte",
-        "@storybook/react-native"
-      ],
-      "x-prompt": "What UI framework plugin should storybook use?",
-      "x-priority": "important",
-      "aliases": ["storybook7UiFramework"]
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false
     },
-    "js": {
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
-      "description": "Generate JavaScript story files rather than TypeScript story files.",
       "default": false
     }
   }

package/src/plugins/plugin.d.ts

@@ -0,0 +1,9 @@
+import { CreateDependencies, CreateNodes } from '@nx/devkit';
+export interface StorybookPluginOptions {
+    buildStorybookTargetName?: string;
+    serveStorybookTargetName?: string;
+    staticStorybookTargetName?: string;
+    testStorybookTargetName?: string;
+}
+export declare const createDependencies: CreateDependencies;
+export declare const createNodes: CreateNodes<StorybookPluginOptions>;

package/src/plugins/plugin.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodes = exports.createDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const fs_1 = require("fs");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const js_1 = require("@nx/js");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const cachePath = (0, path_1.join)(cache_directory_1.projectGraphCacheDirectory, 'storybook.hash');
+const targetsCache = (0, fs_1.existsSync)(cachePath) ? readTargetsCache() : {};
+const calculatedTargets = {};
+function readTargetsCache() {
+    return (0, devkit_1.readJsonFile)(cachePath);
+}
+function writeTargetsToCache(targets) {
+    (0, devkit_1.writeJsonFile)(cachePath, targets);
+}
+const createDependencies = () => {
+    writeTargetsToCache(calculatedTargets);
+    return [];
+};
+exports.createDependencies = createDependencies;
+exports.createNodes = [
+    '**/.storybook/main.{js,ts,mjs,mts,cjs,cts}',
+    (configFilePath, options, context) => {
+        let projectRoot = '';
+        if (configFilePath.includes('/.storybook')) {
+            projectRoot = (0, path_1.dirname)(configFilePath).replace('/.storybook', '');
+        }
+        else {
+            projectRoot = (0, path_1.dirname)(configFilePath).replace('.storybook', '');
+        }
+        if (projectRoot === '') {
+            projectRoot = '.';
+        }
+        // Do not create a project if package.json and project.json isn't there.
+        const siblingFiles = (0, fs_1.readdirSync)((0, path_1.join)(context.workspaceRoot, projectRoot));
+        if (!siblingFiles.includes('package.json') &&
+            !siblingFiles.includes('project.json')) {
+            return {};
+        }
+        options = normalizeOptions(options);
+        const hash = (0, calculate_hash_for_create_nodes_1.calculateHashForCreateNodes)(projectRoot, options, context, [
+            (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot)),
+        ]);
+        const projectName = buildProjectName(projectRoot, context.workspaceRoot);
+        const targets = targetsCache[hash]
+            ? targetsCache[hash]
+            : buildStorybookTargets(configFilePath, projectRoot, options, context, projectName);
+        calculatedTargets[hash] = targets;
+        const result = {
+            projects: {
+                [projectRoot]: {
+                    root: projectRoot,
+                    targets,
+                },
+            },
+        };
+        // For root projects, the name is not inferred from root package.json, so we need to manually set it.
+        // TODO(jack): We should handle this in core and remove this workaround.
+        if (projectRoot === '.') {
+            result.projects[projectRoot]['name'] = projectName;
+        }
+        return result;
+    },
+];
+function buildStorybookTargets(configFilePath, projectRoot, options, context, projectName) {
+    const buildOutputs = getOutputs(projectRoot);
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
+    const storybookFramework = getStorybookConfig(configFilePath, context);
+    const frameworkIsAngular = storybookFramework === "'@storybook/angular'";
+    const targets = {};
+    targets[options.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, configFilePath, projectRoot, frameworkIsAngular, projectName);
+    targets[options.serveStorybookTargetName] = serveTarget(configFilePath, frameworkIsAngular, projectName);
+    targets[options.testStorybookTargetName] = testTarget(configFilePath);
+    targets[options.staticStorybookTargetName] = serveStaticTarget(options, projectRoot);
+    return targets;
+}
+function buildTarget(namedInputs, outputs, configFilePath, projectRoot, frameworkIsAngular, projectName) {
+    const outputDir = (0, devkit_1.joinPathFragments)('dist/storybook', projectRoot);
+    let targetConfig;
+    if (frameworkIsAngular) {
+        targetConfig = {
+            executor: '@storybook/angular:build-storybook',
+            options: {
+                outputDir: `${outputDir}`,
+                configDir: `${(0, path_1.dirname)(configFilePath)}`,
+                browserTarget: `${projectName}:build-storybook`,
+                compodoc: false,
+            },
+            cache: true,
+            outputs,
+            inputs: [
+                ...('production' in namedInputs
+                    ? ['production', '^production']
+                    : ['default', '^default']),
+                {
+                    externalDependencies: [
+                        'storybook',
+                        '@storybook/angular',
+                        '@storybook/test-runner',
+                    ],
+                },
+            ],
+        };
+    }
+    else {
+        targetConfig = {
+            command: `storybook build --config-dir ${(0, path_1.dirname)(configFilePath)} --output-dir ${outputDir}`,
+            cache: true,
+            outputs,
+            inputs: [
+                ...('production' in namedInputs
+                    ? ['production', '^production']
+                    : ['default', '^default']),
+                {
+                    externalDependencies: ['storybook', '@storybook/test-runner'],
+                },
+            ],
+        };
+    }
+    return targetConfig;
+}
+function serveTarget(configFilePath, frameworkIsAngular, projectName) {
+    if (frameworkIsAngular) {
+        return {
+            executor: '@storybook/angular:start-storybook',
+            options: {
+                configDir: `${(0, path_1.dirname)(configFilePath)}`,
+                browserTarget: `${projectName}:build-storybook`,
+                compodoc: false,
+            },
+        };
+    }
+    else {
+        return {
+            command: `storybook dev --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+        };
+    }
+}
+function testTarget(configFilePath) {
+    const targetConfig = {
+        command: `test-storybook --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+        inputs: [
+            {
+                externalDependencies: ['storybook', '@storybook/test-runner'],
+            },
+        ],
+    };
+    return targetConfig;
+}
+function serveStaticTarget(options, projectRoot) {
+    const targetConfig = {
+        executor: '@nx/web:file-server',
+        options: {
+            buildTarget: `${options.buildStorybookTargetName}`,
+            // TODO(katerina): need to read the output from CLI args
+            staticFilePath: (0, devkit_1.joinPathFragments)('dist/storybook', projectRoot),
+        },
+    };
+    return targetConfig;
+}
+function getStorybookConfig(configFilePath, context) {
+    const resolvedPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
+    const mainTsJs = (0, fs_1.readFileSync)(resolvedPath, 'utf-8');
+    const importDeclarations = tsquery_1.tsquery.query(mainTsJs, 'ImportDeclaration:has(ImportSpecifier:has([text="StorybookConfig"]))')?.[0];
+    const storybookConfigImportPackage = tsquery_1.tsquery.query(importDeclarations, 'StringLiteral')?.[0];
+    let frameworkName;
+    if (storybookConfigImportPackage?.getText() === `'@storybook/core-common'`) {
+        const frameworkPropertyAssignment = tsquery_1.tsquery.query(mainTsJs, `PropertyAssignment:has(Identifier:has([text="framework"]))`)?.[0];
+        if (!frameworkPropertyAssignment) {
+            return;
+        }
+        const propertyAssignments = tsquery_1.tsquery.query(frameworkPropertyAssignment, `PropertyAssignment:has(Identifier:has([text="name"]))`);
+        const namePropertyAssignment = propertyAssignments?.find((expression) => {
+            return expression.getText().startsWith('name');
+        });
+        if (!namePropertyAssignment) {
+            const storybookConfigImportPackage = tsquery_1.tsquery.query(frameworkPropertyAssignment, 'StringLiteral')?.[0];
+            frameworkName = storybookConfigImportPackage?.getText();
+        }
+        else {
+            frameworkName = tsquery_1.tsquery
+                .query(namePropertyAssignment, `StringLiteral`)?.[0]
+                ?.getText();
+        }
+    }
+    else {
+        frameworkName = storybookConfigImportPackage?.getText();
+    }
+    return frameworkName;
+}
+function getOutputs(_projectRoot) {
+    // TODO(katerina): need to read the output from CLI args
+    // const outputPath = <output path as read from CLI>;
+    const normalizedOutputPath = normalizeOutputPath(undefined, _projectRoot);
+    const outputs = [normalizedOutputPath];
+    return outputs;
+}
+function normalizeOutputPath(outputPath, projectRoot) {
+    if (!outputPath) {
+        if (projectRoot === '.') {
+            return `{projectRoot}/dist/storybook`;
+        }
+        else {
+            return `{workspaceRoot}/dist/storybook/{projectRoot}`;
+        }
+    }
+    else {
+        if ((0, path_1.isAbsolute)(outputPath)) {
+            return `{workspaceRoot}/${(0, path_1.relative)(devkit_1.workspaceRoot, outputPath)}`;
+        }
+        else {
+            if (outputPath.startsWith('..')) {
+                return (0, path_1.join)('{workspaceRoot}', (0, path_1.join)(projectRoot, outputPath));
+            }
+            else {
+                return (0, path_1.join)('{projectRoot}', outputPath);
+            }
+        }
+    }
+}
+function normalizeOptions(options) {
+    options ??= {};
+    options.buildStorybookTargetName = 'build-storybook';
+    options.serveStorybookTargetName = 'storybook';
+    options.testStorybookTargetName = 'test-storybook';
+    options.staticStorybookTargetName = 'static-storybook';
+    return options;
+}
+function buildProjectName(projectRoot, workspaceRoot) {
+    const packageJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'package.json');
+    const projectJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'project.json');
+    let name;
+    if ((0, fs_1.existsSync)(projectJsonPath)) {
+        const projectJson = (0, devkit_1.parseJson)((0, fs_1.readFileSync)(projectJsonPath, 'utf-8'));
+        name = projectJson.name;
+    }
+    else if ((0, fs_1.existsSync)(packageJsonPath)) {
+        const packageJson = (0, devkit_1.parseJson)((0, fs_1.readFileSync)(packageJsonPath, 'utf-8'));
+        name = packageJson.name;
+    }
+    return name ?? projectRoot;
+}

package/src/utils/utilities.d.ts

@@ -40,3 +40,4 @@ export declare function findStorybookAndBuildTargetsAndCompiler(targets: {
 export declare function isTheFileAStory(tree: Tree, path: string): boolean;
 export declare function getTsSourceFile(host: Tree, path: string): ts.SourceFile;
 export declare function pleaseUpgrade(): string;
+export declare function addPlugin(tree: Tree): void;

package/src/utils/utilities.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pleaseUpgrade = exports.getTsSourceFile = exports.isTheFileAStory = exports.findStorybookAndBuildTargetsAndCompiler = exports.dedupe = exports.storybookConfigExistsCheck = exports.safeFileDelete = exports.getInstalledStorybookVersion = exports.storybookMajorVersion = exports.Constants = void 0;
+exports.addPlugin = exports.pleaseUpgrade = exports.getTsSourceFile = exports.isTheFileAStory = exports.findStorybookAndBuildTargetsAndCompiler = exports.dedupe = exports.storybookConfigExistsCheck = exports.safeFileDelete = exports.getInstalledStorybookVersion = exports.storybookMajorVersion = exports.Constants = void 0;
+const devkit_1 = require("@nx/devkit");
 const fs_1 = require("fs");
 const js_1 = require("@nx/js");
 const ts = require("typescript");
@@ -222,3 +223,25 @@ function pleaseUpgrade() {
     `;
 }
 exports.pleaseUpgrade = pleaseUpgrade;
+function addPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.plugins ??= [];
+    for (const plugin of nxJson.plugins) {
+        if (typeof plugin === 'string'
+            ? plugin === '@nx/storybook/plugin'
+            : plugin.plugin === '@nx/storybook/plugin') {
+            return;
+        }
+    }
+    nxJson.plugins.push({
+        plugin: '@nx/storybook/plugin',
+        options: {
+            buildStorybookTargetName: 'build-storybook',
+            serveStorybookTargetName: 'storybook',
+            testStorybookTargetName: 'test-storybook',
+            staticStorybookTargetName: 'static-storybook',
+        },
+    });
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.addPlugin = addPlugin;