@nx/react 16.6.0-beta.4 → 16.6.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.6.0-beta.4",
+  "version": "16.6.0-beta.5",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -31,20 +31,21 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.6.0-beta.4",
-    "@nx/devkit": "16.6.0-beta.4",
-    "@nx/js": "16.6.0-beta.4",
-    "@nx/linter": "16.6.0-beta.4",
-    "@nx/web": "16.6.0-beta.4",
+    "@nrwl/react": "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/web": "16.6.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
     "file-loader": "^6.2.0",
-    "minimatch": "3.0.5"
+    "minimatch": "3.0.5",
+    "tslib": "^2.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "b1a9ae7ce76697019b26ec9a172005840cca8da6"
+  "gitHead": "aab868aa0c30949832fe2c4b9cb109c204442e39"
 }

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -29,7 +29,7 @@ function getModuleFederationConfig(tsconfigPath, workspaceRoot, projectRoot) {
         return config.default || config;
     }
     catch (_a) {
-        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/recipes/module-federation/faster-builds`);
+        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/concepts/more-concepts/faster-builds-with-module-federation`);
     }
 }
 function moduleFederationDevServer(options, context) {

package/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -25,6 +25,9 @@ export const Primary = {
 
 <% if ( interactionTests ) { %>
 export const Heading: Story = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();

package/src/generators/stories/schema.json

@@ -19,13 +19,11 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator."
     },
     "cypressProject": {
       "type": "string",
-      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
     },
     "interactionTests": {
       "type": "boolean",

package/src/generators/stories/stories.d.ts

@@ -1,16 +1,16 @@
-import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { GeneratorCallback, ProjectConfiguration, Tree } from '@nx/devkit';
 export interface StorybookStoriesSchema {
     project: string;
     interactionTests?: boolean;
     js?: boolean;
-    cypressProject?: string;
-    generateCypressSpecs?: boolean;
     ignorePaths?: string[];
     skipFormat?: boolean;
+    cypressProject?: string;
+    generateCypressSpecs?: boolean;
 }
 export declare function projectRootPath(tree: Tree, config: ProjectConfiguration): Promise<string>;
 export declare function containsComponentDeclaration(tree: Tree, componentPath: string): boolean;
-export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, generateCypressSpecs?: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
-export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
+export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, generateCypressSpecs?: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<GeneratorCallback>;
 export default storiesGenerator;
 export declare const storiesSchematic: (generatorOptions: StorybookStoriesSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/stories/stories.js

@@ -9,6 +9,7 @@ const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const minimatch = require("minimatch");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const versions_1 = require("../../utils/versions");
 let tsModule;
 function projectRootPath(tree, config) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
@@ -47,11 +48,9 @@ function containsComponentDeclaration(tree, componentPath) {
         ((_a = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile)) === null || _a === void 0 ? void 0 : _a.length));
 }
 exports.containsComponentDeclaration = containsComponentDeclaration;
-function createAllStories(tree, projectName, interactionTests, js, generateCypressSpecs, cypressProject, ignorePaths) {
+function createAllStories(tree, projectName, interactionTests, js, projects, projectConfiguration, generateCypressSpecs, cypressProject, ignorePaths) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const { isTheFileAStory } = yield Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
-        const projects = (0, devkit_1.getProjects)(tree);
-        const projectConfiguration = projects.get(projectName);
         const { sourceRoot, root } = projectConfiguration;
         let componentPaths = [];
         const projectPath = yield projectRootPath(tree, projectConfiguration);
@@ -108,10 +107,20 @@ exports.createAllStories = createAllStories;
 function storiesGenerator(host, schema) {
     var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        yield createAllStories(host, schema.project, (_a = schema.interactionTests) !== null && _a !== void 0 ? _a : true, schema.js, schema.generateCypressSpecs, schema.cypressProject, schema.ignorePaths);
+        const projects = (0, devkit_1.getProjects)(host);
+        const projectConfiguration = projects.get(schema.project);
+        schema.interactionTests = (_a = schema.interactionTests) !== null && _a !== void 0 ? _a : true;
+        yield createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.generateCypressSpecs, schema.cypressProject, schema.ignorePaths);
+        const tasks = [];
+        if (schema.interactionTests) {
+            const { interactionTestsDependencies, addInteractionsInAddons } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
+            tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, interactionTestsDependencies()));
+            addInteractionsInAddons(host, projectConfiguration);
+        }
         if (!schema.skipFormat) {
             yield (0, devkit_1.formatFiles)(host);
         }
+        return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
 exports.storiesGenerator = storiesGenerator;

package/src/generators/storybook-configuration/configuration.js

@@ -8,7 +8,7 @@ const versions_1 = require("../../utils/versions");
 function generateStories(host, schema) {
     var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        // TODO(katerina): remove Cypress for Nx 18
+        // TODO(v18): remove Cypress
         (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         const { getE2eProjectName } = yield Promise.resolve().then(() => require('@nx/cypress/src/utils/project-name'));
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.name);

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

@@ -4,12 +4,12 @@ export interface StorybookConfigureSchema {
   name: string;
   interactionTests?: boolean;
   generateStories?: boolean;
-  configureCypress?: boolean;
-  generateCypressSpecs?: boolean;
   js?: boolean;
   tsConfiguration?: boolean;
   linter?: Linter;
-  cypressDirectory?: string;
   ignorePaths?: string[];
   configureStaticServe?: boolean;
+  configureCypress?: boolean;
+  generateCypressSpecs?: boolean;
+  cypressDirectory?: string;
 }

package/src/generators/storybook-configuration/schema.json

@@ -28,8 +28,7 @@
     },
     "configureCypress": {
       "type": "boolean",
-      "description": "Run the cypress-configure generator.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "Run the cypress-configure generator."
     },
     "generateStories": {
       "type": "boolean",
@@ -40,8 +39,7 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -52,8 +50,7 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
     },
     "js": {
       "type": "boolean",