@nrwl/react-native 13.8.0-beta.1 → 13.8.3

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

@@ -0,0 +1,86 @@
+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 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(
+        'libs/test-ui-lib/src/lib/test-ui-lib/test-ui-lib.stories.tsx'
+      )
+    ).toBeTruthy();
+    expect(
+      appTree.exists(
+        'libs/test-ui-lib/src/lib/another-cmp/another-cmp.stories.tsx'
+      )
+    ).toBeTruthy();
+  });
+
+  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(
+      'libs/test-ui-lib/src/lib/some-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(
+        'libs/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,
+  });
+
+  await applicationGenerator(appTree, {
+    e2eTestRunner: 'none',
+    linter: Linter.EsLint,
+    skipFormat: false,
+    unitTestRunner: 'none',
+    name: `${libName}-e2e`,
+  });
+  return appTree;
+}

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

@@ -0,0 +1,7 @@
+import { ProjectType, Tree } from '@nrwl/devkit';
+import { StorybookStoriesSchema } from './schema';
+export declare function projectRootPath(tree: Tree, sourceRoot: string, projectType: ProjectType): string;
+export declare function createAllStories(tree: Tree, projectName: string): Promise<void>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
+export default storiesGenerator;
+export declare const storiesSchematic: (options: StorybookStoriesSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/stories/stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storiesSchematic = exports.storiesGenerator = exports.createAllStories = exports.projectRootPath = void 0;
+const tslib_1 = require("tslib");
+const ast_utils_1 = require("@nrwl/react/src/utils/ast-utils");
+const ts = require("typescript");
+const devkit_1 = require("@nrwl/devkit");
+const path_1 = require("path");
+const component_story_1 = require("../component-story/component-story");
+function projectRootPath(tree, sourceRoot, projectType) {
+    let projectDir = '';
+    if (projectType === 'application') {
+        // apps/test-app/src/app
+        projectDir = 'app';
+    }
+    else if (projectType == 'library') {
+        // libs/test-lib/src/lib
+        projectDir = 'lib';
+    }
+    return (0, devkit_1.joinPathFragments)(sourceRoot, projectDir);
+}
+exports.projectRootPath = projectRootPath;
+function containsComponentDeclaration(tree, componentPath) {
+    const contents = tree.read(componentPath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentPath}`);
+    }
+    const sourceFile = ts.createSourceFile(componentPath, contents, ts.ScriptTarget.Latest, true);
+    return !!(0, ast_utils_1.getComponentName)(sourceFile);
+}
+function createAllStories(tree, projectName) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        const projects = (0, devkit_1.getProjects)(tree);
+        const project = projects.get(projectName);
+        const { sourceRoot, projectType } = project;
+        const projectPath = projectRootPath(tree, sourceRoot, projectType);
+        let componentPaths = [];
+        (0, devkit_1.visitNotIgnoredFiles)(tree, projectPath, (path) => {
+            if ((path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
+                (path.endsWith('.js') && !path.endsWith('.spec.js')) ||
+                (path.endsWith('.jsx') && !path.endsWith('.spec.jsx'))) {
+                componentPaths.push(path);
+            }
+        });
+        yield Promise.all(componentPaths.map((componentPath) => (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+            const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
+            if (!containsComponentDeclaration(tree, componentPath)) {
+                return;
+            }
+            yield (0, component_story_1.default)(tree, {
+                componentPath: relativeCmpDir,
+                project: projectName,
+            });
+        })));
+    });
+}
+exports.createAllStories = createAllStories;
+function storiesGenerator(host, schema) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        yield createAllStories(host, schema.project);
+    });
+}
+exports.storiesGenerator = storiesGenerator;
+exports.default = storiesGenerator;
+exports.storiesSchematic = (0, devkit_1.convertNxGenerator)(storiesGenerator);
+//# sourceMappingURL=stories.js.map

package/src/generators/stories/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/generators/stories/stories.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nrwl/devkit';
+import { StorybookConfigureSchema } from './schema';
+export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
+export default storybookConfigurationGenerator;
+export declare const storybookConfigurationSchematic: (options: StorybookConfigureSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/storybook-configuration/configuration.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storybookConfigurationSchematic = exports.storybookConfigurationGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nrwl/devkit");
+const storybook_1 = require("@nrwl/storybook");
+const stories_1 = require("../stories/stories");
+const create_storybook_files_1 = require("./lib/create-storybook-files");
+const replace_app_import_with_storybook_toggle_1 = require("./lib/replace-app-import-with-storybook-toggle");
+function generateStories(host, schema) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        yield (0, stories_1.default)(host, {
+            project: schema.name,
+        });
+    });
+}
+function storybookConfigurationGenerator(host, schema) {
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        const installTask = yield (0, storybook_1.configurationGenerator)(host, {
+            name: schema.name,
+            uiFramework: '@storybook/react-native',
+            configureCypress: false,
+            js: false,
+            linter: schema.linter,
+            standaloneConfig: schema.standaloneConfig,
+        });
+        addStorybookTask(host, schema.name);
+        (0, create_storybook_files_1.createStorybookFiles)(host, schema);
+        (0, replace_app_import_with_storybook_toggle_1.replaceAppImportWithStorybookToggle)(host, schema);
+        if (schema.generateStories) {
+            yield generateStories(host, schema);
+        }
+        return installTask;
+    });
+}
+exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
+function addStorybookTask(host, projectName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, projectName);
+    projectConfig.targets['storybook'] = {
+        executor: '@nrwl/react-native:storybook',
+        options: {
+            searchDir: projectConfig.root,
+            outputFile: './.storybook/story-loader.js',
+            pattern: '**/*.stories.@(js|jsx|ts|tsx|md)',
+            silent: false,
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(host, projectName, projectConfig);
+}
+exports.default = storybookConfigurationGenerator;
+exports.storybookConfigurationSchematic = (0, devkit_1.convertNxGenerator)(storybookConfigurationGenerator);
+//# sourceMappingURL=configuration.js.map

package/src/generators/storybook-configuration/configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration.js","sourceRoot":"","sources":["../../../../../../packages/react-native/src/generators/storybook-configuration/configuration.ts"],"names":[],"mappings":";;;;AAAA,yCAMsB;AACtB,+CAAyD;AAEzD,gDAAkD;AAClD,yEAAoE;AACpE,6GAAqG;AAIrG,SAAe,eAAe,CAAC,IAAU,EAAE,MAAgC;;QACzE,MAAM,IAAA,iBAAgB,EAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,IAAI;SACrB,CAAC,CAAC;IACL,CAAC;CAAA;AAED,SAAsB,+BAA+B,CACnD,IAAU,EACV,MAAgC;;QAEhC,MAAM,WAAW,GAAG,MAAM,IAAA,kCAAsB,EAAC,IAAI,EAAE;YACrD,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,WAAW,EAAE,yBAAyB;YACtC,gBAAgB,EAAE,KAAK;YACvB,EAAE,EAAE,KAAK;YACT,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,gBAAgB,EAAE,MAAM,CAAC,gBAAgB;SAC1C,CAAC,CAAC;QAEH,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QACpC,IAAA,6CAAoB,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACnC,IAAA,8EAAmC,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAElD,IAAI,MAAM,CAAC,eAAe,EAAE;YAC1B,MAAM,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACrC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;CAAA;AAtBD,0EAsBC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,WAAmB;IACvD,MAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAClE,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG;QACnC,QAAQ,EAAE,8BAA8B;QACxC,OAAO,EAAE;YACP,SAAS,EAAE,aAAa,CAAC,IAAI;YAC7B,UAAU,EAAE,8BAA8B;YAC1C,OAAO,EAAE,kCAAkC;YAC3C,MAAM,EAAE,KAAK;SACd;KACF,CAAC;IAEF,IAAA,mCAA0B,EAAC,IAAI,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;AAC/D,CAAC;AAED,kBAAe,+BAA+B,CAAC;AAClC,QAAA,+BAA+B,GAAG,IAAA,2BAAkB,EAC/D,+BAA+B,CAChC,CAAC"}

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

@@ -0,0 +1,142 @@
+import * as fileUtils from '@nrwl/workspace/src/core/file-utils';
+import { Tree } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { Linter } from '@nrwl/linter';
+import { logger } from '@nrwl/devkit';
+
+import libraryGenerator from '../library/library';
+import applicationGenerator from '../application/application';
+import componentGenerator from '../component/component';
+import storybookConfigurationGenerator from './configuration';
+
+describe('react-native:storybook-configuration', () => {
+  let appTree;
+
+  beforeEach(async () => {
+    jest.spyOn(fileUtils, 'readPackageJson').mockReturnValue({
+      devDependencies: {
+        '@storybook/addon-essentials': '*',
+        '@storybook/react-native': '*',
+        '@storybook/addon-ondevice-actions': '*',
+        '@storybook/addon-ondevice-knobs': '*',
+      },
+    });
+
+    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',
+        standaloneConfig: false,
+      });
+
+      expect(
+        appTree.exists('libs/test-ui-lib/.storybook/main.js')
+      ).toBeTruthy();
+      expect(
+        appTree.exists('libs/test-ui-lib/.storybook/tsconfig.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,
+        standaloneConfig: false,
+      });
+
+      expect(
+        appTree.exists(
+          'libs/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',
+        standaloneConfig: false,
+      });
+
+      expect(
+        appTree.exists('apps/test-ui-app/.storybook/main.js')
+      ).toBeTruthy();
+      expect(
+        appTree.exists('apps/test-ui-app/.storybook/tsconfig.json')
+      ).toBeTruthy();
+    });
+
+    it('should generate stories for components', async () => {
+      appTree = await createTestAppLib('test-ui-app');
+      await storybookConfigurationGenerator(appTree, {
+        name: 'test-ui-app',
+        generateStories: true,
+        standaloneConfig: false,
+      });
+
+      // Currently the auto-generate stories feature only picks up components under the 'lib' directory.
+      // In our 'createTestAppLib' function, we call @nrwl/react-native:component to generate a component
+      // under the specified 'lib' directory
+      expect(
+        appTree.exists(
+          'apps/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,
+  });
+  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,
+  });
+
+  await componentGenerator(appTree, {
+    name: 'my-component',
+    project: libName,
+    directory: 'app',
+  });
+
+  return appTree;
+}

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

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

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

@@ -0,0 +1,114 @@
+/**
+ * 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 AsyncStorage from '@react-native-async-storage/async-storage';
+
+import AppRoot from '../src/app/App';
+
+export const DEFAULT_REACTOTRON_WS_URI = 'ws://localhost:9090';
+
+/**
+ * Loads a string from storage.
+ *
+ * @param key The key to fetch.
+ */
+async function loadString(key: string): Promise<string | null> {
+  try {
+    return await AsyncStorage.getItem(key);
+  } catch {
+    // not sure why this would fail... even reading the RN docs I'm unclear
+    return null;
+  }
+}
+
+/**
+ * Saves a string to storage.
+ *
+ * @param key The key to fetch.
+ * @param value The value to store.
+ */
+async function saveString(key: string, value: string): Promise<boolean> {
+  try {
+    await AsyncStorage.setItem(key, value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 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;
+    }
+
+    // Load the setting from storage if it's there
+    loadString('devStorybook').then((storedSetting) => {
+      // Set the initial value
+      setShowStorybook(storedSetting === 'on');
+
+      if (DevSettings) {
+        // Add our toggle command to the menu
+        DevSettings.addMenuItem('Toggle Storybook', () => {
+          setShowStorybook((show) => {
+            // On toggle, flip the current value
+            show = !show;
+
+            // Write it back to storage
+            saveString('devStorybook', show ? 'on' : 'off');
+
+            // 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') {
+          saveString('devStorybook', data.payload ? 'on' : 'off');
+          setShowStorybook(data.payload);
+        }
+      };
+      ws.current.onerror = (e) => {
+        setShowStorybook(storedSetting === 'on');
+      };
+    });
+  }, []);
+
+  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.js.template

@@ -0,0 +1,13 @@
+// Auto-generated file created by react-native-storybook-loader
+// Do not edit.
+//
+// https://github.com/elderfo/react-native-storybook-loader.git
+
+function loadStories() {}
+
+const stories = [];
+
+module.exports = {
+  loadStories,
+  stories,
+};

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

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

package/src/generators/storybook-configuration/lib/create-storybook-files.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStorybookFiles = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nrwl/devkit");
+const path_1 = require("path");
+const chalk = require("chalk");
+/**
+ * This function generate ./storybook under project root.
+ */
+function createStorybookFiles(host, schema) {
+    var _a;
+    return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
+        const { root, projectType, targets, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+        // do not proceed if not a react native project
+        if (((_a = targets === null || targets === void 0 ? void 0 : targets.start) === null || _a === void 0 ? void 0 : _a.executor) !== '@nrwl/react-native:start') {
+            return;
+        }
+        const storybookUIFileName = schema.js ? 'storybook.js' : 'storybook.ts';
+        const storybookUIFilePath = (0, path_1.join)(root, `./${storybookUIFileName}`);
+        if (host.exists(storybookUIFilePath)) {
+            devkit_1.logger.warn(`${storybookUIFileName} file already exists for React Native ${projectType} ${schema.name}! Skipping generating this file.`);
+            return;
+        }
+        if (projectType !== 'application') {
+            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).`);
+        }
+        const projectDirectory = projectType === 'application' ? 'app' : 'lib';
+        devkit_1.logger.debug(`Adding storybook file to React Native app ${projectDirectory}`);
+        // copy files to app's .storybook folder
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), (0, path_1.join)(root, '.storybook'), {
+            tmpl: '',
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(sourceRoot),
+            projectType: projectDirectory,
+        });
+        // copy files to workspace root's .storybook folder
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/root'), (0, path_1.join)(root, (0, devkit_1.offsetFromRoot)(root), '.storybook'), {
+            tmpl: '',
+        });
+        if (schema.js) {
+            (0, devkit_1.toJS)(host);
+        }
+    });
+}
+exports.createStorybookFiles = createStorybookFiles;
+//# sourceMappingURL=create-storybook-files.js.map

