@nx/storybook 17.3.0-beta.3 → 17.3.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "17.3.0-beta.3",
+  "version": "17.3.0-beta.5",
   "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.3",
+    "@nx/devkit": "17.3.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "17.3.0-beta.3",
-    "@nx/js": "17.3.0-beta.3",
-    "@nx/eslint": "17.3.0-beta.3",
-    "@nrwl/storybook": "17.3.0-beta.3"
+    "@nx/cypress": "17.3.0-beta.5",
+    "@nx/js": "17.3.0-beta.5",
+    "@nx/eslint": "17.3.0-beta.5",
+    "@nrwl/storybook": "17.3.0-beta.5"
   },
   "publishConfig": {
     "access": "public"

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)());
@@ -17,7 +20,9 @@ async function configurationGenerator(tree, rawSchema) {
     const tasks = [];
     const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
     const { compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
-    const viteConfigFilePath = (0, util_functions_1.findViteConfig)(tree, root);
+    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);
     if (viteConfigFilePath) {
         if (schema.uiFramework === '@storybook/react-webpack5') {
@@ -34,11 +39,15 @@ async function configurationGenerator(tree, rawSchema) {
     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);
+    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'
@@ -46,8 +55,8 @@ async function configurationGenerator(tree, rawSchema) {
     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);
+    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, hasPlugin, viteConfigFileName);
     if (schema.uiFramework !== '@storybook/angular') {
         (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
     }
@@ -112,7 +121,7 @@ async function configurationGenerator(tree, rawSchema) {
         schema.uiFramework === '@storybook/react-webpack5') {
         devDeps['core-js'] = versions_1.coreJsVersion;
     }
-    if (schema.uiFramework.endsWith('-vite') && !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

@@ -18,13 +18,16 @@ 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 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): 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 findViteConfig(tree: Tree, projectRoot: 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 renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;

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

@@ -360,7 +360,7 @@ function addStorybookToNamedInputs(tree) {
     }
 }
 exports.addStorybookToNamedInputs = addStorybookToNamedInputs;
-function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
+function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName) {
     let projectDirectory = projectType === 'application'
         ? isNextJs
             ? 'components'
@@ -391,6 +391,8 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         usesVite,
         isRootProject: projectIsRootProjectInStandaloneWorkspace,
         viteConfigFilePath,
+        hasPlugin,
+        viteConfigFileName,
     });
     if (js) {
         (0, devkit_1.toJS)(tree);
@@ -484,7 +486,10 @@ function findViteConfig(tree, projectRoot) {
     for (const ext of allowsExt) {
         const viteConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `vite.config.${ext}`);
         if (tree.exists(viteConfigPath)) {
-            return viteConfigPath;
+            return {
+                fullConfigPath: viteConfigPath,
+                viteConfigFileName: `vite.config.${ext}`,
+            };
         }
     }
 }

package/src/generators/configuration/project-files/.storybook/main.js__tmpl__

@@ -13,7 +13,12 @@ const config = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite && viteConfigFilePath) { %>
+     <% if (usesVite && viteConfigFilePath && hasPlugin) { %>
+      builder: {
+        viteConfigPath: '<%= viteConfigFileName %>',
+      },
+      <% } %>
+      <% if (usesVite && viteConfigFilePath && !hasPlugin) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },

package/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__

@@ -14,7 +14,11 @@ const config: StorybookConfig = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite && viteConfigFilePath) { %>
+      <% if (usesVite && viteConfigFilePath && hasPlugin) { %>
+      builder: {
+        viteConfigPath: '<%= viteConfigFileName %>',
+      },
+      <% } %><% if (usesVite && viteConfigFilePath && !hasPlugin) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },

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,91 +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;
-    }
+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') {
-        devDependencies['storybook'] = storybook7VersionToInstall;
-    }
-    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;
-            }
+        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);
@@ -100,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 || {};
@@ -107,53 +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);
-    const addPlugins = process.env.NX_PCV3 === 'true';
-    if (addPlugins) {
+    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.js

@@ -60,7 +60,7 @@ exports.createNodes = [
             },
         };
         // 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.
+        // TODO(katerina): Remove this workaround once Craigory's PR (https://github.com/nrwl/nx/pull/21125) is merged
         if (projectRoot === '.') {
             result.projects[projectRoot]['name'] = projectName;
         }
@@ -73,23 +73,22 @@ function buildStorybookTargets(configFilePath, projectRoot, options, context, pr
     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.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, projectRoot, frameworkIsAngular, projectName, configFilePath);
+    targets[options.serveStorybookTargetName] = serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath);
+    targets[options.testStorybookTargetName] = testTarget(projectRoot);
     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);
+function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, projectName, configFilePath) {
     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,
+                outputDir: (0, devkit_1.joinPathFragments)(projectRoot, 'static-storybook'),
             },
             cache: true,
             outputs,
@@ -109,7 +108,8 @@ function buildTarget(namedInputs, outputs, configFilePath, projectRoot, framewor
     }
     else {
         targetConfig = {
-            command: `storybook build --config-dir ${(0, path_1.dirname)(configFilePath)} --output-dir ${outputDir}`,
+            command: `storybook build`,
+            options: { cwd: projectRoot },
             cache: true,
             outputs,
             inputs: [
@@ -124,7 +124,7 @@ function buildTarget(namedInputs, outputs, configFilePath, projectRoot, framewor
     }
     return targetConfig;
 }
-function serveTarget(configFilePath, frameworkIsAngular, projectName) {
+function serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath) {
     if (frameworkIsAngular) {
         return {
             executor: '@storybook/angular:start-storybook',
@@ -137,13 +137,15 @@ function serveTarget(configFilePath, frameworkIsAngular, projectName) {
     }
     else {
         return {
-            command: `storybook dev --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+            command: `storybook dev`,
+            options: { cwd: projectRoot },
         };
     }
 }
-function testTarget(configFilePath) {
+function testTarget(projectRoot) {
     const targetConfig = {
-        command: `test-storybook --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+        command: `test-storybook`,
+        options: { cwd: projectRoot },
         inputs: [
             {
                 externalDependencies: ['storybook', '@storybook/test-runner'],
@@ -157,8 +159,7 @@ function serveStaticTarget(options, projectRoot) {
         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),
+            staticFilePath: (0, devkit_1.joinPathFragments)(projectRoot, 'static-storybook'),
         },
     };
     return targetConfig;
@@ -194,33 +195,21 @@ function getStorybookConfig(configFilePath, context) {
     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];
+    const outputs = [
+        normalizedOutputPath,
+        `{options.output-dir}`,
+        `{options.outputDir}`,
+        `{options.o}`,
+    ];
     return outputs;
 }
 function normalizeOutputPath(outputPath, projectRoot) {
-    if (!outputPath) {
-        if (projectRoot === '.') {
-            return `{projectRoot}/dist/storybook`;
-        }
-        else {
-            return `{workspaceRoot}/dist/storybook/{projectRoot}`;
-        }
+    if (projectRoot === '.') {
+        return `{projectRoot}/static-storybook`;
     }
     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);
-            }
-        }
+        return `{workspaceRoot}/{projectRoot}/static-storybook`;
     }
 }
 function normalizeOptions(options) {