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

package/index.d.ts

@@ -1,3 +1,4 @@
 export { configurationGenerator } from './src/generators/configuration/configuration';
 export { cypressProjectGenerator } from './src/generators/cypress-project/cypress-project';
 export { storybookVersion } from './src/utils/versions';
+export { interactionTestsDependencies, addInteractionsInAddons, } from './src/generators/configuration/lib/interaction-testing.utils';

package/index.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storybookVersion = exports.cypressProjectGenerator = exports.configurationGenerator = void 0;
+exports.addInteractionsInAddons = exports.interactionTestsDependencies = exports.storybookVersion = exports.cypressProjectGenerator = exports.configurationGenerator = void 0;
 var configuration_1 = require("./src/generators/configuration/configuration");
 Object.defineProperty(exports, "configurationGenerator", { enumerable: true, get: function () { return configuration_1.configurationGenerator; } });
 var cypress_project_1 = require("./src/generators/cypress-project/cypress-project");
 Object.defineProperty(exports, "cypressProjectGenerator", { enumerable: true, get: function () { return cypress_project_1.cypressProjectGenerator; } });
 var versions_1 = require("./src/utils/versions");
 Object.defineProperty(exports, "storybookVersion", { enumerable: true, get: function () { return versions_1.storybookVersion; } });
+var interaction_testing_utils_1 = require("./src/generators/configuration/lib/interaction-testing.utils");
+Object.defineProperty(exports, "interactionTestsDependencies", { enumerable: true, get: function () { return interaction_testing_utils_1.interactionTestsDependencies; } });
+Object.defineProperty(exports, "addInteractionsInAddons", { enumerable: true, get: function () { return interaction_testing_utils_1.addInteractionsInAddons; } });

package/migrations.json

