@nx/storybook 20.3.0-beta.0 → 20.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "20.3.0-beta.0",
+  "version": "20.3.0-beta.1",
   "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": {
@@ -33,13 +33,13 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "20.3.0-beta.0",
+    "@nx/devkit": "20.3.0-beta.1",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "20.3.0-beta.0",
-    "@nx/js": "20.3.0-beta.0",
-    "@nx/eslint": "20.3.0-beta.0"
+    "@nx/cypress": "20.3.0-beta.1",
+    "@nx/js": "20.3.0-beta.1",
+    "@nx/eslint": "20.3.0-beta.1"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/configuration/configuration.js

@@ -31,7 +31,6 @@ async function configurationGeneratorInternal(tree, rawSchema) {
     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) {
         if (schema.uiFramework === '@storybook/react-webpack5') {
             devkit_1.logger.info(`Your project ${schema.project} uses Vite as a bundler.
@@ -67,8 +66,8 @@ async function configurationGeneratorInternal(tree, rawSchema) {
         ? '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 usesReactNative = (0, util_functions_1.isUsingReactNative)(schema.project);
+    (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, usesReactNative);
     if (schema.uiFramework !== '@storybook/angular') {
         (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
     }

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

@@ -19,7 +19,7 @@ export declare function updateLintConfig(tree: Tree, schema: StorybookConfigureS
 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, hasPlugin?: boolean, viteConfigFileName?: string, usesReactNative?: boolean): 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;
@@ -30,5 +30,5 @@ export declare function findViteConfig(tree: Tree, projectRoot: string): {
     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 isUsingReactNative(projectName: string): boolean;
 export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;

package/src/generators/configuration/lib/util-functions.js

@@ -19,7 +19,7 @@ exports.workspaceHasRootProject = workspaceHasRootProject;
 exports.rootFileIsTs = rootFileIsTs;
 exports.findViteConfig = findViteConfig;
 exports.findNextConfig = findNextConfig;
-exports.findMetroConfig = findMetroConfig;
+exports.isUsingReactNative = isUsingReactNative;
 exports.renameAndMoveOldTsConfig = renameAndMoveOldTsConfig;
 const devkit_1 = require("@nx/devkit");
 const eslint_1 = require("@nx/eslint");
@@ -398,7 +398,7 @@ function addStorybookToTargetDefaults(tree, setCache = true) {
     }
     (0, devkit_1.updateNxJson)(tree, nxJson);
 }
-function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName, useReactNative) {
+function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName, usesReactNative) {
     let projectDirectory = projectType === 'application'
         ? isNextJs
             ? 'components'
@@ -431,7 +431,7 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         viteConfigFilePath,
         hasPlugin,
         viteConfigFileName,
-        useReactNative,
+        usesReactNative,
     });
     if (js) {
         (0, devkit_1.toJS)(tree);
@@ -506,10 +506,13 @@ function findNextConfig(tree, projectRoot) {
         }
     }
 }
-function findMetroConfig(tree, projectRoot) {
-    const nextConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `metro.config.js`);
-    if (tree.exists(nextConfigPath)) {
-        return nextConfigPath;
+function isUsingReactNative(projectName) {
+    try {
+        const projectGraph = (0, devkit_1.readCachedProjectGraph)();
+        return projectGraph?.dependencies?.[projectName]?.some((dep) => dep.target === 'npm:react-native');
+    }
+    catch {
+        return false;
     }
 }
 function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree) {

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

@@ -25,7 +25,7 @@ const config = {
       <% } %>
     },
   },
-  <% if (useReactNative && uiFramework === '@storybook/react-webpack5') { %>webpackFinal: async (config) => {
+  <% if (usesReactNative && uiFramework === '@storybook/react-webpack5') { %>webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.alias = {
         ...config.resolve.alias,
@@ -43,6 +43,21 @@ const config = {
   },<% } %><% if (usesVite && !viteConfigFilePath) { %>
   viteFinal: async (config) =>
     mergeConfig(config, {
+      <% if (usesReactNative) { %>define: {
+        global: 'window',
+      },
+      resolve: {
+        extensions: [
+          '.web.tsx',
+          '.web.ts',
+          '.web.jsx',
+          '.web.js',
+          ...(config.resolve.extensions ?? []),
+        ],
+        alias: {
+          'react-native': 'react-native-web',
+        },
+      },<% } %>
       plugins: [<% if(uiFramework === '@storybook/vue3-vite') { %>vue(), <% } %>nxViteTsPaths()],
     }),
   <% } %>

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

@@ -25,7 +25,7 @@ const config: StorybookConfig = {
       <% } %>
     },
   },
-  <% if (useReactNative && uiFramework === '@storybook/react-webpack5') { %>webpackFinal: async (config) => {
+  <% if (usesReactNative && uiFramework === '@storybook/react-webpack5') { %>webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.alias = {
         ...config.resolve.alias,
@@ -43,6 +43,21 @@ const config: StorybookConfig = {
   },<% } %><% if (usesVite && !viteConfigFilePath) { %>
   viteFinal: async (config) =>
     mergeConfig(config, {
+      <% if (usesReactNative) { %>define: {
+        global: 'window',
+      },
+      resolve: {
+        extensions: [
+          '.web.tsx',
+          '.web.ts',
+          '.web.jsx',
+          '.web.js',
+          ...(config.resolve?.extensions ?? []),
+        ],
+        alias: {
+          'react-native': 'react-native-web',
+        },
+      },<% } %>
       plugins: [<% if(uiFramework === '@storybook/vue3-vite') { %>vue(), <% } %><% if(uiFramework === '@storybook/react-vite') { %>react(), <% } %>nxViteTsPaths()],
     }),
   <% } %>