miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

cleanup(storybook): rename name to project to be consistent with other generators (#20181)

Browse Source
This commit is contained in:
MaxKless 2023-11-10 16:22:43 +00:00 committed by GitHub
parent 100f3aedbc
commit e8e8f94f7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 101 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/generated/packages/angular/generators/storybook-configuration.json
View File

@ -9,9 +9,9 @@
"cli": "nx", "cli": "nx",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 }, "$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?", "x-prompt": "For which project do you want to generate Storybook configuration?",
@ -90,7 +90,7 @@
} }
}, },
"additionalProperties": false, "additionalProperties": false,
"required": ["name"], "required": ["project"],
"examplesFile": "This generator will set up Storybook for your **Angular** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#generate-storybook-configuration-for-an-angular-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/angular:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/angular:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "examplesFile": "This generator will set up Storybook for your **Angular** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#generate-storybook-configuration-for-an-angular-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/angular:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/angular:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
"presets": [] "presets": []
}, },

6
docs/generated/packages/react/generators/storybook-configuration.json
View File

@ -9,9 +9,9 @@
"description": "Set up Storybook for a React app or library.", "description": "Set up Storybook for a React app or library.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 }, "$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?", "x-prompt": "For which project do you want to generate Storybook configuration?",
@ -87,7 +87,7 @@
] ]
} }
}, },
"required": ["name"], "required": ["project"],
"examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#generate-storybook-configuration-for-an-react-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/react:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#generate-storybook-configuration-for-an-react-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/react:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
"presets": [] "presets": []
}, },

6
docs/generated/packages/storybook/generators/configuration.json
View File

@ -9,9 +9,9 @@
"description": "Add Storybook configuration to a UI library or an application.", "description": "Add Storybook configuration to a UI library or an application.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 }, "$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?", "x-prompt": "For which project do you want to generate Storybook configuration?",
@ -103,7 +103,7 @@
"x-priority": "internal" "x-priority": "internal"
} }
}, },
"required": ["name", "uiFramework"], "required": ["project", "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\n{% callout type=\"info\" title=\"Nx uses Storybook 7\" %}\nNx 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. Please follow our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n{% /callout %}\n\nIf you are using Angular, React, Next.js, Vue or React Native in your project, it's best to use the framework specific Storybook configuration generator:\n\n- [React Storybook Configuration Generator](/nx-api/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/nx-api/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration)\n\n- [Vue Storybook Configuration Generator](/nx-api/vue/generators/storybook-configuration)\n\nIf you are not using one of the framework-specific generators mentioned above, when 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 set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, all the necessary dependencies will be installed. Also, 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/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\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\n## Examples\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "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\n{% callout type=\"info\" title=\"Nx uses Storybook 7\" %}\nNx 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. Please follow our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n{% /callout %}\n\nIf you are using Angular, React, Next.js, Vue or React Native in your project, it's best to use the framework specific Storybook configuration generator:\n\n- [React Storybook Configuration Generator](/nx-api/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/nx-api/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration)\n\n- [Vue Storybook Configuration Generator](/nx-api/vue/generators/storybook-configuration)\n\nIf you are not using one of the framework-specific generators mentioned above, when 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 set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, all the necessary dependencies will be installed. Also, 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/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\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\n## Examples\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
"presets": [] "presets": []
}, },

6
docs/generated/packages/vue/generators/storybook-configuration.json
View File

