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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "17.3.0-beta.2",
+  "version": "17.3.0-beta.3",
   "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",
     "@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.3",
+    "@nx/js": "17.3.0-beta.3",
+    "@nx/eslint": "17.3.0-beta.3",
+    "@nrwl/storybook": "17.3.0-beta.3"
   },
   "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

@@ -16,12 +16,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,7 +31,7 @@ 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, {
@@ -41,9 +39,15 @@ async function configurationGenerator(tree, rawSchema) {
         js: schema.js,
     });
     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);
+    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 +57,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 +93,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 +112,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/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/init/init.js

@@ -30,6 +30,9 @@ function checkDependenciesInstalled(host, schema) {
         !packageJson.devDependencies['react-dom']) {
         dependencies['react-dom'] = versions_1.reactVersion;
     }
+    if (process.env.NX_PCV3 === 'true') {
+        devDependencies['storybook'] = storybook7VersionToInstall;
+    }
     devDependencies['@storybook/core-server'] = storybook7VersionToInstall;
     devDependencies['@storybook/addon-essentials'] = storybook7VersionToInstall;
     if (schema.uiFramework) {
@@ -147,6 +150,10 @@ async function initGenerator(tree, schema) {
     moveToDevDependencies(tree);
     editRootTsConfig(tree);
     addCacheableOperation(tree);
+    const addPlugins = process.env.NX_PCV3 === 'true';
+    if (addPlugins) {
+        (0, utilities_1.addPlugin)(tree);
+    }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.initGenerator = initGenerator;

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;