@nx/storybook 17.0.4 → 17.0.6

package/LICENSE

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

package/README.md

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

package/generators.json

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

package/migrations.json

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

package/package.json

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

package/presets/cypress.d.ts

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

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

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

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

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

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

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

package/src/generators/configuration/configuration.js

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

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

@@ -1,9 +1,9 @@
 import { Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from '../schema';
 import { UiFramework } from '../../../utils/models';
-export declare function addStorybookTarget(tree: Tree, projectName: string, uiFramework: UiFramework, interactionTests: boolean): void;
-export declare function addAngularStorybookTarget(tree: Tree, projectName: string, interactionTests: boolean): void;
-export declare function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema): Promise<void>;
+export declare function 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: UiFramework, isRootProject: boolean, mainDir: 'components' | 'src'): void;
 export declare function editTsconfigBaseJson(tree: Tree): void;
 export declare function configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
@@ -18,18 +18,12 @@ 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 addStorybookToTargetDefaults(tree: Tree, setCache?: boolean): void;
-export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, interactionTests: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string, hasPlugin?: boolean, viteConfigFileName?: string, useReactNative?: boolean): void;
+export declare function 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;
 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): {
-    fullConfigPath: string | undefined;
-    viteConfigFileName: string | undefined;
-};
-export declare function findNextConfig(tree: Tree, projectRoot: string): string | undefined;
-export declare function findMetroConfig(tree: Tree, projectRoot: string): string | undefined;
+export declare function getViteConfigFilePath(tree: Tree, projectRoot: string, configFile?: string): string | undefined;
 export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;