@ -9,9 +9,9 @@
"description": "Set up Storybook for a Vue project.", "description": "Set up Storybook for a Vue project.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 }, "$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?", "x-prompt": "For which project do you want to generate Storybook configuration?",
@ -72,7 +72,7 @@
] ]
} }
}, },
"required": ["name"], "required": ["project"],
"examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/vue:storybook-configuration generator.\n---\n\nThis generator will set up Storybook for your **Vue** project. You can also use this generator to generate Storybook configuration for your **Nuxt** project.\n\n```bash\nnx g @nx/vue:storybook-configuration project-name\n```\n\nor\n\n```bash\nnx g @nx/nuxt:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Vue overview page](/recipes/storybook/overview-vue#generate-storybook-configuration-for-a-vue-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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/vue/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/vue:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/vue:storybook-configuration generator.\n---\n\nThis generator will set up Storybook for your **Vue** project. You can also use this generator to generate Storybook configuration for your **Nuxt** project.\n\n```bash\nnx g @nx/vue:storybook-configuration project-name\n```\n\nor\n\n```bash\nnx g @nx/nuxt:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Vue overview page](/recipes/storybook/overview-vue#generate-storybook-configuration-for-a-vue-project).\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, 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/vue/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/vue:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
"presets": [] "presets": []
}, },

6
packages/angular/src/generators/storybook-configuration/lib/generate-stories.ts
View File

