feat(react-native): upgrade @storybook/react-native to 6.5 (#16670)

docs/generated/packages/react-native/executors/build-ios.json

@@ -77,7 +77,8 @@
       },
       "install": {
         "type": "boolean",
-        "description": "Runs `pod install` for native modules before building iOS app."
+        "description": "Runs `pod install` for native modules before building iOS app.",
+        "default": true
       },
       "sync": {
         "type": "boolean",

docs/generated/packages/react-native/executors/run-ios.json

@@ -87,7 +87,7 @@
       "install": {
         "type": "boolean",
         "description": "Runs `pod install` for native modules before building iOS app.",
-        "default": false
+        "default": true
       },
       "sync": {
         "type": "boolean",

docs/generated/packages/react-native/executors/storybook.json

@@ -18,7 +18,7 @@
       "outputFile": {
         "type": "string",
         "description": "The output file that will be written. It is relative to the project directory.",
-        "default": "./.storybook/story-loader.js"
+        "default": "./.storybook/story-loader.ts"
       },
       "pattern": {
         "type": "string",
@@ -28,7 +28,8 @@
       "silent": {
         "type": "boolean",
         "description": "Silences output.",
-        "default": false
+        "default": false,
+        "x-deprecated": "No longer used. It will be silent as default."
       }
     },
     "required": ["searchDir", "outputFile", "pattern"],

e2e/react-native/src/react-native.test.ts

@@ -124,7 +124,7 @@ describe('react native', () => {
     );
     expect(() =>
       checkFilesExist(
-        `.storybook/story-loader.js`,
+        `.storybook/story-loader.ts`,
         `apps/${appName}/src/storybook/storybook.ts`,
         `apps/${appName}/src/storybook/toggle-storybook.tsx`,
         `apps/${appName}/src/app/App.stories.tsx`

packages/expo/src/utils/pod-install-task.ts

@@ -64,13 +64,6 @@ export function podInstall(
         }
         logger.info(stdout);
         if (stdout.includes('Pod installation complete')) {
-          // Remove build folder after pod install
-          if (buildFolder) {
-            buildFolder = join(iosDirectory, buildFolder);
-            if (existsSync(buildFolder)) {
-              rmdirSync(buildFolder, { recursive: true });
-            }
-          }
           resolve();
         } else {
           reject(new Error(podInstallErrorMessage));

packages/react-native/migrations.json

@@ -83,6 +83,12 @@
       "version": "16.0.0-beta.1",
       "description": "Replace @nrwl/react-native with @nx/react-native",
       "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages"
+    },
+    "update-16-1-0-upgrade-storybook-6-5": {
+      "cli": "nx",
+      "version": "16.1.0-beta.0",
+      "description": "Upgrade @storybook/react-native to 6.5",
+      "implementation": "./src/migrations/update-16-1-0/upgrade-storybook-6-5"
     }
   },
   "packageJsonUpdates": {
@@ -1291,6 +1297,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.0.2": {
+      "version": "16.0.2-beta.0",
+      "packages": {
+        "@react-native-async-storage/async-storage": {
+          "version": "1.18.1",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-safe-area-context": {
+          "version": "4.5.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/react-native/package.json

@@ -28,6 +28,7 @@
     "chalk": "^4.1.0",
     "enhanced-resolve": "^5.8.3",
     "fs-extra": "^11.1.0",
+    "glob": "7.1.4",
     "ignore": "^5.0.4",
     "metro-resolver": "^0.74.1",
     "minimatch": "3.0.5",

packages/react-native/src/executors/build-ios/schema.json

@@ -83,7 +83,8 @@
     },
     "install": {
       "type": "boolean",
-      "description": "Runs `pod install` for native modules before building iOS app."
+      "description": "Runs `pod install` for native modules before building iOS app.",
+      "default": true
     },
     "sync": {
       "type": "boolean",

packages/react-native/src/executors/run-ios/schema.json

@@ -93,7 +93,7 @@
     "install": {
       "type": "boolean",
       "description": "Runs `pod install` for native modules before building iOS app.",
-      "default": false
+      "default": true
     },
     "sync": {
       "type": "boolean",

packages/react-native/src/executors/storybook/schema.d.ts

@@ -1,7 +1,9 @@
-// options from https://github.com/elderfo/react-native-storybook-loader#options
 export interface ReactNativeStorybookOptions {
   searchDir: string[];
   outputFile: string;
   pattern: string;
+  /**
+   * @deprecated going to be removed in 17
+   */
   silent: boolean;
 }

packages/react-native/src/executors/storybook/schema.json

@@ -17,7 +17,7 @@
     "outputFile": {
       "type": "string",
       "description": "The output file that will be written. It is relative to the project directory.",
-      "default": "./.storybook/story-loader.js"
+      "default": "./.storybook/story-loader.ts"
     },
     "pattern": {
       "type": "string",
@@ -27,7 +27,8 @@
     "silent": {
       "type": "boolean",
       "description": "Silences output.",
-      "default": false
+      "default": false,
+      "x-deprecated": "No longer used. It will be silent as default."
     }
   },
   "required": ["searchDir", "outputFile", "pattern"]

packages/react-native/src/executors/storybook/storybook.impl.ts

@@ -2,17 +2,16 @@ import { join } from 'path';
 import { ExecutorContext, logger } from '@nx/devkit';
 import { fileExists } from '@nx/workspace/src/utilities/fileutils';
 import * as chalk from 'chalk';
+import { sync as globSync } from 'glob';
 
 import { ReactNativeStorybookOptions } from './schema';
-import { ChildProcess, fork } from 'child_process';
 import {
   displayNewlyAddedDepsMessage,
   syncDeps,
 } from '../sync-deps/sync-deps.impl';
+import { writeFileSync } from 'fs-extra';
 
-let childProcess: ChildProcess;
-
-export default async function* reactNatievStorybookExecutor(
+export default async function* reactNativeStorybookExecutor(
   options: ReactNativeStorybookOptions,
   context: ExecutorContext
 ): AsyncGenerator<{ success: boolean }> {
@@ -35,71 +34,39 @@ export default async function* reactNatievStorybookExecutor(
         context.root,
         context.projectGraph,
         [
+          `@storybook/react-native`,
           '@storybook/addon-ondevice-actions',
           '@storybook/addon-ondevice-backgrounds',
           '@storybook/addon-ondevice-controls',
           '@storybook/addon-ondevice-notes',
+          '@react-native-async-storage/async-storage',
+          'react-native-safe-area-context',
         ]
       )
     );
 
-  try {
-    await runCliStorybook(context.root, options);
-    yield { success: true };
-  } finally {
-    if (childProcess) {
-      childProcess.kill();
-    }
-  }
+  runCliStorybook(context.root, options);
+  yield { success: true };
 }
 
-function runCliStorybook(
+export function runCliStorybook(
   workspaceRoot: string,
   options: ReactNativeStorybookOptions
 ) {
-  return new Promise((resolve, reject) => {
-    childProcess = fork(
-      join(
-        workspaceRoot,
-        './node_modules/react-native-storybook-loader/out/rnstl-cli.js'
-      ),
-      createStorybookOptions(options),
-      {
-        cwd: workspaceRoot,
-      }
-    );
-
-    // Ensure the child process is killed when the parent exits
-    process.on('exit', () => childProcess.kill());
-    process.on('SIGTERM', () => childProcess.kill());
+  const storiesFiles: string[] = options.searchDir.flatMap((dir) =>
+    globSync(join(dir, options.pattern))
+  );
+  if (storiesFiles.length === 0) {
+    logger.warn(`${chalk.bold.yellow('warn')} No stories found.`);
+  }
 
-    childProcess.on('error', (err) => {
-      reject(err);
-    });
-    childProcess.on('exit', (code) => {
-      if (code === 0) {
-        resolve(code);
-      } else {
-        reject(code);
-      }
-    });
-  });
-}
+  const newContents = `// Auto-generated file created by nx
+// DO NOT EDIT.
+export function loadStories() {
+  return [
+    ${storiesFiles.map((story) => `require('${story}')`).join(',\n')}
+  ];
+}`;
 
-function createStorybookOptions(options) {
-  return Object.keys(options).reduce((acc, k) => {
-    const v = options[k];
-    if (typeof v === 'boolean') {
-      if (v === true) {
-        acc.push(`--${k}`);
-      }
-    } else if (Array.isArray(v)) {
-      v.forEach((value) => {
-        acc.push(`--${k}`, value);
-      });
-    } else {
-      acc.push(`--${k}`, v);
-    }
-    return acc;
-  }, []);
+  writeFileSync(join(workspaceRoot, options.outputFile), newContents);
 }