@nx/storybook 16.6.0-beta.0 → 16.6.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "16.6.0-beta.0",
+  "version": "16.6.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": {
@@ -30,12 +30,12 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/storybook": "16.6.0-beta.0",
-    "@nx/cypress": "16.6.0-beta.0",
-    "@nx/devkit": "16.6.0-beta.0",
-    "@nx/js": "16.6.0-beta.0",
-    "@nx/linter": "16.6.0-beta.0",
-    "@nx/workspace": "16.6.0-beta.0",
+    "@nrwl/storybook": "16.6.0-beta.2",
+    "@nx/cypress": "16.6.0-beta.2",
+    "@nx/devkit": "16.6.0-beta.2",
+    "@nx/js": "16.6.0-beta.2",
+    "@nx/linter": "16.6.0-beta.2",
+    "@nx/workspace": "16.6.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "dotenv": "~10.0.0",
     "semver": "7.5.3"
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "5a7ffb93c9e84bffbf52f6ae9c6c1e3b8edb9d35"
+  "gitHead": "c3d31711b71d648cedeff688fce9334d393b586b"
 }

package/src/generators/configuration/configuration.js

@@ -44,7 +44,7 @@ function configurationGenerator(tree, rawSchema) {
         });
         tasks.push(initTask);
         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), mainDir, !!nextBuildTarget, compiler === 'swc', !!viteBuildTarget || schema.uiFramework.endsWith('-vite'), viteConfigFilePath);
+        (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);
         }
