@nx/react-native 18.0.0-beta.1 → 18.0.0-beta.2

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

@@ -1,427 +0,0 @@
-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);
-
-  updateProjectConfiguration(appTree, libName, projectConfig);
-
-  return appTree;
-}

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

@@ -1,32 +0,0 @@
-<% 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/library/files/lib/babel.config.json.template

@@ -1,19 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": [],
-  "env": {
-    "test": {
-      "presets": [
-        ["module:metro-react-native-babel-preset", { "useTransformReactJSX": true }]
-      ]
-    }
-  }
-}

package/src/generators/stories/stories-app.spec.ts

@@ -1,128 +0,0 @@
-import { Tree } from '@nx/devkit';
-import storiesGenerator from './stories';
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import applicationGenerator from '../application/application';
-import { Linter } from '@nx/eslint';
-import { reactNativeComponentGenerator } from '../component/component';
-
-describe('react:stories for applications', () => {
-  let appTree: Tree;
-
-  beforeEach(async () => {
-    appTree = await createTestUIApp('test-ui-app');
-  });
-
-  it('should create the stories', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-cmp',
-      project: 'test-ui-app',
-    });
-    await storiesGenerator(appTree, {
-      project: 'test-ui-app',
-    });
-
-    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
-    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
-    expect(
-      appTree.exists('test-ui-app/src/app/another-cmp/another-cmp.stories.tsx')
-    ).toBeTruthy();
-  });
-
-  it('should ignore paths', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-cmp',
-      project: 'test-ui-app',
-    });
-    await storiesGenerator(appTree, {
-      project: 'test-ui-app',
-      ignorePaths: ['test-ui-app/src/app/**'],
-    });
-
-    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
-    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeFalsy();
-    expect(
-      appTree.exists('test-ui-app/src/app/another-cmp/another-cmp.stories.tsx')
-    ).toBeFalsy();
-  });
-
-  it('should ignore paths with a direct path to a component', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-new-cmp',
-      project: 'test-ui-app',
-    });
-
-    await storiesGenerator(appTree, {
-      project: 'test-ui-app',
-      ignorePaths: ['test-ui-app/src/app/another-new-cmp/another-new-cmp.tsx'],
-    });
-
-    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
-    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
-    expect(
-      appTree.exists(
-        'test-ui-app/src/app/another-new-cmp/another-new-cmp.stories.tsx'
-      )
-    ).toBeFalsy();
-  });
-
-  it('should ignore a path that has a nested component, but still generate nested component stories', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-new-cmp',
-      project: 'test-ui-app',
-    });
-    await reactNativeComponentGenerator(appTree, {
-      name: 'comp-a',
-      directory: 'app/another-new-cmp',
-      project: 'test-ui-app',
-    });
-    await storiesGenerator(appTree, {
-      project: 'test-ui-app',
-      ignorePaths: ['test-ui-app/src/app/another-new-cmp/another-new-cmp.tsx'],
-    });
-
-    expect(appTree.exists('test-ui-app/src/app/App.tsx')).toBeTruthy();
-    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
-    expect(
-      appTree.exists(
-        'test-ui-app/src/app/another-new-cmp/comp-a/comp-a.stories.tsx'
-      )
-    ).toBeTruthy();
-    expect(
-      appTree.exists(
-        'test-ui-app/src/app/another-new-cmp/another-new-cmp.stories.tsx'
-      )
-    ).toBeFalsy();
-  });
-
-  it('should ignore files that do not contain components', async () => {
-    // create another component
-    appTree.write(
-      'test-ui-app/src/app/some-utils.js',
-      `export const add = (a: number, b: number) => a + b;`
-    );
-
-    await storiesGenerator(appTree, {
-      project: 'test-ui-app',
-    });
-
-    // should just create the story and not error, even though there's a js file
-    // not containing any react component
-    expect(appTree.exists('test-ui-app/src/app/App.stories.tsx')).toBeTruthy();
-  });
-});
-
-export async function createTestUIApp(libName: string): Promise<Tree> {
-  let appTree = createTreeWithEmptyWorkspace();
-  appTree.write('.gitignore', '');
-
-  await applicationGenerator(appTree, {
-    linter: Linter.EsLint,
-    skipFormat: false,
-    style: 'css',
-    unitTestRunner: 'none',
-    name: libName,
-    install: false,
-    projectNameAndRootFormat: 'as-provided',
-  });
-  return appTree;
-}