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:/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);
 }