@@ -54,14 +54,15 @@ function configurationGenerator(tree, rawSchema) {
         (0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
         (0, util_functions_1.addStorybookToNamedInputs)(tree);
         if (schema.uiFramework === '@storybook/angular') {
-            (0, util_functions_1.addAngularStorybookTask)(tree, schema.name, schema.configureTestRunner);
+            (0, util_functions_1.addAngularStorybookTask)(tree, schema.name, schema.interactionTests);
         }
         else {
-            (0, util_functions_1.addStorybookTask)(tree, schema.name, schema.uiFramework, schema.configureTestRunner);
+            (0, util_functions_1.addStorybookTask)(tree, schema.name, schema.uiFramework, schema.interactionTests);
         }
         if (schema.configureStaticServe) {
             (0, util_functions_1.addStaticTarget)(tree, schema);
         }
+        // TODO(katerina): remove Cypress for Nx 18
         if (schema.configureCypress) {
             const e2eProject = yield (0, util_functions_1.getE2EProjectName)(tree, schema.name);
             if (!e2eProject) {
@@ -87,8 +88,11 @@ function configurationGenerator(tree, rawSchema) {
             devDeps['@storybook/core-common'] = versions_1.storybookVersion;
             devDeps['ts-node'] = versions_1.tsNodeVersion;
         }
-        if (schema.configureTestRunner === true) {
+        if (schema.interactionTests) {
             devDeps['@storybook/test-runner'] = versions_1.storybookTestRunnerVersion;
+            devDeps['@storybook/addon-interactions'] = versions_1.storybookVersion;
+            devDeps['@storybook/testing-library'] = versions_1.storybookTestingLibraryVersion;
+            devDeps['@storybook/jest'] = versions_1.storybookJestVersion;
         }
         if (schema.configureStaticServe) {
             devDeps['@nx/web'] = versions_1.nxVersion;
@@ -103,9 +107,10 @@ function configurationGenerator(tree, rawSchema) {
 exports.configurationGenerator = configurationGenerator;
 function normalizeSchema(schema) {
     const defaults = {
-        configureCypress: true,
+        interactionTests: true,
         linter: linter_1.Linter.EsLint,
         js: false,
+        tsConfiguration: true,
     };
     return Object.assign(Object.assign({}, defaults), schema);
 }

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

@@ -1,8 +1,8 @@
 import { Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from '../schema';
 import { UiFramework7 } from '../../../utils/models';
-export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: string, configureTestRunner: boolean): void;
-export declare function addAngularStorybookTask(tree: Tree, projectName: string, configureTestRunner: boolean): void;
+export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: string, 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 configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
@@ -18,7 +18,7 @@ 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: UiFramework7, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string): 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 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

@@ -9,7 +9,7 @@ const path_1 = require("path");
 const utilities_1 = require("../../../utils/utilities");
 const versions_1 = require("../../../utils/versions");
 const DEFAULT_PORT = 4400;
-function addStorybookTask(tree, projectName, uiFramework, configureTestRunner) {
+function addStorybookTask(tree, projectName, uiFramework, interactionTests) {
     if (uiFramework === '@storybook/react-native') {
         return;
     }
@@ -39,7 +39,7 @@ function addStorybookTask(tree, projectName, uiFramework, configureTestRunner) {
             },
         },
     };
-    if (configureTestRunner === true) {
+    if (interactionTests === true) {
         projectConfig.targets['test-storybook'] = {
             executor: 'nx:run-commands',
             options: {
@@ -50,7 +50,7 @@ function addStorybookTask(tree, projectName, uiFramework, configureTestRunner) {
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfig);
 }
 exports.addStorybookTask = addStorybookTask;
-function addAngularStorybookTask(tree, projectName, configureTestRunner) {
+function addAngularStorybookTask(tree, projectName, interactionTests) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { ngBuildTarget } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(projectConfig.targets);
     projectConfig.targets['storybook'] = {
@@ -82,7 +82,7 @@ function addAngularStorybookTask(tree, projectName, configureTestRunner) {
             },
         },
     };
-    if (configureTestRunner === true) {
+    if (interactionTests === true) {
         projectConfig.targets['test-storybook'] = {
             executor: 'nx:run-commands',
             options: {
@@ -331,7 +331,7 @@ function addStorybookToNamedInputs(tree) {
     }
 }
 exports.addStorybookToNamedInputs = addStorybookToNamedInputs;
-function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
+function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
     const projectDirectory = projectType === 'application'
         ? isNextJs
             ? 'components'
@@ -352,6 +352,7 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(root),
         projectDirectory,
         projectType,
+        interactionTests,
         mainDir,
         isNextJs: isNextJs && projectType === 'application',
         usesSwc,
@@ -450,7 +451,7 @@ function getViteConfigFilePath(tree, projectRoot, configFile) {
 }
 exports.getViteConfigFilePath = getViteConfigFilePath;
 function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree) {
-    if (pathToStorybookConfigFile) {
+    if (pathToStorybookConfigFile && tree.exists(pathToStorybookConfigFile)) {
         (0, devkit_1.updateJson)(tree, pathToStorybookConfigFile, (json) => {
             var _a, _b, _c, _d;
             if ((_a = json.extends) === null || _a === void 0 ? void 0 : _a.startsWith('../')) {
@@ -484,15 +485,26 @@ function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree)
         tree.rename(pathToStorybookConfigFile, (0, devkit_1.joinPathFragments)(projectRoot, `tsconfig.storybook.json`));
     }
     const projectTsConfig = (0, devkit_1.joinPathFragments)(projectRoot, 'tsconfig.json');
-    (0, devkit_1.updateJson)(tree, projectTsConfig, (json) => {
-        var _a;
-        for (let i = 0; i < ((_a = json.references) === null || _a === void 0 ? void 0 : _a.length); i++) {
-            if (json.references[i].path === './.storybook/tsconfig.json') {
-                json.references[i].path = './tsconfig.storybook.json';
-                break;
+    if (tree.exists(projectTsConfig)) {
+        (0, devkit_1.updateJson)(tree, projectTsConfig, (json) => {
+            var _a;
+            for (let i = 0; i < ((_a = json.references) === null || _a === void 0 ? void 0 : _a.length); i++) {
+                if (json.references[i].path === './.storybook/tsconfig.json') {
+                    json.references[i].path = './tsconfig.storybook.json';
+                    break;
+                }
             }
-        }
-        return json;
-    });
+            return json;
+        });
+    }
+    const projectEsLintFile = (0, devkit_1.joinPathFragments)(projectRoot, '.eslintrc.json');
+    if (tree.exists(projectEsLintFile)) {
+        (0, devkit_1.updateJson)(tree, projectEsLintFile, (json) => {
+            const jsonString = JSON.stringify(json);
+            const newJsonString = jsonString.replace(/\.storybook\/tsconfig\.json/g, 'tsconfig.storybook.json');
+            json = JSON.parse(newJsonString);
+            return json;
+        });
+    }
 }
 exports.renameAndMoveOldTsConfig = renameAndMoveOldTsConfig;

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

@@ -4,7 +4,7 @@ const config = {
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   <% } %>],
-  addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>],
+  addons: ['@storybook/addon-essentials' <% if(interactionTests) { %>, '@storybook/addon-interactions' <% } %><% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>],
   framework: {
     name: '<%= uiFramework %>',
     options: {

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

@@ -6,7 +6,7 @@ const config: StorybookConfig = {
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   <% } %>],
-  addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>],
+  addons: ['@storybook/addon-essentials' <% if(interactionTests) { %>, '@storybook/addon-interactions' <% } %><% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>],
   framework: {
     name: '<%= uiFramework %>',
     options: {

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

@@ -7,10 +7,10 @@ export interface StorybookConfigureSchema {
   configureCypress?: boolean;
   linter?: Linter;
   js?: boolean;
+  interactionTests?: boolean;
   tsConfiguration?: boolean;
   cypressDirectory?: string;
   standaloneConfig?: boolean;
-  configureTestRunner?: boolean;
   configureStaticServe?: boolean;
   skipFormat?: boolean;
 }

package/src/generators/configuration/schema.json

@@ -18,15 +18,22 @@
       "x-dropdown": "projects",
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "alias": ["configureTestRunner"],
+      "default": true
+    },
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Added at root by default."
+      "description": "A directory where the Cypress project will be placed. Added at root by default.",
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "linter": {
       "description": "The tool to use for running lint checks.",
@@ -56,10 +63,6 @@
       "description": "Add a static-storybook to serve the static storybook built files.",
       "default": false
     },
-    "configureTestRunner": {
-      "type": "boolean",
-      "description": "Add a Storybook Test-Runner target."
-    },
     "bundler": {
       "description": "The Storybook builder to use.",
       "type": "string",

package/src/migrations/update-14-0-0/migrate-defaults-5-to-6/migrate-defaults-5-to-6.js

@@ -110,7 +110,7 @@ function migrateProjectLevelStorybookInstance(tree, projectName, uiFramework, co
     const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { nextBuildTarget, compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
     const mainDir = !!nextBuildTarget && projectType === 'application' ? 'components' : 'src';
-    (0, util_functions_1.createProjectStorybookDir)(tree, projectName, uiFramework, false, false, root, projectType, false, mainDir, !!nextBuildTarget, compiler === 'swc');
+    (0, util_functions_1.createProjectStorybookDir)(tree, projectName, uiFramework, false, false, root, projectType, false, false, mainDir, !!nextBuildTarget, compiler === 'swc');
 }
 function moveDirectory(tree, from, to) {
     (0, devkit_1.visitNotIgnoredFiles)(tree, from, (file) => {

package/src/utils/versions.d.ts

@@ -1,7 +1,9 @@
 export declare const nxVersion: any;
 export declare const storybookReactNativeVersion = "^6.5.3";
 export declare const reactNativeStorybookLoader = "^2.0.5";
-export declare const storybookTestRunnerVersion = "^0.7.2";
+export declare const storybookTestRunnerVersion = "^0.11.0";
+export declare const storybookTestingLibraryVersion = "~0.2.0";
+export declare const storybookJestVersion = "~0.1.0";
 export declare const litVersion = "^2.6.1";
 export declare const tsNodeVersion = "10.9.1";
 export declare const storybookVersion = "^7.0.24";

package/src/utils/versions.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.viteVersion = exports.reactVersion = exports.storybookVersion = exports.tsNodeVersion = exports.litVersion = exports.storybookTestRunnerVersion = exports.reactNativeStorybookLoader = exports.storybookReactNativeVersion = exports.nxVersion = void 0;
+exports.viteVersion = exports.reactVersion = exports.storybookVersion = exports.tsNodeVersion = exports.litVersion = exports.storybookJestVersion = exports.storybookTestingLibraryVersion = exports.storybookTestRunnerVersion = exports.reactNativeStorybookLoader = exports.storybookReactNativeVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.storybookReactNativeVersion = '^6.5.3';
 exports.reactNativeStorybookLoader = '^2.0.5';
-exports.storybookTestRunnerVersion = '^0.7.2';
+exports.storybookTestRunnerVersion = '^0.11.0';
+exports.storybookTestingLibraryVersion = '~0.2.0';
+exports.storybookJestVersion = '~0.1.0';
 exports.litVersion = '^2.6.1';
 exports.tsNodeVersion = '10.9.1';
 exports.storybookVersion = '^7.0.24';