Merge pull request #25780 from storybookjs/dannyhw/rn-v7-cli-updates

CLI: Update for react native v7
storybookjs · Jan 30, 2024 · b54e5eb · b54e5eb
2 parents 0b53fa0 + 649715a
commit b54e5eb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git 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,25 +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: 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',
@@ -53,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
@@ -9,7 +9,6 @@ import {
   HandledError,
   JsPackageManagerFactory,
   commandLog,
-  codeLog,
   paddedLog,
 } from '@storybook/core-common';
 import type { JsPackageManager } from '@storybook/core-common';
@@ -347,15 +346,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 };
   }