package/src/generators/storybook-configuration/lib/create-storybook-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-storybook-files.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/storybook-configuration/lib/create-storybook-files.ts"],"names":[],"mappings":";;;;AAAA,yCAOsB;AACtB,+BAA4B;AAC5B,+BAA+B;AAI/B;;GAEG;AACH,SAAsB,oBAAoB,CACxC,IAAU,EACV,MAAgC;;;QAEhC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,iCAAwB,EACzE,IAAI,EACJ,MAAM,CAAC,IAAI,CACZ,CAAC;QAEF,+CAA+C;QAC/C,IAAI,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,QAAQ,MAAK,0BAA0B,EAAE;YAC3D,OAAO;SACR;QAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC;QACxE,MAAM,mBAAmB,GAAG,IAAA,WAAI,EAAC,IAAI,EAAE,KAAK,mBAAmB,EAAE,CAAC,CAAC;QAEnE,IAAI,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YACpC,eAAM,CAAC,IAAI,CACT,GAAG,mBAAmB,yCAAyC,WAAW,IAAI,MAAM,CAAC,IAAI,kCAAkC,CAC5H,CAAC;YACF,OAAO;SACR;QACD,IAAI,WAAW,KAAK,aAAa,EAAE;YACjC,eAAM,CAAC,IAAI,CACT,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAChB,MAAM,CACP,8IAA8I,CAChJ,CAAC;SACH;QAED,MAAM,gBAAgB,GAAG,WAAW,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAEvE,eAAM,CAAC,KAAK,CAAC,6CAA6C,gBAAgB,EAAE,CAAC,CAAC;QAE9E,wCAAwC;QACxC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,cAAc,CAAC,EAC/B,IAAA,WAAI,EAAC,IAAI,EAAE,YAAY,CAAC,EACxB;YACE,IAAI,EAAE,EAAE;YACR,cAAc,EAAE,IAAA,uBAAc,EAAC,UAAU,CAAC;YAC1C,WAAW,EAAE,gBAAgB;SAC9B,CACF,CAAC;QAEF,mDAAmD;QACnD,IAAA,sBAAa,EACX,IAAI,EACJ,IAAA,WAAI,EAAC,SAAS,EAAE,eAAe,CAAC,EAChC,IAAA,WAAI,EAAC,IAAI,EAAE,IAAA,uBAAc,EAAC,IAAI,CAAC,EAAE,YAAY,CAAC,EAC9C;YACE,IAAI,EAAE,EAAE;SACT,CACF,CAAC;QAEF,IAAI,MAAM,CAAC,EAAE,EAAE;YACb,IAAA,aAAI,EAAC,IAAI,CAAC,CAAC;SACZ;;CACF;AA5DD,oDA4DC"}

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.d.ts

