{ "name": "configuration", "factory": "./src/generators/configuration/configuration", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxStorybookConfigure", "title": "Storybook Configuration", "description": "Add Storybook configuration to a UI library or an application.", "type": "object", "properties": { "name": { "type": "string", "aliases": ["project", "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?", "alias": ["configureTestRunner"], "default": true }, "configureCypress": { "type": "boolean", "description": "Run the cypress-configure generator.", "x-deprecated": "Use interactionTests instead. This option will be removed in v18." }, "cypressDirectory": { "type": "string", "description": "A directory where the Cypress project will be placed. Added at root by default.", "x-deprecated": "Use interactionTests instead. This option will be removed in v18." }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "none"], "default": "eslint" }, "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, "x-priority": "important" }, "standaloneConfig": { "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean", "default": true, "x-deprecated": "Nx only supports standaloneConfig" }, "configureStaticServe": { "type": "boolean", "description": "Add a static-storybook to serve the static storybook built files.", "default": false }, "bundler": { "description": "The Storybook builder to use.", "type": "string", "enum": ["vite", "webpack"], "default": "webpack", "x-priority": "important" }, "uiFramework": { "type": "string", "description": "Storybook UI Framework to use.", "enum": [ "@storybook/angular", "@storybook/html-webpack5", "@storybook/nextjs", "@storybook/preact-webpack5", "@storybook/react-webpack5", "@storybook/react-vite", "@storybook/server-webpack5", "@storybook/svelte-webpack5", "@storybook/svelte-vite", "@storybook/sveltekit", "@storybook/vue-webpack5", "@storybook/vue-vite", "@storybook/vue3-webpack5", "@storybook/vue3-vite", "@storybook/web-components-webpack5", "@storybook/web-components-vite" ], "aliases": ["storybook7UiFramework"], "x-prompt": "Choose the Storybook framework that you need to use.", "x-priority": "important", "hidden": false }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false, "x-priority": "internal" } }, "required": ["name", "uiFramework"], "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nx/storybook:configuration\n```\n\nStarting Nx 16, Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. You can read more about how to migrate to Storybook 7 in our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are:\n - `@storybook/angular`\n - `@storybook/html-webpack5`\n - `@storybook/nextjs`\n - `@storybook/preact-webpack5`\n - `@storybook/react-webpack5`\n - `@storybook/react-vite`\n - `@storybook/server-webpack5`\n - `@storybook/svelte-webpack5`\n - `@storybook/svelte-vite`\n - `@storybook/sveltekit`\n - `@storybook/vue-webpack5`\n - `@storybook/vue-vite`\n - `@storybook/vue3-webpack5`\n - `@storybook/vue3-vite`\n - `@storybook/web-components-webpack5`\n - `@storybook/web-components-vite`\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n", "presets": [] }, "description": "Add Storybook configuration to a UI library or an application.", "hidden": false, "implementation": "/packages/storybook/src/generators/configuration/configuration.ts", "aliases": [], "path": "/packages/storybook/src/generators/configuration/schema.json", "type": "generator" }