@nx/react 0.0.0-pr-22179-271588f

package/src/generators/setup-tailwind/files/tailwind.config.js__tmpl__

@@ -0,0 +1,17 @@
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.d.ts

@@ -0,0 +1,3 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function addTailwindStyleImports(tree: Tree, project: ProjectConfiguration, _options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTailwindStyleImports = void 0;
+const devkit_1 = require("@nx/devkit");
+const knownLocations = [
+    // Plain React
+    'src/styles.css',
+    'src/styles.scss',
+    'src/styles.less',
+    // Next.js
+    'pages/styles.css',
+    'pages/styles.scss',
+    'pages/styles.less',
+    'app/global.css',
+    'app/global.scss',
+    'app/global.less',
+];
+function addTailwindStyleImports(tree, project, _options) {
+    const candidates = knownLocations.map((x) => (0, devkit_1.joinPathFragments)(project.root, x));
+    const stylesPath = candidates.find((x) => tree.exists(x));
+    if (stylesPath) {
+        const content = tree.read(stylesPath).toString();
+        tree.write(stylesPath, `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n${content}`);
+    }
+    else {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+        Could not find stylesheet to update. Add the following imports to your stylesheet (e.g. styles.css):
+        
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+          
+        See our guide for more details: https://nx.dev/guides/using-tailwind-css-in-react`);
+    }
+}
+exports.addTailwindStyleImports = addTailwindStyleImports;

package/src/generators/setup-tailwind/lib/update-project.d.ts

@@ -0,0 +1,3 @@
+import type { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function updateProject(tree: Tree, config: ProjectConfiguration, options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/update-project.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateProject = void 0;
+const devkit_1 = require("@nx/devkit");
+function updateProject(tree, config, options) {
+    if (config?.targets?.build?.executor === '@nx/webpack:webpack' ||
+        config?.targets?.build?.executor === '@nrwl/webpack:webpack') {
+        config.targets.build.options ??= {};
+        config.targets.build.options.postcssConfig = (0, devkit_1.joinPathFragments)(config.root, 'postcss.config.js');
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, config);
+    }
+}
+exports.updateProject = updateProject;

package/src/generators/setup-tailwind/schema.d.ts

@@ -0,0 +1,6 @@
+export interface SetupTailwindOptions {
+    project: string;
+    buildTarget?: string;
+    skipFormat?: boolean;
+    skipPackageJson?: boolean;
+}

package/src/generators/setup-tailwind/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/generators/setup-tailwind/schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactTailwindSetupGenerator",
+  "title": "Configures Tailwind CSS for an application or a buildable/publishable library.",
+  "description": "Adds the Tailwind CSS configuration files for a given React project and installs, if needed, the packages required for Tailwind CSS to work.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g setup-tailwind --project=my-app",
+      "description": "Initialize Tailwind configuration for the `my-app` project."
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the Tailwind CSS setup for.",
+      "alias": "p",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-dropdown": "projects",
+      "x-prompt": "What project would you like to add the Tailwind CSS setup?",
+      "x-priority": "important"
+    },
+    "buildTarget": {
+      "type": "string",
+      "description": "The name of the target used to build the project. This option is not needed in most cases.",
+      "default": "build",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skips formatting the workspace after the generator completes.",
+      "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["project"]
+}

package/src/generators/setup-tailwind/setup-tailwind.d.ts

@@ -0,0 +1,4 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import type { SetupTailwindOptions } from './schema';
+export declare function setupTailwindGenerator(tree: Tree, options: SetupTailwindOptions): Promise<GeneratorCallback>;
+export default setupTailwindGenerator;

package/src/generators/setup-tailwind/setup-tailwind.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupTailwindGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+const add_tailwind_style_imports_1 = require("./lib/add-tailwind-style-imports");
+const update_project_1 = require("./lib/update-project");
+const path_1 = require("path");
+async function setupTailwindGenerator(tree, options) {
+    const tasks = [];
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'postcss.config.js')) ||
+        tree.exists((0, devkit_1.joinPathFragments)(project.root, 'tailwind.config.js'))) {
+        devkit_1.logger.info(`Skipping setup since there are existing PostCSS or Tailwind configuration files. For manual setup instructions, see https://nx.dev/guides/using-tailwind-css-in-react.`);
+        return;
+    }
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, {
+        tmpl: '',
+    });
+    (0, add_tailwind_style_imports_1.addTailwindStyleImports)(tree, project, options);
+    (0, update_project_1.updateProject)(tree, project, options);
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            autoprefixer: versions_1.autoprefixerVersion,
+            postcss: versions_1.postcssVersion,
+            tailwindcss: versions_1.tailwindcssVersion,
+        }));
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.setupTailwindGenerator = setupTailwindGenerator;
+exports.default = setupTailwindGenerator;

