@nx/storybook 16.10.0 → 17.0.0-beta.2

package/migrations.json

@@ -1,23 +1,5 @@
 {
   "generators": {
-    "update-13.4.6": {
-      "version": "13.4.6-beta.1",
-      "cli": "nx",
-      "description": "Add projectBuildConfig option to project's Storybook config.",
-      "factory": "./src/migrations/update-13-4-6/set-project-build-config"
-    },
-    "update-14.0.0": {
-      "version": "14.0.0",
-      "cli": "nx",
-      "description": "Migrate Storybook to v6",
-      "factory": "./src/migrations/update-14-0-0/migrate-to-storybook-6"
-    },
-    "update-14.1.8": {
-      "version": "14.1.8",
-      "cli": "nx",
-      "description": "Change storybook targets for Angular projects to use @storybook/angular executors",
-      "factory": "./src/migrations/update-14-1-8/change-storybook-targets"
-    },
     "update-15.0.8-add-storybook-inputs": {
       "cli": "nx",
       "version": "15.0.0-beta.0",
@@ -741,159 +723,6 @@
           "alwaysAddToPackageJson": false
         }
       }
-    },
-    "14.3.2": {
-      "version": "14.3.2-beta.1",
-      "packages": {
-        "@storybook/core-server": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/angular": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/react": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/web": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-essentials": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/builder-webpack5": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/manager-webpack5": {
-          "version": "~6.5.9",
-          "alwaysAddToPackageJson": true
-        }
-      }
-    },
-    "14.2.0": {
-      "version": "14.2.0-beta.6",
-      "packages": {
-        "@storybook/core-server": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/angular": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/react": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/web": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-essentials": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/builder-webpack5": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/manager-webpack5": {
-          "version": "~6.5.4",
-          "alwaysAddToPackageJson": true
-        }
-      }
-    },
-    "13.10.0": {
-      "version": "13.10.0-beta.0",
-      "packages": {
-        "@storybook/core-server": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/react-native": {
-          "version": "^6.0.1-beta.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-ondevice-actions": {
-          "version": "^6.0.1-beta.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-ondevice-backgrounds": {
-          "version": "^6.0.1-beta.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-ondevice-controls": {
-          "version": "^6.0.1-beta.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-ondevice-notes": {
-          "version": "^6.0.1-beta.5",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "13.4.5": {
-      "version": "13.4.5-beta.1",
-      "packages": {
-        "@storybook/angular": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/react": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/web": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-essentials": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/builder-webpack5": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/manager-webpack5": {
-          "version": "~6.4.12",
-          "alwaysAddToPackageJson": true
-        }
-      }
-    },
-    "13.3.0": {
-      "version": "13.3.0-beta.3",
-      "packages": {
-        "@storybook/angular": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/react": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/web": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/addon-essentials": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@storybook/builder-webpack5": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": true
-        },
-        "@storybook/manager-webpack5": {
-          "version": "~6.4.5",
-          "alwaysAddToPackageJson": true
-        }
-      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "16.10.0",
+  "version": "17.0.0-beta.2",
   "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": {
@@ -33,12 +33,11 @@
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "16.10.0",
-    "@nx/devkit": "16.10.0",
-    "@nx/js": "16.10.0",
-    "@nx/linter": "16.10.0",
-    "@nx/workspace": "16.10.0",
-    "@nrwl/storybook": "16.10.0"
+    "@nx/cypress": "17.0.0-beta.2",
+    "@nx/devkit": "17.0.0-beta.2",
+    "@nx/js": "17.0.0-beta.2",
+    "@nx/linter": "17.0.0-beta.2",
+    "@nrwl/storybook": "17.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/build-storybook/build-storybook.impl.d.ts

@@ -1,6 +1,5 @@
 import { ExecutorContext } from '@nx/devkit';
 import { CLIOptions } from '@storybook/types';
-import { CommonNxStorybookConfig } from '../../utils/models';
-export default function buildStorybookExecutor(options: CLIOptions & CommonNxStorybookConfig, context: ExecutorContext): Promise<{
+export default function buildStorybookExecutor(options: CLIOptions, context: ExecutorContext): Promise<{
     success: boolean;
 }>;

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

@@ -3,59 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const devkit_1 = require("@nx/devkit");
 const build = require("@storybook/core-server");
 const utilities_1 = require("../../utils/utilities");
-const utils_1 = require("../utils");
 async function buildStorybookExecutor(options, context) {
     (0, utilities_1.storybookConfigExistsCheck)(options.configDir, context.projectName);
     const storybook7 = (0, utilities_1.storybookMajorVersion)() === 7;
-    if (storybook7) {
-        const buildOptions = options;
-        devkit_1.logger.info(`NX Storybook builder starting ...`);
-        await runInstance(buildOptions, storybook7);
-        devkit_1.logger.info(`NX Storybook builder finished ...`);
-        devkit_1.logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
-        return { success: true };
-    }
-    else {
-        // TODO(katerina): Remove Nx17
-        // print warnings
-        (0, utils_1.runStorybookSetupCheck)(options);
-        devkit_1.logger.error((0, utilities_1.pleaseUpgrade)());
-        const frameworkPath = (0, utils_1.getStorybookFrameworkPath)(options.uiFramework);
-        const { default: frameworkOptions } = await Promise.resolve(`${frameworkPath}`).then(s => require(s));
-        const buildOptions = {
-            ...options,
-            ...frameworkOptions,
-            frameworkPresets: [...(frameworkOptions.frameworkPresets || [])],
-        };
-        devkit_1.logger.info(`NX Storybook builder starting ...`);
-        await runInstance(buildOptions, storybook7);
-        devkit_1.logger.info(`NX Storybook builder finished ...`);
-        devkit_1.logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
-        return { success: true };
+    if (!storybook7) {
+        throw (0, utilities_1.pleaseUpgrade)();
     }
+    const buildOptions = options;
+    devkit_1.logger.info(`NX Storybook builder starting ...`);
+    await runInstance(buildOptions);
+    devkit_1.logger.info(`NX Storybook builder finished ...`);
+    devkit_1.logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
+    return { success: true };
 }
 exports.default = buildStorybookExecutor;
-function runInstance(options, storybook7) {
+function runInstance(options) {
     const env = process.env.NODE_ENV ?? 'production';
     process.env.NODE_ENV = env;
-    if (storybook7) {
-        return build.build({
-            ...options,
-            mode: 'static',
-        });
-    }
-    else {
-        // TODO(katerina): Remove Nx17
-        const nodeVersion = process.version.slice(1).split('.');
-        if (+nodeVersion[0] === 18) {
-            devkit_1.logger.warn(`
-        If you are using the @storybook/builder-vite you may experience issues with Node 18.
-        Please use Node 16 if you are using @storybook/builder-vite. 
-      `);
-        }
-        return build.buildStaticStandalone({
-            ...options,
-            ci: true,
-        });
-    }
+    return build.build({
+        ...options,
+        mode: 'static',
+    });
 }

package/src/executors/build-storybook/schema.json

@@ -69,19 +69,6 @@
       "type": "boolean",
       "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation."
     },
-    "uiFramework": {
-      "type": "string",
-      "description": "Storybook framework npm package.",
-      "enum": [
-        "@storybook/react",
-        "@storybook/html",
-        "@storybook/web-components",
-        "@storybook/vue",
-        "@storybook/vue3",
-        "@storybook/svelte"
-      ],
-      "x-deprecated": "Upgrade to Storybook 7."
-    },
     "webpackStatsJson": {
       "type": ["boolean", "string"],
       "description": "Write Webpack Stats JSON to disk.",

package/src/executors/storybook/storybook.impl.d.ts

@@ -1,7 +1,6 @@
 import { ExecutorContext } from '@nx/devkit';
 import { CLIOptions } from '@storybook/types';
-import { CommonNxStorybookConfig } from '../../utils/models';
-export default function storybookExecutor(options: CLIOptions & CommonNxStorybookConfig, context: ExecutorContext): AsyncGenerator<{
+export default function storybookExecutor(options: CLIOptions, context: ExecutorContext): AsyncGenerator<{
     success: boolean;
     info?: {
         port: number;

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

@@ -1,57 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
 const build = require("@storybook/core-server");
 const utilities_1 = require("../../utils/utilities");
-const utils_1 = require("../utils");
 async function* storybookExecutor(options, context) {
     const storybook7 = (0, utilities_1.storybookMajorVersion)() === 7;
-    (0, utilities_1.storybookConfigExistsCheck)(options.configDir, context.projectName);
-    if (storybook7) {
-        const buildOptions = options;
-        const result = await runInstance(buildOptions, storybook7);
-        yield {
-            success: true,
-            info: {
-                port: result?.['port'],
-                baseUrl: `${options.https ? 'https' : 'http'}://${options.host ?? 'localhost'}:${result?.['port']}`,
-            },
-        };
-        await new Promise(() => { });
-    }
-    else {
-        // TODO(katerina): Remove Nx17
-        // print warnings
-        (0, utils_1.runStorybookSetupCheck)(options);
-        devkit_1.logger.error((0, utilities_1.pleaseUpgrade)());
-        let frameworkPath = (0, utils_1.getStorybookFrameworkPath)(options.uiFramework);
-        const frameworkOptions = (await Promise.resolve(`${frameworkPath}`).then(s => require(s))).default;
-        const buildOptions = {
-            ...options,
-            ...frameworkOptions,
-            frameworkPresets: [...(frameworkOptions.frameworkPresets || [])],
-        };
-        await runInstance(buildOptions, storybook7);
-        yield { success: true };
-        await new Promise(() => { });
+    if (!storybook7) {
+        throw (0, utilities_1.pleaseUpgrade)();
     }
+    (0, utilities_1.storybookConfigExistsCheck)(options.configDir, context.projectName);
+    const buildOptions = options;
+    const result = await runInstance(buildOptions);
+    yield {
+        success: true,
+        info: {
+            port: result?.['port'],
+            baseUrl: `${options.https ? 'https' : 'http'}://${options.host ?? 'localhost'}:${result?.['port']}`,
+        },
+    };
+    await new Promise(() => { });
 }
 exports.default = storybookExecutor;
-function runInstance(options, storybook7) {
+function runInstance(options) {
     const env = process.env.NODE_ENV ?? 'development';
     process.env.NODE_ENV = env;
-    if (storybook7) {
-        return build.build({
-            ...options,
-            mode: 'dev',
-        });
-    }
-    else {
-        // TODO(katerina): Remove Nx17
-        return build['buildDev']({
-            ...options,
-            configType: env.toUpperCase(),
-            mode: 'dev',
-        });
-    }
+    return build.build({
+        ...options,
+        mode: 'dev',
+    });
 }

package/src/generators/configuration/configuration.js

@@ -61,7 +61,7 @@ async function configurationGenerator(tree, rawSchema) {
     if (schema.configureStaticServe) {
         (0, util_functions_1.addStaticTarget)(tree, schema);
     }
-    // TODO(v18): remove Cypress
+    // TODO(katerina): Nx 18 -> remove Cypress
     if (schema.configureCypress) {
         const e2eProject = await (0, util_functions_1.getE2EProjectName)(tree, schema.name);
         if (!e2eProject) {

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

@@ -1,25 +1,24 @@
 import { Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from '../schema';
-import { UiFramework7 } from '../../../utils/models';
-export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: string, interactionTests: boolean): void;
+import { UiFramework } from '../../../utils/models';
+export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: UiFramework, interactionTests: boolean): void;
 export declare function addAngularStorybookTask(tree: Tree, projectName: string, interactionTests: boolean): void;
 export declare function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema): void;
-export declare function createStorybookTsconfigFile(tree: Tree, projectRoot: string, uiFramework: UiFramework7, isRootProject: boolean, mainDir: 'components' | 'src'): void;
+export declare function createStorybookTsconfigFile(tree: Tree, projectRoot: string, uiFramework: UiFramework, isRootProject: boolean, mainDir: 'components' | 'src'): void;
 export declare function editTsconfigBaseJson(tree: Tree): void;
 export declare function configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 /**
- * When adding storybook we need to inform TSLint or ESLint
+ * When adding storybook we need to inform ESLint
  * of the additional tsconfig.json file which will be the only tsconfig
  * which includes *.stories files.
  *
- * For TSLint this is done via the builder config, for ESLint this is
- * done within the eslint config file.
+ * This is done within the eslint config file.
  */
 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: UiFramework7, 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): 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;

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

@@ -250,23 +250,15 @@ function configureTsSolutionConfig(tree, schema) {
 }
 exports.configureTsSolutionConfig = configureTsSolutionConfig;
 /**
- * When adding storybook we need to inform TSLint or ESLint
+ * When adding storybook we need to inform ESLint
  * of the additional tsconfig.json file which will be the only tsconfig
  * which includes *.stories files.
  *
- * For TSLint this is done via the builder config, for ESLint this is
- * done within the eslint config file.
+ * This is done within the eslint config file.
  */
 function updateLintConfig(tree, schema) {
     const { name: projectName } = schema;
-    const { targets, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-    const tslintTargets = Object.values(targets ?? {}).filter((target) => target.executor === '@angular-devkit/build-angular:tslint');
-    tslintTargets.forEach((target) => {
-        target.options.tsConfig = (0, utilities_1.dedupe)([
-            ...target.options.tsConfig,
-            (0, devkit_1.joinPathFragments)(root, './.storybook/tsconfig.json'),
-        ]);
-    });
+    const { root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const eslintFile = (0, eslint_file_1.findEslintFile)(tree, root);
     if (!eslintFile) {
         return;

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

@@ -1,9 +1,9 @@
 import { Linter } from '@nx/linter';
-import { UiFramework7, UiFramework } from '../../utils/models';
+import { UiFramework } from '../../utils/models';
 
 export interface StorybookConfigureSchema {
   name: string;
-  uiFramework?: UiFramework7;
+  uiFramework?: UiFramework;
   linter?: Linter;
   js?: boolean;
   interactionTests?: boolean;

package/src/generators/init/init.js

@@ -87,20 +87,13 @@ function checkDependenciesInstalled(host, schema) {
 }
 function addCacheableOperation(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
-    if (!nxJson.tasksRunnerOptions ||
-        !nxJson.tasksRunnerOptions.default ||
-        (nxJson.tasksRunnerOptions.default.runner !==
-            '@nx/workspace/tasks-runners/default' &&
-            nxJson.tasksRunnerOptions.default.runner !== 'nx/tasks-runners/default')) {
-        return;
-    }
-    nxJson.tasksRunnerOptions.default.options =
-        nxJson.tasksRunnerOptions.default.options || {};
-    nxJson.tasksRunnerOptions.default.options.cacheableOperations =
-        nxJson.tasksRunnerOptions.default.options.cacheableOperations || [];
-    if (!nxJson.tasksRunnerOptions.default.options.cacheableOperations?.includes('build-storybook')) {
+    const cacheableOperations = nxJson.tasksRunnerOptions?.default?.options?.cacheableOperations;
+    if (cacheableOperations && cacheableOperations.includes('build-storybook')) {
         nxJson.tasksRunnerOptions.default.options.cacheableOperations.push('build-storybook');
     }
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults['build-storybook'] ??= {};
+    nxJson.targetDefaults['build-storybook'].cache = true;
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }
 function moveToDevDependencies(tree) {

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

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

package/src/generators/migrate-7/schema.d.ts

@@ -1,5 +1,3 @@
-import { UiFramework, UiFramework7 } from '../../utils/models';
-
 export interface Schema {
   autoAcceptAllPrompts?: boolean;
   onlyShowListOfCommands?: boolean;

package/src/utils/models.d.ts

@@ -1,4 +1 @@
-export interface CommonNxStorybookConfig {
-    uiFramework?: '@storybook/angular' | '@storybook/react' | '@storybook/html' | '@storybook/web-components' | '@storybook/vue' | '@storybook/vue3' | '@storybook/svelte';
-}
-export type UiFramework7 = '@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-native';
+export type UiFramework = '@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-native';

package/src/utils/utilities.js

@@ -212,10 +212,11 @@ function getTsSourceFile(host, path) {
 exports.getTsSourceFile = getTsSourceFile;
 function pleaseUpgrade() {
     return `
-    Storybook 6 is no longer maintained. Please upgrade to Storybook 7.
+    Storybook 6 is no longer maintained, and not supported in Nx. 
+    Please upgrade to Storybook 7.
 
     Here is a guide on how to upgrade:
-    https://nx.dev/packages/storybook/generators/migrate-7
+    https://nx.dev/nx-api/storybook/generators/migrate-7
     `;
 }
 exports.pleaseUpgrade = pleaseUpgrade;

package/src/executors/utils.d.ts

@@ -1,6 +0,0 @@
-import ts = require('typescript');
-import { CommonNxStorybookConfig } from '../utils/models';
-import { CLIOptions } from '@storybook/types';
-export declare function getStorybookFrameworkPath(uiFramework: any): any;
-export declare function runStorybookSetupCheck(options: CLIOptions & CommonNxStorybookConfig): void;
-export declare function builderIsWebpackButNotWebpack5(storybookConfig: ts.SourceFile): boolean;