@nx/react/src/generators/storybook-configuration/configuration.js

The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides: - Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook. - Generators for applica

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
exports.findWebpackConfig = findWebpackConfig;
const stories_1 = require("../stories/stories");
const devkit_1 = require("@nx/devkit");
const versions_1 = require("../../utils/versions");
async function generateStories(host, schema) {
    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
    await (0, stories_1.default)(host, {
        project: schema.project,
        js: schema.js,
        ignorePaths: schema.ignorePaths,
        skipFormat: true,
        interactionTests: schema.interactionTests ?? true,
    });
}
function storybookConfigurationGenerator(host, schema) {
    return storybookConfigurationGeneratorInternal(host, {
        addPlugin: false,
        ...schema,
    });
}
async function storybookConfigurationGeneratorInternal(host, schema) {
    const tasks = [];
    const nxJson = (0, devkit_1.readNxJson)(host);
    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
        nxJson.useInferencePlugins !== false;
    schema.addPlugin ??= addPluginDefault;
    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
    let uiFramework = '@storybook/react-vite';
    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
    if (findWebpackConfig(host, projectConfig.root) ||
        projectConfig.targets?.['build']?.executor === '@nx/rollup:rollup' ||
        projectConfig.targets?.['build']?.executor === '@nx/expo:build') {
        uiFramework = '@storybook/react-webpack5';
    }
    if (uiFramework === '@storybook/react-vite') {
        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@vitejs/plugin-react': versions_1.reactViteVersion }));
    }
    const installTask = await configurationGenerator(host, {
        project: schema.project,
        js: schema.js,
        linter: schema.linter,
        tsConfiguration: schema.tsConfiguration ?? true, // default is true
        interactionTests: schema.interactionTests ?? true, // default is true
        configureStaticServe: schema.configureStaticServe,
        uiFramework: uiFramework, // cannot import UiFramework type dynamically
        skipFormat: true,
        addPlugin: schema.addPlugin,
    });
    tasks.push(installTask);
    if (schema.generateStories) {
        await generateStories(host, schema);
    }
    await (0, devkit_1.formatFiles)(host);
    return (0, devkit_1.runTasksInSerial)(...tasks);
}
exports.default = storybookConfigurationGenerator;
function findWebpackConfig(tree, projectRoot) {
    const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];
    for (const ext of allowsExt) {
        const webpackConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `webpack.config.${ext}`);
        if (tree.exists(webpackConfigPath)) {
            return webpackConfigPath;
        }
    }
}