@nx/react-native 18.0.0-beta.1 → 18.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +6 -1
- package/executors.json +5 -0
- package/generators.json +12 -11
- package/migrations.json +73 -1
- package/package.json +10 -15
- package/plugins/metro-resolver.js +4 -1
- package/plugins/plugin.d.ts +2 -0
- package/plugins/plugin.js +12 -1
- package/plugins/with-nx-metro.js +6 -2
- package/src/executors/build-android/build-android.impl.js +1 -5
- package/src/executors/build-android/build-android.impl.ts +1 -5
- package/src/executors/bundle/schema.d.ts +1 -1
- package/src/executors/ensure-symlink/ensure-symlink.impl.d.ts +4 -0
- package/src/executors/ensure-symlink/ensure-symlink.impl.js +4 -0
- package/src/executors/ensure-symlink/ensure-symlink.impl.ts +4 -0
- package/src/executors/run-android/run-android.impl.js +4 -16
- package/src/executors/run-android/run-android.impl.ts +8 -17
- package/src/executors/run-ios/run-ios.impl.js +4 -16
- package/src/executors/run-ios/run-ios.impl.ts +9 -18
- package/src/executors/start/schema.d.ts +1 -1
- package/src/executors/start/start.impl.js +11 -26
- package/src/executors/start/start.impl.ts +14 -28
- package/src/executors/storybook/storybook.impl.d.ts +4 -0
- package/src/executors/storybook/storybook.impl.js +8 -1
- package/src/executors/storybook/storybook.impl.ts +16 -5
- package/src/executors/sync-deps/sync-deps.impl.d.ts +3 -2
- package/src/executors/sync-deps/sync-deps.impl.js +28 -11
- package/src/executors/sync-deps/sync-deps.impl.ts +45 -19
- package/src/executors/upgrade/schema.d.ts +1 -0
- package/src/executors/upgrade/schema.json +11 -0
- package/src/executors/upgrade/upgrade.impl.d.ts +13 -0
- package/src/executors/upgrade/upgrade.impl.js +47 -0
- package/src/executors/upgrade/upgrade.impl.ts +64 -0
- package/src/generators/application/application.js +27 -8
- package/src/generators/application/application.spec.ts +29 -2
- package/src/generators/application/files/app/.babelrc.js.template +23 -0
- package/src/generators/application/files/app/android/app/build.gradle.template +12 -28
- package/src/generators/application/files/app/android/app/src/debug/AndroidManifest.xml.template +2 -6
- package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainActivity.kt.template +22 -0
- package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainApplication.kt.template +45 -0
- package/src/generators/application/files/app/android/build.gradle.template +7 -20
- package/src/generators/application/files/app/android/gradle/wrapper/gradle-wrapper.properties +2 -1
- package/src/generators/application/files/app/android/gradle.properties +0 -3
- package/src/generators/application/files/app/android/gradlew.template +12 -7
- package/src/generators/application/files/app/android/settings.gradle.template +2 -2
- package/src/generators/application/files/app/ios/Podfile.template +0 -7
- package/src/generators/application/files/app/ios/__className__/AppDelegate.mm.template +5 -0
- package/src/generators/application/files/app/ios/__className__/Info.plist.template +5 -8
- package/src/generators/application/files/app/ios/__className__.xcodeproj/project.pbxproj.template +11 -33
- package/src/generators/application/files/app/metro.config.js.template +0 -4
- package/src/generators/application/files/app/src/app/App.tsx.template +29 -2
- package/src/generators/application/lib/add-e2e.d.ts +3 -0
- package/src/generators/application/lib/add-e2e.js +47 -0
- package/src/generators/application/lib/add-project.js +13 -17
- package/src/generators/application/lib/normalize-options.d.ts +4 -0
- package/src/generators/application/lib/normalize-options.js +9 -3
- package/src/generators/application/lib/normalize-options.spec.ts +53 -5
- package/src/generators/application/schema.d.ts +5 -3
- package/src/generators/application/schema.json +13 -5
- package/src/generators/component-story/component-story.d.ts +5 -8
- package/src/generators/component-story/component-story.js +8 -69
- package/src/generators/component-story/schema.d.ts +1 -0
- package/src/generators/component-story/schema.json +10 -2
- package/src/generators/init/init.d.ts +1 -0
- package/src/generators/init/init.js +14 -7
- package/src/generators/init/init.spec.ts +6 -2
- package/src/generators/init/schema.d.ts +1 -0
- package/src/generators/library/files/lib/.babelrc.js.template +21 -0
- package/src/generators/library/lib/normalize-options.js +1 -0
- package/src/generators/library/library.js +2 -1
- package/src/generators/library/library.spec.ts +12 -41
- package/src/generators/library/schema.d.ts +1 -0
- package/src/generators/library/schema.json +1 -1
- package/src/generators/stories/schema.d.ts +2 -0
- package/src/generators/stories/schema.json +14 -1
- package/src/generators/stories/stories.d.ts +5 -2
- package/src/generators/stories/stories.js +7 -50
- package/src/generators/storybook-configuration/configuration.d.ts +7 -2
- package/src/generators/storybook-configuration/configuration.js +15 -48
- package/src/generators/storybook-configuration/schema.d.ts +4 -2
- package/src/generators/storybook-configuration/schema.json +21 -11
- package/src/generators/upgrade-native/lib/normalize-options.d.ts +1 -1
- package/src/generators/upgrade-native/schema.d.ts +1 -1
- package/src/generators/upgrade-native/schema.json +2 -2
- package/src/generators/upgrade-native/upgrade-native.d.ts +2 -0
- package/src/generators/upgrade-native/upgrade-native.js +3 -0
- package/src/generators/web-configuration/files/base-vite/.babelrc.js.template +23 -0
- package/src/generators/web-configuration/files/base-vite/index.html__tmpl__ +15 -0
- package/src/generators/web-configuration/files/base-vite/public/favicon.ico +0 -0
- package/src/generators/web-configuration/files/base-vite/src/assets/.gitkeep +0 -0
- package/src/generators/web-configuration/files/base-vite/src/main-web.tsx__tmpl__ +9 -0
- package/src/generators/web-configuration/files/base-vite/vite.config.ts__tmpl__ +82 -0
- package/src/generators/web-configuration/files/base-webpack/.babelrc.js.template +23 -0
- package/src/generators/web-configuration/files/base-webpack/src/assets/.gitkeep +0 -0
- package/src/generators/web-configuration/files/base-webpack/src/favicon.ico +0 -0
- package/src/generators/web-configuration/files/base-webpack/src/index.html__tmpl__ +14 -0
- package/src/generators/web-configuration/files/base-webpack/src/main-web.tsx__tmpl__ +9 -0
- package/src/generators/web-configuration/files/base-webpack/webpack.config.js__tmpl__ +77 -0
- package/src/generators/web-configuration/lib/normalize-schema.d.ts +17 -0
- package/src/generators/web-configuration/lib/normalize-schema.js +16 -0
- package/src/generators/web-configuration/lib/webpack-targets.d.ts +7 -0
- package/src/generators/web-configuration/lib/webpack-targets.js +75 -0
- package/src/generators/web-configuration/schema.d.ts +6 -0
- package/src/generators/web-configuration/schema.json +42 -0
- package/src/generators/web-configuration/web-configuration.d.ts +12 -0
- package/src/generators/web-configuration/web-configuration.js +85 -0
- package/src/migrations/update-16-6-0/update-metro-config.js +0 -4
- package/src/migrations/update-16-9-0/remove-types-react-native.js +2 -9
- package/src/migrations/update-18-0-0/add-upgrade-target.d.ts +6 -0
- package/src/migrations/update-18-0-0/add-upgrade-target.js +33 -0
- package/src/migrations/update-18-0-0/add-web-configuration.d.ts +8 -0
- package/src/migrations/update-18-0-0/add-web-configuration.js +33 -0
- package/src/migrations/update-18-0-0/add-web-configuration.spec.ts +39 -0
- package/src/migrations/update-18-0-0/change-storybook-targets.d.ts +5 -0
- package/src/migrations/update-18-0-0/change-storybook-targets.js +57 -0
- package/src/migrations/update-18-0-0/remove-block-list.d.ts +6 -0
- package/src/migrations/update-18-0-0/remove-block-list.js +26 -0
- package/src/migrations/update-18-0-0/remove-block-list.spec.ts +68 -0
- package/src/migrations/update-18-0-0/remove-metro.d.ts +14 -0
- package/src/migrations/update-18-0-0/remove-metro.js +29 -0
- package/src/migrations/update-18-0-0/remove-symlink-target.d.ts +6 -0
- package/src/migrations/update-18-0-0/remove-symlink-target.js +30 -0
- package/src/migrations/update-18-0-0/remove-symlink-target.spec.ts +40 -0
- package/src/utils/add-jest.d.ts +1 -1
- package/src/utils/add-jest.js +13 -1
- package/src/utils/add-linting.d.ts +1 -0
- package/src/utils/add-linting.js +1 -0
- package/src/utils/add-linting.spec.ts +2 -4
- package/src/utils/ensure-dependencies.js +2 -6
- package/src/utils/testing-generators.js +1 -0
- package/src/utils/versions.d.ts +9 -12
- package/src/utils/versions.js +10 -13
- package/src/generators/application/files/app/android/app/src/debug/java/com/__lowerCaseName__/ReactNativeFlipper.java.template +0 -75
- package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainActivity.java.template +0 -32
- package/src/generators/application/files/app/android/app/src/main/java/com/__lowerCaseName__/MainApplication.java.template +0 -62
- package/src/generators/application/files/app/android/app/src/release/java/com/__lowerCaseName__/ReactNativeFlipper.java.template +0 -20
- package/src/generators/application/files/app/babel.config.json.template +0 -10
- package/src/generators/application/lib/add-detox.d.ts +0 -3
- package/src/generators/application/lib/add-detox.js +0 -23
- package/src/generators/component-story/component-story.spec.ts +0 -427
- package/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ +0 -32
- package/src/generators/library/files/lib/babel.config.json.template +0 -19
- package/src/generators/stories/stories-app.spec.ts +0 -128
- package/src/generators/stories/stories-lib.spec.ts +0 -105
- package/src/generators/storybook-configuration/configuration.spec.ts +0 -135
- package/src/generators/storybook-configuration/files/app/storybook.ts.template +0 -9
- package/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template +0 -74
- package/src/generators/storybook-configuration/files/root/story-loader.ts.template +0 -5
- package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.d.ts +0 -6
- package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.js +0 -25
- package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.spec.ts +0 -161
- package/src/generators/storybook-configuration/lib/create-storybook-files.d.ts +0 -6
- package/src/generators/storybook-configuration/lib/create-storybook-files.js +0 -42
- package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.d.ts +0 -7
- package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js +0 -29
- package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts +0 -65
- package/src/utils/find-all-npm-dependencies.d.ts +0 -2
- package/src/utils/find-all-npm-dependencies.js +0 -25
- package/src/utils/find-all-npm-dependencies.spec.ts +0 -95
- package/src/utils/symlink-task.d.ts +0 -2
- package/src/utils/symlink-task.js +0 -18
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import { Tree } from '@nx/devkit';
|
|
2
|
-
import storiesGenerator from './stories';
|
|
3
|
-
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
|
|
4
|
-
import applicationGenerator from '../application/application';
|
|
5
|
-
import { Linter } from '@nx/eslint';
|
|
6
|
-
import libraryGenerator from '../library/library';
|
|
7
|
-
import reactNativeComponentGenerator from '../component/component';
|
|
8
|
-
|
|
9
|
-
describe('react-native:stories for libraries', () => {
|
|
10
|
-
let appTree: Tree;
|
|
11
|
-
|
|
12
|
-
beforeEach(async () => {
|
|
13
|
-
appTree = await createTestUILib('test-ui-lib');
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
it('should create the stories', async () => {
|
|
17
|
-
await reactNativeComponentGenerator(appTree, {
|
|
18
|
-
name: 'test-ui-lib',
|
|
19
|
-
project: 'test-ui-lib',
|
|
20
|
-
});
|
|
21
|
-
await reactNativeComponentGenerator(appTree, {
|
|
22
|
-
name: 'another-cmp',
|
|
23
|
-
project: 'test-ui-lib',
|
|
24
|
-
});
|
|
25
|
-
await storiesGenerator(appTree, {
|
|
26
|
-
project: 'test-ui-lib',
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
expect(
|
|
30
|
-
appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
|
|
31
|
-
).toBeTruthy();
|
|
32
|
-
expect(
|
|
33
|
-
appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
|
|
34
|
-
).toBeTruthy();
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('should ignore paths', async () => {
|
|
38
|
-
await reactNativeComponentGenerator(appTree, {
|
|
39
|
-
name: 'test-ui-lib',
|
|
40
|
-
project: 'test-ui-lib',
|
|
41
|
-
});
|
|
42
|
-
await reactNativeComponentGenerator(appTree, {
|
|
43
|
-
name: 'another-cmp',
|
|
44
|
-
project: 'test-ui-lib',
|
|
45
|
-
});
|
|
46
|
-
await storiesGenerator(appTree, {
|
|
47
|
-
project: 'test-ui-lib',
|
|
48
|
-
ignorePaths: ['test-ui-lib/src/lib/another-cmp/**'],
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
expect(
|
|
52
|
-
appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
|
|
53
|
-
).toBeTruthy();
|
|
54
|
-
expect(
|
|
55
|
-
appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
|
|
56
|
-
).toBeFalsy();
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
it('should ignore files that do not contain components', async () => {
|
|
60
|
-
await reactNativeComponentGenerator(appTree, {
|
|
61
|
-
name: 'test-ui-lib',
|
|
62
|
-
project: 'test-ui-lib',
|
|
63
|
-
});
|
|
64
|
-
// create another component
|
|
65
|
-
appTree.write(
|
|
66
|
-
'test-ui-lib/src/lib/some-command-line-utils.ts',
|
|
67
|
-
`export const add = (a: number, b: number) => a + b;`
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
await storiesGenerator(appTree, {
|
|
71
|
-
project: 'test-ui-lib',
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
// should just create the story and not error, even though there's a js file
|
|
75
|
-
// not containing any react component
|
|
76
|
-
expect(
|
|
77
|
-
appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
|
|
78
|
-
).toBeTruthy();
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
export async function createTestUILib(libName: string): Promise<Tree> {
|
|
83
|
-
let appTree = createTreeWithEmptyWorkspace();
|
|
84
|
-
appTree.write('.gitignore', '');
|
|
85
|
-
|
|
86
|
-
await libraryGenerator(appTree, {
|
|
87
|
-
linter: Linter.EsLint,
|
|
88
|
-
skipFormat: true,
|
|
89
|
-
skipTsConfig: false,
|
|
90
|
-
unitTestRunner: 'none',
|
|
91
|
-
name: libName,
|
|
92
|
-
projectNameAndRootFormat: 'as-provided',
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
await applicationGenerator(appTree, {
|
|
96
|
-
e2eTestRunner: 'none',
|
|
97
|
-
linter: Linter.EsLint,
|
|
98
|
-
skipFormat: false,
|
|
99
|
-
unitTestRunner: 'none',
|
|
100
|
-
name: `${libName}-e2e`,
|
|
101
|
-
install: false,
|
|
102
|
-
projectNameAndRootFormat: 'as-provided',
|
|
103
|
-
});
|
|
104
|
-
return appTree;
|
|
105
|
-
}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { Tree } from '@nx/devkit';
|
|
2
|
-
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
|
|
3
|
-
import { Linter } from '@nx/eslint';
|
|
4
|
-
import { logger } from '@nx/devkit';
|
|
5
|
-
|
|
6
|
-
import libraryGenerator from '../library/library';
|
|
7
|
-
import applicationGenerator from '../application/application';
|
|
8
|
-
import componentGenerator from '../component/component';
|
|
9
|
-
import storybookConfigurationGenerator from './configuration';
|
|
10
|
-
|
|
11
|
-
// nested code imports graph from the repo, which might have innacurate graph version
|
|
12
|
-
jest.mock('nx/src/project-graph/project-graph', () => ({
|
|
13
|
-
...jest.requireActual<any>('nx/src/project-graph/project-graph'),
|
|
14
|
-
createProjectGraphAsync: jest
|
|
15
|
-
.fn()
|
|
16
|
-
.mockImplementation(async () => ({ nodes: {}, dependencies: {} })),
|
|
17
|
-
}));
|
|
18
|
-
|
|
19
|
-
describe('react-native:storybook-configuration', () => {
|
|
20
|
-
let appTree;
|
|
21
|
-
|
|
22
|
-
beforeEach(async () => {
|
|
23
|
-
jest.spyOn(logger, 'warn').mockImplementation(() => {});
|
|
24
|
-
jest.spyOn(logger, 'debug').mockImplementation(() => {});
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
afterEach(() => {
|
|
28
|
-
jest.restoreAllMocks();
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
describe('should generate files for an app', () => {
|
|
32
|
-
it('should configure everything at once', async () => {
|
|
33
|
-
appTree = await createTestUILib('test-ui-lib');
|
|
34
|
-
appTree.write('.gitignore', '');
|
|
35
|
-
await storybookConfigurationGenerator(appTree, {
|
|
36
|
-
name: 'test-ui-lib',
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
expect(appTree.exists('test-ui-lib/.storybook/main.js')).toBeTruthy();
|
|
40
|
-
expect(
|
|
41
|
-
appTree.exists('test-ui-lib/tsconfig.storybook.json')
|
|
42
|
-
).toBeTruthy();
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it('should generate stories for components', async () => {
|
|
46
|
-
appTree = await createTestUILib('test-ui-lib');
|
|
47
|
-
await componentGenerator(appTree, {
|
|
48
|
-
name: 'test-ui-lib',
|
|
49
|
-
project: 'test-ui-lib',
|
|
50
|
-
});
|
|
51
|
-
await storybookConfigurationGenerator(appTree, {
|
|
52
|
-
name: 'test-ui-lib',
|
|
53
|
-
generateStories: true,
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
expect(
|
|
57
|
-
appTree.exists(
|
|
58
|
-
'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx'
|
|
59
|
-
)
|
|
60
|
-
).toBeTruthy();
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
describe('should generate files for lib', () => {
|
|
65
|
-
it('should configure everything at once', async () => {
|
|
66
|
-
appTree = await createTestAppLib('test-ui-app');
|
|
67
|
-
await storybookConfigurationGenerator(appTree, {
|
|
68
|
-
name: 'test-ui-app',
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
expect(appTree.exists('test-ui-app/.storybook/main.js')).toBeTruthy();
|
|
72
|
-
expect(
|
|
73
|
-
appTree.exists('test-ui-app/tsconfig.storybook.json')
|
|
74
|
-
).toBeTruthy();
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
it('should generate stories for components', async () => {
|
|
78
|
-
appTree = await createTestAppLib('test-ui-app');
|
|
79
|
-
await storybookConfigurationGenerator(appTree, {
|
|
80
|
-
name: 'test-ui-app',
|
|
81
|
-
generateStories: true,
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
// Currently the auto-generate stories feature only picks up components under the 'lib' directory.
|
|
85
|
-
// In our 'createTestAppLib' function, we call @nx/react-native:component to generate a component
|
|
86
|
-
// under the specified 'lib' directory
|
|
87
|
-
expect(
|
|
88
|
-
appTree.exists(
|
|
89
|
-
'test-ui-app/src/app/my-component/my-component.stories.tsx'
|
|
90
|
-
)
|
|
91
|
-
).toBeTruthy();
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
export async function createTestUILib(libName: string): Promise<Tree> {
|
|
97
|
-
let appTree = createTreeWithEmptyWorkspace();
|
|
98
|
-
|
|
99
|
-
await libraryGenerator(appTree, {
|
|
100
|
-
linter: Linter.EsLint,
|
|
101
|
-
skipFormat: true,
|
|
102
|
-
skipTsConfig: false,
|
|
103
|
-
unitTestRunner: 'none',
|
|
104
|
-
name: libName,
|
|
105
|
-
projectNameAndRootFormat: 'as-provided',
|
|
106
|
-
});
|
|
107
|
-
return appTree;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
export async function createTestAppLib(
|
|
111
|
-
libName: string,
|
|
112
|
-
plainJS = false
|
|
113
|
-
): Promise<Tree> {
|
|
114
|
-
let appTree = createTreeWithEmptyWorkspace();
|
|
115
|
-
|
|
116
|
-
await applicationGenerator(appTree, {
|
|
117
|
-
e2eTestRunner: 'none',
|
|
118
|
-
linter: Linter.EsLint,
|
|
119
|
-
skipFormat: false,
|
|
120
|
-
style: 'css',
|
|
121
|
-
unitTestRunner: 'none',
|
|
122
|
-
name: libName,
|
|
123
|
-
js: plainJS,
|
|
124
|
-
install: false,
|
|
125
|
-
projectNameAndRootFormat: 'as-provided',
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
await componentGenerator(appTree, {
|
|
129
|
-
name: 'my-component',
|
|
130
|
-
project: libName,
|
|
131
|
-
directory: 'app',
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
return appTree;
|
|
135
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { configure, getStorybookUI } from '@storybook/react-native';
|
|
2
|
-
|
|
3
|
-
import { loadStories } from '<%= offsetFromRoot %>../.storybook/story-loader';
|
|
4
|
-
|
|
5
|
-
configure(() => loadStories(), module);
|
|
6
|
-
|
|
7
|
-
const StorybookUIRoot = getStorybookUI({});
|
|
8
|
-
|
|
9
|
-
export default StorybookUIRoot;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Toggle inspired from https://github.com/infinitered/ignite/blob/master/boilerplate/storybook/toggle-storybook.tsx
|
|
3
|
-
*/
|
|
4
|
-
import React, { useState, useEffect, useRef } from 'react';
|
|
5
|
-
import { DevSettings } from 'react-native';
|
|
6
|
-
|
|
7
|
-
import AppRoot from '../app/App';
|
|
8
|
-
|
|
9
|
-
export const DEFAULT_REACTOTRON_WS_URI = 'ws://localhost:9090';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Toggle Storybook mode, in __DEV__ mode only.
|
|
13
|
-
*
|
|
14
|
-
* In non-__DEV__ mode, or when Storybook isn't toggled on,
|
|
15
|
-
* renders its children.
|
|
16
|
-
*
|
|
17
|
-
* The mode flag is persisted in async storage, which means it
|
|
18
|
-
* persists across reloads/restarts - this is handy when developing
|
|
19
|
-
* new components in Storybook.
|
|
20
|
-
*/
|
|
21
|
-
function ToggleStorybook(props) {
|
|
22
|
-
const [showStorybook, setShowStorybook] = useState(false);
|
|
23
|
-
const [StorybookUIRoot, setStorybookUIRoot] = useState(null);
|
|
24
|
-
const ws = useRef(new WebSocket(DEFAULT_REACTOTRON_WS_URI));
|
|
25
|
-
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (!__DEV__) {
|
|
28
|
-
return undefined;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (DevSettings) {
|
|
32
|
-
// Add our toggle command to the menu
|
|
33
|
-
DevSettings.addMenuItem('Toggle Storybook', () => {
|
|
34
|
-
setShowStorybook((show) => {
|
|
35
|
-
// On toggle, flip the current value
|
|
36
|
-
show = !show;
|
|
37
|
-
|
|
38
|
-
// Return it to change the local state
|
|
39
|
-
return show;
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// Load the storybook UI once
|
|
45
|
-
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
46
|
-
setStorybookUIRoot(() => require('./storybook.ts').default);
|
|
47
|
-
|
|
48
|
-
// Behave as Reactotron.storybookSwitcher(), not a HOC way.
|
|
49
|
-
ws.current.onmessage = (e) => {
|
|
50
|
-
const data = JSON.parse(e.data);
|
|
51
|
-
|
|
52
|
-
if (data.type === 'storybook') {
|
|
53
|
-
setShowStorybook(data.payload);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
ws.current.onerror = (e) => {
|
|
57
|
-
setShowStorybook(false);
|
|
58
|
-
};
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
if (showStorybook) {
|
|
62
|
-
return StorybookUIRoot ? <StorybookUIRoot /> : null;
|
|
63
|
-
} else {
|
|
64
|
-
return props.children;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export default () => {
|
|
69
|
-
return (
|
|
70
|
-
<ToggleStorybook>
|
|
71
|
-
<AppRoot />
|
|
72
|
-
</ToggleStorybook>
|
|
73
|
-
);
|
|
74
|
-
};
|
package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.addResolverMainFieldsToMetroConfig = void 0;
|
|
4
|
-
const devkit_1 = require("@nx/devkit");
|
|
5
|
-
const path_1 = require("path");
|
|
6
|
-
/**
|
|
7
|
-
* Add resolverMainFields in metro.config.js
|
|
8
|
-
*/
|
|
9
|
-
function addResolverMainFieldsToMetroConfig(host, schema) {
|
|
10
|
-
const { root } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
|
|
11
|
-
const metroConfigPath = (0, path_1.join)(root, 'metro.config.js');
|
|
12
|
-
try {
|
|
13
|
-
devkit_1.logger.debug(`Updating resolverMainFields for ${metroConfigPath}`);
|
|
14
|
-
const metroConfigContent = host.read(metroConfigPath, 'utf-8');
|
|
15
|
-
if (metroConfigContent.includes('resolverMainFields:')) {
|
|
16
|
-
devkit_1.logger.warn((0, devkit_1.stripIndents) `${metroConfigPath} is already udpated.`);
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
host.write(metroConfigPath, metroConfigContent.replace(/},\s+resolver: {/, `},resolver: { resolverMainFields: ['sbmodern', 'browser', 'main'],`));
|
|
20
|
-
}
|
|
21
|
-
catch {
|
|
22
|
-
devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update ${metroConfigPath} for project ${root}.`);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
exports.addResolverMainFieldsToMetroConfig = addResolverMainFieldsToMetroConfig;
|
package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.spec.ts
DELETED
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import { addProjectConfiguration, Tree } from '@nx/devkit';
|
|
2
|
-
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
|
|
3
|
-
|
|
4
|
-
import { formatFile } from '../../../utils/format-file';
|
|
5
|
-
|
|
6
|
-
import { addResolverMainFieldsToMetroConfig } from './add-resolver-main-fields-to-metro-config';
|
|
7
|
-
|
|
8
|
-
describe('addResolverMainFieldsToMetroConfig', () => {
|
|
9
|
-
let tree: Tree;
|
|
10
|
-
|
|
11
|
-
beforeEach(() => {
|
|
12
|
-
tree = createTreeWithEmptyWorkspace();
|
|
13
|
-
|
|
14
|
-
addProjectConfiguration(tree, 'products', {
|
|
15
|
-
root: 'products',
|
|
16
|
-
sourceRoot: 'products/src',
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it(`should update metro.config.js and add key projectRoot`, async () => {
|
|
21
|
-
tree.write(
|
|
22
|
-
'products/metro.config.js',
|
|
23
|
-
formatFile`
|
|
24
|
-
const { withNxMetro } = require('@nx/react-native');
|
|
25
|
-
const { getDefaultConfig } = require('metro-config');
|
|
26
|
-
const exclusionList = require('metro-config/src/defaults/exclusionList');
|
|
27
|
-
|
|
28
|
-
module.exports = (async () => {
|
|
29
|
-
const {
|
|
30
|
-
resolver: { sourceExts, assetExts },
|
|
31
|
-
} = await getDefaultConfig();
|
|
32
|
-
return withNxMetro(
|
|
33
|
-
{
|
|
34
|
-
transformer: {
|
|
35
|
-
getTransformOptions: async () => ({
|
|
36
|
-
transform: {
|
|
37
|
-
experimentalImportSupport: false,
|
|
38
|
-
inlineRequires: true,
|
|
39
|
-
},
|
|
40
|
-
}),
|
|
41
|
-
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
|
42
|
-
},
|
|
43
|
-
resolver: {
|
|
44
|
-
|
|
45
|
-
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
|
46
|
-
sourceExts: [...sourceExts, 'svg'],
|
|
47
|
-
blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
|
|
48
|
-
},
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
})();`
|
|
52
|
-
);
|
|
53
|
-
addResolverMainFieldsToMetroConfig(tree, {
|
|
54
|
-
name: 'products',
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
expect(
|
|
58
|
-
formatFile`${tree.read('products/metro.config.js', 'utf-8')}`
|
|
59
|
-
).toEqual(
|
|
60
|
-
formatFile`
|
|
61
|
-
const { withNxMetro } = require('@nx/react-native');
|
|
62
|
-
const { getDefaultConfig } = require('metro-config');
|
|
63
|
-
const exclusionList = require('metro-config/src/defaults/exclusionList');
|
|
64
|
-
|
|
65
|
-
module.exports = (async () => {
|
|
66
|
-
const {
|
|
67
|
-
resolver: { sourceExts, assetExts },
|
|
68
|
-
} = await getDefaultConfig();
|
|
69
|
-
return withNxMetro(
|
|
70
|
-
{
|
|
71
|
-
transformer: {
|
|
72
|
-
getTransformOptions: async () => ({
|
|
73
|
-
transform: {
|
|
74
|
-
experimentalImportSupport: false,
|
|
75
|
-
inlineRequires: true,
|
|
76
|
-
},
|
|
77
|
-
}),
|
|
78
|
-
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
|
79
|
-
},
|
|
80
|
-
resolver: {
|
|
81
|
-
resolverMainFields: ['sbmodern', 'browser', 'main'],
|
|
82
|
-
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
|
83
|
-
sourceExts: [...sourceExts, 'svg'],
|
|
84
|
-
blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
|
|
85
|
-
},
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
})();`
|
|
89
|
-
);
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
it(`should not udpate metro.config.js if projectRoot already exists`, async () => {
|
|
93
|
-
tree.write(
|
|
94
|
-
'products/metro.config.js',
|
|
95
|
-
`
|
|
96
|
-
const { withNxMetro } = require('@nx/react-native');
|
|
97
|
-
const { getDefaultConfig } = require('metro-config');
|
|
98
|
-
|
|
99
|
-
module.exports = (async () => {
|
|
100
|
-
const {
|
|
101
|
-
resolver: { sourceExts, assetExts },
|
|
102
|
-
} = await getDefaultConfig();
|
|
103
|
-
// console.log(getModulesRunBeforeMainModule);
|
|
104
|
-
return withNxMetro(
|
|
105
|
-
{
|
|
106
|
-
transformer: {
|
|
107
|
-
getTransformOptions: async () => ({
|
|
108
|
-
transform: {
|
|
109
|
-
experimentalImportSupport: false,
|
|
110
|
-
inlineRequires: true,
|
|
111
|
-
},
|
|
112
|
-
}),
|
|
113
|
-
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
|
114
|
-
},
|
|
115
|
-
resolver: {
|
|
116
|
-
resolverMainFields: ['main'],
|
|
117
|
-
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
|
118
|
-
sourceExts: [...sourceExts, 'svg'],
|
|
119
|
-
},
|
|
120
|
-
},
|
|
121
|
-
);
|
|
122
|
-
})();
|
|
123
|
-
`
|
|
124
|
-
);
|
|
125
|
-
addResolverMainFieldsToMetroConfig(tree, {
|
|
126
|
-
name: 'products',
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
expect(tree.read('products/metro.config.js', 'utf-8')).toEqual(
|
|
130
|
-
`
|
|
131
|
-
const { withNxMetro } = require('@nx/react-native');
|
|
132
|
-
const { getDefaultConfig } = require('metro-config');
|
|
133
|
-
|
|
134
|
-
module.exports = (async () => {
|
|
135
|
-
const {
|
|
136
|
-
resolver: { sourceExts, assetExts },
|
|
137
|
-
} = await getDefaultConfig();
|
|
138
|
-
// console.log(getModulesRunBeforeMainModule);
|
|
139
|
-
return withNxMetro(
|
|
140
|
-
{
|
|
141
|
-
transformer: {
|
|
142
|
-
getTransformOptions: async () => ({
|
|
143
|
-
transform: {
|
|
144
|
-
experimentalImportSupport: false,
|
|
145
|
-
inlineRequires: true,
|
|
146
|
-
},
|
|
147
|
-
}),
|
|
148
|
-
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
|
149
|
-
},
|
|
150
|
-
resolver: {
|
|
151
|
-
resolverMainFields: ['main'],
|
|
152
|
-
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
|
153
|
-
sourceExts: [...sourceExts, 'svg'],
|
|
154
|
-
},
|
|
155
|
-
},
|
|
156
|
-
);
|
|
157
|
-
})();
|
|
158
|
-
`
|
|
159
|
-
);
|
|
160
|
-
});
|
|
161
|
-
});
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.createStorybookFiles = void 0;
|
|
4
|
-
const devkit_1 = require("@nx/devkit");
|
|
5
|
-
const path_1 = require("path");
|
|
6
|
-
const chalk = require("chalk");
|
|
7
|
-
/**
|
|
8
|
-
* This function generate ./storybook under project root.
|
|
9
|
-
*/
|
|
10
|
-
async function createStorybookFiles(host, schema) {
|
|
11
|
-
const { root, projectType, targets, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
|
|
12
|
-
// do not proceed if not a react native project
|
|
13
|
-
if (targets?.start?.executor !== '@nx/react-native:start' &&
|
|
14
|
-
targets?.start?.executor !== '@nx/expo:start' &&
|
|
15
|
-
targets?.start?.executor !== '@nrwl/react-native:start' &&
|
|
16
|
-
targets?.start?.executor !== '@nrwl/expo:start') {
|
|
17
|
-
devkit_1.logger.error(`Unable to add storybook to ${schema.name}. It is not a Nx React Native / Expo project.`);
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
const storybookUIFileName = schema.js ? 'storybook.js' : 'storybook.ts';
|
|
21
|
-
const storybookUIFilePath = (0, path_1.join)(root, `./${storybookUIFileName}`);
|
|
22
|
-
if (host.exists(storybookUIFilePath)) {
|
|
23
|
-
devkit_1.logger.warn(`${storybookUIFileName} file already exists for ${projectType} ${schema.name}! Skipping generating this file.`);
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
if (projectType !== 'application') {
|
|
27
|
-
devkit_1.logger.info(`${chalk.bold.cyan('info')} To see your Storybook stories on the device, you should start your mobile app for the <platform> of your choice (typically ios or android).`);
|
|
28
|
-
}
|
|
29
|
-
// copy files to app's .storybook folder
|
|
30
|
-
(0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), (0, path_1.join)(root, 'src', 'storybook'), {
|
|
31
|
-
tmpl: '',
|
|
32
|
-
offsetFromRoot: (0, devkit_1.offsetFromRoot)(sourceRoot),
|
|
33
|
-
});
|
|
34
|
-
// copy files to workspace root's .storybook folder
|
|
35
|
-
(0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/root'), (0, path_1.join)(root, (0, devkit_1.offsetFromRoot)(root), '.storybook'), {
|
|
36
|
-
tmpl: '',
|
|
37
|
-
});
|
|
38
|
-
if (schema.js) {
|
|
39
|
-
(0, devkit_1.toJS)(host);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
exports.createStorybookFiles = createStorybookFiles;
|
package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Tree } from '@nx/devkit';
|
|
2
|
-
import { StorybookConfigureSchema } from '../schema';
|
|
3
|
-
/**
|
|
4
|
-
* To replace the import statement for storybook.
|
|
5
|
-
* Need to import app with storybook toggle from .storybook/toggle-storybook
|
|
6
|
-
*/
|
|
7
|
-
export declare function replaceAppImportWithStorybookToggle(host: Tree, schema: StorybookConfigureSchema): void;
|
package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.replaceAppImportWithStorybookToggle = void 0;
|
|
4
|
-
const devkit_1 = require("@nx/devkit");
|
|
5
|
-
const path_1 = require("path");
|
|
6
|
-
/**
|
|
7
|
-
* To replace the import statement for storybook.
|
|
8
|
-
* Need to import app with storybook toggle from .storybook/toggle-storybook
|
|
9
|
-
*/
|
|
10
|
-
function replaceAppImportWithStorybookToggle(host, schema) {
|
|
11
|
-
const { root, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
|
|
12
|
-
const mainFilePath = (0, path_1.join)(sourceRoot, schema.js ? 'main.js' : 'main.tsx');
|
|
13
|
-
const appImportImport = `import App from './app/App';`;
|
|
14
|
-
const storybookeToggleImport = `import App from './storybook/toggle-storybook';`;
|
|
15
|
-
try {
|
|
16
|
-
devkit_1.logger.debug(`Updating import for ${mainFilePath}`);
|
|
17
|
-
const contents = host.read(mainFilePath, 'utf-8');
|
|
18
|
-
if (!contents.includes(appImportImport) ||
|
|
19
|
-
contents.includes(storybookeToggleImport)) {
|
|
20
|
-
devkit_1.logger.warn((0, devkit_1.stripIndents) `${mainFilePath} is already udpated.`);
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
host.write(mainFilePath, contents.replace(appImportImport, storybookeToggleImport));
|
|
24
|
-
}
|
|
25
|
-
catch {
|
|
26
|
-
devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to update import in ${mainFilePath} for project ${root}.`);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
exports.replaceAppImportWithStorybookToggle = replaceAppImportWithStorybookToggle;
|
package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.spec.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { addProjectConfiguration, Tree } from '@nx/devkit';
|
|
2
|
-
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
|
|
3
|
-
|
|
4
|
-
import { formatFile } from '../../../utils/format-file';
|
|
5
|
-
|
|
6
|
-
import { replaceAppImportWithStorybookToggle } from './replace-app-import-with-storybook-toggle';
|
|
7
|
-
|
|
8
|
-
describe('replaceAppImportWithStorybookToggle', () => {
|
|
9
|
-
let tree: Tree;
|
|
10
|
-
|
|
11
|
-
beforeEach(() => {
|
|
12
|
-
tree = createTreeWithEmptyWorkspace();
|
|
13
|
-
|
|
14
|
-
addProjectConfiguration(tree, 'products', {
|
|
15
|
-
root: 'products',
|
|
16
|
-
sourceRoot: 'products/src',
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('should update the main file with import from storybook', async () => {
|
|
21
|
-
tree.write(
|
|
22
|
-
'products/src/main.tsx',
|
|
23
|
-
formatFile`import { AppRegistry } from 'react-native';
|
|
24
|
-
import App from './app/App';
|
|
25
|
-
|
|
26
|
-
AppRegistry.registerComponent('main', () => App);
|
|
27
|
-
`
|
|
28
|
-
);
|
|
29
|
-
replaceAppImportWithStorybookToggle(tree, {
|
|
30
|
-
name: 'products',
|
|
31
|
-
js: false,
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
const mainFile = tree.read('products/src/main.tsx', 'utf-8');
|
|
35
|
-
expect(formatFile`${mainFile}`).toEqual(
|
|
36
|
-
formatFile`import { AppRegistry } from 'react-native';
|
|
37
|
-
import App from './storybook/toggle-storybook';
|
|
38
|
-
|
|
39
|
-
AppRegistry.registerComponent('main', () => App);`
|
|
40
|
-
);
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
it('should not update the main file if import is already updated', async () => {
|
|
44
|
-
tree.write(
|
|
45
|
-
'products/src/main.tsx',
|
|
46
|
-
formatFile`import { AppRegistry } from 'react-native';
|
|
47
|
-
import App from './app/App';
|
|
48
|
-
|
|
49
|
-
AppRegistry.registerComponent('main', () => App);
|
|
50
|
-
`
|
|
51
|
-
);
|
|
52
|
-
replaceAppImportWithStorybookToggle(tree, {
|
|
53
|
-
name: 'products',
|
|
54
|
-
js: false,
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
const mainFile = tree.read('products/src/main.tsx', 'utf-8');
|
|
58
|
-
expect(formatFile`${mainFile}`).toEqual(
|
|
59
|
-
formatFile`import { AppRegistry } from 'react-native';
|
|
60
|
-
import App from './storybook/toggle-storybook';
|
|
61
|
-
|
|
62
|
-
AppRegistry.registerComponent('main', () => App);`
|
|
63
|
-
);
|
|
64
|
-
});
|
|
65
|
-
});
|