From 26af9f2522a6133438465d57f517527b444ea5a6 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 30 Jan 2024 20:58:00 +0800
Subject: [PATCH] Patch RN changes

---
 .../cli/src/generators/REACT_NATIVE/index.ts  | 27 +++++++++--------
 code/lib/cli/src/initiate.ts                  | 30 ++++++++++++-------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts
index dcdfb037c242..c2d18fb84d82 100644
--- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts
+++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts
@@ -11,6 +11,7 @@ const generator = async (
 
   const missingReactDom =
     !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom'];
+
   const reactVersion = packageJson.dependencies.react;
 
   const packagesToResolve = [
@@ -24,24 +25,26 @@ const generator = async (
     '@storybook/react-native',
   ];
 
-  // change these to latest version once v6 stable is released
-  const packagesWithFixedVersion = [
-    '@storybook/addon-actions@^6.5.16',
-    '@storybook/addon-controls@^6.5.16',
-  ];
+  const packagesWithFixedVersion: string[] = [];
 
   const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
-  const packages = [
-    ...babelDependencies,
-    ...packagesWithFixedVersion,
-    ...versionedPackages,
-    missingReactDom && reactVersion && `react-dom@${reactVersion}`,
-  ].filter(Boolean);
+  const packages: string[] = [];
+
+  packages.push(...babelDependencies);
+
+  packages.push(...packagesWithFixedVersion);
+
+  packages.push(...versionedPackages);
+
+  if (missingReactDom && reactVersion) {
+    packages.push(`react-dom@${reactVersion}`);
+  }
 
   await packageManager.addDependencies({ ...npmOptions, packageJson }, packages);
+
   packageManager.addScripts({
     'storybook-generate': 'sb-rn-get-stories',
     'storybook-watch': 'sb-rn-watcher',
@@ -52,7 +55,7 @@ const generator = async (
   await copyTemplateFiles({
     packageManager,
     renderer: 'react-native',
-    language: SupportedLanguage.JAVASCRIPT,
+    language: SupportedLanguage.TYPESCRIPT_3_8,
     destination: storybookConfigFolder,
     includeCommonAssets: false,
   });
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 2ab4fb561890..d515624596a9 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -12,7 +12,7 @@ import { readdirSync } from 'fs-extra';
 import { lt, prerelease } from 'semver';
 import { installableProjectTypes, ProjectType } from './project_types';
 import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
-import { commandLog, codeLog, paddedLog } from './helpers';
+import { commandLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import reactGenerator from './generators/REACT';
@@ -401,15 +401,25 @@ export async function doInitiate(
   }
 
   if (projectType === ProjectType.REACT_NATIVE) {
-    logger.log();
-    logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n'));
-    logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
-    codeLog(["export {default} from './.storybook';"]);
-    logger.log('\n Then to run your Storybook, type:\n');
-    codeLog([packageManager.getRunCommand('start')]);
-    logger.log('\n For more in information, see the github readme:\n');
-    logger.log(chalk.cyan('https://github.com/storybookjs/react-native'));
-    logger.log();
+    logger.log(dedent`
+      ${chalk.yellow('NOTE: installation is not 100% automated.')}
+
+      To run Storybook, you will need to:
+
+      1. Replace the contents of your app entry with the following
+      
+      ${chalk.inverse("export {default} from './.storybook';")}
+      
+      2. Enable transformer.unstable_allowRequireContext in your metro config
+      
+      For a more detailed guide go to:
+      ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+      
+      Then to run your Storybook, type:
+
+      ${chalk.inverse(` ${packageManager.getRunCommand('start')} `)}
+
+    `);
 
     return { shouldRunDev: false };
   }