@nx/react 21.3.0-canary.20250715-cf994df → 21.3.0-canary.20250716-46d21c7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.3.0-canary.20250715-cf994df",
+  "version": "21.3.0-canary.20250716-46d21c7",
   "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, Vitest, Playwright, 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": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.3.0-canary.20250715-cf994df",
-    "@nx/js": "21.3.0-canary.20250715-cf994df",
-    "@nx/eslint": "21.3.0-canary.20250715-cf994df",
-    "@nx/web": "21.3.0-canary.20250715-cf994df",
-    "@nx/module-federation": "21.3.0-canary.20250715-cf994df",
+    "@nx/devkit": "21.3.0-canary.20250716-46d21c7",
+    "@nx/js": "21.3.0-canary.20250716-46d21c7",
+    "@nx/eslint": "21.3.0-canary.20250716-46d21c7",
+    "@nx/web": "21.3.0-canary.20250716-46d21c7",
+    "@nx/module-federation": "21.3.0-canary.20250716-46d21c7",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/component-story/component-story.d.ts

@@ -4,9 +4,10 @@ export interface CreateComponentStoriesFileSchema {
     project: string;
     componentPath: string;
     interactionTests?: boolean;
+    uiFramework?: string;
     skipFormat?: boolean;
 }
-export declare function createComponentStoriesFile(host: Tree, { project, componentPath, interactionTests }: CreateComponentStoriesFileSchema): void;
-export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, interactionTests: boolean, isPlainJs: boolean, fromNodeArray?: boolean): void;
+export declare function createComponentStoriesFile(host: Tree, { project, componentPath, interactionTests, uiFramework, }: CreateComponentStoriesFileSchema): void;
+export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, interactionTests: boolean, uiFramework: string, isPlainJs: boolean, fromNodeArray?: boolean): void;
 export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
 export default componentStoryGenerator;

package/src/generators/component-story/component-story.js

@@ -8,8 +8,9 @@ const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescri
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const ast_utils_1 = require("../../utils/ast-utils");
 const component_props_1 = require("../../utils/component-props");
+const framework_1 = require("../../utils/framework");
 let tsModule;
-function createComponentStoriesFile(host, { project, componentPath, interactionTests }) {
+function createComponentStoriesFile(host, { project, componentPath, interactionTests, uiFramework, }) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
@@ -33,7 +34,7 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
         const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
         if (componentNodes?.length) {
             componentNodes.forEach((declaration) => {
-                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, interactionTests, isPlainJs, componentNodes.length > 1);
+                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, interactionTests, uiFramework, isPlainJs, componentNodes.length > 1);
             });
         }
         else {
@@ -41,10 +42,10 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
         }
     }
     else {
-        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs);
+        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, uiFramework, isPlainJs);
     }
 }
-function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs, fromNodeArray) {
+function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, uiFramework, isPlainJs, fromNodeArray) {
     const { props, argTypes } = (0, component_props_1.getComponentPropDefaults)(sourceFile, cmpDeclaration);
     (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `./files${isPlainJs ? '/jsx' : '/tsx'}`), (0, devkit_1.normalizePath)(componentDirectory), {
         tmpl: '',
@@ -56,12 +57,14 @@ function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDir
         argTypes,
         componentName: cmpDeclaration.name.text,
         interactionTests,
+        uiFramework,
     });
 }
 async function componentStoryGenerator(host, schema) {
     createComponentStoriesFile(host, {
         ...schema,
         interactionTests: schema.interactionTests ?? true,
+        uiFramework: schema.uiFramework ?? (0, framework_1.getUiFramework)(host, schema.project),
     });
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(host);

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

@@ -1,33 +1,35 @@
-import type { Meta, StoryObj } from 'storybook/internal/types';
+import type { Meta, StoryObj } from '<%= uiFramework %>';
 import { <%= componentName %>  } from './<%= componentImportFileName %>';
 <%_ if ( interactionTests ) { _%>
 import { expect } from 'storybook/test';
 <%_ } _%>
 
-const meta: Meta<typeof <%= componentName %>> = {
+const meta = {
   component: <%= componentName %>,
-  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  title: '<%= componentName %>',
+  <%_ if ( argTypes && argTypes.length > 0 ) { _%> 
   argTypes: {<% for (let argType of argTypes) { %>
-    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
-}
-   <% } %> 
-};
+    <%= argType.name %>: { <%- argType.type %>: "<%- argType.actionText %>" },<% } %>
+  }
+  <%_ } _%> 
+} satisfies Meta<typeof <%= componentName %>>;
 export default meta;
