@nx/react-native 17.0.5 → 17.0.6

package/src/generators/component-story/component-story.spec.ts

@@ -0,0 +1,428 @@
+import { getProjects, Tree, updateProjectConfiguration } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import componentStoryGenerator from './component-story';
+import { Linter } from '@nx/eslint';
+
+import { formatFile } from '../../utils/format-file';
+import libraryGenerator from '../library/library';
+import componentGenerator from '../component/component';
+
+describe('react-native:component-story', () => {
+  let appTree: Tree;
+  let cmpPath = 'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.tsx';
+  let storyFilePath = 'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx';
+
+  describe('default setup', () => {
+    beforeEach(async () => {
+      appTree = await createTestUILib('test-ui-lib');
+    });
+
+    describe('when file does not contain a component', () => {
+      beforeEach(() => {
+        appTree.write(
+          cmpPath,
+          `export const add = (a: number, b: number) => a + b;`
+        );
+      });
+
+      it('should fail with a descriptive error message', async () => {
+        try {
+          await componentStoryGenerator(appTree, {
+            componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+            project: 'test-ui-lib',
+          });
+        } catch (e) {
+          expect(e.message).toContain(
+            'Could not find any React Native component in file test-ui-lib/src/lib/test-ui-lib/test-ui-lib.tsx'
+          );
+        }
+      });
+    });
+
+    describe('default component setup', () => {
+      beforeEach(async () => {
+        await componentStoryGenerator(appTree, {
+          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+          project: 'test-ui-lib',
+        });
+      });
+
+      it('should create the story file', () => {
+        expect(appTree.exists(storyFilePath)).toBeTruthy();
+      });
+
+      it('should properly set up the story', () => {
+        expect(
+          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
+        ).toContain(formatFile`
+        import type { Meta } from '@storybook/react-native';
+        import { TestUiLib } from './test-ui-lib';
+        const Story: Meta<typeof TestUiLib> = {
+          component: TestUiLib,
+          title: 'TestUiLib',
+        };
+        export default Story;
+        export const Primary = { args: {} };
+          `);
+      });
+    });
+
+    describe('when using plain JS components', () => {
+      let storyFilePathPlain =
+        'test-ui-lib/src/lib/test-ui-libplain.stories.jsx';
+
+      beforeEach(async () => {
+        appTree.write(
+          'test-ui-lib/src/lib/test-ui-libplain.jsx',
+          `import React from 'react';
+
+          import './test.scss';
+
+          export const Test = () => {
+            return (
+              <div>
+                <h1>Welcome to test component</h1>
+              </div>
+            );
+          };
+
+          export default Test;
+          `
+        );
+
+        await componentStoryGenerator(appTree, {
+          componentPath: 'lib/test-ui-libplain.jsx',
+          project: 'test-ui-lib',
+        });
+      });
+
+      it('should create the story file', () => {
+        expect(appTree.exists(storyFilePathPlain)).toBeTruthy();
+      });
+
+      it('should properly set up the story', () => {
+        expect(formatFile`${appTree.read(storyFilePathPlain, 'utf-8')}`)
+          .toContain(formatFile`
+          import Test from './test-ui-libplain';
+          export default { component: Test, title: 'Test' };
+          export const Primary = { args: {} };
+          `);
+      });
+    });
+
+    describe('component without any props defined', () => {
+      beforeEach(async () => {
+        appTree.write(
+          cmpPath,
+          `import React from 'react';
+
+          import { View, Text } from 'react-native';
+
+          export function Test() {
+            return (
+              <View>
+                <Text>Welcome to test!</Text>
+              </View>
+            );
+          }
+
+          export default Test;
+          `
+        );
+        await componentStoryGenerator(appTree, {
+          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+          project: 'test-ui-lib',
+        });
+      });
+
+      it('should create a story without controls', () => {
+        expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
+          .toContain(formatFile`
+          import type { Meta } from '@storybook/react-native';
+          import { Test } from './test-ui-lib';
+          const Story: Meta<typeof Test> = { component: Test, title: 'Test' };
+          export default Story;
+          export const Primary = { args: {} };
+          `);
+      });
+    });
+
+    describe('component with props', () => {
+      beforeEach(async () => {
+        await componentStoryGenerator(appTree, {
+          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+          project: 'test-ui-lib',
+        });
+      });
+
+      it('should setup controls based on the component props', () => {
+        expect(
+          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
+        ).toContain(formatFile`
+        import type { Meta } from '@storybook/react-native';
+        import { TestUiLib } from './test-ui-lib';
+        const Story: Meta<typeof TestUiLib> = {
+          component: TestUiLib,
+          title: 'TestUiLib',
+        };
+        export default Story;
+        export const Primary = { args: {} };
+          `);
+      });
+    });
+
+    describe('component with props and actions', () => {
+      beforeEach(async () => {
+        appTree.write(
+          cmpPath,
+          `import React from 'react';
+
+          export type ButtonStyle = 'default' | 'primary' | 'warning';
+
+          export interface TestProps {
+            name: string;
+            displayAge: boolean;
+            someAction: (e: unknown) => void;
+            style: ButtonStyle;
+          }
+
+          export const Test = (props: TestProps) => {
+            return (
+              <div>
+                <h1>Welcome to test component, {props.name}</h1>
+                <button onClick={props.someAction}>Click me!</button>
+              </div>
+            );
+          };
+
+          export default Test;
+          `
+        );
+
+        await componentStoryGenerator(appTree, {
+          componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+          project: 'test-ui-lib',
+        });
+      });
+
+      it('should setup controls based on the component props', () => {
+        expect(
+          formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
+        ).toContain(formatFile`
+        import type { Meta } from '@storybook/react-native';
+        import { Test } from './test-ui-lib';
+        const Story: Meta<typeof Test> = {
+          component: Test,
+          title: 'Test',
+          argTypes: { someAction: { action: 'someAction executed!' } },
+        };
+        export default Story;
+        export const Primary = { args: { name: '', displayAge: false } };
+          `);
+      });
+    });
+
+    [
+      {
+        name: 'default export function',
+        src: `export default function Test(props: TestProps) {
+        return (
+          <div>
+            <h1>Welcome to test component, {props.name}</h1>
+          </div>
+        );
+      };
+      `,
+      },
+      {
+        name: 'function and then export',
+        src: `
+      function Test(props: TestProps) {
+        return (
+          <div>
+            <h1>Welcome to test component, {props.name}</h1>
+          </div>
+        );
+      };
+      export default Test;
+      `,
+      },
+      {
+        name: 'arrow function',
+        src: `
+      const Test = (props: TestProps) => {
+        return (
+          <div>
+            <h1>Welcome to test component, {props.name}</h1>
+          </div>
+        );
+      };
+      export default Test;
+      `,
+      },
+      {
+        name: 'arrow function without {..}',
+        src: `
+      const Test = (props: TestProps) => <div><h1>Welcome to test component, {props.name}</h1></div>;
+      export default Test
+      `,
+      },
+      {
+        name: 'direct export of component class',
+        src: `
+        export default class Test extends React.Component<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        `,
+      },
+      {
+        name: 'component class & then default export',
+        src: `
+        class Test extends React.Component<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        export default Test
+        `,
+      },
+      {
+        name: 'PureComponent class & then default export',
+        src: `
+        class Test extends React.PureComponent<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        export default Test
+        `,
+      },
+      {
+        name: 'direct export of component class new JSX transform',
+        src: `
+        export default class Test extends Component<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        `,
+      },
+      {
+        name: 'component class & then default export new JSX transform',
+        src: `
+        class Test extends Component<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        export default Test
+        `,
+      },
+      {
+        name: 'PureComponent class & then default export new JSX transform',
+        src: `
+        class Test extends PureComponent<TestProps> {
+          render() {
+            return <div><h1>Welcome to test component, {this.props.name}</h1></div>;
+          }
+        }
+        export default Test
+        `,
+      },
+    ].forEach((config) => {
+      describe(`React Native component defined as:${config.name}`, () => {
+        beforeEach(async () => {
+          appTree.write(
+            cmpPath,
+            `import React from 'react';
+
+            export interface TestProps {
+              name: string;
+              displayAge: boolean;
+            }
+
+            ${config.src}
+            `
+          );
+
+          await componentStoryGenerator(appTree, {
+            componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+            project: 'test-ui-lib',
+          });
+        });
+
+        it('should properly setup the controls based on the component props', () => {
+          expect(
+            formatFile`${appTree.read(storyFilePath, 'utf-8').replace('·', '')}`
+          ).toContain(formatFile`
+    import type { Meta } from '@storybook/react-native';
+    import { Test } from './test-ui-lib';
+    const Story: Meta<typeof Test> = { component: Test, title: 'Test' };
+    export default Story;
+    export const Primary = { args: { name: '', displayAge: false } };
+          `);
+        });
+      });
+    });
+  });
+
+  describe('using eslint', () => {
+    beforeEach(async () => {
+      appTree = await createTestUILib('test-ui-lib');
+      await componentGenerator(appTree, {
+        name: 'test-ui-lib',
+        project: 'test-ui-lib',
+        export: true,
+      });
+      await componentStoryGenerator(appTree, {
+        componentPath: 'lib/test-ui-lib/test-ui-lib.tsx',
+        project: 'test-ui-lib',
+      });
+    });
+
+    it('should properly set up the story', () => {
+      expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
+        .toContain(formatFile`
+    import type { Meta } from '@storybook/react-native';
+    import { TestUiLib } from './test-ui-lib';
+    const Story: Meta<typeof TestUiLib> = {
+      component: TestUiLib,
+      title: 'TestUiLib',
+    };
+    export default Story;
+    export const Primary = { args: {} };
+        `);
+    });
+  });
+});
+
+export async function createTestUILib(libName: string): Promise<Tree> {
+  let appTree = createTreeWithEmptyWorkspace();
+  appTree.write('.gitignore', '');
+
+  await libraryGenerator(appTree, {
+    name: libName,
+    linter: Linter.EsLint,
+    skipFormat: true,
+    skipTsConfig: false,
+    unitTestRunner: 'jest',
+    projectNameAndRootFormat: 'as-provided',
+  });
+
+  await componentGenerator(appTree, {
+    name: libName,
+    project: libName,
+    export: true,
+  });
+
+  const currentWorkspaceJson = getProjects(appTree);
+
+  const projectConfig = currentWorkspaceJson.get(libName);
+  projectConfig.targets.lint.options.linter = 'eslint';
+
+  updateProjectConfiguration(appTree, libName, projectConfig);
+
+  return appTree;
+}