package/src/generators/stories/schema.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactStorybookStories",
+  "title": "Generate React Storybook stories",
+  "description": "Generate stories/specs for all components declared in a project.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "Project for which to generate stories.",
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "x-prompt": "For which project do you want to generate stories?",
+      "x-priority": "important"
+    },
+    "generateCypressSpecs": {
+      "type": "boolean",
+      "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator."
+    },
+    "cypressProject": {
+      "type": "string",
+      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "default": true
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"],
+  "examplesFile": "../../../docs/stories-examples.md"
+}

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

@@ -0,0 +1,15 @@
+import { GeneratorCallback, ProjectConfiguration, Tree } from '@nx/devkit';
+export interface StorybookStoriesSchema {
+    project: string;
+    interactionTests?: boolean;
+    js?: boolean;
+    ignorePaths?: string[];
+    skipFormat?: boolean;
+    cypressProject?: string;
+    generateCypressSpecs?: boolean;
+}
+export declare function projectRootPath(tree: Tree, config: ProjectConfiguration): Promise<string>;
+export declare function containsComponentDeclaration(tree: Tree, componentPath: string): boolean;
+export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, generateCypressSpecs?: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<GeneratorCallback>;
+export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storiesGenerator = exports.createAllStories = exports.containsComponentDeclaration = exports.projectRootPath = void 0;
+const component_story_1 = require("../component-story/component-story");
+const component_cypress_spec_1 = require("../component-cypress-spec/component-cypress-spec");
+const ast_utils_1 = require("../../utils/ast-utils");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const minimatch_1 = require("minimatch");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const versions_1 = require("../../utils/versions");
+let tsModule;
+async function projectRootPath(tree, config) {
+    let projectDir;
+    if (config.projectType === 'application') {
+        const isNextJs = await isNextJsProject(tree, config);
+        if (isNextJs) {
+            // Next.js apps
+            projectDir = 'components';
+        }
+        else {
+            // apps/test-app/src/app
+            projectDir = 'app';
+        }
+    }
+    else if (config.projectType == 'library') {
+        // libs/test-lib/src/lib
+        projectDir = 'lib';
+    }
+    return (0, devkit_1.joinPathFragments)(config.sourceRoot, projectDir);
+}
+exports.projectRootPath = projectRootPath;
+function containsComponentDeclaration(tree, componentPath) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const contents = tree.read(componentPath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentPath}`);
+    }
+    const sourceFile = tsModule.createSourceFile(componentPath, contents, tsModule.ScriptTarget.Latest, true);
+    return !!((0, ast_utils_1.getComponentNode)(sourceFile) ||
+        (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile)?.length);
+}
+exports.containsComponentDeclaration = containsComponentDeclaration;
+async function createAllStories(tree, projectName, interactionTests, js, projects, projectConfiguration, generateCypressSpecs, cypressProject, ignorePaths) {
+    const { isTheFileAStory } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
+    const { sourceRoot, root } = projectConfiguration;
+    let componentPaths = [];
+    const projectPath = await projectRootPath(tree, projectConfiguration);
+    (0, devkit_1.visitNotIgnoredFiles)(tree, projectPath, (path) => {
+        // Ignore private files starting with "_".
+        if ((0, path_1.basename)(path).startsWith('_'))
+            return;
+        if (ignorePaths?.some((pattern) => (0, minimatch_1.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);
+                }
+            }
+        }
+    });
+    const e2eProjectName = cypressProject || `${projectName}-e2e`;
+    const e2eProject = projects.get(e2eProjectName);
+    if (generateCypressSpecs && !e2eProject) {
+        devkit_1.logger.info(`There was no e2e project "${e2eProjectName}" found, so cypress specs will not be generated. Pass "--cypressProject" to specify a different e2e project name`);
+    }
+    await Promise.all(componentPaths.map(async (componentPath) => {
+        const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
+        if (!containsComponentDeclaration(tree, componentPath)) {
+            return;
+        }
+        await (0, component_story_1.default)(tree, {
+            componentPath: relativeCmpDir,
+            project: projectName,
+            skipFormat: true,
+            interactionTests,
+        });
+        if (generateCypressSpecs && e2eProject) {
+            await (0, component_cypress_spec_1.default)(tree, {
+                project: projectName,
+                componentPath: relativeCmpDir,
+                js,
+                cypressProject,
+                skipFormat: true,
+            });
+        }
+    }));
+}
+exports.createAllStories = createAllStories;
+async function storiesGenerator(host, schema) {
+    const projects = (0, devkit_1.getProjects)(host);
+    const projectConfiguration = projects.get(schema.project);
+    schema.interactionTests = schema.interactionTests ?? true;
+    await createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.generateCypressSpecs, schema.cypressProject, schema.ignorePaths);
+    const tasks = [];
+    if (schema.interactionTests) {
+        const { interactionTestsDependencies, addInteractionsInAddons } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, interactionTestsDependencies()));
+        addInteractionsInAddons(host, projectConfiguration);
+    }
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.storiesGenerator = storiesGenerator;
+async function isNextJsProject(tree, config) {
+    const { findStorybookAndBuildTargetsAndCompiler } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
+    const { nextBuildTarget } = findStorybookAndBuildTargetsAndCompiler(config.targets);
+    if (nextBuildTarget) {
+        return true;
+    }
+    for (const configFile of ['next.config.js', 'next.config.ts']) {
+        if (tree.exists((0, path_1.join)(config.root, configFile))) {
+            return true;
+        }
+    }
+    return false;
+}
+exports.default = storiesGenerator;

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

@@ -0,0 +1,6 @@
+import { StorybookConfigureSchema } from './schema';
+import { Tree } from '@nx/devkit';
+export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export default storybookConfigurationGenerator;
+export declare function findWebpackConfig(tree: Tree, projectRoot: string): string | undefined;

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findWebpackConfig = exports.storybookConfigurationGeneratorInternal = exports.storybookConfigurationGenerator = void 0;
+const stories_1 = require("../stories/stories");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+async function generateStories(host, schema) {
+    // TODO(katerina): Nx 19 -> remove Cypress
+    (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+    const { getE2eProjectName } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/project-name'));
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
+    const cypressProject = getE2eProjectName(schema.project, projectConfig.root, schema.cypressDirectory);
+    await (0, stories_1.default)(host, {
+        project: schema.project,
+        generateCypressSpecs: schema.configureCypress && schema.generateCypressSpecs,
+        js: schema.js,
+        cypressProject,
+        ignorePaths: schema.ignorePaths,
+        skipFormat: true,
+        interactionTests: schema.interactionTests ?? true,
+    });
+}
+function storybookConfigurationGenerator(host, schema) {
+    return storybookConfigurationGeneratorInternal(host, {
+        addPlugin: false,
+        ...schema,
+    });
+}
+exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
+async function storybookConfigurationGeneratorInternal(host, schema) {
+    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 === '@nrwl/rollup:rollup' ||
+        projectConfig.targets['build']?.executor === '@nx/expo:build') {
+        uiFramework = '@storybook/react-webpack5';
+    }
+    const installTask = await configurationGenerator(host, {
+        project: schema.project,
+        configureCypress: schema.configureCypress,
+        js: schema.js,
+        linter: schema.linter,
+        cypressDirectory: schema.cypressDirectory,
+        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,
+    });
+    if (schema.generateStories) {
+        await generateStories(host, schema);
+    }
+    await (0, devkit_1.formatFiles)(host);
+    return installTask;
+}
+exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
+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;
+        }
+    }
+}
+exports.findWebpackConfig = findWebpackConfig;

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

@@ -0,0 +1,16 @@
+import { Linter } from '@nx/eslint';
+
+export interface StorybookConfigureSchema {
+  project: string;
+  interactionTests?: boolean;
+  generateStories?: boolean;
+  js?: boolean;
+  tsConfiguration?: boolean;
+  linter?: Linter;
+  ignorePaths?: string[];
+  configureStaticServe?: boolean;
+  configureCypress?: boolean;
+  generateCypressSpecs?: boolean;
+  cypressDirectory?: string;
+  addPlugin?: boolean;
+}

package/src/generators/storybook-configuration/schema.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactStorybookConfigure",
+  "title": "React Storybook Configure",
+  "description": "Set up Storybook for a React app or library.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "aliases": ["name", "projectName"],
+      "description": "Project for which to generate Storybook configuration.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "For which project do you want to generate Storybook configuration?",
+      "x-dropdown": "projects",
+      "x-priority": "important"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "alias": ["configureTestRunner"],
+      "default": true
+    },
+    "configureCypress": {
+      "type": "boolean",
+      "description": "Run the cypress-configure generator.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v19."
+    },
+    "generateStories": {
+      "type": "boolean",
+      "description": "Automatically generate `*.stories.ts` files for components declared in this project?",
+      "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
+      "default": true,
+      "x-priority": "important"
+    },
+    "generateCypressSpecs": {
+      "type": "boolean",
+      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v19."
+    },
+    "configureStaticServe": {
+      "type": "boolean",
+      "description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.",
+      "x-prompt": "Configure a static file server for the storybook instance?",
+      "default": true,
+      "x-priority": "important"
+    },
+    "cypressDirectory": {
+      "type": "string",
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v19."
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript story files rather than TypeScript story files.",
+      "default": false
+    },
+    "tsConfiguration": {
+      "type": "boolean",
+      "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
+      "default": true
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
+    }
+  },
+  "required": ["project"],
+  "examplesFile": "../../../docs/storybook-configuration-examples.md"
+}

package/src/migrations/update-15-3-0/install-webpack-rollup-dependencies.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export declare function installWebpackRollupDependencies(tree: Tree): import("@nx/devkit").GeneratorCallback;
+export default installWebpackRollupDependencies;

package/src/migrations/update-15-3-0/install-webpack-rollup-dependencies.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installWebpackRollupDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+function installWebpackRollupDependencies(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    let shouldInstall = false;
+    for (const [, project] of projects) {
+        if (project.targets?.build?.executor === '@nrwl/webpack:webpack' ||
+            project.targets?.build?.executor === '@nrwl/rollup:rollup' ||
+            project.targets?.build?.executor === '@nrwl/web:rollup') {
+            shouldInstall = true;
+            break;
+        }
+    }
+    if (shouldInstall) {
+        // These were previously dependencies of `@nrwl/react` but we've removed them
+        // to accommodate different bundlers and test runners.
+        return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@babel/preset-react': '^7.14.5',
+            '@pmmmwh/react-refresh-webpack-plugin': '^0.5.7',
+            '@svgr/webpack': '^6.1.2',
+            'css-loader': '^6.4.0',
+            'react-refresh': '^0.10.0',
+            'style-loader': '^3.3.0',
+            stylus: '^0.55.0',
+            'stylus-loader': '^7.1.0',
+            'url-loader': '^4.1.1',
+            webpack: '^5.75.0',
+            'webpack-merge': '^5.8.0',
+            '@nrwl/webpack': versions_1.nxVersion,
+        });
+    }
+}
+exports.installWebpackRollupDependencies = installWebpackRollupDependencies;
+exports.default = installWebpackRollupDependencies;

package/src/migrations/update-15-3-0/update-rollup-executor.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export declare function updateRollupExecutor(tree: Tree): void;
+export default updateRollupExecutor;

package/src/migrations/update-15-3-0/update-rollup-executor.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateRollupExecutor = void 0;
+const devkit_1 = require("@nx/devkit");
+function updateRollupExecutor(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const [name, project] of projects) {
+        if (project.targets?.build?.executor === '@nrwl/web:rollup') {
+            project.targets.build.executor = '@nrwl/rollup:rollup';
+            (0, devkit_1.updateProjectConfiguration)(tree, name, project);
+        }
+    }
+}
+exports.updateRollupExecutor = updateRollupExecutor;
+exports.default = updateRollupExecutor;