@nx/react-native 17.0.4 → 17.0.6

package/src/generators/stories/stories.js

@@ -1,13 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storiesGenerator = void 0;
-const react_1 = require("@nx/react");
-/**
- * @deprecated This would be a direct pass through to @nx/react:stories generator.
- * TODO (@xiongemi): remove this generator for v19
- */
+exports.storiesGenerator = exports.createAllStories = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const component_story_1 = require("../component-story/component-story");
+const stories_1 = require("@nx/react/src/generators/stories/stories");
+const minimatch = require("minimatch");
+const versions_1 = require("../../utils/versions");
+async function createAllStories(tree, projectName, ignorePaths) {
+    (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
+    const { isTheFileAStory } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
+    const projects = (0, devkit_1.getProjects)(tree);
+    const projectConfiguration = projects.get(projectName);
+    const { sourceRoot } = projectConfiguration;
+    const projectPath = await (0, stories_1.projectRootPath)(tree, projectConfiguration);
+    let componentPaths = [];
+    (0, devkit_1.visitNotIgnoredFiles)(tree, projectPath, (path) => {
+        if (ignorePaths?.some((pattern) => minimatch(path, pattern)))
+            return;
+        if ((path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
+            (path.endsWith('.js') && !path.endsWith('.spec.js')) ||
+            (path.endsWith('.jsx') && !path.endsWith('.spec.jsx'))) {
+            // Check if file is NOT a story (either ts/tsx or js/jsx)
+            if (!isTheFileAStory(tree, path)) {
+                // Since the file is not a story
+                // Let's see if the .stories.* file exists
+                const ext = path.slice(path.lastIndexOf('.'));
+                const storyPath = `${path.split(ext)[0]}.stories${ext}`;
+                if (!tree.exists(storyPath)) {
+                    componentPaths.push(path);
+                }
+            }
+        }
+    });
+    await Promise.all(componentPaths.map(async (componentPath) => {
+        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
+        if (!(0, stories_1.containsComponentDeclaration)(tree, componentPath)) {
+            return;
+        }
+        await (0, component_story_1.default)(tree, {
+            componentPath: relativeCmpDir,
+            project: projectName,
+            skipFormat: true,
+        });
+    }));
+}
+exports.createAllStories = createAllStories;
 async function storiesGenerator(host, schema) {
-    return (0, react_1.storiesGenerator)(host, schema);
+    await createAllStories(host, schema.project, schema.ignorePaths);
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
 }
 exports.storiesGenerator = storiesGenerator;
 exports.default = storiesGenerator;

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

@@ -1,9 +1,4 @@
-import { Tree } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import { StorybookConfigureSchema } from './schema';
-export declare function storybookConfigurationGenerator(tree: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
-/**
- * This would be a direct pass through to @nx/react:storybook-configuration generator.
- * @TODO (@xiongemi): remove this generator for v19
- */
-export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<GeneratorCallback>;
 export default storybookConfigurationGenerator;

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

@@ -1,26 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storybookConfigurationGeneratorInternal = exports.storybookConfigurationGenerator = void 0;
+exports.storybookConfigurationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const react_1 = require("@nx/react");
-function storybookConfigurationGenerator(tree, schema) {
-    return storybookConfigurationGeneratorInternal(tree, {
-        addPlugin: false,
-        ...schema,
+const versions_1 = require("../../utils/versions");
+const stories_1 = require("../stories/stories");
+const add_resolver_main_fields_to_metro_config_1 = require("./lib/add-resolver-main-fields-to-metro-config");
+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");
+async function generateStories(host, schema) {
+    await (0, stories_1.default)(host, {
+        project: schema.name,
+        ignorePaths: schema.ignorePaths,
+        skipFormat: true,
     });
 }
+async function storybookConfigurationGenerator(host, schema) {
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
+    const installTask = await configurationGenerator(host, {
+        name: schema.name,
+        uiFramework: '@storybook/react-native',
+        configureCypress: false,
+        js: false,
+        linter: schema.linter,
+        standaloneConfig: schema.standaloneConfig,
+        tsConfiguration: schema.tsConfiguration,
+        skipFormat: true,
+    });
+    const installRequiredPackagesTask = await (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+        '@react-native-async-storage/async-storage': versions_1.reactNativeAsyncStorageVersion,
+        'react-native-safe-area-context': versions_1.reactNativeSafeAreaContextVersion,
+    });
+    addStorybookTask(host, schema.name);
+    (0, create_storybook_files_1.createStorybookFiles)(host, schema);
+    (0, replace_app_import_with_storybook_toggle_1.replaceAppImportWithStorybookToggle)(host, schema);
+    (0, add_resolver_main_fields_to_metro_config_1.addResolverMainFieldsToMetroConfig)(host, schema);
+    if (schema.generateStories) {
+        await generateStories(host, schema);
+    }
+    await (0, devkit_1.formatFiles)(host);
+    return (0, devkit_1.runTasksInSerial)(installTask, installRequiredPackagesTask);
+}
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
-/**
- * This would be a direct pass through to @nx/react:storybook-configuration generator.
- * @TODO (@xiongemi): remove this generator for v19
- */
-async function storybookConfigurationGeneratorInternal(host, schema) {
-    devkit_1.logger.warn(`Please run 'nx run @nx/react:storybook-configuration ${schema.project}' instead.`);
-    const nxJson = (0, devkit_1.readNxJson)(host);
-    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
-        nxJson.useInferencePlugins !== false;
-    schema.addPlugin ??= addPluginDefault;
-    return (0, react_1.storybookConfigurationGenerator)(host, schema);
+function addStorybookTask(host, projectName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, projectName);
+    projectConfig.targets['storybook'] = {
+        executor: '@nx/react-native:storybook',
+        options: {
+            searchDir: [projectConfig.sourceRoot],
+            outputFile: './.storybook/story-loader.js',
+            pattern: '**/*.stories.@(js|jsx|ts|tsx|md)',
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(host, projectName, projectConfig);
 }
-exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
 exports.default = storybookConfigurationGenerator;

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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,74 @@
+/**
+ * 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

@@ -0,0 +1,5 @@
+// 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,25 @@
+"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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,6 @@
+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>;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStorybookFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const chalk = require("chalk");
+/**
+ * This function generate ./storybook under project root.
+ */
+async function createStorybookFiles(host, schema) {
+    const { root, projectType, targets, sourceRoot } = (0, devkit_1.readProjectConfiguration)(host, schema.name);
+    // do not proceed if not a react native project
+    if (targets?.start?.executor !== '@nx/react-native:start' &&
+        targets?.start?.executor !== '@nx/expo:start' &&
+        targets?.start?.executor !== '@nrwl/react-native:start' &&
+        targets?.start?.executor !== '@nrwl/expo:start') {
+        devkit_1.logger.error(`Unable to add storybook to ${schema.name}. It is not a Nx React Native / Expo project.`);
+        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 ${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).`);
+    }
+    // copy files to app's .storybook folder
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), (0, path_1.join)(root, 'src', 'storybook'), {
+        tmpl: '',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(sourceRoot),
+    });
+    // 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;

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

@@ -0,0 +1,7 @@
+import { Tree } from '@nx/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,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceAppImportWithStorybookToggle = void 0;
+const devkit_1 = require("@nx/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 {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to update import in ${mainFilePath} for project ${root}.`);
+    }
+}
+exports.replaceAppImportWithStorybookToggle = replaceAppImportWithStorybookToggle;