package/src/generators/component-story/files/__componentFileName__.stories.__fileExt__

@@ -0,0 +1,32 @@
+<% if ( !isPlainJs ) { %>import type { Meta } from '@storybook/react-native';<% } %>
+import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
+
+<% if ( isPlainJs ) { %>
+export default {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+<% } %>
+
+
+<% if ( !isPlainJs ) { %>
+const Story: Meta<typeof <%= componentName %>> = {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+export default Story;
+<% } %>
+
+export const Primary = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+};

package/src/generators/component-story/schema.d.ts

@@ -1,6 +1,5 @@
 export interface CreateComponentStoriesFileSchema {
   project: string;
   componentPath: string;
-  interactionTests?: boolean;
   skipFormat?: boolean;
 }

package/src/generators/component-story/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactNativeComponentStory",
   "title": "React native component story",
@@ -15,27 +15,19 @@
         "$source": "projectName",
         "index": 0
       },
-      "x-prompt": "What's name of the project where the component lives?",
-      "x-priority": "important"
+      "x-prompt": "What's the name of the project where the component lives?"
     },
     "componentPath": {
       "type": "string",
       "description": "Relative path to the component file from the library root.",
       "examples": ["lib/components"],
-      "x-prompt": "What's path of the component relative to the project's lib root?",
-      "x-priority": "important"
+      "x-prompt": "What's path of the component relative to the project's lib root?"
     },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
