@nrwl/react-native 13.8.1 → 13.8.4-beta.0

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

@@ -0,0 +1,445 @@
+import { getProjects, Tree, updateProjectConfiguration } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import componentStoryGenerator from './component-story';
+import { Linter } from '@nrwl/linter';
+
+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 = 'libs/test-ui-lib/src/lib/test-ui-lib/test-ui-lib.tsx';
+  let storyFilePath =
+    'libs/test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx';
+
+  describe('default setup', () => {
+    beforeEach(async () => {
+      appTree = await createTestUILib('test-ui-lib', true);
+    });
+
+    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 libs/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 { storiesOf } from '@storybook/react-native';
+          import React from 'react';
+          import { TestUiLib, TestUiLibProps } from './test-ui-lib';
+          const props: TestUiLibProps = {};
+          storiesOf('TestUiLib', module)
+            .addDecorator((getStory) => <>{getStory()}</>)
+            .add('Primary', () => <TestUiLib {...props} />);
+          `);
+      });
+    });
+
+    describe('when using plain JS components', () => {
+      let storyFilePathPlain =
+        'libs/test-ui-lib/src/lib/test-ui-libplain.stories.jsx';
+
+      beforeEach(async () => {
+        appTree.write(
+          'libs/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 { storiesOf } from '@storybook/react-native';
+    import React from 'react';
+    import { Test } from './test-ui-libplain';
+
+    const props = {};
+
+    storiesOf('Test', module)
+      .addDecorator((getStory) => <>{getStory()}</>)
+      .add('Primary', () => <Test {...props} />);
+          `);
+      });
+    });
+
+    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 { storiesOf } from '@storybook/react-native';
+          import React from 'react';
+          import { Test } from './test-ui-lib';
+          const props = {};
+          storiesOf('Test', module)
+            .addDecorator((getStory) => <>{getStory()}</>)
+            .add('Primary', () => <Test {...props} />);
+          `);
+      });
+    });
+
+    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 { storiesOf } from '@storybook/react-native';
+          import React from 'react';
+          import { TestUiLib, TestUiLibProps } from './test-ui-lib';
+          const props: TestUiLibProps = {};
+          storiesOf('TestUiLib', module)
+            .addDecorator((getStory) => <>{getStory()}</>)
+            .add('Primary', () => <TestUiLib {...props} />);
+          `);
+      });
+    });
+
+    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 { action } from '@storybook/addon-actions';
+        import { storiesOf } from '@storybook/react-native';
+        import React from 'react';
+        import { Test, TestProps } from './test-ui-lib';
+        const actions = { someAction: action('someAction executed!') };
+        const props: TestProps = { name: '', displayAge: false };
+        storiesOf('Test', module)
+          .addDecorator((getStory) => <>{getStory()}</>)
+          .add('Primary', () => <Test {...props} {...actions} />);
+          `);
+      });
+    });
+
+    [
+      {
+        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 { storiesOf } from '@storybook/react-native';
+    import React from 'react';
+    import { Test, TestProps } from './test-ui-lib';
+    const props: TestProps = {
+      name: '',
+      displayAge: false,
+    };
+    storiesOf('Test', module)
+      .addDecorator((getStory) => <>{getStory()}</>)
+      .add('Primary', () => <Test {...props} />);
+          `);
+        });
+      });
+    });
+  });
+
+  describe('using eslint', () => {
+    beforeEach(async () => {
+      appTree = await createTestUILib('test-ui-lib', false);
+      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 { storiesOf } from '@storybook/react-native';
+        import React from 'react';
+        import { TestUiLib, TestUiLibProps } from './test-ui-lib';
+
+        const props: TestUiLibProps = {};
+
+        storiesOf('TestUiLib', module)
+          .addDecorator((getStory) => <>{getStory()}</>)
+          .add('Primary', () => <TestUiLib {...props} />);
+        `);
+    });
+  });
+});
+
+export async function createTestUILib(
+  libName: string,
+  useEsLint = false
+): Promise<Tree> {
+  let appTree = createTreeWithEmptyWorkspace();
+  appTree.write('.gitignore', '');
+
+  await libraryGenerator(appTree, {
+    name: libName,
+    linter: useEsLint ? Linter.EsLint : Linter.TsLint,
+    skipFormat: true,
+    skipTsConfig: false,
+    unitTestRunner: 'jest',
+  });
+
+  await componentGenerator(appTree, {
+    name: libName,
+    project: libName,
+    export: true,
+  });
+
+  if (useEsLint) {
+    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,25 @@
+<% if (hasActions) { %>
+  import { action } from '@storybook/addon-actions';
+<% } %>
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import {
+  <%= componentName %>
+  <% if ( propsTypeName ) { %>, <%= propsTypeName %> <% } %>
+} from './<%= componentFileName %>';
+
+<% if (hasActions) { %>
+  const actions = {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: action('<%- argType.actionText %>'),
+  <% } %>};
+<% } %>
+
+const props <% if ( propsTypeName ) { %>:<%= propsTypeName %><% } %> = {<% for (let prop of props) { %>
+    <%= prop.name %>: <%- prop.defaultValue %>,
+<% } %>};
+
+storiesOf('<%= componentName %>', module)
+  .addDecorator((getStory) => <>{getStory()}</>)
+  .add('Primary', () => (
+    <<%= componentName %> {...props} <% if (hasActions) { %> {...actions} <% } %>/>
+  ));

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

@@ -0,0 +1,4 @@
+export interface CreateComponentStoriesFileSchema {
+  project: string;
+  componentPath: string;
+}

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

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeComponentStory",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project name where to add the components.",
+      "examples": ["shared-ui-component"],
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "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?"
+    }
+  },
+  "required": ["project", "componentPath"]
+}

package/src/generators/init/init.js

@@ -37,7 +37,7 @@ function updateDependencies(host) {
     return (0, devkit_1.addDependenciesToPackageJson)(host, {
         react: versions_1.reactVersion,
         'react-native': versions_2.reactNativeVersion,
-    }, Object.assign({ '@nrwl/react-native': versions_2.nxVersion, '@types/react': versions_1.typesReactVersion, '@types/react-native': versions_2.typesReactNativeVersion, '@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, 'metro-react-native-babel-preset': versions_2.metroReactNativeBabelPresetVersion, '@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-resolver': versions_2.metroVersion, 'react-test-renderer': versions_2.reactTestRendererVersion, 'react-native-svg-transformer': versions_2.reactNativeSvgTransformerVersion, 'react-native-svg': versions_2.reactNativeSvgVersion, 'react-native-config': versions_2.reactNativeConfigVersion }, (isPnpm
+    }, Object.assign({ '@nrwl/react-native': versions_2.nxVersion, '@types/react': versions_1.typesReactVersion, '@types/react-native': versions_2.typesReactNativeVersion, '@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, 'metro-react-native-babel-preset': versions_2.metroReactNativeBabelPresetVersion, '@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-resolver': versions_2.metroVersion, 'react-test-renderer': versions_2.reactTestRendererVersion, 'react-native-svg-transformer': versions_2.reactNativeSvgTransformerVersion, 'react-native-svg': versions_2.reactNativeSvgVersion, 'react-native-config': versions_2.reactNativeConfigVersion, '@react-native-async-storage/async-storage': versions_2.reactNativeAsyncStorageVersion }, (isPnpm
         ? {
             'metro-config': versions_2.metroVersion,
             '@babel/runtime': versions_2.babelRuntimeVersion, // @babel/runtime is used by react-native-svg

package/src/generators/init/init.js.map

@@ -1 +1 @@
-{"version":3,"file":"init.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/generators/init/init.ts"],"names":[],"mappings":";;;;AAAA,iGAA4F;AAC5F,yCAOsB;AAEtB,2FAAqF;AACrF,qCAA+C;AAC/C,uCAAiD;AACjD,6DAGwC;AAExC,mDAiB8B;AAE9B,qEAA+D;AAC/D,yEAAmE;AAEnE,SAAsB,wBAAwB,CAAC,IAAU,EAAE,MAAc;;QACvE,IAAA,6CAAoB,EAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;QACjD,IAAA,wCAAiB,EAAC,IAAI,CAAC,CAAC;QACxB,IAAA,4CAAmB,EAAC,IAAI,CAAC,CAAC;QAE1B,MAAM,KAAK,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QAE/D,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,KAAK,MAAM,EAAE;YAC9D,MAAM,QAAQ,GAAG,IAAA,wBAAiB,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC7C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtB;QAED,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,KAAK,OAAO,EAAE;YAC7D,MAAM,SAAS,GAAG,MAAM,IAAA,0BAAkB,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACvB;QAED,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YACtB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;SACzB;QAED,OAAO,IAAA,sCAAgB,EAAC,GAAG,KAAK,CAAC,CAAC;IACpC,CAAC;CAAA;AAtBD,4DAsBC;AAED,SAAgB,kBAAkB,CAAC,IAAU;IAC3C,MAAM,MAAM,GAAG,IAAA,6BAAoB,EAAC,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC;IAC1D,OAAO,IAAA,qCAA4B,EACjC,IAAI,EACJ;QACE,KAAK,EAAE,uBAAY;QACnB,cAAc,EAAE,6BAAkB;KACnC,kBAEC,oBAAoB,EAAE,oBAAS,EAC/B,cAAc,EAAE,4BAAiB,EACjC,qBAAqB,EAAE,kCAAuB,EAC9C,6BAA6B,EAAE,kCAAuB,EACtD,8CAA8C,EAC5C,yCAA8B,EAChC,0CAA0C,EAAE,qCAA0B,EACtE,iCAAiC,EAAE,6CAAkC,EACrE,+BAA+B,EAAE,2CAAgC,EACjE,8BAA8B,EAAE,0CAA+B,EAC/D,mBAAmB,EAAE,iCAAsB,EAC3C,KAAK,EAAE,uBAAY,EACnB,gBAAgB,EAAE,uBAAY,EAC9B,qBAAqB,EAAE,mCAAwB,EAC/C,8BAA8B,EAAE,2CAAgC,EAChE,kBAAkB,EAAE,gCAAqB,EACzC,qBAAqB,EAAE,mCAAwB,IAC5C,CAAC,MAAM;QACR,CAAC,CAAC;YACE,cAAc,EAAE,uBAAY;YAC5B,gBAAgB,EAAE,8BAAmB,EAAE,6CAA6C;SACrF;QACH,CAAC,CAAC,EAAE,CAAC,EAEV,CAAC;AACJ,CAAC;AAlCD,gDAkCC;AAED,SAAS,cAAc,CAAC,IAAU;IAChC,OAAO,IAAA,0CAAiC,EAAC,IAAI,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7E,CAAC;AAED,kBAAe,wBAAwB,CAAC;AAC3B,QAAA,wBAAwB,GAAG,IAAA,2BAAkB,EACxD,wBAAwB,CACzB,CAAC"}
+{"version":3,"file":"init.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/generators/init/init.ts"],"names":[],"mappings":";;;;AAAA,iGAA4F;AAC5F,yCAOsB;AAEtB,2FAAqF;AACrF,qCAA+C;AAC/C,uCAAiD;AACjD,6DAGwC;AAExC,mDAkB8B;AAE9B,qEAA+D;AAC/D,yEAAmE;AAEnE,SAAsB,wBAAwB,CAAC,IAAU,EAAE,MAAc;;QACvE,IAAA,6CAAoB,EAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;QACjD,IAAA,wCAAiB,EAAC,IAAI,CAAC,CAAC;QACxB,IAAA,4CAAmB,EAAC,IAAI,CAAC,CAAC;QAE1B,MAAM,KAAK,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QAE/D,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,KAAK,MAAM,EAAE;YAC9D,MAAM,QAAQ,GAAG,IAAA,wBAAiB,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC7C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtB;QAED,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,KAAK,OAAO,EAAE;YAC7D,MAAM,SAAS,GAAG,MAAM,IAAA,0BAAkB,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACvB;QAED,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YACtB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;SACzB;QAED,OAAO,IAAA,sCAAgB,EAAC,GAAG,KAAK,CAAC,CAAC;IACpC,CAAC;CAAA;AAtBD,4DAsBC;AAED,SAAgB,kBAAkB,CAAC,IAAU;IAC3C,MAAM,MAAM,GAAG,IAAA,6BAAoB,EAAC,IAAI,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC;IAC1D,OAAO,IAAA,qCAA4B,EACjC,IAAI,EACJ;QACE,KAAK,EAAE,uBAAY;QACnB,cAAc,EAAE,6BAAkB;KACnC,kBAEC,oBAAoB,EAAE,oBAAS,EAC/B,cAAc,EAAE,4BAAiB,EACjC,qBAAqB,EAAE,kCAAuB,EAC9C,6BAA6B,EAAE,kCAAuB,EACtD,8CAA8C,EAC5C,yCAA8B,EAChC,0CAA0C,EAAE,qCAA0B,EACtE,iCAAiC,EAAE,6CAAkC,EACrE,+BAA+B,EAAE,2CAAgC,EACjE,8BAA8B,EAAE,0CAA+B,EAC/D,mBAAmB,EAAE,iCAAsB,EAC3C,KAAK,EAAE,uBAAY,EACnB,gBAAgB,EAAE,uBAAY,EAC9B,qBAAqB,EAAE,mCAAwB,EAC/C,8BAA8B,EAAE,2CAAgC,EAChE,kBAAkB,EAAE,gCAAqB,EACzC,qBAAqB,EAAE,mCAAwB,EAC/C,2CAA2C,EACzC,yCAA8B,IAC7B,CAAC,MAAM;QACR,CAAC,CAAC;YACE,cAAc,EAAE,uBAAY;YAC5B,gBAAgB,EAAE,8BAAmB,EAAE,6CAA6C;SACrF;QACH,CAAC,CAAC,EAAE,CAAC,EAEV,CAAC;AACJ,CAAC;AApCD,gDAoCC;AAED,SAAS,cAAc,CAAC,IAAU;IAChC,OAAO,IAAA,0CAAiC,EAAC,IAAI,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7E,CAAC;AAED,kBAAe,wBAAwB,CAAC;AAC3B,QAAA,wBAAwB,GAAG,IAAA,2BAAkB,EACxD,wBAAwB,CACzB,CAAC"}

package/src/generators/stories/schema.d.ts

@@ -0,0 +1,3 @@
+export interface StorybookStoriesSchema {
+  project: string;
+}

package/src/generators/stories/schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactNativeStorybookStories",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Library or application name",
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "x-prompt": "What's the name of the project for which you want to generate stories?"
+    }
+  },
+  "required": ["project"]
+}

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

@@ -0,0 +1,66 @@
+import { Tree } from '@nrwl/devkit';
+import storiesGenerator from './stories';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import applicationGenerator from '../application/application';
+import { Linter } from '@nrwl/linter';
+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('apps/test-ui-app/src/app/App.tsx')).toBeTruthy();
+    expect(
+      appTree.exists('apps/test-ui-app/src/app/App.stories.tsx')
+    ).toBeTruthy();
+    expect(
+      appTree.exists(
+        'apps/test-ui-app/src/app/another-cmp/another-cmp.stories.tsx'
+      )
+    ).toBeTruthy();
+  });
+
+  it('should ignore files that do not contain components', async () => {
+    // create another component
+    appTree.write(
+      'apps/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('apps/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,
+  });
+  return appTree;
+}