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

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

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

@@ -1,105 +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 libraryGenerator from '../library/library';
-import reactNativeComponentGenerator from '../component/component';
-
-describe('react-native:stories for libraries', () => {
-  let appTree: Tree;
-
-  beforeEach(async () => {
-    appTree = await createTestUILib('test-ui-lib');
-  });
-
-  it('should create the stories', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'test-ui-lib',
-      project: 'test-ui-lib',
-    });
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-cmp',
-      project: 'test-ui-lib',
-    });
-    await storiesGenerator(appTree, {
-      project: 'test-ui-lib',
-    });
-
-    expect(
-      appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
-    ).toBeTruthy();
-    expect(
-      appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
-    ).toBeTruthy();
-  });
-
-  it('should ignore paths', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'test-ui-lib',
-      project: 'test-ui-lib',
-    });
-    await reactNativeComponentGenerator(appTree, {
-      name: 'another-cmp',
-      project: 'test-ui-lib',
-    });
-    await storiesGenerator(appTree, {
-      project: 'test-ui-lib',
-      ignorePaths: ['test-ui-lib/src/lib/another-cmp/**'],
-    });
-
-    expect(
-      appTree.exists('test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
-    ).toBeTruthy();
-    expect(
-      appTree.exists('test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx')
-    ).toBeFalsy();
-  });
-
-  it('should ignore files that do not contain components', async () => {
-    await reactNativeComponentGenerator(appTree, {
-      name: 'test-ui-lib',
-      project: 'test-ui-lib',
-    });
-    // create another component
-    appTree.write(
-      'test-ui-lib/src/lib/some-command-line-utils.ts',
-      `export const add = (a: number, b: number) => a + b;`
-    );
-
-    await storiesGenerator(appTree, {
-      project: 'test-ui-lib',
-    });
-
-    // 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-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx')
-    ).toBeTruthy();
-  });
-});
-
-export async function createTestUILib(libName: string): Promise<Tree> {
-  let appTree = createTreeWithEmptyWorkspace();
-  appTree.write('.gitignore', '');
-
-  await libraryGenerator(appTree, {
-    linter: Linter.EsLint,
-    skipFormat: true,
-    skipTsConfig: false,
-    unitTestRunner: 'none',
-    name: libName,
-    projectNameAndRootFormat: 'as-provided',
-  });
-
-  await applicationGenerator(appTree, {
-    e2eTestRunner: 'none',
-    linter: Linter.EsLint,
-    skipFormat: false,
-    unitTestRunner: 'none',
-    name: `${libName}-e2e`,
-    install: false,
-    projectNameAndRootFormat: 'as-provided',
-  });
-  return appTree;
-}

package/src/generators/storybook-configuration/configuration.spec.ts

