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';