-    },
-    "interactionTests": {
-      "type": "boolean",
-      "description": "Set up Storybook interaction tests.",
-      "default": true,
-      "x-priority": "important"
     }
   },
   "required": ["project", "componentPath"]

package/src/generators/init/init.d.ts

@@ -1,6 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function reactNativeInitGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
-export declare function reactNativeInitGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
-export declare function updateDependencies(host: Tree, schema: Schema): GeneratorCallback;
+export declare function updateDependencies(host: Tree): GeneratorCallback;
 export default reactNativeInitGenerator;

package/src/generators/init/init.js

@@ -1,78 +1,79 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateDependencies = exports.reactNativeInitGeneratorInternal = exports.reactNativeInitGenerator = void 0;
+exports.updateDependencies = exports.reactNativeInitGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
-const plugin_1 = require("../../../plugins/plugin");
-const versions_1 = require("../../utils/versions");
+const jest_1 = require("@nx/jest");
+const detox_1 = require("@nx/detox");
+const versions_1 = require("@nx/react/src/utils/versions");
+const js_1 = require("@nx/js");
+const versions_2 = require("../../utils/versions");
 const add_git_ignore_entry_1 = require("./lib/add-git-ignore-entry");
-function reactNativeInitGenerator(host, schema) {
-    return reactNativeInitGeneratorInternal(host, {
-        addPlugin: false,
-        ...schema,
-    });
-}
-exports.reactNativeInitGenerator = reactNativeInitGenerator;
-async function reactNativeInitGeneratorInternal(host, schema) {
+async function reactNativeInitGenerator(host, schema) {
     (0, add_git_ignore_entry_1.addGitIgnoreEntry)(host);
-    const nxJson = (0, devkit_1.readNxJson)(host);
-    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
-        nxJson.useInferencePlugins !== false;
-    schema.addPlugin ??= addPluginDefault;
-    if (schema.addPlugin) {
-        addPlugin(host);
-    }
     const tasks = [];
+    tasks.push(await (0, js_1.initGenerator)(host, {
+        ...schema,
+        skipFormat: true,
+    }));
     if (!schema.skipPackageJson) {
+        const installTask = updateDependencies(host);
         tasks.push(moveDependency(host));
-        tasks.push(updateDependencies(host, schema));
+        tasks.push(installTask);
     }
-    if (schema.updatePackageScripts) {
-        await (0, update_package_scripts_1.updatePackageScripts)(host, plugin_1.createNodes);
+    if (!schema.unitTestRunner || schema.unitTestRunner === 'jest') {
+        const jestTask = await (0, jest_1.jestInitGenerator)(host, schema);
+        tasks.push(jestTask);
+    }
+    if (!schema.e2eTestRunner || schema.e2eTestRunner === 'detox') {
+        const detoxTask = await (0, detox_1.detoxInitGenerator)(host, {
+            ...schema,
+            skipFormat: true,
+        });
+        tasks.push(detoxTask);
     }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.reactNativeInitGeneratorInternal = reactNativeInitGeneratorInternal;
-function updateDependencies(host, schema) {
+exports.reactNativeInitGenerator = reactNativeInitGenerator;
+function updateDependencies(host) {
+    const isPnpm = (0, devkit_1.detectPackageManager)(host.root) === 'pnpm';
     return (0, devkit_1.addDependenciesToPackageJson)(host, {
-        react: versions_1.reactVersion,
-        'react-dom': versions_1.reactDomVersion,
-        'react-native': versions_1.reactNativeVersion,
+        react: versions_2.reactVersion,
+        'react-dom': versions_2.reactDomVersion,
+        'react-native': versions_2.reactNativeVersion,
     }, {
-        '@nx/react-native': versions_1.nxVersion,
-    }, undefined, schema.keepExistingVersions);
+        '@nx/react-native': versions_2.nxVersion,
+        '@types/node': versions_2.typesNodeVersion,
+        '@types/react': versions_2.typesReactVersion,
+        '@react-native/metro-config': versions_2.reactNativeMetroConfigVersion,
+        '@react-native-community/cli': versions_2.reactNativeCommunityCli,
+        '@react-native-community/cli-platform-android': versions_2.reactNativeCommunityCliAndroid,
+        '@react-native-community/cli-platform-ios': versions_2.reactNativeCommunityCliIos,
+        '@testing-library/react-native': versions_2.testingLibraryReactNativeVersion,
+        '@testing-library/jest-native': versions_2.testingLibraryJestNativeVersion,
+        'jest-react-native': versions_2.jestReactNativeVersion,
+        metro: versions_2.metroVersion,
+        'metro-config': versions_2.metroVersion,
+        'metro-resolver': versions_2.metroVersion,
+        'metro-babel-register': versions_2.metroVersion,
+        'metro-react-native-babel-preset': versions_2.metroVersion,
+        'metro-react-native-babel-transformer': versions_2.metroVersion,
+        'react-test-renderer': versions_2.reactTestRendererVersion,
+        'react-native-svg-transformer': versions_2.reactNativeSvgTransformerVersion,
+        'react-native-svg': versions_2.reactNativeSvgVersion,
+        '@babel/preset-react': versions_1.babelPresetReactVersion,
+        '@babel/core': versions_1.babelCoreVersion,
+        ...(isPnpm
+            ? {
+                '@babel/runtime': versions_2.babelRuntimeVersion, // @babel/runtime is used by react-native-svg
+            }
+            : {}),
+    });
 }
 exports.updateDependencies = updateDependencies;
 function moveDependency(host) {
     return (0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react-native'], []);
 }
-function addPlugin(host) {
-    const nxJson = (0, devkit_1.readNxJson)(host);
-    nxJson.plugins ??= [];
-    for (const plugin of nxJson.plugins) {
-        if (typeof plugin === 'string'
-            ? plugin === '@nx/react-native/plugin'
-            : plugin.plugin === '@nx/react-native/plugin') {
-            return;
-        }
-    }
-    nxJson.plugins.push({
-        plugin: '@nx/react-native/plugin',
-        options: {
-            startTargetName: 'start',
-            podInstallTargetName: 'pod-install',
-            bundleTargetName: 'bundle',
-            runIosTargetName: 'run-ios',
-            runAndroidTargetName: 'run-android',
-            buildIosTargetName: 'build-ios',
-            buildAndroidTargetName: 'build-android',
-            syncDepsTargetName: 'sync-deps',
-            upgradeTargetname: 'upgrade',
-        },
-    });
-    (0, devkit_1.updateNxJson)(host, nxJson);
-}
 exports.default = reactNativeInitGenerator;

package/src/generators/init/init.spec.ts

@@ -1,4 +1,5 @@
-import { Tree, readJson } from '@nx/devkit';
+import { NxJsonConfiguration } from '@nx/devkit';
+import { Tree, readJson, updateJson } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { reactNativeInitGenerator } from './init';
 
@@ -11,12 +12,12 @@ describe('init', () => {
   });
 
   it('should add react native dependencies', async () => {
-    await reactNativeInitGenerator(tree, {
-      addPlugin: true,
-    });
+    await reactNativeInitGenerator(tree, { e2eTestRunner: 'none' });
     const packageJson = readJson(tree, 'package.json');
     expect(packageJson.dependencies['react']).toBeDefined();
     expect(packageJson.dependencies['react-native']).toBeDefined();
+    expect(packageJson.devDependencies['@types/node']).toBeDefined();
+    expect(packageJson.devDependencies['@types/react']).toBeDefined();
   });
 
   it('should add .gitignore entries for React native files and directories', async () => {
@@ -26,9 +27,7 @@ describe('init', () => {
 /node_modules
 `
     );
-    await reactNativeInitGenerator(tree, {
-      addPlugin: true,
-    });
+    await reactNativeInitGenerator(tree, { e2eTestRunner: 'none' });
 
     const content = tree.read('/.gitignore').toString();