diff --git a/e2e/react-native/src/react-native.test.ts b/e2e/react-native/src/react-native.test.ts index 78c5e222737a7..05d73b884d6f1 100644 --- 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 index 206f609416f5d..571098ce0074d 100644 --- 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 index d84486df0486d..c5116819cecad 100644 --- 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', () => ); `); }); @@ -110,7 +109,6 @@ describe('react-native:component-story', () => { const props = {}; storiesOf('Test', module) - .addDecorator((getStory) => <>{getStory()}) .add('Primary', () => ); `); }); @@ -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', () => ); `); }); @@ -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', () => ); `); }); @@ -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', () => ); `); }); @@ -372,7 +367,6 @@ describe('react-native:component-story', () => { displayAge: false, }; storiesOf('Test', module) - .addDecorator((getStory) => <>{getStory()}) .add('Primary', () => ); `); }); @@ -404,7 +398,6 @@ describe('react-native:component-story', () => { const props: TestUiLibProps = {}; storiesOf('TestUiLib', module) - .addDecorator((getStory) => <>{getStory()}) .add('Primary', () => ); `); }); diff --git a/packages/react-native/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ b/packages/react-native/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ index c74b2060aa601..b63887bfe432c 100644 --- a/packages/react-native/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ +++ b/packages/react-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} <% } %>/> )); \ No newline at end of file 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 index feb62b0ed1b4d..fb30ee1685535 100644 --- 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/packages/react-native/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template b/packages/react-native/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template index e9220676def30..c3aff31df7d38 100644 --- a/packages/react-native/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template +++ b/packages/react-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 index d5e4d6835c570..4f01fbd9c3e0a 100644 --- 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/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts b/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts index 5a21acd81fe8d..d53386e67350a 100644 --- a/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts +++ b/packages/react-native/src/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/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts b/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts index ac37abbbc918f..0f624be606db7 100644 --- a/packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts +++ b/packages/react-native/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 index 17a177aed2f22..dce1301887f13 100644 --- 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 index 7f490e63ce292..c08ed98825b65 100644 --- 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';