@@ -0,0 +1,7 @@
+import { Tree } from '@nrwl/devkit';
+import { StorybookConfigureSchema } from '../schema';
+/**
+ * To replace the import statement for storybook.
+ * Need to import app with storybook toggle from .storybook/toggle-storybook
+ */
+export declare function replaceAppImportWithStorybookToggle(host: Tree, schema: StorybookConfigureSchema): void;

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceAppImportWithStorybookToggle = void 0;
+const devkit_1 = require("@nrwl/devkit");
+const path_1 = require("path");
+/**
+ * To replace the import statement for storybook.
+ * Need to import app with storybook toggle from .storybook/toggle-storybook
+ */
+function replaceAppImportWithStorybookToggle(host, schema) {
+    const { root, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+    const mainFilePath = (0, path_1.join)(sourceRoot, schema.js ? 'main.js' : 'main.tsx');
+    const appImportImport = `import App from './app/App';`;
+    const storybookeToggleImport = `import App from '../.storybook/toggle-storybook';`;
+    try {
+        devkit_1.logger.debug(`Updating import for ${mainFilePath}`);
+        const contents = host.read(mainFilePath, 'utf-8');
+        if (!contents.includes(appImportImport) ||
+            contents.includes(storybookeToggleImport)) {
+            devkit_1.logger.warn((0, devkit_1.stripIndents) `${mainFilePath} is already udpated.`);
+            return;
+        }
+        host.write(mainFilePath, contents.replace(appImportImport, storybookeToggleImport));
+    }
+    catch (_a) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to update import in ${mainFilePath} for project ${root}.`);
+    }
+}
+exports.replaceAppImportWithStorybookToggle = replaceAppImportWithStorybookToggle;
+//# sourceMappingURL=replace-app-import-with-storybook-toggle.js.map

package/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace-app-import-with-storybook-toggle.js","sourceRoot":"","sources":["../../../../../../../packages/react-native/src/generators/storybook-configuration/lib/replace-app-import-with-storybook-toggle.ts"],"names":[],"mappings":";;;AAAA,yCAKsB;AACtB,+BAA4B;AAI5B;;;GAGG;AACH,SAAgB,mCAAmC,CACjD,IAAU,EACV,MAAgC;IAEhC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,IAAA,WAAI,EAAC,UAAU,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,8BAA8B,CAAC;IACvD,MAAM,sBAAsB,GAAG,mDAAmD,CAAC;IAEnF,IAAI;QACF,eAAM,CAAC,KAAK,CAAC,uBAAuB,YAAY,EAAE,CAAC,CAAC;QACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAClD,IACE,CAAC,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnC,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EACzC;YACA,eAAM,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAA,GAAG,YAAY,sBAAsB,CAAC,CAAC;YAC/D,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CACR,YAAY,EACZ,QAAQ,CAAC,OAAO,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAC1D,CAAC;KACH;IAAC,WAAM;QACN,eAAM,CAAC,IAAI,CACT,IAAA,qBAAY,EAAA,8BAA8B,YAAY,gBAAgB,IAAI,GAAG,CAC9E,CAAC;KACH;AACH,CAAC;AA7BD,kFA6BC"}