From 16e246cbbc1d7cde065453539dfc88b41c56991c Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 28 Jan 2024 13:21:34 +0000 Subject: [PATCH 1/4] Cli: Update cli for react native v7 --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index a77878dcc191..0007e298a3f3 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 = [ @@ -25,24 +26,26 @@ const generator = async ( ]; // 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 +56,7 @@ const generator = async ( await copyTemplateFiles({ packageManager, renderer: 'react-native', - language: SupportedLanguage.JAVASCRIPT, + language: SupportedLanguage.TYPESCRIPT_3_8, destination: storybookConfigFolder, includeCommonAssets: false, }); From 3dec3235558ec9183e1b115694cc83982f325bde Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 28 Jan 2024 13:26:55 +0000 Subject: [PATCH 2/4] fix: remove comment --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index 0007e298a3f3..b52231e882a2 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -25,7 +25,6 @@ const generator = async ( '@storybook/react-native', ]; - // change these to latest version once v6 stable is released const packagesWithFixedVersion: string[] = []; const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve); From 3bf95ad465d14c91a1a1040462a74389a4cd065f Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 28 Jan 2024 13:45:55 +0000 Subject: [PATCH 3/4] fix: whitespace --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index b52231e882a2..94724ba1af59 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -32,11 +32,11 @@ const generator = async ( const babelDependencies = await getBabelDependencies(packageManager, packageJson); const packages: string[] = []; - + packages.push(...babelDependencies); packages.push(...packagesWithFixedVersion); - + packages.push(...versionedPackages); if (missingReactDom && reactVersion) { From 34d27e9adacc217811a6908f918fc41b3d7f97ba Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Mon, 29 Jan 2024 23:31:42 +0000 Subject: [PATCH 4/4] fix: adjust message to warn about making changes to metro --- code/lib/cli/src/initiate.ts | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 54321ccb96a9..703002ec7cca 100644 --- 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 }; }