+
 type Story = StoryObj<typeof <%= componentName %>>;
 
 export const Primary = {
   args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+    <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
   },
-};
-
+} satisfies Story;
 <%_ if ( interactionTests ) { _%>
-export const Heading: Story = {
+
+export const Heading = {
   args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+    <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
   },
   play: async ({ canvas }) => {
-    await expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+    await expect(canvas.getByText(/<%=componentName%>/gi)).toBeTruthy();
   },
-};
+} satisfies Story;
 <% } %>

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

@@ -4,10 +4,11 @@ export interface StorybookStoriesSchema {
     interactionTests?: boolean;
     js?: boolean;
     ignorePaths?: string[];
+    uiFramework?: string;
     skipFormat?: 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, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, ignorePaths?: string[]): Promise<void>;
+export declare function createAllStories(tree: Tree, schema: StorybookStoriesSchema, projectConfiguration: ProjectConfiguration): Promise<void>;
 export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
 export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -10,6 +10,7 @@ const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-set
 const minimatch_1 = require("minimatch");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
+const framework_1 = require("../../utils/framework");
 const component_story_1 = require("../component-story/component-story");
 let tsModule;
 async function projectRootPath(tree, config) {
@@ -46,16 +47,16 @@ function containsComponentDeclaration(tree, componentPath) {
     return !!((0, ast_utils_1.getComponentNode)(sourceFile) ||
         (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile)?.length);
 }
-async function createAllStories(tree, projectName, interactionTests, js, projects, projectConfiguration, ignorePaths) {
+async function createAllStories(tree, schema, projectConfiguration) {
     const { isTheFileAStory } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
-    const { sourceRoot, root } = projectConfiguration;
+    const sourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(projectConfiguration, tree);
     let componentPaths = [];
     const projectPath = await projectRootPath(tree, projectConfiguration);
     (0, devkit_1.visitNotIgnoredFiles)(tree, projectPath, (path) => {
         // Ignore private files starting with "_".
         if ((0, path_1.basename)(path).startsWith('_'))
             return;
-        if (ignorePaths?.some((pattern) => (0, minimatch_1.minimatch)(path, pattern)))
+        if (schema.ignorePaths?.some((pattern) => (0, minimatch_1.minimatch)(path, pattern)))
             return;
         if ((path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
             (path.endsWith('.js') && !path.endsWith('.spec.js')) ||
@@ -73,15 +74,16 @@ async function createAllStories(tree, projectName, interactionTests, js, project
         }
     });
     await Promise.all(componentPaths.map(async (componentPath) => {
-        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot ?? root, '/'), '');
+        const relativeCmpDir = componentPath.replace(`${sourceRoot}/`, '');
         if (!containsComponentDeclaration(tree, componentPath)) {
             return;
         }
         await (0, component_story_1.default)(tree, {
             componentPath: relativeCmpDir,
-            project: projectName,
+            project: schema.project,
+            interactionTests: schema.interactionTests,
+            uiFramework: schema.uiFramework,
             skipFormat: true,
-            interactionTests,
         });
     }));
 }
@@ -89,7 +91,8 @@ async function storiesGenerator(host, schema) {
     const projects = (0, devkit_1.getProjects)(host);
     const projectConfiguration = projects.get(schema.project);
     schema.interactionTests = schema.interactionTests ?? true;
-    await createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.ignorePaths);
+    schema.uiFramework ??= (0, framework_1.getUiFramework)(host, schema.project);
+    await createAllStories(host, schema, projectConfiguration);
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

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

@@ -1,6 +1,5 @@
-import { StorybookConfigureSchema } from './schema';
-import { type GeneratorCallback, Tree } from '@nx/devkit';
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
+import type { StorybookConfigureSchema } from './schema';
 export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
 export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
 export default storybookConfigurationGenerator;
-export declare function findWebpackConfig(tree: Tree, projectRoot: string): string | undefined;

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

@@ -2,20 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
 exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
-exports.findWebpackConfig = findWebpackConfig;
-const stories_1 = require("../stories/stories");
 const devkit_1 = require("@nx/devkit");
+const framework_1 = require("../../utils/framework");
 const versions_1 = require("../../utils/versions");
-async function generateStories(host, schema) {
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
-    await (0, stories_1.default)(host, {
-        project: schema.project,
-        js: schema.js,
-        ignorePaths: schema.ignorePaths,
-        skipFormat: true,
-        interactionTests: schema.interactionTests ?? true,
-    });
-}
+const stories_1 = require("../stories/stories");
 function storybookConfigurationGenerator(host, schema) {
     return storybookConfigurationGeneratorInternal(host, {
         addPlugin: false,
@@ -29,13 +19,7 @@ async function storybookConfigurationGeneratorInternal(host, schema) {
         nxJson.useInferencePlugins !== false;
     schema.addPlugin ??= addPluginDefault;
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
-    let uiFramework = '@storybook/react-vite';
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
-    if (findWebpackConfig(host, projectConfig.root) ||
-        projectConfig.targets?.['build']?.executor === '@nx/rollup:rollup' ||
-        projectConfig.targets?.['build']?.executor === '@nx/expo:build') {
-        uiFramework = '@storybook/react-webpack5';
-    }
+    const uiFramework = (0, framework_1.getUiFramework)(host, schema.project);
     if (uiFramework === '@storybook/react-vite') {
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@vitejs/plugin-react': versions_1.reactViteVersion }));
     }
@@ -52,18 +36,16 @@ async function storybookConfigurationGeneratorInternal(host, schema) {
     });
     tasks.push(installTask);
     if (schema.generateStories) {
-        await generateStories(host, schema);
+        await (0, stories_1.storiesGenerator)(host, {
+            project: schema.project,
+            js: schema.js,
+            ignorePaths: schema.ignorePaths,
+            skipFormat: true,
+            interactionTests: schema.interactionTests ?? true,
+            uiFramework,
+        });
     }
     await (0, devkit_1.formatFiles)(host);
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.default = storybookConfigurationGenerator;
-function findWebpackConfig(tree, projectRoot) {
-    const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];
-    for (const ext of allowsExt) {
-        const webpackConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `webpack.config.${ext}`);
-        if (tree.exists(webpackConfigPath)) {
-            return webpackConfigPath;
-        }
-    }
-}

package/src/utils/framework.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function getUiFramework(tree: Tree, project: string): '@storybook/react-vite' | '@storybook/react-webpack5';

package/src/utils/framework.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUiFramework = getUiFramework;
+const devkit_1 = require("@nx/devkit");
+function getUiFramework(tree, project) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, project);
+    if (findWebpackConfig(tree, projectConfig.root) ||
+        projectConfig.targets?.['build']?.executor === '@nx/rollup:rollup' ||
+        projectConfig.targets?.['build']?.executor === '@nx/expo:build') {
+        return '@storybook/react-webpack5';
+    }
+    return '@storybook/react-vite';
+}
+function findWebpackConfig(tree, projectRoot) {
+    const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];
+    for (const ext of allowsExt) {
+        const webpackConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `webpack.config.${ext}`);
+        if (tree.exists(webpackConfigPath)) {
+            return webpackConfigPath;
+        }
+    }
+}

package/src/utils/versions.d.ts

@@ -44,8 +44,8 @@ export declare const typesExpressVersion = "^4.17.21";
 export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
-export declare const moduleFederationNodeVersion = "^2.6.26";
-export declare const moduleFederationEnhancedVersion = "^0.15.0";
+export declare const moduleFederationNodeVersion = "^2.7.9";
+export declare const moduleFederationEnhancedVersion = "^0.17.0";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";
 export declare const rollupPluginUrlVersion = "^8.0.2";

package/src/utils/versions.js

@@ -51,8 +51,8 @@ exports.typesExpressVersion = '^4.17.21';
 exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
-exports.moduleFederationNodeVersion = '^2.6.26';
-exports.moduleFederationEnhancedVersion = '^0.15.0';
+exports.moduleFederationNodeVersion = '^2.7.9';
+exports.moduleFederationEnhancedVersion = '^0.17.0';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';