feat(storybook): upgrade @storybook/react-native version to ^6.0.1-be…

…ta.5 (#9657) - also move the toggle-storybook.tsx to src/storbyook folder rather than .storybook
nrwl · Apr 4, 2022 · 1358fbf · 1358fbf
1 parent bc31273
commit 1358fbf
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 26 deletions.
diff --git a/e2e/react-native/src/react-native.test.ts b/e2e/react-native/src/react-native.test.ts
@@ -66,8 +66,8 @@ describe('react native', () => {
     expect(() =>
       checkFilesExist(
         `.storybook/story-loader.js`,
-        `apps/${appName}/.storybook/storybook.ts`,
-        `apps/${appName}/.storybook/toggle-storybook.tsx`,
+        `apps/${appName}/src/storybook/storybook.ts`,
+        `apps/${appName}/src/storybook/toggle-storybook.tsx`,
         `apps/${appName}/src/app/App.stories.tsx`
       )
     ).not.toThrow();

diff --git a/packages/react-native/src/executors/storybook/storybook.impl.ts b/packages/react-native/src/executors/storybook/storybook.impl.ts
@@ -1,5 +1,6 @@
 import { join } from 'path';
 import { ExecutorContext, logger } from '@nrwl/devkit';
+import { fileExists } from '@nrwl/workspace/src/utilities/fileutils';
 import * as chalk from 'chalk';
 
 import { ReactNativeStorybookOptions } from './schema';
@@ -23,15 +24,17 @@ export default async function* reactNatievStorybookExecutor(
   );
 
   // add storybook addons to app's package.json
-  displayNewlyAddedDepsMessage(
-    context.projectName,
-    await syncDeps(
+  const packageJsonPath = join(context.root, projectRoot, 'package.json');
+  if (fileExists(packageJsonPath))
+    displayNewlyAddedDepsMessage(
       context.projectName,
-      projectRoot,
-      context.root,
-      '@storybook/addon-ondevice-actions,@storybook/addon-ondevice-backgrounds,@storybook/addon-ondevice-controls,@storybook/addon-ondevice-notes'
-    )
-  );
+      await syncDeps(
+        context.projectName,
+        projectRoot,
+        context.root,
+        '@storybook/addon-ondevice-actions,@storybook/addon-ondevice-backgrounds,@storybook/addon-ondevice-controls,@storybook/addon-ondevice-notes'
+      )
+    );
 
   try {
     await runCliStorybook(context.root, projectRoot, options);

diff --git a/packages/react-native/src/generators/component-story/component-story.spec.ts b/packages/react-native/src/generators/component-story/component-story.spec.ts
@@ -60,8 +60,7 @@ describe('react-native:component-story', () => {
           import React from 'react';
           import { TestUiLib, TestUiLibProps } from './test-ui-lib';
           const props: TestUiLibProps = {};
-          storiesOf('TestUiLib', module)
-            .addDecorator((getStory) => <>{getStory()}</>)
+          storiesOf('TestUiLib', module)            
             .add('Primary', () => <TestUiLib {...props} />);
           `);
       });
@@ -110,7 +109,6 @@ describe('react-native:component-story', () => {
     const props = {};
 
     storiesOf('Test', module)
-      .addDecorator((getStory) => <>{getStory()}</>)
       .add('Primary', () => <Test {...props} />);
           `);
       });
@@ -149,7 +147,6 @@ describe('react-native:component-story', () => {
           import { Test } from './test-ui-lib';
           const props = {};
           storiesOf('Test', module)
-            .addDecorator((getStory) => <>{getStory()}</>)
             .add('Primary', () => <Test {...props} />);
           `);
       });
@@ -172,7 +169,6 @@ describe('react-native:component-story', () => {
           import { TestUiLib, TestUiLibProps } from './test-ui-lib';
           const props: TestUiLibProps = {};
           storiesOf('TestUiLib', module)
-            .addDecorator((getStory) => <>{getStory()}</>)
             .add('Primary', () => <TestUiLib {...props} />);
           `);
       });
@@ -223,7 +219,6 @@ describe('react-native:component-story', () => {
         const actions = { someAction: action('someAction executed!') };
         const props: TestProps = { name: '', displayAge: false };
         storiesOf('Test', module)
-          .addDecorator((getStory) => <>{getStory()}</>)
           .add('Primary', () => <Test {...props} {...actions} />);
           `);
       });
@@ -372,7 +367,6 @@ describe('react-native:component-story', () => {
       displayAge: false,
     };
     storiesOf('Test', module)
-      .addDecorator((getStory) => <>{getStory()}</>)
       .add('Primary', () => <Test {...props} />);
           `);
         });
@@ -404,7 +398,6 @@ describe('react-native:component-story', () => {
         const props: TestUiLibProps = {};
 
         storiesOf('TestUiLib', module)
-          .addDecorator((getStory) => <>{getStory()}</>)
           .add('Primary', () => <TestUiLib {...props} />);
         `);
     });

diff --git a/...act-native/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ b/...act-native/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
@@ -19,7 +19,6 @@ const props <% if ( propsTypeName ) { %>:<%= propsTypeName %><% } %> = {<% for (
 <% } %>};
 
 storiesOf('<%= componentName %>', module)
-  .addDecorator((getStory) => <>{getStory()}</>)
   .add('Primary', () => (
     <<%= componentName %> {...props} <% if (hasActions) { %> {...actions} <% } %>/>
   ));
diff --git a/packages/react-native/src/generators/storybook-configuration/files/app/storybook.ts.template b/packages/react-native/src/generators/storybook-configuration/files/app/storybook.ts.template
@@ -1,6 +1,6 @@
 import { configure, getStorybookUI } from '@storybook/react-native';
 
-import { loadStories } from '../../../.storybook/story-loader';
+import { loadStories } from '../../../../.storybook/story-loader';
 
 configure(loadStories(), module, false);
 

diff --git a/...act-native/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template b/...act-native/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template
@@ -5,7 +5,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { DevSettings } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import AppRoot from '../src/app/App';
+import AppRoot from '../app/App';
 
 export const DEFAULT_REACTOTRON_WS_URI = 'ws://localhost:9090';
 

diff --git a/packages/react-native/src/generators/storybook-configuration/lib/create-storybook-files.ts b/packages/react-native/src/generators/storybook-configuration/lib/create-storybook-files.ts
@@ -53,7 +53,7 @@ export async function createStorybookFiles(
   generateFiles(
     host,
     join(__dirname, '../files/app'),
-    join(root, '.storybook'),
+    join(root, 'src', 'storybook'),
     {
       tmpl: '',
       offsetFromRoot: offsetFromRoot(sourceRoot),

diff --git a/...c/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts b/...c/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts
@@ -34,7 +34,7 @@ describe('replaceAppImportWithStorybookToggle', () => {
     const mainFile = tree.read('apps/products/src/main.tsx', 'utf-8');
     expect(formatFile`${mainFile}`).toEqual(
       formatFile`import { AppRegistry } from 'react-native';
-      import App from '../.storybook/toggle-storybook';
+      import App from './storybook/toggle-storybook';
       
       AppRegistry.registerComponent('main', () => App);`
     );
@@ -57,7 +57,7 @@ describe('replaceAppImportWithStorybookToggle', () => {
     const mainFile = tree.read('apps/products/src/main.tsx', 'utf-8');
     expect(formatFile`${mainFile}`).toEqual(
       formatFile`import { AppRegistry } from 'react-native';
-      import App from '../.storybook/toggle-storybook';
+      import App from './storybook/toggle-storybook';
       
       AppRegistry.registerComponent('main', () => App);`
     );

diff --git a/...ve/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts b/...ve/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts
@@ -20,7 +20,7 @@ export function replaceAppImportWithStorybookToggle(
 
   const mainFilePath = join(sourceRoot, schema.js ? 'main.js' : 'main.tsx');
   const appImportImport = `import App from './app/App';`;
-  const storybookeToggleImport = `import App from '../.storybook/toggle-storybook';`;
+  const storybookeToggleImport = `import App from './storybook/toggle-storybook';`;
 
   try {
     logger.debug(`Updating import for ${mainFilePath}`);

diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json
@@ -87,6 +87,26 @@
         "@storybook/core-server": {
           "version": "~6.4.12",
           "alwaysAddToPackageJson": true
+        },
+        "@storybook/react-native": {
+          "version": "^6.0.1-beta.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-ondevice-actions": {
+          "version": "^6.0.1-beta.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-ondevice-backgrounds": {
+          "version": "^6.0.1-beta.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-ondevice-controls": {
+          "version": "^6.0.1-beta.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-ondevice-notes": {
+          "version": "^6.0.1-beta.5",
+          "alwaysAddToPackageJson": false
         }
       }
     },

diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts
@@ -6,5 +6,5 @@ export const babelPresetTypescriptVersion = '7.12.13';
 export const svgrVersion = '^5.4.0';
 export const urlLoaderVersion = '^3.0.0';
 export const webpack5Version = '^5.64.0';
-export const storybookReactNativeVersion = '6.0.1-alpha.7';
+export const storybookReactNativeVersion = '^6.0.1-beta.5';
 export const reactNativeStorybookLoader = '^2.0.5';