@@ -68,6 +68,115 @@
     }
   },
   "packageJsonUpdates": {
+    "16.6.0": {
+      "version": "16.6.0-beta.6",
+      "packages": {
+        "@storybook/test-runner": {
+          "version": "^0.11.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/core-server": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/angular": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-vite": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react-webpack5": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-webpack5": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-a11y": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-actions": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-backgrounds": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-controls": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-docs": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-essentials": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-interactions": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-mdx-gfm": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-highlight": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-jest": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-links": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-measure": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-outline": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots-puppeteer": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storysource": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-toolbars": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-viewport": {
+          "version": "^7.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
     "16.5.0": {
       "version": "16.5.0-beta.0",
       "requires": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "16.6.0-beta.3",
+  "version": "16.6.0-beta.5",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -30,19 +30,20 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/storybook": "16.6.0-beta.3",
-    "@nx/cypress": "16.6.0-beta.3",
-    "@nx/devkit": "16.6.0-beta.3",
-    "@nx/js": "16.6.0-beta.3",
-    "@nx/linter": "16.6.0-beta.3",
-    "@nx/workspace": "16.6.0-beta.3",
+    "@nrwl/storybook": "16.6.0-beta.5",
+    "@nx/cypress": "16.6.0-beta.5",
+    "@nx/devkit": "16.6.0-beta.5",
+    "@nx/js": "16.6.0-beta.5",
+    "@nx/linter": "16.6.0-beta.5",
+    "@nx/workspace": "16.6.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "dotenv": "~10.0.0",
-    "semver": "7.5.3"
+    "semver": "7.5.3",
+    "tslib": "^2.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "cd8c61d7a3b8ab9bc7bab068f5ca49bbf14abbf5"
+  "gitHead": "aab868aa0c30949832fe2c4b9cb109c204442e39"
 }

package/src/generators/configuration/configuration.js

@@ -9,6 +9,7 @@ const util_functions_1 = require("./lib/util-functions");
 const linter_1 = require("@nx/linter");
 const utilities_1 = require("../../utils/utilities");
 const versions_1 = require("../../utils/versions");
+const interaction_testing_utils_1 = require("./lib/interaction-testing.utils");
 function configurationGenerator(tree, rawSchema) {
     var _a, _b;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
@@ -49,6 +50,7 @@ function configurationGenerator(tree, rawSchema) {
             (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
         }
         (0, util_functions_1.configureTsProjectConfig)(tree, schema);
+        (0, util_functions_1.editTsconfigBaseJson)(tree);
         (0, util_functions_1.configureTsSolutionConfig)(tree, schema);
         (0, util_functions_1.updateLintConfig)(tree, schema);
         (0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
@@ -62,7 +64,7 @@ function configurationGenerator(tree, rawSchema) {
         if (schema.configureStaticServe) {
             (0, util_functions_1.addStaticTarget)(tree, schema);
         }
-        // TODO(katerina): remove Cypress for Nx 18
+        // TODO(v18): remove Cypress
         if (schema.configureCypress) {
             const e2eProject = yield (0, util_functions_1.getE2EProjectName)(tree, schema.name);
             if (!e2eProject) {
@@ -83,16 +85,12 @@ function configurationGenerator(tree, rawSchema) {
                 devkit_1.logger.warn(`There is already an e2e project setup for ${schema.name}, called ${e2eProject}.`);
             }
         }
-        const devDeps = {};
+        let devDeps = {};
         if (schema.tsConfiguration) {
-            devDeps['@storybook/core-common'] = versions_1.storybookVersion;
             devDeps['ts-node'] = versions_1.tsNodeVersion;
         }
         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;
+            devDeps = Object.assign(Object.assign({}, devDeps), (0, interaction_testing_utils_1.interactionTestsDependencies)());
         }
         if (schema.configureStaticServe) {
             devDeps['@nx/web'] = versions_1.nxVersion;

package/src/generators/configuration/lib/interaction-testing.utils.d.ts

@@ -0,0 +1,5 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+export declare function interactionTestsDependencies(): {
+    [key: string]: string;
+};
+export declare function addInteractionsInAddons(tree: Tree, projectConfig: ProjectConfiguration): void;

package/src/generators/configuration/lib/interaction-testing.utils.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addInteractionsInAddons = exports.interactionTestsDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const versions_1 = require("../../../utils/versions");
+function interactionTestsDependencies() {
+    return {
+        '@storybook/test-runner': versions_1.storybookTestRunnerVersion,
+        '@storybook/addon-interactions': versions_1.storybookVersion,
+        '@storybook/testing-library': versions_1.storybookTestingLibraryVersion,
+        '@storybook/jest': versions_1.storybookJestVersion,
+    };
+}
+exports.interactionTestsDependencies = interactionTestsDependencies;
+function addInteractionsInAddons(tree, projectConfig) {
+    var _a, _b, _c;
+    const mainJsTsPath = getMainTsJsPath(tree, projectConfig);
+    if (!mainJsTsPath)
+        return;
+    let mainJsTs = tree.read(mainJsTsPath, 'utf-8');
+    if (!mainJsTs)
+        return;
+    // Find addons array
+    const addonsArray = (_a = tsquery_1.tsquery.query(mainJsTs, `PropertyAssignment:has(Identifier:has([name="addons"]))`)) === null || _a === void 0 ? void 0 : _a[0];
+    // if there's no addons array don't do anything
+    // they may be setting up storybook in another project
+    if (!addonsArray)
+        return;
+    // Check if addons array already has addon-interactions
+    const addonsArrayHasAddonInteractions = (_b = tsquery_1.tsquery.query(addonsArray, `StringLiteral:has([text="@storybook/addon-interactions"])`)) === null || _b === void 0 ? void 0 : _b[0];
+    if (addonsArrayHasAddonInteractions)
+        return;
+    // get the array of the addons
+    const arrayLiteralExpression = (_c = tsquery_1.tsquery.query(addonsArray, `ArrayLiteralExpression`)) === null || _c === void 0 ? void 0 : _c[0];
+    if (!arrayLiteralExpression)
+        return;
+    mainJsTs = (0, devkit_1.applyChangesToString)(mainJsTs, [
+        {
+            type: devkit_1.ChangeType.Insert,
+            index: arrayLiteralExpression.getStart() + 1,
+            text: `'@storybook/addon-interactions', `,
+        },
+    ]);
+    tree.write(mainJsTsPath, mainJsTs);
+}
+exports.addInteractionsInAddons = addInteractionsInAddons;
+function getMainTsJsPath(host, projectConfig) {
+    let mainJsTsPath = undefined;
+    Object.entries(projectConfig.targets).forEach(([_targetName, targetConfig]) => {
+        var _a;
+        if (targetConfig.executor === '@nx/storybook:storybook' ||
+            targetConfig.executor === '@storybook/angular:start-storybook') {
+            const configDir = (_a = targetConfig.options) === null || _a === void 0 ? void 0 : _a.configDir;
+            if (host.exists(`${configDir}/main.js`)) {
+                mainJsTsPath = `${configDir}/main.js`;
+            }
+            if (host.exists(`${configDir}/main.ts`)) {
+                mainJsTsPath = `${configDir}/main.ts`;
+            }
+        }
+    });
+    return mainJsTsPath;
+}

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

@@ -5,6 +5,7 @@ export declare function addStorybookTask(tree: Tree, projectName: string, uiFram
 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 editTsconfigBaseJson(tree: Tree): void;
 export declare function configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookConfigureSchema): 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.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTask = exports.addStorybookTask = void 0;
+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;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
@@ -170,6 +170,20 @@ function createStorybookTsconfigFile(tree, projectRoot, uiFramework, isRootProje
     (0, devkit_1.writeJson)(tree, storybookTsConfigPath, storybookTsConfig);
 }
 exports.createStorybookTsconfigFile = createStorybookTsconfigFile;
+function editTsconfigBaseJson(tree) {
+    let tsconfigBasePath = 'tsconfig.base.json';
+    // standalone workspace maybe
+    if (!tree.exists(tsconfigBasePath))
+        tsconfigBasePath = 'tsconfig.json';
+    if (!tree.exists(tsconfigBasePath))
+        return;
+    const tsconfigBaseContent = (0, devkit_1.readJson)(tree, tsconfigBasePath);
+    if (!tsconfigBaseContent.compilerOptions)
+        tsconfigBaseContent.compilerOptions = {};
+    tsconfigBaseContent.compilerOptions.skipLibCheck = true;
+    (0, devkit_1.writeJson)(tree, tsconfigBasePath, tsconfigBaseContent);
+}
+exports.editTsconfigBaseJson = editTsconfigBaseJson;
 function configureTsProjectConfig(tree, schema) {
     var _a, _b, _c;
     const { name: projectName } = schema;

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

@@ -4,13 +4,19 @@ import { UiFramework7, UiFramework } from '../../utils/models';
 export interface StorybookConfigureSchema {
   name: string;
   uiFramework?: UiFramework7;
-  configureCypress?: boolean;
   linter?: Linter;
   js?: boolean;
   interactionTests?: boolean;
   tsConfiguration?: boolean;
-  cypressDirectory?: string;
   standaloneConfig?: boolean;
   configureStaticServe?: boolean;
   skipFormat?: boolean;
+  /**
+   * @deprecated Use interactionTests instead. This option will be removed in v18.
+   */
+  configureCypress?: boolean;
+  /**
+   * @deprecated Use interactionTests instead. This option will be removed in v18.
+   */
+  cypressDirectory?: string;
 }

package/src/generators/configuration/schema.json

@@ -28,12 +28,12 @@
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v18."
     },
     "cypressDirectory": {
       "type": "string",
       "description": "A directory where the Cypress project will be placed. Added at root by default.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v18."
     },
     "linter": {
       "description": "The tool to use for running lint checks.",

package/src/utils/versions.d.ts

@@ -6,7 +6,7 @@ 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";
+export declare const storybookVersion = "^7.1.0";
 export declare const reactVersion = "^18.2.0";
 export declare const viteVersion = "~4.3.9";
 export declare const coreJsVersion = "^3.6.5";

package/src/utils/versions.js

@@ -9,7 +9,7 @@ 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';
+exports.storybookVersion = '^7.1.0';
 exports.reactVersion = '^18.2.0';
 exports.viteVersion = '~4.3.9';
 exports.coreJsVersion = '^3.6.5';