@@ -1,135 +0,0 @@
-import { Tree } from '@nx/devkit';
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Linter } from '@nx/eslint';
-import { logger } from '@nx/devkit';
-
-import libraryGenerator from '../library/library';
-import applicationGenerator from '../application/application';
-import componentGenerator from '../component/component';
-import storybookConfigurationGenerator from './configuration';
-
-// nested code imports graph from the repo, which might have innacurate graph version
-jest.mock('nx/src/project-graph/project-graph', () => ({
-  ...jest.requireActual<any>('nx/src/project-graph/project-graph'),
-  createProjectGraphAsync: jest
-    .fn()
-    .mockImplementation(async () => ({ nodes: {}, dependencies: {} })),
-}));
-
-describe('react-native:storybook-configuration', () => {
-  let appTree;
-
-  beforeEach(async () => {
-    jest.spyOn(logger, 'warn').mockImplementation(() => {});
-    jest.spyOn(logger, 'debug').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  describe('should generate files for an app', () => {
-    it('should configure everything at once', async () => {
-      appTree = await createTestUILib('test-ui-lib');
-      appTree.write('.gitignore', '');
-      await storybookConfigurationGenerator(appTree, {
-        name: 'test-ui-lib',
-      });
-
-      expect(appTree.exists('test-ui-lib/.storybook/main.js')).toBeTruthy();
-      expect(
-        appTree.exists('test-ui-lib/tsconfig.storybook.json')
-      ).toBeTruthy();
-    });
-
-    it('should generate stories for components', async () => {
-      appTree = await createTestUILib('test-ui-lib');
-      await componentGenerator(appTree, {
-        name: 'test-ui-lib',
-        project: 'test-ui-lib',
-      });
-      await storybookConfigurationGenerator(appTree, {
-        name: 'test-ui-lib',
-        generateStories: true,
-      });
-
-      expect(
-        appTree.exists(
-          'test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx'
-        )
-      ).toBeTruthy();
-    });
-  });
-
-  describe('should generate files for lib', () => {
-    it('should configure everything at once', async () => {
-      appTree = await createTestAppLib('test-ui-app');
-      await storybookConfigurationGenerator(appTree, {
-        name: 'test-ui-app',
-      });
-
-      expect(appTree.exists('test-ui-app/.storybook/main.js')).toBeTruthy();
-      expect(
-        appTree.exists('test-ui-app/tsconfig.storybook.json')
-      ).toBeTruthy();
-    });
-
-    it('should generate stories for components', async () => {
-      appTree = await createTestAppLib('test-ui-app');
-      await storybookConfigurationGenerator(appTree, {
-        name: 'test-ui-app',
-        generateStories: true,
-      });
-
-      // Currently the auto-generate stories feature only picks up components under the 'lib' directory.
-      // In our 'createTestAppLib' function, we call @nx/react-native:component to generate a component
-      // under the specified 'lib' directory
-      expect(
-        appTree.exists(
-          'test-ui-app/src/app/my-component/my-component.stories.tsx'
-        )
-      ).toBeTruthy();
-    });
-  });
-});
-
-export async function createTestUILib(libName: string): Promise<Tree> {
-  let appTree = createTreeWithEmptyWorkspace();
-
-  await libraryGenerator(appTree, {
-    linter: Linter.EsLint,
-    skipFormat: true,
-    skipTsConfig: false,
-    unitTestRunner: 'none',
-    name: libName,
-    projectNameAndRootFormat: 'as-provided',
-  });
-  return appTree;
-}
-
-export async function createTestAppLib(
-  libName: string,
-  plainJS = false
-): Promise<Tree> {
-  let appTree = createTreeWithEmptyWorkspace();
-
-  await applicationGenerator(appTree, {
-    e2eTestRunner: 'none',
-    linter: Linter.EsLint,
-    skipFormat: false,
-    style: 'css',
-    unitTestRunner: 'none',
-    name: libName,
-    js: plainJS,
-    install: false,
-    projectNameAndRootFormat: 'as-provided',
-  });
-
-  await componentGenerator(appTree, {
-    name: 'my-component',
-    project: libName,
-    directory: 'app',
-  });
-
-  return appTree;
-}

package/src/generators/storybook-configuration/files/app/storybook.ts.template

@@ -1,9 +0,0 @@
-import { configure, getStorybookUI } from '@storybook/react-native';
-
-import { loadStories } from '<%= offsetFromRoot %>../.storybook/story-loader';
-
-configure(() => loadStories(), module);
-
-const StorybookUIRoot = getStorybookUI({});
-
-export default StorybookUIRoot;

package/src/generators/storybook-configuration/files/app/toggle-storybook.tsx.template

@@ -1,74 +0,0 @@
-/**
- * Toggle inspired from https://github.com/infinitered/ignite/blob/master/boilerplate/storybook/toggle-storybook.tsx
- */
-import React, { useState, useEffect, useRef } from 'react';
-import { DevSettings } from 'react-native';
-
-import AppRoot from '../app/App';
-
-export const DEFAULT_REACTOTRON_WS_URI = 'ws://localhost:9090';
-
-/**
- * Toggle Storybook mode, in __DEV__ mode only.
- *
- * In non-__DEV__ mode, or when Storybook isn't toggled on,
- * renders its children.
- *
- * The mode flag is persisted in async storage, which means it
- * persists across reloads/restarts - this is handy when developing
- * new components in Storybook.
- */
-function ToggleStorybook(props) {
-  const [showStorybook, setShowStorybook] = useState(false);
-  const [StorybookUIRoot, setStorybookUIRoot] = useState(null);
-  const ws = useRef(new WebSocket(DEFAULT_REACTOTRON_WS_URI));
-
-  useEffect(() => {
-    if (!__DEV__) {
-      return undefined;
-    }
-
-    if (DevSettings) {
-      // Add our toggle command to the menu
-      DevSettings.addMenuItem('Toggle Storybook', () => {
-        setShowStorybook((show) => {
-          // On toggle, flip the current value
-          show = !show;
-
-          // Return it to change the local state
-          return show;
-        });
-      });
-    }
-
-    // Load the storybook UI once
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    setStorybookUIRoot(() => require('./storybook.ts').default);
-
-    // Behave as Reactotron.storybookSwitcher(), not a HOC way.
-    ws.current.onmessage = (e) => {
-      const data = JSON.parse(e.data);
-
-      if (data.type === 'storybook') {
-        setShowStorybook(data.payload);
-      }
-    };
-    ws.current.onerror = (e) => {
-      setShowStorybook(false);
-    };
-  });
-
-  if (showStorybook) {
-    return StorybookUIRoot ? <StorybookUIRoot /> : null;
-  } else {
-    return props.children;
-  }
-}
-
-export default () => {
-  return (
-    <ToggleStorybook>
-      <AppRoot />
-    </ToggleStorybook>
-  );
-};

package/src/generators/storybook-configuration/files/root/story-loader.ts.template

@@ -1,5 +0,0 @@
-// Auto-generated file created by nx
-// DO NOT EDIT.
-export function loadStories() {
-  return [];
-}

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.d.ts

@@ -1,6 +0,0 @@
-import { Tree } from '@nx/devkit';
-import { StorybookConfigureSchema } from '../schema';
-/**
- * Add resolverMainFields in metro.config.js
- */
-export declare function addResolverMainFieldsToMetroConfig(host: Tree, schema: StorybookConfigureSchema): void;

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addResolverMainFieldsToMetroConfig = void 0;
-const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
-/**
- * Add resolverMainFields in metro.config.js
- */
-function addResolverMainFieldsToMetroConfig(host, schema) {
-    const { root } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
-    const metroConfigPath = (0, path_1.join)(root, 'metro.config.js');
-    try {
-        devkit_1.logger.debug(`Updating resolverMainFields for ${metroConfigPath}`);
-        const metroConfigContent = host.read(metroConfigPath, 'utf-8');
-        if (metroConfigContent.includes('resolverMainFields:')) {
-            devkit_1.logger.warn((0, devkit_1.stripIndents) `${metroConfigPath} is already udpated.`);
-            return;
-        }
-        host.write(metroConfigPath, metroConfigContent.replace(/},\s+resolver: {/, `},resolver: { resolverMainFields: ['sbmodern', 'browser', 'main'],`));
-    }
-    catch {
-        devkit_1.logger.error((0, devkit_1.stripIndents) `Unable to update ${metroConfigPath} for project ${root}.`);
-    }
-}
-exports.addResolverMainFieldsToMetroConfig = addResolverMainFieldsToMetroConfig;

package/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.spec.ts

@@ -1,161 +0,0 @@
-import { addProjectConfiguration, Tree } from '@nx/devkit';
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-
-import { formatFile } from '../../../utils/format-file';
-
-import { addResolverMainFieldsToMetroConfig } from './add-resolver-main-fields-to-metro-config';
-
-describe('addResolverMainFieldsToMetroConfig', () => {
-  let tree: Tree;
-
-  beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace();
-
-    addProjectConfiguration(tree, 'products', {
-      root: 'products',
-      sourceRoot: 'products/src',
-    });
-  });
-
-  it(`should update metro.config.js and add key projectRoot`, async () => {
-    tree.write(
-      'products/metro.config.js',
-      formatFile`
-const { withNxMetro } = require('@nx/react-native');
-const { getDefaultConfig } = require('metro-config');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
-  return withNxMetro(
-    {
-      transformer: {
-        getTransformOptions: async () => ({
-          transform: {
-            experimentalImportSupport: false,
-            inlineRequires: true,
-          },
-        }),
-        babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      },
-      resolver: {
-        
-        assetExts: assetExts.filter((ext) => ext !== 'svg'),
-        sourceExts: [...sourceExts, 'svg'],
-        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
-      },
-    }
-  );
-})();`
-    );
-    addResolverMainFieldsToMetroConfig(tree, {
-      name: 'products',
-    });
-
-    expect(
-      formatFile`${tree.read('products/metro.config.js', 'utf-8')}`
-    ).toEqual(
-      formatFile`
-const { withNxMetro } = require('@nx/react-native');
-const { getDefaultConfig } = require('metro-config');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
-  return withNxMetro(
-    {
-      transformer: {
-        getTransformOptions: async () => ({
-          transform: {
-            experimentalImportSupport: false,
-            inlineRequires: true,
-          },
-        }),
-        babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      },
-      resolver: {
-        resolverMainFields: ['sbmodern', 'browser', 'main'],
-        assetExts: assetExts.filter((ext) => ext !== 'svg'),
-        sourceExts: [...sourceExts, 'svg'],
-        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
-      },
-    }
-  );
-})();`
-    );
-  });
-
-  it(`should not udpate metro.config.js if projectRoot already exists`, async () => {
-    tree.write(
-      'products/metro.config.js',
-      `
-const { withNxMetro } = require('@nx/react-native');
-const { getDefaultConfig } = require('metro-config');
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
-  // console.log(getModulesRunBeforeMainModule);
-  return withNxMetro(
-    {
-      transformer: {
-        getTransformOptions: async () => ({
-          transform: {
-            experimentalImportSupport: false,
-            inlineRequires: true,
-          },
-        }),
-        babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      },
-      resolver: {
-        resolverMainFields: ['main'],
-        assetExts: assetExts.filter((ext) => ext !== 'svg'),
-        sourceExts: [...sourceExts, 'svg'],
-      },
-    },
-  );
-})();
-`
-    );
-    addResolverMainFieldsToMetroConfig(tree, {
-      name: 'products',
-    });
-
-    expect(tree.read('products/metro.config.js', 'utf-8')).toEqual(
-      `
-const { withNxMetro } = require('@nx/react-native');
-const { getDefaultConfig } = require('metro-config');
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
-  // console.log(getModulesRunBeforeMainModule);
-  return withNxMetro(
-    {
-      transformer: {
-        getTransformOptions: async () => ({
-          transform: {
-            experimentalImportSupport: false,
-            inlineRequires: true,
-          },
-        }),
-        babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      },
-      resolver: {
-        resolverMainFields: ['main'],
-        assetExts: assetExts.filter((ext) => ext !== 'svg'),
-        sourceExts: [...sourceExts, 'svg'],
-      },
-    },
-  );
-})();
-`
-    );
-  });
-});

package/src/generators/storybook-configuration/lib/create-storybook-files.d.ts

@@ -1,6 +0,0 @@
-import { Tree } from '@nx/devkit';
-import { StorybookConfigureSchema } from '../schema';
-/**
- * This function generate ./storybook under project root.
- */
-export declare function createStorybookFiles(host: Tree, schema: StorybookConfigureSchema): Promise<void>;