Merge pull request #12405 from storybookjs/fix/react-native-cli-init

CLI: Workaround for react native `sb init`

lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -1,9 +1,9 @@
-import shell from 'shelljs';
 import chalk from 'chalk';
-import { paddedLog, copyTemplate } from '../../helpers';
-import { NpmOptions } from '../../NpmOptions';
-import { baseGenerator, GeneratorOptions } from '../baseGenerator';
+import shell from 'shelljs';
+import { getBabelDependencies, paddedLog, copyTemplate } from '../../helpers';
 import { JsPackageManager } from '../../js-package-manager';
+import { NpmOptions } from '../../NpmOptions';
+import { GeneratorOptions } from '../baseGenerator';
 
 const generator = async (
   packageManager: JsPackageManager,
@@ -19,7 +19,7 @@ const generator = async (
     const projectName = dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
 
     if (projectName) {
-      shell.sed('-i', '%APP_NAME%', projectName, 'storybook/storybook.js');
+      shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.js');
     } else {
       paddedLog(
         chalk.red(
@@ -35,14 +35,40 @@ const generator = async (
     !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom'];
   const reactVersion = packageJson.dependencies.react;
 
-  await baseGenerator(packageManager, npmOptions, options, 'react-native', {
-    extraPackages: [
-      missingReactDom && reactVersion && `react-dom@${reactVersion}`,
-      installServer && '@storybook/react-native-server',
-    ].filter(Boolean),
-    addScripts: installServer,
-    addComponents: false, // We copy template-csf as it's wrapped in a storybook folder
-  });
+  // should resolve to latest 5.3 version, this is required until react-native storybook supports v6
+  const webAddonsV5 = [
+    '@storybook/addon-links@^5.3',
+    '@storybook/addon-knobs@^5.3',
+    '@storybook/addon-actions@^5.3',
+  ];
+
+  const nativeAddons = ['@storybook/addon-ondevice-knobs', '@storybook/addon-ondevice-actions'];
+
+  const packagesToResolve = [
+    ...nativeAddons,
+    '@storybook/react-native',
+    installServer && '@storybook/react-native-server',
+  ].filter(Boolean);
+
+  const resolvedPackages = await packageManager.getVersionedPackages(...packagesToResolve);
+
+  const babelDependencies = await getBabelDependencies(packageManager, packageJson);
+
+  const packages = [
+    ...babelDependencies,
+    ...resolvedPackages,
+    ...webAddonsV5,
+    missingReactDom && reactVersion && `react-dom@${reactVersion}`,
+  ].filter(Boolean);
+
+  packageManager.addDependencies({ ...npmOptions, packageJson }, packages);
+
+  if (installServer) {
+    packageManager.addStorybookCommandInScripts({
+      port: 7007,
+    });
+  }
+
   copyTemplate(__dirname, options.storyFormat);
 };
 

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js

@@ -1,2 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/index.js

@@ -1,8 +1,14 @@
+// if you use expo remove this line
 import { AppRegistry } from 'react-native';
-import { getStorybookUI, configure } from '@storybook/react-native';
+
+import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import './rn-addons';
 
+// enables knobs for all stories
+addDecorator(withKnobs);
+
 // import stories
 configure(() => {
   require('./stories');
@@ -13,7 +19,7 @@ configure(() => {
 const StorybookUIRoot = getStorybookUI({});
 
 // If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
-// If you use Expo you can safely remove this line.
+// If you use Expo you should remove this line.
 AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
 
 export default StorybookUIRoot;

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-knobs/register';

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import Button from '.';
+import CenterView from '../CenterView';
+
+storiesOf('Button', module)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+  .add('with text', () => (
+    <Button onPress={action('clicked-text')}>
+      <Text>{text('Button text', 'Hello Button')}</Text>
+    </Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  ));

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/react-native';
+import Welcome from '.';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/index.js

@@ -1,25 +1,2 @@
-import React from 'react';
-import { Text } from 'react-native';
-
-import { storiesOf } from '@storybook/react-native';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Button from './Button';
-import CenterView from './CenterView';
-import Welcome from './Welcome';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
-  .add('with text', () => (
-    <Button onPress={action('clicked-text')}>
-      <Text>Hello Button</Text>
-    </Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onPress={action('clicked-emoji')}>
-      <Text>😀 😎 👍 💯</Text>
-    </Button>
-  ));
+import './Button/Button.stories';
+import './Welcome/Welcome.stories';

lib/cli/src/initiate.ts

@@ -78,8 +78,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
     logger.log();
   };
 
-  const REACT_NATIVE_DISCUSSION =
-    'https://github.com/storybookjs/react-native/blob/master/app/react-native/docs/manual-setup.md';
+  const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';
 
   const runGenerator: () => Promise<void> = () => {
     switch (projectType) {
@@ -130,9 +129,9 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
           .then(() => {
             logger.log(chalk.red('NOTE: installation is not 100% automated.'));
             logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
-            codeLog(["export default from './storybook';"]);
-            logger.log('\n For more in depth setup instructions, see:\n');
-            logger.log(chalk.cyan(REACT_NATIVE_DISCUSSION));
+            codeLog(["export {default} from './storybook';"]);
+            logger.log('\n For more in information, see the github readme:\n');
+            logger.log(chalk.cyan(REACT_NATIVE_REPO));
             logger.log();
           });
       }