@ -8,15 +8,15 @@ export async function generateStories(
tree: Tree, tree: Tree,
options: StorybookConfigurationOptions options: StorybookConfigurationOptions
) { ) {
const project = readProjectConfiguration(tree, options.name); const project = readProjectConfiguration(tree, options.project);
const e2eProjectName = getE2eProjectName( const e2eProjectName = getE2eProjectName(
options.name, options.project,
project.root, project.root,
options.cypressDirectory options.cypressDirectory
); );
await angularStoriesGenerator(tree, { await angularStoriesGenerator(tree, {
name: options.name, name: options.project,
generateCypressSpecs: generateCypressSpecs:
options.configureCypress && options.generateCypressSpecs, options.configureCypress && options.generateCypressSpecs,
cypressProject: e2eProjectName, cypressProject: e2eProjectName,

2
packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts
View File

@ -8,7 +8,7 @@ export async function generateStorybookConfiguration(
): Promise<GeneratorCallback> { ): Promise<GeneratorCallback> {
const { configurationGenerator } = ensurePackage('@nx/storybook', nxVersion); const { configurationGenerator } = ensurePackage('@nx/storybook', nxVersion);
return await configurationGenerator(tree, { return await configurationGenerator(tree, {
name: options.name, project: options.project,
uiFramework: '@storybook/angular', uiFramework: '@storybook/angular',
configureCypress: options.configureCypress, configureCypress: options.configureCypress,
linter: options.linter, linter: options.linter,

2
packages/angular/src/generators/storybook-configuration/schema.d.ts vendored
View File

@ -4,7 +4,7 @@ export interface StorybookConfigurationOptions {
configureStaticServe?: boolean; configureStaticServe?: boolean;
generateStories: boolean; generateStories: boolean;
linter: Linter; linter: Linter;
name: string; project: string;
tsConfiguration?: boolean; tsConfiguration?: boolean;
skipFormat?: boolean; skipFormat?: boolean;
ignorePaths?: string[]; ignorePaths?: string[];

6
packages/angular/src/generators/storybook-configuration/schema.json
View File

@ -6,9 +6,9 @@
"cli": "nx", "cli": "nx",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$default": {
"$source": "argv", "$source": "argv",
@ -93,6 +93,6 @@
} }
}, },
"additionalProperties": false, "additionalProperties": false,
"required": ["name"], "required": ["project"],
"examplesFile": "../../../docs/storybook-configuration-examples.md" "examplesFile": "../../../docs/storybook-configuration-examples.md"
} }

10
packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts
View File

@ -46,7 +46,7 @@ describe('StorybookConfiguration generator', () => {
it('should only configure storybook', async () => { it('should only configure storybook', async () => {
await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{ await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{
name: libName, project: libName,
generateStories: false, generateStories: false,
}); });
@ -66,7 +66,7 @@ describe('StorybookConfiguration generator', () => {
it('should configure storybook to use webpack 5', async () => { it('should configure storybook to use webpack 5', async () => {
await storybookConfigurationGenerator(tree, { await storybookConfigurationGenerator(tree, {
name: libName, project: libName,
generateStories: false, generateStories: false,
linter: Linter.None, linter: Linter.None,
}); });
@ -78,7 +78,7 @@ describe('StorybookConfiguration generator', () => {
it('should configure storybook with interaction tests and install dependencies', async () => { it('should configure storybook with interaction tests and install dependencies', async () => {
await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{ await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{
name: libName, project: libName,
generateStories: true, generateStories: true,
}); });
@ -138,7 +138,7 @@ describe('StorybookConfiguration generator', () => {
}); });
await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{ await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{
name: libName, project: libName,
generateStories: true, generateStories: true,
}); });
@ -175,7 +175,7 @@ describe('StorybookConfiguration generator', () => {
}); });
await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{ await storybookConfigurationGenerator(tree, <StorybookConfigurationOptions>{
name: libName, project: libName,
generateStories: true, generateStories: true,
}); });

4
packages/nuxt/src/generators/storybook-configuration/configuration.spec.ts
View File

@ -36,7 +36,7 @@ describe('nuxt:storybook-configuration', () => {
it('should configure with vue3 framework and styles import', async () => { it('should configure with vue3 framework and styles import', async () => {
appTree = await createTestApp('test-ui-app'); appTree = await createTestApp('test-ui-app');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
}); });
expect( expect(
@ -59,7 +59,7 @@ describe('nuxt:storybook-configuration', () => {
appTree.write('test-ui-app/src/pages/about.vue', componentContent); appTree.write('test-ui-app/src/pages/about.vue', componentContent);
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
generateStories: true, generateStories: true,
}); });

2
packages/nuxt/src/generators/storybook-configuration/configuration.ts
View File

@ -21,7 +21,7 @@ export async function storybookConfigurationGenerator(
...options, ...options,
}); });
const projectConfiguration = readProjectConfiguration(host, options.name); const projectConfiguration = readProjectConfiguration(host, options.project);
const storybookConfigFolder = const storybookConfigFolder =
projectConfiguration.targets?.storybook?.options?.configDir; projectConfiguration.targets?.storybook?.options?.configDir;

2
packages/nuxt/src/generators/storybook-configuration/schema.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Linter } from '@nx/eslint'; import { Linter } from '@nx/eslint';
export interface Schema { export interface Schema {
name: string; project: string;
interactionTests?: boolean; interactionTests?: boolean;
generateStories?: boolean; generateStories?: boolean;
js?: boolean; js?: boolean;

6
packages/nuxt/src/generators/storybook-configuration/schema.json
View File

@ -6,9 +6,9 @@
"description": "Set up Storybook for a Nuxt project.", "description": "Set up Storybook for a Nuxt project.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$default": {
"$source": "argv", "$source": "argv",
@ -75,6 +75,6 @@
] ]
} }
}, },
"required": ["name"], "required": ["project"],
"examplesFile": "../../../docs/storybook-configuration-examples.md" "examplesFile": "../../../docs/storybook-configuration-examples.md"
} }

2
packages/react-native/src/generators/storybook-configuration/configuration.ts
View File

@ -38,7 +38,7 @@ export async function storybookConfigurationGenerator(
>('@nx/storybook', nxVersion); >('@nx/storybook', nxVersion);
const installTask = await configurationGenerator(host, { const installTask = await configurationGenerator(host, {
name: schema.name, project: schema.name,
uiFramework: '@storybook/react-native', uiFramework: '@storybook/react-native',
configureCypress: false, configureCypress: false,
js: false, js: false,

12
packages/react/src/generators/storybook-configuration/configuration.spec.ts
View File

@ -37,7 +37,7 @@ describe('react:storybook-configuration', () => {
it('should configure everything and install correct dependencies', async () => { it('should configure everything and install correct dependencies', async () => {
appTree = await createTestUILib('test-ui-lib'); appTree = await createTestUILib('test-ui-lib');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-lib', project: 'test-ui-lib',
}); });
expect( expect(
@ -59,7 +59,7 @@ describe('react:storybook-configuration', () => {
it('should generate stories for components', async () => { it('should generate stories for components', async () => {
appTree = await createTestUILib('test-ui-lib'); appTree = await createTestUILib('test-ui-lib');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-lib', project: 'test-ui-lib',
generateStories: true, generateStories: true,
}); });
@ -89,7 +89,7 @@ describe('react:storybook-configuration', () => {
` `
); );
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-lib', project: 'test-ui-lib',
generateStories: true, generateStories: true,
js: true, js: true,
}); });
@ -102,7 +102,7 @@ describe('react:storybook-configuration', () => {
it('should configure everything at once', async () => { it('should configure everything at once', async () => {
appTree = await createTestAppLib('test-ui-app'); appTree = await createTestAppLib('test-ui-app');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
}); });
expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy(); expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy();
@ -112,7 +112,7 @@ describe('react:storybook-configuration', () => {
it('should generate stories for components', async () => { it('should generate stories for components', async () => {
appTree = await createTestAppLib('test-ui-app'); appTree = await createTestAppLib('test-ui-app');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
generateStories: true, generateStories: true,
}); });
@ -130,7 +130,7 @@ describe('react:storybook-configuration', () => {
it('should generate stories for components without interaction tests', async () => { it('should generate stories for components without interaction tests', async () => {
appTree = await createTestAppLib('test-ui-app'); appTree = await createTestAppLib('test-ui-app');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
generateStories: true, generateStories: true,
interactionTests: false, interactionTests: false,
}); });

10
packages/react/src/generators/storybook-configuration/configuration.ts
View File

@ -14,14 +14,14 @@ async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
const { getE2eProjectName } = await import( const { getE2eProjectName } = await import(
'@nx/cypress/src/utils/project-name' '@nx/cypress/src/utils/project-name'
); );
const projectConfig = readProjectConfiguration(host, schema.name); const projectConfig = readProjectConfiguration(host, schema.project);
const cypressProject = getE2eProjectName( const cypressProject = getE2eProjectName(
schema.name, schema.project,
projectConfig.root, projectConfig.root,
schema.cypressDirectory schema.cypressDirectory
); );
await storiesGenerator(host, { await storiesGenerator(host, {
project: schema.name, project: schema.project,
generateCypressSpecs: generateCypressSpecs:
schema.configureCypress && schema.generateCypressSpecs, schema.configureCypress && schema.generateCypressSpecs,
js: schema.js, js: schema.js,
@ -41,7 +41,7 @@ export async function storybookConfigurationGenerator(
>('@nx/storybook', nxVersion); >('@nx/storybook', nxVersion);
let uiFramework = '@storybook/react-vite'; let uiFramework = '@storybook/react-vite';
const projectConfig = readProjectConfiguration(host, schema.name); const projectConfig = readProjectConfiguration(host, schema.project);
if ( if (
projectConfig.targets['build']?.executor === '@nx/webpack:webpack' || projectConfig.targets['build']?.executor === '@nx/webpack:webpack' ||
@ -53,7 +53,7 @@ export async function storybookConfigurationGenerator(
} }
const installTask = await configurationGenerator(host, { const installTask = await configurationGenerator(host, {
name: schema.name, project: schema.project,
configureCypress: schema.configureCypress, configureCypress: schema.configureCypress,
js: schema.js, js: schema.js,
linter: schema.linter, linter: schema.linter,

2
packages/react/src/generators/storybook-configuration/schema.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Linter } from '@nx/eslint'; import { Linter } from '@nx/eslint';
export interface StorybookConfigureSchema { export interface StorybookConfigureSchema {
name: string; project: string;
interactionTests?: boolean; interactionTests?: boolean;
generateStories?: boolean; generateStories?: boolean;
js?: boolean; js?: boolean;

6
packages/react/src/generators/storybook-configuration/schema.json
View File

@ -6,9 +6,9 @@
"description": "Set up Storybook for a React app or library.", "description": "Set up Storybook for a React app or library.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$default": {
"$source": "argv", "$source": "argv",
@ -90,6 +90,6 @@
] ]
} }
}, },
"required": ["name"], "required": ["project"],
"examplesFile": "../../../docs/storybook-configuration-examples.md" "examplesFile": "../../../docs/storybook-configuration-examples.md"
} }

6
packages/storybook/src/generators/configuration/configuration-nested.spec.ts
View File

@ -85,7 +85,7 @@ describe('@nx/storybook:configuration for workspaces with Root project', () => {
it('should generate files for root app - js for tsConfiguration: false', async () => { it('should generate files for root app - js for tsConfiguration: false', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'web', project: 'web',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
tsConfiguration: false, tsConfiguration: false,
}); });
@ -99,7 +99,7 @@ describe('@nx/storybook:configuration for workspaces with Root project', () => {
writeJson(tree, 'apps/reapp/tsconfig.json', {}); writeJson(tree, 'apps/reapp/tsconfig.json', {});
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'reapp', project: 'reapp',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -112,7 +112,7 @@ describe('@nx/storybook:configuration for workspaces with Root project', () => {
expect(tree.exists('apps/reapp/.storybook/preview.ts')).toBeTruthy(); expect(tree.exists('apps/reapp/.storybook/preview.ts')).toBeTruthy();
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'web', project: 'web',
uiFramework: '@storybook/react-vite', uiFramework: '@storybook/react-vite',
}); });

36
packages/storybook/src/generators/configuration/configuration.spec.ts
View File

@ -59,7 +59,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
it('should generate TypeScript Configuration files by default', async () => { it('should generate TypeScript Configuration files by default', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib', project: 'test-ui-lib',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/angular', uiFramework: '@storybook/angular',
}); });
@ -76,7 +76,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
it('should update `tsconfig.lib.json` file', async () => { it('should update `tsconfig.lib.json` file', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib', project: 'test-ui-lib',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -93,7 +93,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
it('should update `tsconfig.json` file', async () => { it('should update `tsconfig.json` file', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib', project: 'test-ui-lib',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -132,7 +132,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib2', project: 'test-ui-lib2',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -155,7 +155,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib2', project: 'test-ui-lib2',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -171,7 +171,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
it('should generate TS config for project by default', async () => { it('should generate TS config for project by default', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib', project: 'test-ui-lib',
standaloneConfig: false, standaloneConfig: false,
uiFramework: '@storybook/angular', uiFramework: '@storybook/angular',
}); });
@ -186,7 +186,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
it('should add test-storybook target', async () => { it('should add test-storybook target', async () => {
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'test-ui-lib', project: 'test-ui-lib',
interactionTests: true, interactionTests: true,
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
@ -261,54 +261,54 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
tree.write('apps/wv1/vite.config.custom.ts', 'export default {}'); tree.write('apps/wv1/vite.config.custom.ts', 'export default {}');
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'reapp', project: 'reapp',
tsConfiguration: false, tsConfiguration: false,
uiFramework: '@storybook/react-vite', uiFramework: '@storybook/react-vite',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'main-vite', project: 'main-vite',
tsConfiguration: false, tsConfiguration: false,
uiFramework: '@storybook/react-vite', uiFramework: '@storybook/react-vite',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'main-vite-ts', project: 'main-vite-ts',
uiFramework: '@storybook/react-vite', uiFramework: '@storybook/react-vite',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'main-webpack', project: 'main-webpack',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'reappw', project: 'reappw',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'react-rollup', project: 'react-rollup',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'react-vite', project: 'react-vite',
uiFramework: '@storybook/react-vite', uiFramework: '@storybook/react-vite',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'nextapp', project: 'nextapp',
uiFramework: '@storybook/nextjs', uiFramework: '@storybook/nextjs',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'react-swc', project: 'react-swc',
uiFramework: '@storybook/react-webpack5', uiFramework: '@storybook/react-webpack5',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'wv1', project: 'wv1',
uiFramework: '@storybook/web-components-vite', uiFramework: '@storybook/web-components-vite',
}); });
await configurationGenerator(tree, { await configurationGenerator(tree, {
name: 'ww1', project: 'ww1',
uiFramework: '@storybook/web-components-webpack5', uiFramework: '@storybook/web-components-webpack5',
}); });
}); });

18
packages/storybook/src/generators/configuration/configuration.ts
View File

@ -56,7 +56,7 @@ export async function configurationGenerator(
const { projectType, targets, root } = readProjectConfiguration( const { projectType, targets, root } = readProjectConfiguration(
tree, tree,
schema.name schema.project
); );
const { nextBuildTarget, compiler, viteBuildTarget } = const { nextBuildTarget, compiler, viteBuildTarget } =
findStorybookAndBuildTargetsAndCompiler(targets); findStorybookAndBuildTargetsAndCompiler(targets);
@ -74,14 +74,14 @@ export async function configurationGenerator(
if (viteBuildTarget) { if (viteBuildTarget) {
if (schema.uiFramework === '@storybook/react-webpack5') { if (schema.uiFramework === '@storybook/react-webpack5') {
logger.info( logger.info(
`Your project ${schema.name} uses Vite as a bundler. `Your project ${schema.project} uses Vite as a bundler.
Nx will configure Storybook for this project to use Vite as well.` Nx will configure Storybook for this project to use Vite as well.`
); );
schema.uiFramework = '@storybook/react-vite'; schema.uiFramework = '@storybook/react-vite';
} }
if (schema.uiFramework === '@storybook/web-components-webpack5') { if (schema.uiFramework === '@storybook/web-components-webpack5') {
logger.info( logger.info(
`Your project ${schema.name} uses Vite as a bundler. `Your project ${schema.project} uses Vite as a bundler.
Nx will configure Storybook for this project to use Vite as well.` Nx will configure Storybook for this project to use Vite as well.`
); );
schema.uiFramework = '@storybook/web-components-vite'; schema.uiFramework = '@storybook/web-components-vite';
@ -105,7 +105,7 @@ export async function configurationGenerator(
createProjectStorybookDir( createProjectStorybookDir(
tree, tree,
schema.name, schema.project,
schema.uiFramework, schema.uiFramework,
schema.js, schema.js,
schema.tsConfiguration, schema.tsConfiguration,
@ -138,11 +138,11 @@ export async function configurationGenerator(
addStorybookToNamedInputs(tree); addStorybookToNamedInputs(tree);
if (schema.uiFramework === '@storybook/angular') { if (schema.uiFramework === '@storybook/angular') {
addAngularStorybookTask(tree, schema.name, schema.interactionTests); addAngularStorybookTask(tree, schema.project, schema.interactionTests);
} else { } else {
addStorybookTask( addStorybookTask(
tree, tree,
schema.name, schema.project,
schema.uiFramework, schema.uiFramework,
schema.interactionTests schema.interactionTests
); );
@ -154,10 +154,10 @@ export async function configurationGenerator(
// TODO(katerina): Nx 18 -> remove Cypress // TODO(katerina): Nx 18 -> remove Cypress
if (schema.configureCypress) { if (schema.configureCypress) {
const e2eProject = await getE2EProjectName(tree, schema.name); const e2eProject = await getE2EProjectName(tree, schema.project);
if (!e2eProject) { if (!e2eProject) {
const cypressTask = await cypressProjectGenerator(tree, { const cypressTask = await cypressProjectGenerator(tree, {
name: schema.name, name: schema.project,
js: schema.js, js: schema.js,
linter: schema.linter, linter: schema.linter,
directory: schema.cypressDirectory, directory: schema.cypressDirectory,
@ -170,7 +170,7 @@ export async function configurationGenerator(
tasks.push(cypressTask); tasks.push(cypressTask);
} else { } else {
logger.warn( logger.warn(
`There is already an e2e project setup for ${schema.name}, called ${e2eProject}.` `There is already an e2e project setup for ${schema.project}, called ${e2eProject}.`
); );
} }
} }

16
packages/storybook/src/generators/configuration/lib/util-functions.ts
View File

@ -141,20 +141,20 @@ export function addAngularStorybookTask(
export function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema) { export function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema) {
const nrwlWeb = ensurePackage<typeof import('@nx/web')>('@nx/web', nxVersion); const nrwlWeb = ensurePackage<typeof import('@nx/web')>('@nx/web', nxVersion);
nrwlWeb.webStaticServeGenerator(tree, { nrwlWeb.webStaticServeGenerator(tree, {
buildTarget: `${opts.name}:build-storybook`, buildTarget: `${opts.project}:build-storybook`,
outputPath: joinPathFragments('dist/storybook', opts.name), outputPath: joinPathFragments('dist/storybook', opts.project),
targetName: 'static-storybook', targetName: 'static-storybook',
}); });
const projectConfig = readProjectConfiguration(tree, opts.name); const projectConfig = readProjectConfiguration(tree, opts.project);
projectConfig.targets['static-storybook'].configurations = { projectConfig.targets['static-storybook'].configurations = {
ci: { ci: {
buildTarget: `${opts.name}:build-storybook:ci`, buildTarget: `${opts.project}:build-storybook:ci`,
}, },
}; };
updateProjectConfiguration(tree, opts.name, projectConfig); updateProjectConfiguration(tree, opts.project, projectConfig);
} }
export function createStorybookTsconfigFile( export function createStorybookTsconfigFile(
@ -282,7 +282,7 @@ export function configureTsProjectConfig(
tree: Tree, tree: Tree,
schema: StorybookConfigureSchema schema: StorybookConfigureSchema
) { ) {
const { name: projectName } = schema; const { project: projectName } = schema;
let tsConfigPath: string; let tsConfigPath: string;
let tsConfigContent: TsConfig; let tsConfigContent: TsConfig;
@ -323,7 +323,7 @@ export function configureTsSolutionConfig(
tree: Tree, tree: Tree,
schema: StorybookConfigureSchema schema: StorybookConfigureSchema
) { ) {
const { name: projectName } = schema; const { project: projectName } = schema;
const { root } = readProjectConfiguration(tree, projectName); const { root } = readProjectConfiguration(tree, projectName);
const tsConfigPath = join(root, 'tsconfig.json'); const tsConfigPath = join(root, 'tsconfig.json');
@ -368,7 +368,7 @@ export function configureTsSolutionConfig(
* This is done within the eslint config file. * This is done within the eslint config file.
*/ */
export function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema) { export function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema) {
const { name: projectName } = schema; const { project: projectName } = schema;
const { root } = readProjectConfiguration(tree, projectName); const { root } = readProjectConfiguration(tree, projectName);

2
packages/storybook/src/generators/configuration/schema.d.ts vendored
View File

@ -2,7 +2,7 @@ import { Linter } from '@nx/eslint';
import { UiFramework } from '../../utils/models'; import { UiFramework } from '../../utils/models';
export interface StorybookConfigureSchema { export interface StorybookConfigureSchema {
name: string; project: string;
uiFramework?: UiFramework; uiFramework?: UiFramework;
linter?: Linter; linter?: Linter;
js?: boolean; js?: boolean;

6
packages/storybook/src/generators/configuration/schema.json
View File

@ -6,9 +6,9 @@
"description": "Add Storybook configuration to a UI library or an application.", "description": "Add Storybook configuration to a UI library or an application.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$default": {
"$source": "argv", "$source": "argv",
@ -103,6 +103,6 @@
"x-priority": "internal" "x-priority": "internal"
} }
}, },
"required": ["name", "uiFramework"], "required": ["project", "uiFramework"],
"examplesFile": "../../../docs/configuration-generator-examples.md" "examplesFile": "../../../docs/configuration-generator-examples.md"
} }

10
packages/vue/src/generators/storybook-configuration/configuration.spec.ts
View File

@ -44,7 +44,7 @@ describe('vue:storybook-configuration', () => {
it('should configure everything and install correct dependencies', async () => { it('should configure everything and install correct dependencies', async () => {
appTree = await createTestUILib('test-ui-lib'); appTree = await createTestUILib('test-ui-lib');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-lib', project: 'test-ui-lib',
}); });
expect( expect(
@ -72,7 +72,7 @@ describe('vue:storybook-configuration', () => {
); );
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-lib', project: 'test-ui-lib',
generateStories: true, generateStories: true,
}); });
@ -90,7 +90,7 @@ describe('vue:storybook-configuration', () => {
it('should configure everything at once', async () => { it('should configure everything at once', async () => {
appTree = await createTestAppLib('test-ui-app'); appTree = await createTestAppLib('test-ui-app');
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
}); });
expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy(); expect(appTree.exists('test-ui-app/.storybook/main.ts')).toBeTruthy();
@ -104,7 +104,7 @@ describe('vue:storybook-configuration', () => {
componentContent componentContent
); );
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
generateStories: true, generateStories: true,
}); });
@ -123,7 +123,7 @@ describe('vue:storybook-configuration', () => {
componentContent componentContent
); );
await storybookConfigurationGenerator(appTree, { await storybookConfigurationGenerator(appTree, {
name: 'test-ui-app', project: 'test-ui-app',
generateStories: true, generateStories: true,
interactionTests: false, interactionTests: false,
}); });

4
packages/vue/src/generators/storybook-configuration/configuration.ts
View File

@ -5,7 +5,7 @@ import { nxVersion } from '../../utils/versions';
async function generateStories(host: Tree, schema: StorybookConfigureSchema) { async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
await storiesGenerator(host, { await storiesGenerator(host, {
project: schema.name, project: schema.project,
js: schema.js, js: schema.js,
ignorePaths: schema.ignorePaths, ignorePaths: schema.ignorePaths,
skipFormat: true, skipFormat: true,
@ -22,7 +22,7 @@ export async function storybookConfigurationGenerator(
>('@nx/storybook', nxVersion); >('@nx/storybook', nxVersion);
const installTask = await configurationGenerator(host, { const installTask = await configurationGenerator(host, {
name: schema.name, project: schema.project,
js: schema.js, js: schema.js,
linter: schema.linter, linter: schema.linter,
tsConfiguration: schema.tsConfiguration ?? true, // default is true tsConfiguration: schema.tsConfiguration ?? true, // default is true

2
packages/vue/src/generators/storybook-configuration/schema.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Linter } from '@nx/eslint'; import { Linter } from '@nx/eslint';
export interface StorybookConfigureSchema { export interface StorybookConfigureSchema {
name: string; project: string;
interactionTests?: boolean; interactionTests?: boolean;
generateStories?: boolean; generateStories?: boolean;
js?: boolean; js?: boolean;

6
packages/vue/src/generators/storybook-configuration/schema.json
View File

@ -6,9 +6,9 @@
"description": "Set up Storybook for a Vue project.", "description": "Set up Storybook for a Vue project.",
"type": "object", "type": "object",
"properties": { "properties": {
"name": { "project": {
"type": "string", "type": "string",
"aliases": ["project", "projectName"], "aliases": ["name", "projectName"],
"description": "Project for which to generate Storybook configuration.", "description": "Project for which to generate Storybook configuration.",
"$default": { "$default": {
"$source": "argv", "$source": "argv",
@ -75,6 +75,6 @@
] ]
} }
}, },
"required": ["name"], "required": ["project"],
"examplesFile": "../../../docs/storybook-configuration-examples.md" "examplesFile": "../../../docs/storybook-configuration-examples.md"
} }