From e5edcb84db58e8dd40b9bcb58f72cc3514e91dbe Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Fri, 13 Jan 2023 20:22:17 +0200 Subject: [PATCH] feat(storybook): version 7 generators (#14308) --- docs/generated/manifests/menus.json | 16 + docs/generated/manifests/packages.json | 22 + docs/generated/packages-metadata.json | 22 + .../generators/storybook-configuration.json | 7 +- .../generators/storybook-configuration.json | 8 +- .../documents/migrate-storybook-7.md | 264 ++ .../packages/storybook/documents/overview.md | 19 +- .../storybook/documents/storybook-7-setup.md | 116 + .../storybook/generators/configuration.json | 30 +- .../packages/storybook/generators/init.json | 21 + docs/map.json | 10 + .../packages/storybook/migrate-storybook-7.md | 264 ++ .../packages/storybook/plugin-overview.md | 19 +- .../packages/storybook/storybook-7-setup.md | 116 + .../docs/storybook-configuration-examples.md | 8 + .../lib/generate-storybook-configuration.ts | 1 + .../storybook-configuration/schema.d.ts | 1 + .../storybook-configuration/schema.json | 5 + .../docs/storybook-configuration-examples.md | 10 +- .../storybook-configuration/configuration.ts | 5 + .../storybook-configuration/schema.d.ts | 1 + .../storybook-configuration/schema.json | 6 + .../docs/configuration-generator-examples.md | 14 + packages/storybook/project.json | 21 +- .../build-storybook.impl.spec.ts | 4 +- .../build-storybook/build-storybook.impl.ts | 17 +- .../storybook/storybook.impl.spec.ts | 4 +- .../src/executors/storybook/storybook.impl.ts | 21 +- packages/storybook/src/executors/utils.ts | 27 +- .../configuration-nested.spec.ts.snap | 8 +- .../configuration-v7.spec.ts.snap | 2766 +++++++++++++++++ .../configuration/configuration-v7.spec.ts | 381 +++ .../generators/configuration/configuration.ts | 105 +- .../.storybook/main.ts__tmpl__ | 42 + .../.storybook/preview.ts__tmpl__ | 0 .../.storybook/tsconfig.json__tmpl__ | 28 + .../.storybook/main.js__tmpl__ | 39 + .../.storybook/preview.js__tmpl__ | 0 .../.storybook/tsconfig.json__tmpl__ | 26 + .../.storybook/__mainName__.ts__tmpl__ | 8 +- .../.storybook/__mainName__.js__tmpl__ | 9 +- .../src/generators/configuration/schema.d.ts | 15 +- .../src/generators/configuration/schema.json | 28 + .../test-configs/various-projects.json | 1578 ++++++++++ .../configuration/util-functions.ts | 27 +- .../storybook/src/generators/init/init.ts | 140 +- .../storybook/src/generators/init/schema.d.ts | 15 +- .../storybook/src/generators/init/schema.json | 21 + .../update-12-1-0/fix-storybook-tsconfig.ts | 8 +- .../update-storybook-react-typings.ts | 8 +- .../update-storybook-styled-jsx-typings.ts | 8 +- .../src/{executors => utils}/models.ts | 12 +- packages/storybook/src/utils/utilities.ts | 67 +- packages/storybook/src/utils/versions.ts | 2 + 54 files changed, 6177 insertions(+), 243 deletions(-) create mode 100644 docs/generated/packages/storybook/documents/migrate-storybook-7.md create mode 100644 docs/generated/packages/storybook/documents/storybook-7-setup.md create mode 100644 docs/shared/packages/storybook/migrate-storybook-7.md create mode 100644 docs/shared/packages/storybook/storybook-7-setup.md create mode 100644 packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap create mode 100644 packages/storybook/src/generators/configuration/configuration-v7.spec.ts create mode 100644 packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/preview.ts__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/tsconfig.json__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/project-files-7/.storybook/preview.js__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/project-files-7/.storybook/tsconfig.json__tmpl__ create mode 100644 packages/storybook/src/generators/configuration/test-configs/various-projects.json rename packages/storybook/src/{executors => utils}/models.ts (78%) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index c506b0d9e039c..4524ce2dc1bc7 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -5764,6 +5764,22 @@ "children": [], "disableCollapsible": false }, + { + "name": "Storybook 7 setup guide", + "path": "/packages/storybook/documents/storybook-7-setup", + "id": "storybook-7-setup", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Migrate Storybook to version 7", + "path": "/packages/storybook/documents/migrate-storybook-7", + "id": "migrate-storybook-7", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Storybook best practices for making the most out of Nx", "path": "/packages/storybook/documents/best-practices", diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index 6f578802941f0..97581fb2ed5bd 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -2390,6 +2390,28 @@ "tags": [], "originalFilePath": "shared/packages/storybook/plugin-angular" }, + "/packages/storybook/documents/storybook-7-setup": { + "id": "storybook-7-setup", + "name": "Storybook 7 setup guide", + "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "file": "generated/packages/storybook/documents/storybook-7-setup", + "itemList": [], + "isExternal": false, + "path": "/packages/storybook/documents/storybook-7-setup", + "tags": [], + "originalFilePath": "shared/packages/storybook/storybook-7-setup" + }, + "/packages/storybook/documents/migrate-storybook-7": { + "id": "migrate-storybook-7", + "name": "Migrate Storybook to version 7", + "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "file": "generated/packages/storybook/documents/migrate-storybook-7", + "itemList": [], + "isExternal": false, + "path": "/packages/storybook/documents/migrate-storybook-7", + "tags": [], + "originalFilePath": "shared/packages/storybook/migrate-storybook-7" + }, "/packages/storybook/documents/best-practices": { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index ac4c0e486dc91..f0954480e1d6b 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -2363,6 +2363,28 @@ "tags": [], "originalFilePath": "shared/packages/storybook/plugin-angular" }, + { + "id": "storybook-7-setup", + "name": "Storybook 7 setup guide", + "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "file": "generated/packages/storybook/documents/storybook-7-setup", + "itemList": [], + "isExternal": false, + "path": "storybook/documents/storybook-7-setup", + "tags": [], + "originalFilePath": "shared/packages/storybook/storybook-7-setup" + }, + { + "id": "migrate-storybook-7", + "name": "Migrate Storybook to version 7", + "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "file": "generated/packages/storybook/documents/migrate-storybook-7", + "itemList": [], + "isExternal": false, + "path": "storybook/documents/migrate-storybook-7", + "tags": [], + "originalFilePath": "shared/packages/storybook/migrate-storybook-7" + }, { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json index f3165cb6702a9..d426d1a9645b7 100644 --- a/docs/generated/packages/angular/generators/storybook-configuration.json +++ b/docs/generated/packages/angular/generators/storybook-configuration.json @@ -75,11 +75,16 @@ "configureTestRunner": { "type": "boolean", "description": "Add a Storybook Test-Runner target." + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "additionalProperties": false, "required": ["name"], - "examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nrwl/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/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 `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for Angular - Cypress section](/packages/storybook/documents/overview-angular#cypress-tests-for-stories).\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- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\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` for the generator to work.\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 using TypeScript\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --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\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/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", + "examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nrwl/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/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 `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for Angular - Cypress section](/packages/storybook/documents/overview-angular#cypress-tests-for-stories).\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- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\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` for the generator to work.\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 using TypeScript\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --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\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/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\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n", "presets": [] }, "description": "Adds Storybook configuration to a project.", diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json index 4ecaf79fee445..1c4396d251b69 100644 --- a/docs/generated/packages/react/generators/storybook-configuration.json +++ b/docs/generated/packages/react/generators/storybook-configuration.json @@ -83,10 +83,16 @@ "description": "The Storybook builder to use.", "enum": ["vite", "webpack"], "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" } }, "required": ["name"], - "examplesFile": "This generator will set up Storybook for your React project.\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/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 `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/packages/storybook/documents/overview-react#cypress-tests-for-stories).\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- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\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` for the generator to work.\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 using TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --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\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/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\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/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", + "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.\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/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 `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/packages/storybook/documents/overview-react#cypress-tests-for-stories).\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- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\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` for the generator to work.\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 using TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --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\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/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\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/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 for Storybook version 7\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n", "presets": [] }, "description": "Set up storybook for a React app or library.", diff --git a/docs/generated/packages/storybook/documents/migrate-storybook-7.md b/docs/generated/packages/storybook/documents/migrate-storybook-7.md new file mode 100644 index 0000000000000..e63fc33afef17 --- /dev/null +++ b/docs/generated/packages/storybook/documents/migrate-storybook-7.md @@ -0,0 +1,264 @@ +# Migrate to Storybook to version 7 + +{% callout type="warning" title="Storybook 7 is in beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). Things are evolving dynamically, so it would be better to _avoid using in production_. If you want to use the stable, [6.5 version](https://storybook.js.org/releases/6.5), please go to the [Storybook plugin overview guide](/packages/storybook) to get started. +{% /callout %} + +{% callout type="info" title="Setting up Storybook 7 in a new workspace" %} +For settin up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured already, please refer to our [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup). +{% /callout %} + +Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and things are evolving dynamically, so it would be better to _avoid using in production_. + +You can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 7. This guide will show you how to do that. + +## Use the Storybook CLI to upgrade + +You can take advantage of the Storybook CLI to automatically migrate some settings of your Storybook setup. For a full guide to migration using the Storybook CLI, please refer to the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). + +The Storybook migration scripts do not work perfectly with Nx, however we can use them to get the latest beta versions of our packages, remove some unused packages, and get a hint of some settings that we will need to change manually, eventually. + +{% callout type="warning" title="Don't use in production" %} +Please take extra care when migrating your existing Storybook setup to version 7. Do not use in production, since it's still in beta. +{% /callout %} + +Let's see the steps we can make to migrate our Storybook setup to version 7. + +### 1. Run the `upgrade` command of the Storybook CLI + +```bash +npx storybook@next upgrade --prerelease +``` + +This will: + +- Upgrade your dependencies to the latest prerelease version +- Run a number of migration scripts (code generators and modifiers) - upon approval + +For more info, see [here](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). + +### 2. Click yes to the automigration prompts + +The Storybook CLI will prompt you to run some code generators and modifiers. + +Click `yes` to the following: + +- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like. +- `eslintPlugin`: installs the `eslint-plugin-storybook` +- `storybook-binary`: installs Storybook's `storybook` binary +- `newFrameworks`: removed unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`) + +Click `no` to the following: + +- `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies + +### 3. Restore the root `.storybook/main.js|ts` file + +You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that, along with the `autodocs` option. + +So, remove: + +```ts + framework: { + name: '@storybook/angular', + options: {} + } +``` + +from your root `.storybook/main.js|ts` file. + +### 3. Edit all the project-level `.storybook/main.js|ts` files + +Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options. + +#### Remove builder + +In your project-level `.storybook/main.js|ts` files, remove the `builder` from `core` options. + +Your core options most probably look like this: + +```ts +core: { ...rootMain.core, builder: '@storybook/builder-vite' }, +``` + +You must remove the `builder`, or you can also delete the `core` object entirely. + +#### Add framework + +Choose the `framework` carefully. The list of available frameworks is: + +- `@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` + +#### For Angular projects + +Choose the `@storybook/angular` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/angular', + options: {} + } +``` + +#### For React projects using `'@storybook/builder-vite'` + +Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/react-vite', + options: {} + } +``` + +#### For React projects using `'@storybook/builder-webpack5'` + +Choose the `@storybook/react-webpack5` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/react-webpack5', + options: {} + } +``` + +#### For Next.js projects + +Choose the `@storybook/nextjs` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/nextjs', + options: {} + } +``` + +#### For Web Components projects using `'@storybook/builder-vite'` + +Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/web-components-vite', + options: {} + } +``` + +#### For Web Components projects using `'@storybook/builder-webpack5'` + +Choose the `@storybook/web-components-webpack5` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/web-components-webpack5', + options: {} + } +``` + +#### For the rest of the projects + +You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file. + +#### Resulting project-level `.storybook/main.js|ts` file + +Here is an example of a project-level `.storybook/main.js|ts` file: + +```ts +const rootMain = require('../../../.storybook/main'); + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.mdx', + '../src/app/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [...rootMain.addons], + framework: { + name: '@storybook/angular', + options: {}, + }, +}; +``` + +### 4. For Vite.js projects + +Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files. + +```ts + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '', + }), + ], + }); + }, +``` + +This will take care of any path resolution issues. + +An example of a project-level `.storybook/main.js|ts` file for a Vite.js project: + +```ts +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; +const rootMain = require('../../../.storybook/main'); + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.mdx', + '../src/app/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [...rootMain.addons], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/react-vite', + options: {}, + }, +}; +``` + +## Use Storybook 7 beta + +You can now use Storybook 7 beta! 🎉 + +```bash +npx nx build-storybook PROJECT_NAME +``` + +and + +```bash +npx nx storybook PROJECT_NAME +``` + +## Report any issues and bugs + +Since this is a beta version, there are bound to be some issues and bugs. Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index 3b69dc88450b1..c168381acc03d 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -2,14 +2,31 @@ This guide will briefly walk you through using Storybook within an Nx workspace. +{% callout type="info" title="Try out Storybook 7 beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). However, you can try it out with Nx by following the instructions in the [Storybook 7 setup](/packages/storybook/documents/storybook-7-setup) guide. +{% /callout %} + ## Setting Up Storybook ### Add the Storybook plugin +{% tabs %} +{% tab label="yarn" %} + ```shell -yarn add --dev @nrwl/storybook +yarn add -D @nrwl/storybook ``` +{% /tab %} +{% tab label="npm" %} + +```shell +npm install -D @nrwl/storybook +``` + +{% /tab %} +{% /tabs %} + ## Using Storybook ### Generating Storybook Configuration diff --git a/docs/generated/packages/storybook/documents/storybook-7-setup.md b/docs/generated/packages/storybook/documents/storybook-7-setup.md new file mode 100644 index 0000000000000..d90c9466d80b6 --- /dev/null +++ b/docs/generated/packages/storybook/documents/storybook-7-setup.md @@ -0,0 +1,116 @@ +# Storybook 7 is here - and Nx is ready + +{% callout type="warning" title="Storybook 7 is in beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). Things are evolving dynamically, so it would be better to _avoid using in production_. If you want to use the stable, [6.5 version](https://storybook.js.org/releases/6.5), please go to the [Storybook plugin overview guide](/packages/storybook) to get started. +{% /callout %} + +Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and things are evolving dynamically, so it would be better to _avoid using in production_. + +Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies, and creating the corresponding version 7 configuration files. + +So, let's see how to get started with Storybook 7 and Nx. + +## Setting Up Storybook 7 in a _new_ Nx Workspace + +In this guide we will see how to set up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured. + +{% callout type="warning" title="Migrating existing Storybook configuration" %} +For migrating your existing Nx workspace with existing Storybook configuration to use Storybook version 7, please refer to our [Storybook 7 migration guide](/packages/storybook/documents/migrate-storybook-7). +{% /callout %} + +### Add the Storybook plugin + +{% tabs %} +{% tab label="yarn" %} + +```shell +yarn add -D @nrwl/storybook +``` + +{% /tab %} +{% tab label="npm" %} + +```shell +npm install -D @nrwl/storybook +``` + +{% /tab %} +{% /tabs %} + +## Using Storybook + +### Generating Storybook Configuration + +You can generate Storybook configuration for an individual project with this command: + +```shell +nx g @nrwl/storybook:configuration project-name --storybook7betaConfiguration --storybook7UiFramework=@storybook/react-webpack5 +``` + +In the field `storybook7UiFramework` you must choose one of the following Storybook frameworks: + +- `@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` + +In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application. + +If you are using one of the framework-specific generators (e.g. [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), or [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration) for React and Nextjs projects, or [`@nrwl/react-native:storybook-configuration`](<(/packages/react-native/generators/storybook-configuration)>)), the generator will automatically choose the correct framework for you. + +Choosing one of these frameworks will have the following effects on your workspace: + +1. Nx will install all the required Storybook packages that go with it. + +2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook. + +3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project. + +4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook. + +5. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance. + +### Changes from the v6.5 Storybook configuration + +The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see: + +#### Changes in `.storybook/main.js|ts` file + +- No longer set the `core` field which contains the `builder` option. +- The `framework` field is now mandatory, and it "replaces" the `builder` configuration. You can read more [in the Storybook docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field). +- Nx no longer adds the `webpackFinal` field to the `.storybook/main.js|ts` files. This is just for the sake of simplicity. You can still edit your webpack configuration by using the `webpackFinal` field, just as you can edit your Vite configuration by using the `viteFinal` field. You can read more about how to customize your webpack configuration [in the Storybook webpack docs](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config), and you can read more about how to customize your Vite configuration [in the Storybook Vite docs](https://storybook.js.org/docs/react/builders/vite#configuration). + +#### Changes in the `storybook` and `build-storybook` targets + +- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that. +- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nrwl/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nrwl/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI. + +## Use Storybook 7 beta + +You can now use Storybook 7 beta! 🎉 + +```bash +npx nx build-storybook PROJECT_NAME +``` + +and + +```bash +npx nx storybook PROJECT_NAME +``` + +## Report any issues and bugs + +Since this is a beta version, there are bound to be some issues and bugs. Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 04eaca63bdb05..b0c9a4a7afb06 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/docs/generated/packages/storybook/generators/configuration.json @@ -76,10 +76,38 @@ "x-prompt": "Which Storybook builder do you want to use?", "default": "webpack", "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" + }, + "storybook7UiFramework": { + "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" + ] } }, "required": ["name"], - "examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\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: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\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](https://nx.dev/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 @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --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", + "examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\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: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\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](https://nx.dev/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 @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --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\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true\n```\n\nOR\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n", "presets": [] }, "description": "Add Storybook configuration to a UI library or an application.", diff --git a/docs/generated/packages/storybook/generators/init.json b/docs/generated/packages/storybook/generators/init.json index 8629f60335b4b..bd8e507c5debe 100644 --- a/docs/generated/packages/storybook/generators/init.json +++ b/docs/generated/packages/storybook/generators/init.json @@ -13,6 +13,21 @@ "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", "@storybook/react", "@storybook/html", "@storybook/web-components", @@ -31,6 +46,12 @@ "x-prompt": "Which bundler do you want to use?", "default": "webpack", "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" } }, "presets": [] diff --git a/docs/map.json b/docs/map.json index aacdae4dafc96..6e496a9c3c533 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1664,6 +1664,16 @@ "name": "Set up Storybook for Angular Projects", "file": "shared/packages/storybook/plugin-angular" }, + { + "id": "storybook-7-setup", + "name": "Storybook 7 setup guide", + "file": "shared/packages/storybook/storybook-7-setup" + }, + { + "id": "migrate-storybook-7", + "name": "Migrate Storybook to version 7", + "file": "shared/packages/storybook/migrate-storybook-7" + }, { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", diff --git a/docs/shared/packages/storybook/migrate-storybook-7.md b/docs/shared/packages/storybook/migrate-storybook-7.md new file mode 100644 index 0000000000000..e63fc33afef17 --- /dev/null +++ b/docs/shared/packages/storybook/migrate-storybook-7.md @@ -0,0 +1,264 @@ +# Migrate to Storybook to version 7 + +{% callout type="warning" title="Storybook 7 is in beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). Things are evolving dynamically, so it would be better to _avoid using in production_. If you want to use the stable, [6.5 version](https://storybook.js.org/releases/6.5), please go to the [Storybook plugin overview guide](/packages/storybook) to get started. +{% /callout %} + +{% callout type="info" title="Setting up Storybook 7 in a new workspace" %} +For settin up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured already, please refer to our [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup). +{% /callout %} + +Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and things are evolving dynamically, so it would be better to _avoid using in production_. + +You can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 7. This guide will show you how to do that. + +## Use the Storybook CLI to upgrade + +You can take advantage of the Storybook CLI to automatically migrate some settings of your Storybook setup. For a full guide to migration using the Storybook CLI, please refer to the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). + +The Storybook migration scripts do not work perfectly with Nx, however we can use them to get the latest beta versions of our packages, remove some unused packages, and get a hint of some settings that we will need to change manually, eventually. + +{% callout type="warning" title="Don't use in production" %} +Please take extra care when migrating your existing Storybook setup to version 7. Do not use in production, since it's still in beta. +{% /callout %} + +Let's see the steps we can make to migrate our Storybook setup to version 7. + +### 1. Run the `upgrade` command of the Storybook CLI + +```bash +npx storybook@next upgrade --prerelease +``` + +This will: + +- Upgrade your dependencies to the latest prerelease version +- Run a number of migration scripts (code generators and modifiers) - upon approval + +For more info, see [here](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). + +### 2. Click yes to the automigration prompts + +The Storybook CLI will prompt you to run some code generators and modifiers. + +Click `yes` to the following: + +- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like. +- `eslintPlugin`: installs the `eslint-plugin-storybook` +- `storybook-binary`: installs Storybook's `storybook` binary +- `newFrameworks`: removed unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`) + +Click `no` to the following: + +- `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies + +### 3. Restore the root `.storybook/main.js|ts` file + +You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that, along with the `autodocs` option. + +So, remove: + +```ts + framework: { + name: '@storybook/angular', + options: {} + } +``` + +from your root `.storybook/main.js|ts` file. + +### 3. Edit all the project-level `.storybook/main.js|ts` files + +Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options. + +#### Remove builder + +In your project-level `.storybook/main.js|ts` files, remove the `builder` from `core` options. + +Your core options most probably look like this: + +```ts +core: { ...rootMain.core, builder: '@storybook/builder-vite' }, +``` + +You must remove the `builder`, or you can also delete the `core` object entirely. + +#### Add framework + +Choose the `framework` carefully. The list of available frameworks is: + +- `@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` + +#### For Angular projects + +Choose the `@storybook/angular` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/angular', + options: {} + } +``` + +#### For React projects using `'@storybook/builder-vite'` + +Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/react-vite', + options: {} + } +``` + +#### For React projects using `'@storybook/builder-webpack5'` + +Choose the `@storybook/react-webpack5` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/react-webpack5', + options: {} + } +``` + +#### For Next.js projects + +Choose the `@storybook/nextjs` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/nextjs', + options: {} + } +``` + +#### For Web Components projects using `'@storybook/builder-vite'` + +Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/web-components-vite', + options: {} + } +``` + +#### For Web Components projects using `'@storybook/builder-webpack5'` + +Choose the `@storybook/web-components-webpack5` framework. So add this in your project-level `.storybook/main.js|ts` file: + +```ts + framework: { + name: '@storybook/web-components-webpack5', + options: {} + } +``` + +#### For the rest of the projects + +You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file. + +#### Resulting project-level `.storybook/main.js|ts` file + +Here is an example of a project-level `.storybook/main.js|ts` file: + +```ts +const rootMain = require('../../../.storybook/main'); + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.mdx', + '../src/app/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [...rootMain.addons], + framework: { + name: '@storybook/angular', + options: {}, + }, +}; +``` + +### 4. For Vite.js projects + +Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files. + +```ts + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '', + }), + ], + }); + }, +``` + +This will take care of any path resolution issues. + +An example of a project-level `.storybook/main.js|ts` file for a Vite.js project: + +```ts +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; +const rootMain = require('../../../.storybook/main'); + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.mdx', + '../src/app/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [...rootMain.addons], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/react-vite', + options: {}, + }, +}; +``` + +## Use Storybook 7 beta + +You can now use Storybook 7 beta! 🎉 + +```bash +npx nx build-storybook PROJECT_NAME +``` + +and + +```bash +npx nx storybook PROJECT_NAME +``` + +## Report any issues and bugs + +Since this is a beta version, there are bound to be some issues and bugs. Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index 3b69dc88450b1..c168381acc03d 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -2,14 +2,31 @@ This guide will briefly walk you through using Storybook within an Nx workspace. +{% callout type="info" title="Try out Storybook 7 beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). However, you can try it out with Nx by following the instructions in the [Storybook 7 setup](/packages/storybook/documents/storybook-7-setup) guide. +{% /callout %} + ## Setting Up Storybook ### Add the Storybook plugin +{% tabs %} +{% tab label="yarn" %} + ```shell -yarn add --dev @nrwl/storybook +yarn add -D @nrwl/storybook ``` +{% /tab %} +{% tab label="npm" %} + +```shell +npm install -D @nrwl/storybook +``` + +{% /tab %} +{% /tabs %} + ## Using Storybook ### Generating Storybook Configuration diff --git a/docs/shared/packages/storybook/storybook-7-setup.md b/docs/shared/packages/storybook/storybook-7-setup.md new file mode 100644 index 0000000000000..d90c9466d80b6 --- /dev/null +++ b/docs/shared/packages/storybook/storybook-7-setup.md @@ -0,0 +1,116 @@ +# Storybook 7 is here - and Nx is ready + +{% callout type="warning" title="Storybook 7 is in beta" %} +[Storybook version 7 is still in beta](https://storybook.js.org/blog/7-0-beta/). Things are evolving dynamically, so it would be better to _avoid using in production_. If you want to use the stable, [6.5 version](https://storybook.js.org/releases/6.5), please go to the [Storybook plugin overview guide](/packages/storybook) to get started. +{% /callout %} + +Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and things are evolving dynamically, so it would be better to _avoid using in production_. + +Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies, and creating the corresponding version 7 configuration files. + +So, let's see how to get started with Storybook 7 and Nx. + +## Setting Up Storybook 7 in a _new_ Nx Workspace + +In this guide we will see how to set up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured. + +{% callout type="warning" title="Migrating existing Storybook configuration" %} +For migrating your existing Nx workspace with existing Storybook configuration to use Storybook version 7, please refer to our [Storybook 7 migration guide](/packages/storybook/documents/migrate-storybook-7). +{% /callout %} + +### Add the Storybook plugin + +{% tabs %} +{% tab label="yarn" %} + +```shell +yarn add -D @nrwl/storybook +``` + +{% /tab %} +{% tab label="npm" %} + +```shell +npm install -D @nrwl/storybook +``` + +{% /tab %} +{% /tabs %} + +## Using Storybook + +### Generating Storybook Configuration + +You can generate Storybook configuration for an individual project with this command: + +```shell +nx g @nrwl/storybook:configuration project-name --storybook7betaConfiguration --storybook7UiFramework=@storybook/react-webpack5 +``` + +In the field `storybook7UiFramework` you must choose one of the following Storybook frameworks: + +- `@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` + +In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application. + +If you are using one of the framework-specific generators (e.g. [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), or [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration) for React and Nextjs projects, or [`@nrwl/react-native:storybook-configuration`](<(/packages/react-native/generators/storybook-configuration)>)), the generator will automatically choose the correct framework for you. + +Choosing one of these frameworks will have the following effects on your workspace: + +1. Nx will install all the required Storybook packages that go with it. + +2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook. + +3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project. + +4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook. + +5. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance. + +### Changes from the v6.5 Storybook configuration + +The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see: + +#### Changes in `.storybook/main.js|ts` file + +- No longer set the `core` field which contains the `builder` option. +- The `framework` field is now mandatory, and it "replaces" the `builder` configuration. You can read more [in the Storybook docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field). +- Nx no longer adds the `webpackFinal` field to the `.storybook/main.js|ts` files. This is just for the sake of simplicity. You can still edit your webpack configuration by using the `webpackFinal` field, just as you can edit your Vite configuration by using the `viteFinal` field. You can read more about how to customize your webpack configuration [in the Storybook webpack docs](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config), and you can read more about how to customize your Vite configuration [in the Storybook Vite docs](https://storybook.js.org/docs/react/builders/vite#configuration). + +#### Changes in the `storybook` and `build-storybook` targets + +- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that. +- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nrwl/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nrwl/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI. + +## Use Storybook 7 beta + +You can now use Storybook 7 beta! 🎉 + +```bash +npx nx build-storybook PROJECT_NAME +``` + +and + +```bash +npx nx storybook PROJECT_NAME +``` + +## Report any issues and bugs + +Since this is a beta version, there are bound to be some issues and bugs. Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/packages/angular/docs/storybook-configuration-examples.md b/packages/angular/docs/storybook-configuration-examples.md index 6ee1b60097697..d36c51ccb3686 100644 --- a/packages/angular/docs/storybook-configuration-examples.md +++ b/packages/angular/docs/storybook-configuration-examples.md @@ -37,3 +37,11 @@ nx g @nrwl/angular:storybook-configuration ui --generateStories=true --ignorePat This 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.*`. This 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. + +### Generate Storybook configuration for Storybook version 7 + +```bash +nx g @nrwl/angular:storybook-configuration ui --storybook7betaConfiguration=true +``` + +This will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup). diff --git a/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts b/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts index 7035eb61a3c63..c5b79d95a52be 100644 --- a/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts +++ b/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts @@ -16,5 +16,6 @@ export async function generateStorybookConfiguration( cypressDirectory: options.cypressDirectory, tsConfiguration: options.tsConfiguration, configureTestRunner: options.configureTestRunner, + storybook7betaConfiguration: options.storybook7betaConfiguration, }); } diff --git a/packages/angular/src/generators/storybook-configuration/schema.d.ts b/packages/angular/src/generators/storybook-configuration/schema.d.ts index a0d3e99507dc7..4a3cbae53621f 100644 --- a/packages/angular/src/generators/storybook-configuration/schema.d.ts +++ b/packages/angular/src/generators/storybook-configuration/schema.d.ts @@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions { skipFormat?: boolean; ignorePaths?: string[]; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; } diff --git a/packages/angular/src/generators/storybook-configuration/schema.json b/packages/angular/src/generators/storybook-configuration/schema.json index b4b1fced48d57..504cb25e96cff 100644 --- a/packages/angular/src/generators/storybook-configuration/schema.json +++ b/packages/angular/src/generators/storybook-configuration/schema.json @@ -78,6 +78,11 @@ "configureTestRunner": { "type": "boolean", "description": "Add a Storybook Test-Runner target." + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "additionalProperties": false, diff --git a/packages/react/docs/storybook-configuration-examples.md b/packages/react/docs/storybook-configuration-examples.md index 7bc31eae347d6..8b4498d857b0b 100644 --- a/packages/react/docs/storybook-configuration-examples.md +++ b/packages/react/docs/storybook-configuration-examples.md @@ -1,4 +1,4 @@ -This generator will set up Storybook for your React project. +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. ```bash nx g @nrwl/react:storybook-configuration project-name @@ -45,3 +45,11 @@ nx g @nrwl/react:storybook-configuration ui --generateStories=true --js=true ``` This 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. + +### Generate Storybook configuration for Storybook version 7 + +```bash +nx g @nrwl/react:storybook-configuration ui --storybook7betaConfiguration=true +``` + +This will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup). diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts index 2b155914188d7..8c5551b4135f7 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.ts @@ -101,6 +101,11 @@ export async function storybookConfigurationGenerator( tsConfiguration: schema.tsConfiguration, configureTestRunner: schema.configureTestRunner, bundler, + storybook7betaConfiguration: schema.storybook7betaConfiguration, + storybook7UiFramework: + bundler === 'vite' + ? '@storybook/react-vite' + : '@storybook/react-webpack5', }); if (schema.generateStories) { diff --git a/packages/react/src/generators/storybook-configuration/schema.d.ts b/packages/react/src/generators/storybook-configuration/schema.d.ts index cb39f7707b91b..724066ec69192 100644 --- a/packages/react/src/generators/storybook-configuration/schema.d.ts +++ b/packages/react/src/generators/storybook-configuration/schema.d.ts @@ -13,4 +13,5 @@ export interface StorybookConfigureSchema { ignorePaths?: string[]; bundler?: 'webpack' | 'vite'; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; } diff --git a/packages/react/src/generators/storybook-configuration/schema.json b/packages/react/src/generators/storybook-configuration/schema.json index 641e36dc09323..ac3328d3871f9 100644 --- a/packages/react/src/generators/storybook-configuration/schema.json +++ b/packages/react/src/generators/storybook-configuration/schema.json @@ -86,6 +86,12 @@ "description": "The Storybook builder to use.", "enum": ["vite", "webpack"], "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" } }, "required": ["name"], diff --git a/packages/storybook/docs/configuration-generator-examples.md b/packages/storybook/docs/configuration-generator-examples.md index 223910956152f..448aad7eb8ce3 100644 --- a/packages/storybook/docs/configuration-generator-examples.md +++ b/packages/storybook/docs/configuration-generator-examples.md @@ -32,3 +32,17 @@ nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components -- ``` This will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory). + +### Generate Storybook configuration for Storybook version 7 + +```bash +nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true +``` + +OR + +```bash +nx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true +``` + +This will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup). diff --git a/packages/storybook/project.json b/packages/storybook/project.json index 86714a692c627..83cf2cb40469e 100644 --- a/packages/storybook/project.json +++ b/packages/storybook/project.json @@ -11,43 +11,48 @@ "assets": [ { "input": "packages/storybook", - "glob": "**/project-files/.storybook/**", + "glob": "**/files/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/files/**", + "glob": "**/project-files/.storybook/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/root-files/.storybook/**", + "glob": "**/project-files-7/.storybook/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/project-files-ts/.storybook/**", + "glob": "**/root-files/.storybook/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/root-files-ts/.storybook/**", + "glob": "**/project-files-ts/.storybook/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/root-files-nested/.storybook/**", + "glob": "**/project-files-7-ts/.storybook/**", "output": "/" }, { "input": "packages/storybook", - "glob": "**/root-files-nested-ts/.storybook/**", + "glob": "**/root-files-ts/.storybook/**", "output": "/" }, { "input": "packages/storybook", "glob": "**/*.json", - "ignore": ["**/tsconfig*.json", "project.json", ".eslintrc.json"], + "ignore": [ + "**/tsconfig*.json", + "project.json", + ".eslintrc.json", + "**/test-configs/**" + ], "output": "/" }, { diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts index 6c21356d88e1e..067ea5f9ccab1 100644 --- a/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts +++ b/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts @@ -14,9 +14,9 @@ jest.mock('@storybook/core-server', () => { }); import * as build from '@storybook/core-server'; import { CLIOptions } from '@storybook/types'; -import { CommonNxStorybookConfig } from '../models'; +import { CommonNxStorybookConfig } from '../../utils/models'; -// TODO (katerina): Update when Storybook 7 +// TODO(katerina): Update when Storybook 7 describe('Build storybook', () => { let context: ExecutorContext; let options: CLIOptions & CommonNxStorybookConfig; diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts index f5b57b5923f6a..5169f51ac1d27 100644 --- a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts +++ b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts @@ -1,14 +1,13 @@ import { ExecutorContext, logger } from '@nrwl/devkit'; import * as build from '@storybook/core-server'; -import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7 +import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7 import 'dotenv/config'; -import { storybookConfigExistsCheck } from '../../utils/utilities'; -import { CommonNxStorybookConfig } from '../models'; import { - getStorybookFrameworkPath, isStorybookV7, - runStorybookSetupCheck, -} from '../utils'; + storybookConfigExistsCheck, +} from '../../utils/utilities'; +import { CommonNxStorybookConfig } from '../../utils/models'; +import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils'; export default async function buildStorybookExecutor( options: CLIOptions & CommonNxStorybookConfig, @@ -24,7 +23,7 @@ export default async function buildStorybookExecutor( logger.info(`NX Storybook files available in ${buildOptions.outputDir}`); return { success: true }; } else { - // TODO (katerina): Remove when Storybook 7 + // TODO(katerina): Remove when Storybook 7 // print warnings runStorybookSetupCheck(options); @@ -55,11 +54,11 @@ function runInstance(options: CLIOptions, storybook7: boolean): Promise { return build['build']({ ...options, mode: 'static', - } as any); // TODO (katerina): Change to actual types when Storybook 7 + } as any); // TODO(katerina): Change to actual types when Storybook 7 } else { return build.buildStaticStandalone({ ...options, ci: true, - } as any); // TODO (katerina): Remove when Storybook 7 + } as any); // TODO(katerina): Remove when Storybook 7 } } diff --git a/packages/storybook/src/executors/storybook/storybook.impl.spec.ts b/packages/storybook/src/executors/storybook/storybook.impl.spec.ts index 15d87b1757fdf..0b70ab7689a74 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.spec.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.spec.ts @@ -13,9 +13,9 @@ import storybookExecutor from './storybook.impl'; import { join } from 'path'; import { readFileSync } from 'fs-extra'; import { CLIOptions } from '@storybook/types'; -import { CommonNxStorybookConfig } from '../models'; +import { CommonNxStorybookConfig } from '../../utils/models'; -// TODO (katerina): Update when Storybook 7 +// TODO(katerina): Update when Storybook 7 describe('@nrwl/storybook:storybook', () => { let context: ExecutorContext; diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts index 220c4f0970ed2..229ca3c75d7e9 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.ts @@ -1,14 +1,13 @@ import { ExecutorContext } from '@nrwl/devkit'; import * as build from '@storybook/core-server'; import 'dotenv/config'; -import { storybookConfigExistsCheck } from '../../utils/utilities'; import { - getStorybookFrameworkPath, - runStorybookSetupCheck, isStorybookV7, -} from '../utils'; -import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7 -import { CommonNxStorybookConfig } from '../models'; + storybookConfigExistsCheck, +} from '../../utils/utilities'; +import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils'; +import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7 +import { CommonNxStorybookConfig } from '../../utils/models'; export default async function* storybookExecutor( options: CLIOptions & CommonNxStorybookConfig, @@ -28,15 +27,15 @@ export default async function* storybookExecutor( yield { success: true, info: { - port: result.port, + port: result?.port, baseUrl: `${options.https ? 'https' : 'http'}://${ options.host ?? 'localhost' - }:${result.port}`, + }:${result?.port}`, }, }; await new Promise<{ success: boolean }>(() => {}); } else { - // TODO (katerina): Remove when Storybook 7 + // TODO(katerina): Remove when Storybook 7 // print warnings runStorybookSetupCheck(options); @@ -62,9 +61,9 @@ function runInstance(options: CLIOptions, storybook7: boolean) { return build['build']({ ...options, mode: 'dev', - } as any); // TODO (katerina): Change to actual types when Storybook 7 + } as any); // TODO(katerina): Change to actual types when Storybook 7 } else { - // TODO (katerina): Remove when Storybook 7 + // TODO(katerina): Remove when Storybook 7 return build.buildDev({ ...options, configType: env.toUpperCase(), diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts index 429cc8d51f146..45a84130827f7 100644 --- a/packages/storybook/src/executors/utils.ts +++ b/packages/storybook/src/executors/utils.ts @@ -1,12 +1,11 @@ -import { ExecutorContext, joinPathFragments, logger } from '@nrwl/devkit'; +import { joinPathFragments, logger } from '@nrwl/devkit'; import { findNodes } from 'nx/src/utils/typescript'; import 'dotenv/config'; import { existsSync, readFileSync } from 'fs'; import { join } from 'path'; import { gte } from 'semver'; import ts = require('typescript'); -import { CommonNxStorybookConfig, UiFramework } from './models'; -import { storybookConfigExistsCheck } from '../utils/utilities'; +import { CommonNxStorybookConfig, UiFramework } from '../utils/models'; import { CLIOptions } from '@storybook/types'; export interface NodePackage { @@ -14,7 +13,7 @@ export interface NodePackage { version: string; } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 export function getStorybookFrameworkPath(uiFramework: UiFramework) { const serverOptionsPaths = { '@storybook/react': '@storybook/react/dist/cjs/server/options', @@ -33,7 +32,7 @@ export function getStorybookFrameworkPath(uiFramework: UiFramework) { } } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 function isStorybookV62onwards(uiFramework: string) { const storybookPackageVersion = require(join( uiFramework, @@ -43,15 +42,7 @@ function isStorybookV62onwards(uiFramework: string) { return gte(storybookPackageVersion, '6.2.0-rc.4'); } -export function isStorybookV7() { - const storybookPackageVersion = require(join( - '@storybook/core-server', - 'package.json' - )).version; - return gte(storybookPackageVersion, '7.0.0-alpha.0'); -} - -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 export function runStorybookSetupCheck( options: CLIOptions & CommonNxStorybookConfig ) { @@ -59,7 +50,7 @@ export function runStorybookSetupCheck( reactWebpack5Check(options); } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 function reactWebpack5Check(options: CLIOptions & CommonNxStorybookConfig) { if (options.uiFramework === '@storybook/react') { const source = mainJsTsFileContent(options.configDir); @@ -81,7 +72,7 @@ function reactWebpack5Check(options: CLIOptions & CommonNxStorybookConfig) { } } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 function mainJsTsFileContent(configFolder: string): ts.SourceFile { let storybookConfigFilePath = joinPathFragments(configFolder, 'main.js'); @@ -106,7 +97,7 @@ function mainJsTsFileContent(configFolder: string): ts.SourceFile { ); } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 function webpackFinalPropertyCheck( options: CLIOptions & CommonNxStorybookConfig ) { @@ -147,7 +138,7 @@ function webpackFinalPropertyCheck( } } -// TODO (katerina): Remove when Storybook 7 +// TODO(katerina): Remove when Storybook 7 export function builderIsWebpackButNotWebpack5( storybookConfig: ts.SourceFile ): boolean { diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap index 3d512dd68b36e..a59ae5d719155 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap @@ -67,13 +67,7 @@ exports[`@nrwl/storybook:configuration for workspaces with Root project basic fu export const rootMain: StorybookConfig = { stories: [], - addons: ['@storybook/addon-essentials'], - // webpackFinal: async (config, { configType }) => { - // // Make whatever fine-grained changes you need that should apply to all storybook configs - - // // Return the altered config - // return config; - // }, + addons: ['@storybook/addon-essentials'] }; " `; diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap new file mode 100644 index 0000000000000..6ff786d61bf53 --- /dev/null +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap @@ -0,0 +1,2766 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TS config for project if root config is TS 1`] = ` +"import { rootMain } from '../../../.storybook/main'; + +import type { StorybookConfig, Options } from '@storybook/core-common'; + + + +const config: StorybookConfig = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../**/*.stories.@(js|jsx|ts|tsx|mdx)' ], + addons: [...(rootMain.addons || []) + + ] + framework: { + name: '@storybook/angular', + options: {}, + }, +}; + +module.exports = config; + + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 1`] = ` +Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "test-ui-lib", + "projectType": "library", + "root": "libs/test-ui-lib", + "sourceRoot": "libs/test-ui-lib/src", + "tags": Array [], + "targets": Object { + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:build-storybook", + "options": Object { + "browserTarget": "test-ui-lib:build-storybook", + "compodoc": false, + "configDir": "libs/test-ui-lib/.storybook", + "outputDir": "dist/storybook/test-ui-lib", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/test-ui-lib/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:start-storybook", + "options": Object { + "browserTarget": "test-ui-lib:build-storybook", + "compodoc": false, + "configDir": "libs/test-ui-lib/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/test-ui-lib/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, +} +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 2`] = ` +"import type { StorybookConfig } from '@storybook/core-common'; + +export const rootMain: StorybookConfig = { + stories: [], + addons: ['@storybook/addon-essentials'] +}; +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 3`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + + }, + + \\"exclude\\": [\\"../**/*.spec.ts\\" ], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.ts\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 4`] = ` +"import { rootMain } from '../../../.storybook/main'; + +import type { StorybookConfig, Options } from '@storybook/core-common'; + + + +const config: StorybookConfig = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../**/*.stories.@(js|jsx|ts|tsx|mdx)' ], + addons: [...(rootMain.addons || []) + + ] + framework: { + name: '@storybook/angular', + options: {}, + }, +}; + +module.exports = config; + + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should have the proper typings 1`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/react-vite', + options: {}, + }, +}; + + + +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/react-vite', + options: {}, + }, +}; + + + +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + + + + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' + + ] + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, +}; + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + + + + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ] + framework: { + name: '@storybook/nextjs', + options: {}, + }, +}; + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + + }, + + \\"exclude\\": [\\"../**/*.spec.ts\\" ], + \\"include\\": [ + \\"../components/**/*.stories.ts\\", + \\"../components/**/*.stories.js\\", + \\"../components/**/*.stories.jsx\\", + \\"../components/**/*.stories.tsx\\", + \\"../components/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + + + + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' + , 'storybook-addon-swc' + ] + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, +}; + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/web-components-vite', + options: {}, + }, +}; + + + +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + + }, + + \\"exclude\\": [\\"../**/*.spec.ts\\" ], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + + + + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ] + framework: { + name: '@storybook/web-components-webpack5', + options: {}, + }, +}; + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + + }, + + \\"exclude\\": [\\"../**/*.spec.ts\\" ], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + + + + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' + + ] + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, +}; + +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + + +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 1`] = ` +"const rootMain = require('../../../.storybook/main'); + +const { mergeConfig } = require('vite'); +const viteTsConfigPaths = require('vite-tsconfig-paths').default; + + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories, + '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)' + ], + addons: [...rootMain.addons + + ], + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, + framework: { + name: '@storybook/react-vite', + options: {}, + }, +}; + + + +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 2`] = ` +"{ + \\"extends\\": \\"../tsconfig.json\\", + \\"compilerOptions\\": { + \\"emitDecoratorMetadata\\": true + , \\"outDir\\": \\"\\" + }, + \\"files\\": [ + \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\", + \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\" + ], + \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"], + \\"include\\": [ + \\"../src/**/*.stories.ts\\", + \\"../src/**/*.stories.js\\", + \\"../src/**/*.stories.jsx\\", + \\"../src/**/*.stories.tsx\\", + \\"../src/**/*.stories.mdx\\", + \\"*.js\\"] +} +" +`; + +exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should have updated all their target configurations correctly 1`] = ` +Map { + "main-vite" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/main-vite", + "sourceRoot": "apps/main-vite/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/apps/main-vite", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/main-vite/.storybook", + "outputDir": "dist/storybook/main-vite", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-vite/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "main-vite:build:development", + "hmr": true, + }, + "production": Object { + "buildTarget": "main-vite:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/vite:dev-server", + "options": Object { + "buildTarget": "main-vite:build", + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/main-vite/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/vite:test", + "options": Object { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/main-vite", + }, + "outputs": Array [ + "coverage/apps/main-vite", + ], + }, + }, + }, + "main-vite-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "main-vite", + ], + "projectType": "application", + "root": "apps/main-vite-e2e", + "sourceRoot": "apps/main-vite-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "main-vite:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/main-vite-e2e/cypress.config.ts", + "devServerTarget": "main-vite:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-vite-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "main-vite-ts" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/main-vite-ts", + "sourceRoot": "apps/main-vite-ts/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/apps/main-vite-ts", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/main-vite-ts/.storybook", + "outputDir": "dist/storybook/main-vite-ts", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-vite-ts/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "main-vite-ts:build:development", + "hmr": true, + }, + "production": Object { + "buildTarget": "main-vite-ts:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/vite:dev-server", + "options": Object { + "buildTarget": "main-vite-ts:build", + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/main-vite-ts/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/vite:test", + "options": Object { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/main-vite-ts", + }, + "outputs": Array [ + "coverage/apps/main-vite-ts", + ], + }, + }, + }, + "main-vite-ts-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "main-vite-ts", + ], + "projectType": "application", + "root": "apps/main-vite-ts-e2e", + "sourceRoot": "apps/main-vite-ts-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "main-vite-ts:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/main-vite-ts-e2e/cypress.config.ts", + "devServerTarget": "main-vite-ts:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-vite-ts-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "main-webpack" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/main-webpack", + "sourceRoot": "apps/main-webpack/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true, + }, + "production": Object { + "extractLicenses": true, + "fileReplacements": Array [ + Object { + "replace": "apps/main-webpack/src/environments/environment.ts", + "with": "apps/main-webpack/src/environments/environment.prod.ts", + }, + ], + "namedChunks": false, + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "vendorChunk": false, + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [ + "apps/main-webpack/src/favicon.ico", + "apps/main-webpack/src/assets", + ], + "baseHref": "/", + "compiler": "babel", + "index": "apps/main-webpack/src/index.html", + "main": "apps/main-webpack/src/main.tsx", + "outputPath": "dist/apps/main-webpack", + "polyfills": "apps/main-webpack/src/polyfills.ts", + "scripts": Array [], + "styles": Array [ + "apps/main-webpack/src/styles.css", + ], + "tsConfig": "apps/main-webpack/tsconfig.app.json", + "webpackConfig": "@nrwl/react/plugins/webpack", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/main-webpack/.storybook", + "outputDir": "dist/storybook/main-webpack", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-webpack/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "main-webpack:build:development", + }, + "production": Object { + "buildTarget": "main-webpack:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/webpack:dev-server", + "options": Object { + "buildTarget": "main-webpack:build", + "hmr": true, + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/main-webpack/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/main-webpack/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "main-webpack-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "main-webpack", + ], + "projectType": "application", + "root": "apps/main-webpack-e2e", + "sourceRoot": "apps/main-webpack-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "main-webpack:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/main-webpack-e2e/cypress.config.ts", + "devServerTarget": "main-webpack:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/main-webpack-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "my-plugin" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/my-plugin", + "sourceRoot": "libs/my-plugin/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/js:tsc", + "options": Object { + "assets": Array [ + "libs/my-plugin/*.md", + Object { + "glob": "**/!(*.ts)", + "input": "./libs/my-plugin/src", + "output": "./src", + }, + Object { + "glob": "**/*.d.ts", + "input": "./libs/my-plugin/src", + "output": "./src", + }, + Object { + "glob": "generators.json", + "input": "./libs/my-plugin", + "output": ".", + }, + Object { + "glob": "executors.json", + "input": "./libs/my-plugin", + "output": ".", + }, + ], + "main": "libs/my-plugin/src/index.ts", + "outputPath": "dist/libs/my-plugin", + "tsConfig": "libs/my-plugin/tsconfig.lib.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/my-plugin/**/*.ts", + "libs/my-plugin/generators.json", + "libs/my-plugin/executors.json", + "libs/my-plugin/package.json", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/my-plugin/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "my-plugin-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "my-plugin", + ], + "projectType": "application", + "root": "apps/my-plugin-e2e", + "sourceRoot": "apps/my-plugin-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "executor": "@nrwl/nx-plugin:e2e", + "options": Object { + "jestConfig": "apps/my-plugin-e2e/jest.config.ts", + "target": "my-plugin:build", + }, + }, + }, + }, + "mylib" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/mylib", + "sourceRoot": "libs/mylib/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@imported-libs/my-plugin:build", + }, + }, + }, + "nextapp" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/nextapp", + "sourceRoot": "apps/nextapp", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "outputPath": "apps/nextapp", + }, + "production": Object {}, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/next:build", + "options": Object { + "outputPath": "dist/apps/nextapp", + "root": "apps/nextapp", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/nextapp/.storybook", + "outputDir": "dist/storybook/nextapp", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "export": Object { + "executor": "@nrwl/next:export", + "options": Object { + "buildTarget": "nextapp:build:production", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/nextapp/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "nextapp:build:development", + "dev": true, + }, + "production": Object { + "buildTarget": "nextapp:build:production", + "dev": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/next:server", + "options": Object { + "buildTarget": "nextapp:build", + "dev": true, + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/nextapp/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/nextapp/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "nextapp-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "nextapp", + ], + "projectType": "application", + "root": "apps/nextapp-e2e", + "sourceRoot": "apps/nextapp-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "nextapp:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/nextapp-e2e/cypress.config.ts", + "devServerTarget": "nextapp:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/nextapp-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "ngapp" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "prefix": "imported-libs", + "projectType": "application", + "root": "apps/ngapp", + "sourceRoot": "apps/ngapp/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "buildOptimizer": false, + "extractLicenses": false, + "namedChunks": true, + "optimization": false, + "sourceMap": true, + "vendorChunk": true, + }, + "production": Object { + "budgets": Array [ + Object { + "maximumError": "1mb", + "maximumWarning": "500kb", + "type": "initial", + }, + Object { + "maximumError": "4kb", + "maximumWarning": "2kb", + "type": "anyComponentStyle", + }, + ], + "outputHashing": "all", + }, + }, + "defaultConfiguration": "production", + "executor": "@angular-devkit/build-angular:browser", + "options": Object { + "assets": Array [ + "apps/ngapp/src/favicon.ico", + "apps/ngapp/src/assets", + ], + "index": "apps/ngapp/src/index.html", + "main": "apps/ngapp/src/main.ts", + "outputPath": "dist/apps/ngapp", + "polyfills": Array [ + "zone.js", + ], + "scripts": Array [], + "styles": Array [ + "apps/ngapp/src/styles.css", + ], + "tsConfig": "apps/ngapp/tsconfig.app.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:build-storybook", + "options": Object { + "browserTarget": "ngapp:build", + "compodoc": false, + "configDir": "apps/ngapp/.storybook", + "outputDir": "dist/storybook/ngapp", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "extract-i18n": Object { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": Object { + "browserTarget": "ngapp:build", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/ngapp/**/*.ts", + "apps/ngapp/**/*.html", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "browserTarget": "ngapp:build:development", + }, + "production": Object { + "browserTarget": "ngapp:build:production", + }, + }, + "defaultConfiguration": "development", + "executor": "@angular-devkit/build-angular:dev-server", + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:start-storybook", + "options": Object { + "browserTarget": "ngapp:build", + "compodoc": false, + "configDir": "apps/ngapp/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/ngapp/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "ngapp-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "ngapp", + ], + "projectType": "application", + "root": "apps/ngapp-e2e", + "sourceRoot": "apps/ngapp-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "ngapp:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/ngapp-e2e/cypress.config.ts", + "devServerTarget": "ngapp:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/ngapp-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "nglib" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "prefix": "imported-libs", + "projectType": "library", + "root": "libs/nglib", + "sourceRoot": "libs/nglib/src", + "tags": Array [], + "targets": Object { + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:build-storybook", + "options": Object { + "browserTarget": "nglib:build-storybook", + "compodoc": false, + "configDir": "libs/nglib/.storybook", + "outputDir": "dist/storybook/nglib", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/nglib/**/*.ts", + "libs/nglib/**/*.html", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@storybook/angular:start-storybook", + "options": Object { + "browserTarget": "nglib:build-storybook", + "compodoc": false, + "configDir": "libs/nglib/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/nglib/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "nglib-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "nglib", + ], + "projectType": "application", + "root": "apps/nglib-e2e", + "sourceRoot": "apps/nglib-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "ci": Object { + "devServerTarget": "nglib:storybook:ci", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/nglib-e2e/cypress.config.ts", + "devServerTarget": "nglib:storybook", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/nglib-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "react-rollup" => Object { + "projectType": "library", + "root": "libs/react-rollup", + "sourceRoot": "libs/react-rollup/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/rollup:rollup", + "options": Object { + "assets": Array [ + Object { + "glob": "libs/react-rollup/README.md", + "input": ".", + "output": ".", + }, + ], + "compiler": "babel", + "entryFile": "libs/react-rollup/src/index.ts", + "external": Array [ + "react/jsx-runtime", + ], + "outputPath": "dist/libs/react-rollup", + "project": "libs/react-rollup/package.json", + "rollupConfig": "@nrwl/react/plugins/bundle-rollup", + "tsConfig": "libs/react-rollup/tsconfig.lib.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "libs/react-rollup/.storybook", + "outputDir": "dist/storybook/react-rollup", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/react-rollup/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "libs/react-rollup/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/react-rollup/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "react-rollup-2" => Object { + "projectType": "library", + "root": "libs/react-rollup-2", + "sourceRoot": "libs/react-rollup-2/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/rollup:rollup", + "options": Object { + "assets": Array [ + Object { + "glob": "libs/react-rollup-2/README.md", + "input": ".", + "output": ".", + }, + ], + "compiler": "babel", + "entryFile": "libs/react-rollup-2/src/index.ts", + "external": Array [ + "react/jsx-runtime", + ], + "outputPath": "dist/libs/react-rollup-2", + "project": "libs/react-rollup-2/package.json", + "rollupConfig": "@nrwl/react/plugins/bundle-rollup", + "tsConfig": "libs/react-rollup-2/tsconfig.lib.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/react-rollup-2/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/react-rollup-2/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "react-rollup-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "react-rollup", + ], + "projectType": "application", + "root": "apps/react-rollup-e2e", + "sourceRoot": "apps/react-rollup-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "ci": Object { + "devServerTarget": "react-rollup:storybook:ci", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/react-rollup-e2e/cypress.config.ts", + "devServerTarget": "react-rollup:storybook", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/react-rollup-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "react-swc" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/react-swc", + "sourceRoot": "apps/react-swc/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true, + }, + "production": Object { + "extractLicenses": true, + "fileReplacements": Array [ + Object { + "replace": "apps/react-swc/src/environments/environment.ts", + "with": "apps/react-swc/src/environments/environment.prod.ts", + }, + ], + "namedChunks": false, + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "vendorChunk": false, + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [ + "apps/react-swc/src/favicon.ico", + "apps/react-swc/src/assets", + ], + "baseHref": "/", + "compiler": "swc", + "index": "apps/react-swc/src/index.html", + "main": "apps/react-swc/src/main.tsx", + "outputPath": "dist/apps/react-swc", + "scripts": Array [], + "styles": Array [ + "apps/react-swc/src/styles.css", + ], + "tsConfig": "apps/react-swc/tsconfig.app.json", + "webpackConfig": "apps/react-swc/webpack.config.js", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/react-swc/.storybook", + "outputDir": "dist/storybook/react-swc", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/react-swc/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "react-swc:build:development", + }, + "production": Object { + "buildTarget": "react-swc:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/webpack:dev-server", + "options": Object { + "buildTarget": "react-swc:build", + "hmr": true, + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/react-swc/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/react-swc/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "react-swc-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "react-swc", + ], + "projectType": "application", + "root": "apps/react-swc-e2e", + "sourceRoot": "apps/react-swc-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "react-swc:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/react-swc-e2e/cypress.config.ts", + "devServerTarget": "react-swc:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/react-swc-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "react-vite" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/react-vite", + "sourceRoot": "libs/react-vite/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/libs/react-vite", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "libs/react-vite/.storybook", + "outputDir": "dist/storybook/react-vite", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/react-vite/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "libs/react-vite/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/vite:test", + "options": Object { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/libs/react-vite", + }, + "outputs": Array [ + "coverage/libs/react-vite", + ], + }, + }, + }, + "react-vite-2" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/react-vite-2", + "sourceRoot": "libs/react-vite-2/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/libs/react-vite-2", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/react-vite-2/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/vite:test", + "options": Object { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/libs/react-vite-2", + }, + "outputs": Array [ + "coverage/libs/react-vite-2", + ], + }, + }, + }, + "react-vite-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "react-vite", + ], + "projectType": "application", + "root": "apps/react-vite-e2e", + "sourceRoot": "apps/react-vite-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "ci": Object { + "devServerTarget": "react-vite:storybook:ci", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/react-vite-e2e/cypress.config.ts", + "devServerTarget": "react-vite:storybook", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/react-vite-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "reapp" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/reapp", + "sourceRoot": "apps/reapp/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/apps/reapp", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/reapp/.storybook", + "outputDir": "dist/storybook/reapp", + "uiFramework": "@storybook/react", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/reapp/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "reapp:build:development", + "hmr": true, + }, + "production": Object { + "buildTarget": "reapp:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/vite:dev-server", + "options": Object { + "buildTarget": "reapp:build", + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/reapp/.storybook", + "port": 4400, + "uiFramework": "@storybook/react", + }, + }, + "test": Object { + "executor": "@nrwl/vite:test", + "options": Object { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/reapp", + }, + "outputs": Array [ + "coverage/apps/reapp", + ], + }, + }, + }, + "reapp-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "reapp", + ], + "projectType": "application", + "root": "apps/reapp-e2e", + "sourceRoot": "apps/reapp-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "reapp:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/reapp-e2e/cypress.config.ts", + "devServerTarget": "reapp:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/reapp-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "reappw" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/reappw", + "sourceRoot": "apps/reappw/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true, + }, + "production": Object { + "extractLicenses": true, + "fileReplacements": Array [ + Object { + "replace": "apps/reappw/src/environments/environment.ts", + "with": "apps/reappw/src/environments/environment.prod.ts", + }, + ], + "namedChunks": false, + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "vendorChunk": false, + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [ + "apps/reappw/src/favicon.ico", + "apps/reappw/src/assets", + ], + "baseHref": "/", + "compiler": "babel", + "index": "apps/reappw/src/index.html", + "main": "apps/reappw/src/main.tsx", + "outputPath": "dist/apps/reappw", + "scripts": Array [], + "styles": Array [ + "apps/reappw/src/styles.css", + ], + "tsConfig": "apps/reappw/tsconfig.app.json", + "webpackConfig": "@nrwl/react/plugins/webpack", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/reappw/.storybook", + "outputDir": "dist/storybook/reappw", + "uiFramework": "@storybook/react", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/reappw/**/*.{ts,tsx,js,jsx}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "reappw:build:development", + }, + "production": Object { + "buildTarget": "reappw:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/webpack:dev-server", + "options": Object { + "buildTarget": "reappw:build", + "hmr": true, + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/reappw/.storybook", + "port": 4400, + "uiFramework": "@storybook/react", + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/reappw/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "reappw-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "reappw", + ], + "projectType": "application", + "root": "apps/reappw-e2e", + "sourceRoot": "apps/reappw-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "reappw:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/reappw-e2e/cypress.config.ts", + "devServerTarget": "reappw:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/reappw-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "utils-one" => Object { + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/utils/one", + "sourceRoot": "libs/utils/one/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [], + "main": "libs/utils/one/src/index.ts", + "outputPath": "dist/libs/utils/one", + "tsConfig": "libs/utils/one/tsconfig.lib.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/utils/one/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/utils/one/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "utils-three-vite" => Object { + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/utils/three-vite", + "sourceRoot": "libs/utils/three-vite/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/libs/utils/three-vite", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/utils/three-vite/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/utils/three-vite/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "utils-two" => Object { + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "root": "libs/utils/two", + "sourceRoot": "libs/utils/two/src", + "tags": Array [], + "targets": Object { + "build": Object { + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [], + "main": "libs/utils/two/src/index.ts", + "outputPath": "dist/libs/utils/two", + "tsConfig": "libs/utils/two/tsconfig.lib.json", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "libs/utils/two/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "libs/utils/two/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "wv1" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/wv1", + "sourceRoot": "apps/wv1/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "development": Object { + "mode": "development", + }, + "production": Object { + "mode": "production", + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/vite:build", + "options": Object { + "outputPath": "dist/apps/wv1", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/wv1/.storybook", + "outputDir": "dist/storybook/wv1", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/wv1/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "development": Object { + "buildTarget": "wv1:build:development", + "hmr": true, + }, + "production": Object { + "buildTarget": "wv1:build:production", + "hmr": false, + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/vite:dev-server", + "options": Object { + "buildTarget": "wv1:build", + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/wv1/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/wv1/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "wv1-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "wv1", + ], + "projectType": "application", + "root": "apps/wv1-e2e", + "sourceRoot": "apps/wv1-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "wv1:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/wv1-e2e/cypress.config.ts", + "devServerTarget": "wv1:serve:development", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/wv1-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, + "ww1" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "root": "apps/ww1", + "sourceRoot": "apps/ww1/src", + "tags": Array [], + "targets": Object { + "build": Object { + "configurations": Object { + "production": Object { + "extractLicenses": true, + "fileReplacements": Array [ + Object { + "replace": "apps/ww1/src/environments/environment.ts", + "with": "apps/ww1/src/environments/environment.prod.ts", + }, + ], + "namedChunks": false, + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "vendorChunk": false, + }, + }, + "defaultConfiguration": "production", + "executor": "@nrwl/webpack:webpack", + "options": Object { + "assets": Array [ + "apps/ww1/src/favicon.ico", + "apps/ww1/src/assets", + ], + "baseHref": "/", + "compiler": "babel", + "index": "apps/ww1/src/index.html", + "main": "apps/ww1/src/main.ts", + "outputPath": "dist/apps/ww1", + "scripts": Array [], + "styles": Array [ + "apps/ww1/src/styles.css", + ], + "tsConfig": "apps/ww1/tsconfig.app.json", + "webpackConfig": "apps/ww1/webpack.config.js", + }, + "outputs": Array [ + "{options.outputPath}", + ], + }, + "build-storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:build", + "options": Object { + "configDir": "apps/ww1/.storybook", + "outputDir": "dist/storybook/ww1", + }, + "outputs": Array [ + "{options.outputDir}", + ], + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/ww1/**/*.ts", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + "serve": Object { + "configurations": Object { + "production": Object { + "buildTarget": "ww1:build:production", + }, + }, + "executor": "@nrwl/webpack:dev-server", + "options": Object { + "buildTarget": "ww1:build", + }, + }, + "storybook": Object { + "configurations": Object { + "ci": Object { + "quiet": true, + }, + }, + "executor": "@nrwl/storybook:storybook", + "options": Object { + "configDir": "apps/ww1/.storybook", + "port": 4400, + }, + }, + "test": Object { + "executor": "@nrwl/jest:jest", + "options": Object { + "jestConfig": "apps/ww1/jest.config.ts", + "passWithNoTests": true, + }, + "outputs": Array [ + "{workspaceRoot}/coverage/{projectRoot}", + ], + }, + }, + }, + "ww1-e2e" => Object { + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "implicitDependencies": Array [ + "ww1", + ], + "projectType": "application", + "root": "apps/ww1-e2e", + "sourceRoot": "apps/ww1-e2e/src", + "tags": Array [], + "targets": Object { + "e2e": Object { + "configurations": Object { + "production": Object { + "devServerTarget": "ww1:serve:production", + }, + }, + "executor": "@nrwl/cypress:cypress", + "options": Object { + "cypressConfig": "apps/ww1-e2e/cypress.config.ts", + "devServerTarget": "ww1:serve", + "testingType": "e2e", + }, + }, + "lint": Object { + "executor": "@nrwl/linter:eslint", + "options": Object { + "lintFilePatterns": Array [ + "apps/ww1-e2e/**/*.{js,ts}", + ], + }, + "outputs": Array [ + "{options.outputFile}", + ], + }, + }, + }, +} +`; diff --git a/packages/storybook/src/generators/configuration/configuration-v7.spec.ts b/packages/storybook/src/generators/configuration/configuration-v7.spec.ts new file mode 100644 index 0000000000000..3bfb73b30ebaa --- /dev/null +++ b/packages/storybook/src/generators/configuration/configuration-v7.spec.ts @@ -0,0 +1,381 @@ +import { + addProjectConfiguration, + getProjects, + NxJsonConfiguration, + ProjectConfiguration, + readJson, + readProjectConfiguration, + Tree, + updateJson, + writeJson, +} from '@nrwl/devkit'; +import { + createTreeWithEmptyV1Workspace, + createTreeWithEmptyWorkspace, +} from '@nrwl/devkit/testing'; + +import { Linter } from '@nrwl/linter'; +import { libraryGenerator } from '@nrwl/workspace/generators'; +import { TsConfig } from '../../utils/utilities'; +import { storybook7Version } from '../../utils/versions'; +import configurationGenerator from './configuration'; +import * as variousProjects from './test-configs/various-projects.json'; + +describe('@nrwl/storybook:configuration for Storybook v7', () => { + describe('basic functionalities', () => { + let tree: Tree; + + beforeEach(async () => { + tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); + updateJson(tree, 'nx.json', (json) => { + json.namedInputs = { + production: ['default'], + }; + return json; + }); + await libraryGenerator(tree, { + name: 'test-ui-lib', + standaloneConfig: false, + }); + writeJson(tree, 'package.json', { + devDependencies: { + '@storybook/addon-essentials': storybook7Version, + '@storybook/react': storybook7Version, + }, + }); + }); + + it('should generate TypeScript Configuration files', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/angular', + standaloneConfig: false, + tsConfiguration: true, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/angular', + }); + const project = readProjectConfiguration(tree, 'test-ui-lib'); + expect(project).toMatchSnapshot(); + + expect(tree.read('.storybook/main.ts', 'utf-8')).toMatchSnapshot(); + expect( + tree.read('libs/test-ui-lib/.storybook/tsconfig.json', 'utf-8') + ).toMatchSnapshot(); + expect( + tree.read('libs/test-ui-lib/.storybook/main.ts', 'utf-8') + ).toMatchSnapshot(); + expect( + tree.exists('libs/test-ui-lib/.storybook/preview.ts') + ).toBeTruthy(); + }); + + it('should not update root files after generating them once', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/angular', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/angular', + }); + + const newContents = `module.exports = { + stories: [], + addons: ['@storybook/addon-essentials', 'new-addon'], + }; + `; + await libraryGenerator(tree, { + name: 'test-ui-lib-2', + standaloneConfig: false, + }); + + tree.write('.storybook/main.js', newContents); + await configurationGenerator(tree, { + name: 'test-ui-lib-2', + uiFramework: '@storybook/angular', + standaloneConfig: false, + storybook7betaConfiguration: true, + }); + + expect(tree.read('.storybook/main.js', 'utf-8')).toEqual(newContents); + }); + + it('should update `tsconfig.lib.json` file', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/react', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + const tsconfigJson = readJson( + tree, + 'libs/test-ui-lib/tsconfig.lib.json' + ) as Required; + + expect(tsconfigJson.exclude).toContain('**/*.stories.ts'); + expect(tsconfigJson.exclude).toContain('**/*.stories.js'); + expect(tsconfigJson.exclude).toContain('**/*.stories.jsx'); + expect(tsconfigJson.exclude).toContain('**/*.stories.tsx'); + }); + + it('should update `tsconfig.json` file', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/react', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + const tsconfigJson = readJson( + tree, + 'libs/test-ui-lib/tsconfig.json' + ); + + expect(tsconfigJson.references).toMatchInlineSnapshot(` + Array [ + Object { + "path": "./tsconfig.lib.json", + }, + Object { + "path": "./tsconfig.spec.json", + }, + Object { + "path": "./.storybook/tsconfig.json", + }, + ] + `); + }); + + it("should update the project's .eslintrc.json if config exists", async () => { + await libraryGenerator(tree, { + name: 'test-ui-lib2', + linter: Linter.EsLint, + standaloneConfig: false, + }); + + updateJson(tree, 'libs/test-ui-lib2/.eslintrc.json', (json) => { + json.parserOptions = { + project: [], + }; + return json; + }); + + await configurationGenerator(tree, { + name: 'test-ui-lib2', + uiFramework: '@storybook/react', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + + expect(readJson(tree, 'libs/test-ui-lib2/.eslintrc.json').parserOptions) + .toMatchInlineSnapshot(` + Object { + "project": Array [ + "libs/test-ui-lib2/.storybook/tsconfig.json", + ], + } + `); + }); + + it('should have the proper typings', async () => { + await libraryGenerator(tree, { + name: 'test-ui-lib2', + linter: Linter.EsLint, + standaloneConfig: false, + }); + + await configurationGenerator(tree, { + name: 'test-ui-lib2', + uiFramework: '@storybook/react', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + + expect( + tree.read('libs/test-ui-lib2/.storybook/tsconfig.json', 'utf-8') + ).toMatchSnapshot(); + }); + + it('should generate TS config for project if root config is TS', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/angular', + standaloneConfig: false, + tsConfiguration: true, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/angular', + }); + + const newContents = `module.exports = { + stories: [], + addons: ['@storybook/addon-essentials', 'new-addon'], + }; + `; + // Setup a new lib + await libraryGenerator(tree, { + name: 'test-ui-lib-2', + standaloneConfig: false, + }); + + tree.write('.storybook/main.ts', newContents); + await configurationGenerator(tree, { + name: 'test-ui-lib-2', + uiFramework: '@storybook/angular', + standaloneConfig: false, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/angular', + }); + + expect(tree.read('.storybook/main.ts', 'utf-8')).toEqual(newContents); + expect( + tree.read('libs/test-ui-lib-2/.storybook/main.ts', 'utf-8') + ).toMatchSnapshot(); + expect( + tree.exists('libs/test-ui-lib-2/.storybook/preview.ts') + ).toBeTruthy(); + expect(tree.exists('libs/test-ui-lib-2/.storybook/main.js')).toBeFalsy(); + expect( + tree.exists('libs/test-ui-lib-2/.storybook/preview.js') + ).toBeFalsy(); + }); + + it('should add test-storybook target', async () => { + await configurationGenerator(tree, { + name: 'test-ui-lib', + uiFramework: '@storybook/react', + configureTestRunner: true, + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + + expect( + readJson(tree, 'package.json').devDependencies['@storybook/test-runner'] + ).toBeTruthy(); + + const project = readProjectConfiguration(tree, 'test-ui-lib'); + expect(project.targets['test-storybook']).toEqual({ + executor: 'nx:run-commands', + options: { + command: + 'test-storybook -c libs/test-ui-lib/.storybook --url=http://localhost:4400', + }, + }); + }); + }); + + describe('generate Storybook configuration for all types of projects', () => { + let tree: Tree; + let testCases: string[][] = []; + + for (const [name, project] of Object.entries(variousProjects)) { + testCases.push([ + `${ + project.projectType === 'application' ? 'apps' : 'libs' + }/${name}/.storybook/`, + ]); + } + + beforeAll(async () => { + tree = createTreeWithEmptyV1Workspace(); + for (const [name, project] of Object.entries(variousProjects)) { + addProjectConfiguration(tree, name, project as ProjectConfiguration); + writeJson( + tree, + `${ + project.projectType === 'application' ? 'apps' : 'libs' + }/${name}/tsconfig.json`, + {} + ); + } + + await configurationGenerator(tree, { + name: 'main-vite', + tsConfiguration: false, + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-vite', + }); + await configurationGenerator(tree, { + name: 'main-vite-ts', + tsConfiguration: true, + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-vite', + }); + await configurationGenerator(tree, { + name: 'main-webpack', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + await configurationGenerator(tree, { + name: 'react-rollup', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + await configurationGenerator(tree, { + name: 'react-vite', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-vite', + }); + + await configurationGenerator(tree, { + name: 'nextapp', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/nextjs', + }); + + await configurationGenerator(tree, { + name: 'react-swc', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/react-webpack5', + }); + + await configurationGenerator(tree, { + name: 'wv1', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/web-components-vite', + }); + + await configurationGenerator(tree, { + name: 'ww1', + uiFramework: '@storybook/react', + storybook7betaConfiguration: true, + storybook7UiFramework: '@storybook/web-components-webpack5', + }); + }); + + it('should have updated all their target configurations correctly', async () => { + const projects = getProjects(tree); + expect(projects).toMatchSnapshot(); + }); + + test.each(testCases)( + 'should contain the correct configuration in %p', + (storybookConfigPath) => { + if (tree.exists(storybookConfigPath)) { + if (tree.exists(`${storybookConfigPath}main.ts`)) { + expect( + tree.read(`${storybookConfigPath}main.ts`, 'utf-8') + ).toMatchSnapshot(); + } + if (tree.exists(`${storybookConfigPath}main.js`)) { + expect( + tree.read(`${storybookConfigPath}main.js`, 'utf-8') + ).toMatchSnapshot(); + } + expect( + tree.read(`${storybookConfigPath}tsconfig.json`, 'utf-8') + ).toMatchSnapshot(); + } + } + ); + }); +}); diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index 8742390233b34..ec5b199a752c6 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -27,7 +27,10 @@ import { updateLintConfig, } from './util-functions'; import { Linter } from '@nrwl/linter'; -import { findStorybookAndBuildTargetsAndCompiler } from '../../utils/utilities'; +import { + findStorybookAndBuildTargetsAndCompiler, + isStorybookV7, +} from '../../utils/utilities'; import { storybookNextAddonVersion, storybookSwcAddonVersion, @@ -50,17 +53,82 @@ export async function configurationGenerator( const { nextBuildTarget, compiler, viteBuildTarget } = findStorybookAndBuildTargetsAndCompiler(targets); - if (viteBuildTarget && schema.bundler !== 'vite') { + /** + * Make sure someone is not trying to configure Storybook + * with the wrong version. + */ + let storybook7; + try { + storybook7 = isStorybookV7(); + } catch (e) { + storybook7 = schema.storybook7betaConfiguration; + } + + if (storybook7 && !schema.storybook7betaConfiguration) { + schema.storybook7betaConfiguration = true; logger.info( - `Your project ${schema.name} uses Vite as a bundler. - Nx will configure Storybook for this project to use Vite as well.` + `You are using Storybook version 7. + So Nx will configure Storybook for version 7.` ); - schema.bundler = 'vite'; } - const initTask = await initGenerator(tree, { - uiFramework: schema.uiFramework, + if (viteBuildTarget) { + if (schema.bundler !== 'vite') { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.bundler = 'vite'; + } + } + + if (schema.storybook7betaConfiguration) { + if (viteBuildTarget) { + if (schema.storybook7UiFramework === '@storybook/react-webpack5') { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.storybook7UiFramework = '@storybook/react-vite'; + } + if ( + schema.storybook7UiFramework === '@storybook/web-components-webpack5' + ) { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.storybook7UiFramework = '@storybook/web-components-vite'; + } + } + + if (nextBuildTarget) { + schema.storybook7UiFramework = '@storybook/nextjs'; + } + + if (!schema.storybook7UiFramework) { + if (schema.uiFramework === '@storybook/react') { + schema.storybook7UiFramework = viteBuildTarget + ? '@storybook/react-vite' + : '@storybook/react-webpack5'; + } else if (schema.uiFramework === '@storybook/web-components') { + schema.storybook7UiFramework = viteBuildTarget + ? '@storybook/web-components-vite' + : '@storybook/web-components-webpack5'; + } else if (schema.uiFramework === '@storybook/angular') { + schema.storybook7UiFramework = '@storybook/angular'; + } else if (schema.uiFramework !== '@storybook/react-native') { + schema.storybook7UiFramework = `${schema.uiFramework}-webpack5`; + } + } + } + + const initTask = initGenerator(tree, { + uiFramework: schema.storybook7betaConfiguration + ? schema.storybook7UiFramework + : schema.uiFramework, bundler: schema.bundler, + storybook7betaConfiguration: schema.storybook7betaConfiguration, }); tasks.push(initTask); @@ -68,26 +136,32 @@ export async function configurationGenerator( createRootStorybookDirForRootProject( tree, schema.name, - schema.uiFramework, + schema.storybook7betaConfiguration + ? schema.storybook7UiFramework + : schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, !!nextBuildTarget, compiler === 'swc', - schema.bundler === 'vite' + schema.bundler === 'vite', + schema.storybook7betaConfiguration ); } else { createRootStorybookDir(tree, schema.js, schema.tsConfiguration); createProjectStorybookDir( tree, schema.name, - schema.uiFramework, + schema.storybook7betaConfiguration + ? schema.storybook7UiFramework + : schema.uiFramework, schema.js, schema.tsConfiguration, !!nextBuildTarget, compiler === 'swc', - schema.bundler === 'vite' + schema.bundler === 'vite', + schema.storybook7betaConfiguration ); } @@ -104,7 +178,8 @@ export async function configurationGenerator( tree, schema.name, schema.uiFramework, - schema.configureTestRunner + schema.configureTestRunner, + schema.storybook7betaConfiguration ); } @@ -136,7 +211,11 @@ export async function configurationGenerator( ); } - if (nextBuildTarget && projectType === 'application') { + if ( + nextBuildTarget && + projectType === 'application' && + !schema.storybook7betaConfiguration + ) { tasks.push( addDependenciesToPackageJson( tree, diff --git a/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ new file mode 100644 index 0000000000000..beebca15532d3 --- /dev/null +++ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ @@ -0,0 +1,42 @@ +<% if (!isRootProject){ %>import { rootMain } from '<%= offsetFromRoot %>../.storybook/<%= rootMainName %>';<% } %> +<% if (isRootProject){ %>import { rootMain } from './main.root';<% } %> +import type { StorybookConfig, Options } from '@storybook/core-common'; +<% if (usesVite){ %>import { mergeConfig } from 'vite';<% } %> +<% if (usesVite){ %>import viteTsConfigPaths from 'vite-tsconfig-paths';<% } %> + +const config: StorybookConfig = { + ...rootMain, + stories: [ + ...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %> + '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %> + '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)' + <% } %>], + addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> + <% if(usesSwc) { %>, 'storybook-addon-swc' <% } %> + ]<% if(usesVite) { %>, + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '<%= offsetFromRoot %>../', + }), + ], + }); + },<% } %> + framework: { + name: '<%= uiFramework %>', + options: {}, + }, +}; + +module.exports = config; + +<% if(!usesVite) { %> +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config +<% } %> + +<% if(usesVite) { %> +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +<% } %> \ No newline at end of file diff --git a/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/preview.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/preview.ts__tmpl__ new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/tsconfig.json__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/tsconfig.json__tmpl__ new file mode 100644 index 0000000000000..dd88917da02c0 --- /dev/null +++ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/tsconfig.json__tmpl__ @@ -0,0 +1,28 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true + <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "outDir": "" <% } %> + }, + <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>"files": [ + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/styled-jsx.d.ts", + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/image.d.ts" + ],<% } %> + "exclude": ["../**/*.spec.ts" <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"<% } %>], + "include": [<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %> + "../src/**/*.stories.ts", + "../src/**/*.stories.js", + "../src/**/*.stories.jsx", + "../src/**/*.stories.tsx", + "../src/**/*.stories.mdx", + "*.ts", + "*.js"<% } else { %> + "../<%= mainDir %>/**/*.stories.ts", + "../<%= mainDir %>/**/*.stories.js", + "../<%= mainDir %>/**/*.stories.jsx", + "../<%= mainDir %>/**/*.stories.tsx", + "../<%= mainDir %>/**/*.stories.mdx", + "*.ts", + "*.js"<% if(uiFramework === '@storybook/react-native') { %>, *.tsx"<% } %><% } %>] +} diff --git a/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ new file mode 100644 index 0000000000000..3ee5cd53fca23 --- /dev/null +++ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ @@ -0,0 +1,39 @@ +<% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %> +<% if (isRootProject){ %>const rootMain = require('./main.root');<% } %> +<% if (usesVite){ %>const { mergeConfig } = require('vite');<% } %> +<% if (usesVite){ %>const viteTsConfigPaths = require('vite-tsconfig-paths').default;<% } %> +<% if (existsRootWebpackConfig && !usesVite){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %> + +module.exports = { + ...rootMain, + stories: [ + ...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %> + '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %> + '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)' + <% } %>], + addons: [...rootMain.addons <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %> + <% if(usesSwc) { %>, 'storybook-addon-swc' <% } %> + ]<% if(usesVite) { %>, + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '<%= offsetFromRoot %>../', + }), + ], + }); + },<% } %> + framework: { + name: '<%= uiFramework %>', + options: {}, + }, +}; +<% if(!usesVite) { %> +// To customize your webpack configuration you can use the webpackFinal field. +// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config +<% } %> + +<% if(usesVite) { %> +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +<% } %> \ No newline at end of file diff --git a/packages/storybook/src/generators/configuration/project-files-7/.storybook/preview.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/preview.js__tmpl__ new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/packages/storybook/src/generators/configuration/project-files-7/.storybook/tsconfig.json__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/tsconfig.json__tmpl__ new file mode 100644 index 0000000000000..52240acaa2a52 --- /dev/null +++ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/tsconfig.json__tmpl__ @@ -0,0 +1,26 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true + <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "outDir": "" <% } %> + }, + <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>"files": [ + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/styled-jsx.d.ts", + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nrwl/react/typings/image.d.ts" + ],<% } %> + "exclude": ["../**/*.spec.ts" <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"<% } %>], + "include": [<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %> + "../src/**/*.stories.ts", + "../src/**/*.stories.js", + "../src/**/*.stories.jsx", + "../src/**/*.stories.tsx", + "../src/**/*.stories.mdx", + "*.js"<% } else { %> + "../<%= mainDir %>/**/*.stories.ts", + "../<%= mainDir %>/**/*.stories.js", + "../<%= mainDir %>/**/*.stories.jsx", + "../<%= mainDir %>/**/*.stories.tsx", + "../<%= mainDir %>/**/*.stories.mdx", + "*.js"<% if(uiFramework === '@storybook/react-native') { %>, "*.ts", "*.tsx"<% } %><% } %>] +} diff --git a/packages/storybook/src/generators/configuration/root-files-ts/.storybook/__mainName__.ts__tmpl__ b/packages/storybook/src/generators/configuration/root-files-ts/.storybook/__mainName__.ts__tmpl__ index acaa1f82c83bc..3b63435d6b7c1 100644 --- a/packages/storybook/src/generators/configuration/root-files-ts/.storybook/__mainName__.ts__tmpl__ +++ b/packages/storybook/src/generators/configuration/root-files-ts/.storybook/__mainName__.ts__tmpl__ @@ -2,11 +2,5 @@ import type { StorybookConfig } from '@storybook/core-common'; export const rootMain: StorybookConfig = { stories: [], - addons: ['@storybook/addon-essentials'], - // webpackFinal: async (config, { configType }) => { - // // Make whatever fine-grained changes you need that should apply to all storybook configs - - // // Return the altered config - // return config; - // }, + addons: ['@storybook/addon-essentials'] }; diff --git a/packages/storybook/src/generators/configuration/root-files/.storybook/__mainName__.js__tmpl__ b/packages/storybook/src/generators/configuration/root-files/.storybook/__mainName__.js__tmpl__ index 1492ac61f6fd0..a9e950dcd84e9 100644 --- a/packages/storybook/src/generators/configuration/root-files/.storybook/__mainName__.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/root-files/.storybook/__mainName__.js__tmpl__ @@ -1,11 +1,4 @@ module.exports = { stories: [], - addons: ['@storybook/addon-essentials'], - // uncomment the property below if you want to apply some webpack config globally - // webpackFinal: async (config, { configType }) => { - // // Make whatever fine-grained changes you need that should apply to all storybook configs - - // // Return the altered config - // return config; - // }, + addons: ['@storybook/addon-essentials'] }; diff --git a/packages/storybook/src/generators/configuration/schema.d.ts b/packages/storybook/src/generators/configuration/schema.d.ts index 2a90e7f0379f0..75461e2a8b01b 100644 --- a/packages/storybook/src/generators/configuration/schema.d.ts +++ b/packages/storybook/src/generators/configuration/schema.d.ts @@ -1,22 +1,17 @@ import { Linter } from '@nrwl/linter'; +import { UiFramework7, UiFramework } from '../../utils/models'; export interface StorybookConfigureSchema { name: string; - uiFramework: - | '@storybook/angular' - | '@storybook/react' - | '@storybook/react-native' - | '@storybook/html' - | '@storybook/web-components' - | '@storybook/vue' - | '@storybook/vue3' - | '@storybook/svelte'; + uiFramework: UiFramework; // TODO(katerina): Remove when Storybook 7 configureCypress?: boolean; - bundler?: 'webpack' | 'vite'; + bundler?: 'webpack' | 'vite'; // TODO(katerina): Remove when Storybook 7 linter?: Linter; js?: boolean; tsConfiguration?: boolean; cypressDirectory?: string; standaloneConfig?: boolean; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; // TODO(katerina): Change when Storybook 7 + storybook7UiFramework?: UiFramework7; // TODO(katerina): Change when Storybook 7 } diff --git a/packages/storybook/src/generators/configuration/schema.json b/packages/storybook/src/generators/configuration/schema.json index eb4ebbe9cb01d..928f03c9dd7fd 100644 --- a/packages/storybook/src/generators/configuration/schema.json +++ b/packages/storybook/src/generators/configuration/schema.json @@ -76,6 +76,34 @@ "x-prompt": "Which Storybook builder do you want to use?", "default": "webpack", "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" + }, + "storybook7UiFramework": { + "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" + ] } }, "required": ["name"], diff --git a/packages/storybook/src/generators/configuration/test-configs/various-projects.json b/packages/storybook/src/generators/configuration/test-configs/various-projects.json new file mode 100644 index 0000000000000..528b02fb6c205 --- /dev/null +++ b/packages/storybook/src/generators/configuration/test-configs/various-projects.json @@ -0,0 +1,1578 @@ +{ + "main-vite": { + "name": "main-vite", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-vite/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/apps/main-vite" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "serve": { + "executor": "@nrwl/vite:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "main-vite:build" }, + "configurations": { + "development": { + "buildTarget": "main-vite:build:development", + "hmr": true + }, + "production": { + "buildTarget": "main-vite:build:production", + "hmr": false + } + } + }, + "test": { + "executor": "@nrwl/vite:test", + "outputs": ["coverage/apps/main-vite"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/main-vite" + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/main-vite/**/*.{ts,tsx,js,jsx}"] + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/main-vite/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "configDir": "apps/main-vite/.storybook", + "outputDir": "dist/storybook/main-vite" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/main-vite" + }, + "main-vite-e2e": { + "name": "main-vite-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-vite-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/main-vite-e2e/cypress.config.ts", + "devServerTarget": "main-vite:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "main-vite:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/main-vite-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["main-vite"], + "root": "apps/main-vite-e2e" + }, + "main-vite-ts": { + "name": "main-vite-ts", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-vite-ts/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/apps/main-vite-ts" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "serve": { + "executor": "@nrwl/vite:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "main-vite-ts:build" }, + "configurations": { + "development": { + "buildTarget": "main-vite-ts:build:development", + "hmr": true + }, + "production": { + "buildTarget": "main-vite-ts:build:production", + "hmr": false + } + } + }, + "test": { + "executor": "@nrwl/vite:test", + "outputs": ["coverage/apps/main-vite-ts"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/main-vite-ts" + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/main-vite-ts/**/*.{ts,tsx,js,jsx}"] + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/main-vite-ts/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "configDir": "apps/main-vite-ts/.storybook", + "outputDir": "dist/storybook/main-vite-ts" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/main-vite-ts" + }, + "main-vite-ts-e2e": { + "name": "main-vite-ts-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-vite-ts-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/main-vite-ts-e2e/cypress.config.ts", + "devServerTarget": "main-vite-ts:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "main-vite-ts:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/main-vite-ts-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["main-vite-ts"], + "root": "apps/main-vite-ts-e2e" + }, + "main-webpack": { + "name": "main-webpack", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-webpack/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "compiler": "babel", + "outputPath": "dist/apps/main-webpack", + "index": "apps/main-webpack/src/index.html", + "baseHref": "/", + "main": "apps/main-webpack/src/main.tsx", + "polyfills": "apps/main-webpack/src/polyfills.ts", + "tsConfig": "apps/main-webpack/tsconfig.app.json", + "assets": [ + "apps/main-webpack/src/favicon.ico", + "apps/main-webpack/src/assets" + ], + "styles": ["apps/main-webpack/src/styles.css"], + "scripts": [], + "webpackConfig": "@nrwl/react/plugins/webpack" + }, + "configurations": { + "development": { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true + }, + "production": { + "fileReplacements": [ + { + "replace": "apps/main-webpack/src/environments/environment.ts", + "with": "apps/main-webpack/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false + } + } + }, + "serve": { + "executor": "@nrwl/webpack:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "main-webpack:build", "hmr": true }, + "configurations": { + "development": { "buildTarget": "main-webpack:build:development" }, + "production": { + "buildTarget": "main-webpack:build:production", + "hmr": false + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/main-webpack/**/*.{ts,tsx,js,jsx}"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/main-webpack/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/main-webpack/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "configDir": "apps/main-webpack/.storybook", + "outputDir": "dist/storybook/main-webpack" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/main-webpack" + }, + "main-webpack-e2e": { + "name": "main-webpack-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/main-webpack-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/main-webpack-e2e/cypress.config.ts", + "devServerTarget": "main-webpack:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "main-webpack:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/main-webpack-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["main-webpack"], + "root": "apps/main-webpack-e2e" + }, + "my-plugin-e2e": { + "name": "my-plugin-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/my-plugin-e2e/src", + "targets": { + "e2e": { + "executor": "@nrwl/nx-plugin:e2e", + "options": { + "target": "my-plugin:build", + "jestConfig": "apps/my-plugin-e2e/jest.config.ts" + } + } + }, + "tags": [], + "implicitDependencies": ["my-plugin"], + "root": "apps/my-plugin-e2e" + }, + "nextapp": { + "name": "nextapp", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/nextapp", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/next:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "root": "apps/nextapp", + "outputPath": "dist/apps/nextapp" + }, + "configurations": { + "development": { "outputPath": "apps/nextapp" }, + "production": {} + } + }, + "serve": { + "executor": "@nrwl/next:server", + "defaultConfiguration": "development", + "options": { "buildTarget": "nextapp:build", "dev": true }, + "configurations": { + "development": { + "buildTarget": "nextapp:build:development", + "dev": true + }, + "production": { + "buildTarget": "nextapp:build:production", + "dev": false + } + } + }, + "export": { + "executor": "@nrwl/next:export", + "options": { "buildTarget": "nextapp:build:production" } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/nextapp/jest.config.ts", + "passWithNoTests": true + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/nextapp/**/*.{ts,tsx,js,jsx}"] } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/nextapp/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "outputDir": "dist/storybook/nextapp", + "configDir": "apps/nextapp/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/nextapp" + }, + "nextapp-e2e": { + "name": "nextapp-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/nextapp-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/nextapp-e2e/cypress.config.ts", + "devServerTarget": "nextapp:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "nextapp:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/nextapp-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["nextapp"], + "root": "apps/nextapp-e2e" + }, + "ngapp": { + "name": "ngapp", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/ngapp/src", + "prefix": "imported-libs", + "targets": { + "build": { + "executor": "@angular-devkit/build-angular:browser", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/apps/ngapp", + "index": "apps/ngapp/src/index.html", + "main": "apps/ngapp/src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "apps/ngapp/tsconfig.app.json", + "assets": ["apps/ngapp/src/favicon.ico", "apps/ngapp/src/assets"], + "styles": ["apps/ngapp/src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { "browserTarget": "ngapp:build:production" }, + "development": { "browserTarget": "ngapp:build:development" } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { "browserTarget": "ngapp:build" } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/ngapp/**/*.ts", "apps/ngapp/**/*.html"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/ngapp/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@storybook/angular:start-storybook", + "options": { + "port": 4400, + "configDir": "apps/ngapp/.storybook", + "browserTarget": "ngapp:build", + "compodoc": false + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@storybook/angular:build-storybook", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/ngapp", + "configDir": "apps/ngapp/.storybook", + "browserTarget": "ngapp:build", + "compodoc": false + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/ngapp" + }, + "ngapp-e2e": { + "name": "ngapp-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/ngapp-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/ngapp-e2e/cypress.config.ts", + "devServerTarget": "ngapp:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "ngapp:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/ngapp-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["ngapp"], + "root": "apps/ngapp-e2e" + }, + "nglib-e2e": { + "name": "nglib-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/nglib-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/nglib-e2e/cypress.config.ts", + "devServerTarget": "nglib:storybook", + "testingType": "e2e" + }, + "configurations": { "ci": { "devServerTarget": "nglib:storybook:ci" } } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/nglib-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["nglib"], + "root": "apps/nglib-e2e" + }, + "react-rollup-e2e": { + "name": "react-rollup-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/react-rollup-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/react-rollup-e2e/cypress.config.ts", + "devServerTarget": "react-rollup:storybook", + "testingType": "e2e" + }, + "configurations": { + "ci": { "devServerTarget": "react-rollup:storybook:ci" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/react-rollup-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["react-rollup"], + "root": "apps/react-rollup-e2e" + }, + "react-swc": { + "name": "react-swc", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/react-swc/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "compiler": "swc", + "outputPath": "dist/apps/react-swc", + "index": "apps/react-swc/src/index.html", + "baseHref": "/", + "main": "apps/react-swc/src/main.tsx", + "tsConfig": "apps/react-swc/tsconfig.app.json", + "assets": [ + "apps/react-swc/src/favicon.ico", + "apps/react-swc/src/assets" + ], + "styles": ["apps/react-swc/src/styles.css"], + "scripts": [], + "webpackConfig": "apps/react-swc/webpack.config.js" + }, + "configurations": { + "development": { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true + }, + "production": { + "fileReplacements": [ + { + "replace": "apps/react-swc/src/environments/environment.ts", + "with": "apps/react-swc/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false + } + } + }, + "serve": { + "executor": "@nrwl/webpack:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "react-swc:build", "hmr": true }, + "configurations": { + "development": { "buildTarget": "react-swc:build:development" }, + "production": { + "buildTarget": "react-swc:build:production", + "hmr": false + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/react-swc/**/*.{ts,tsx,js,jsx}"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/react-swc/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [], + "root": "apps/react-swc" + }, + "react-swc-e2e": { + "name": "react-swc-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/react-swc-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/react-swc-e2e/cypress.config.ts", + "devServerTarget": "react-swc:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "react-swc:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/react-swc-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["react-swc"], + "root": "apps/react-swc-e2e" + }, + "react-vite-e2e": { + "name": "react-vite-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/react-vite-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/react-vite-e2e/cypress.config.ts", + "devServerTarget": "react-vite:storybook", + "testingType": "e2e" + }, + "configurations": { + "ci": { "devServerTarget": "react-vite:storybook:ci" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/react-vite-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["react-vite"], + "root": "apps/react-vite-e2e" + }, + "reapp": { + "name": "reapp", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/reapp/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/apps/reapp" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "serve": { + "executor": "@nrwl/vite:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "reapp:build" }, + "configurations": { + "development": { + "buildTarget": "reapp:build:development", + "hmr": true + }, + "production": { + "buildTarget": "reapp:build:production", + "hmr": false + } + } + }, + "test": { + "executor": "@nrwl/vite:test", + "outputs": ["coverage/apps/reapp"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/apps/reapp" + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/reapp/**/*.{ts,tsx,js,jsx}"] } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/reapp/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "outputDir": "dist/storybook/reapp", + "configDir": "apps/reapp/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/reapp" + }, + "reapp-e2e": { + "name": "reapp-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/reapp-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/reapp-e2e/cypress.config.ts", + "devServerTarget": "reapp:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "reapp:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/reapp-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["reapp"], + "root": "apps/reapp-e2e" + }, + "reappw": { + "name": "reappw", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/reappw/src", + "projectType": "application", + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "compiler": "babel", + "outputPath": "dist/apps/reappw", + "index": "apps/reappw/src/index.html", + "baseHref": "/", + "main": "apps/reappw/src/main.tsx", + "tsConfig": "apps/reappw/tsconfig.app.json", + "assets": ["apps/reappw/src/favicon.ico", "apps/reappw/src/assets"], + "styles": ["apps/reappw/src/styles.css"], + "scripts": [], + "webpackConfig": "@nrwl/react/plugins/webpack" + }, + "configurations": { + "development": { + "extractLicenses": false, + "optimization": false, + "sourceMap": true, + "vendorChunk": true + }, + "production": { + "fileReplacements": [ + { + "replace": "apps/reappw/src/environments/environment.ts", + "with": "apps/reappw/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false + } + } + }, + "serve": { + "executor": "@nrwl/webpack:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "reappw:build", "hmr": true }, + "configurations": { + "development": { "buildTarget": "reappw:build:development" }, + "production": { + "buildTarget": "reappw:build:production", + "hmr": false + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/reappw/**/*.{ts,tsx,js,jsx}"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/reappw/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "apps/reappw/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "outputDir": "dist/storybook/reappw", + "configDir": "apps/reappw/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "apps/reappw" + }, + "reappw-e2e": { + "name": "reappw-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/reappw-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/reappw-e2e/cypress.config.ts", + "devServerTarget": "reappw:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "reappw:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/reappw-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["reappw"], + "root": "apps/reappw-e2e" + }, + "wv1": { + "name": "wv1", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/wv1/src", + "tags": [], + "targets": { + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/apps/wv1" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "serve": { + "executor": "@nrwl/vite:dev-server", + "defaultConfiguration": "development", + "options": { "buildTarget": "wv1:build" }, + "configurations": { + "development": { + "buildTarget": "wv1:build:development", + "hmr": true + }, + "production": { "buildTarget": "wv1:build:production", "hmr": false } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/wv1/**/*.ts"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/wv1/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/web-components", + "port": 4400, + "configDir": "apps/wv1/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/web-components", + "outputDir": "dist/storybook/wv1", + "configDir": "apps/wv1/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "root": "apps/wv1" + }, + "wv1-e2e": { + "name": "wv1-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/wv1-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/wv1-e2e/cypress.config.ts", + "devServerTarget": "wv1:serve:development", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "wv1:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/wv1-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["wv1"], + "root": "apps/wv1-e2e" + }, + "ww1": { + "name": "ww1", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/ww1/src", + "tags": [], + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "outputPath": "dist/apps/ww1", + "compiler": "babel", + "main": "apps/ww1/src/main.ts", + "tsConfig": "apps/ww1/tsconfig.app.json", + "webpackConfig": "apps/ww1/webpack.config.js", + "assets": ["apps/ww1/src/favicon.ico", "apps/ww1/src/assets"], + "index": "apps/ww1/src/index.html", + "baseHref": "/", + "styles": ["apps/ww1/src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false, + "fileReplacements": [ + { + "replace": "apps/ww1/src/environments/environment.ts", + "with": "apps/ww1/src/environments/environment.prod.ts" + } + ] + } + } + }, + "serve": { + "executor": "@nrwl/webpack:dev-server", + "options": { "buildTarget": "ww1:build" }, + "configurations": { + "production": { "buildTarget": "ww1:build:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/ww1/**/*.ts"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/ww1/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/web-components", + "port": 4400, + "configDir": "apps/ww1/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/web-components", + "outputDir": "dist/storybook/ww1", + "configDir": "apps/ww1/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "root": "apps/ww1" + }, + "ww1-e2e": { + "name": "ww1-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/ww1-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/ww1-e2e/cypress.config.ts", + "devServerTarget": "ww1:serve", + "testingType": "e2e" + }, + "configurations": { + "production": { "devServerTarget": "ww1:serve:production" } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["apps/ww1-e2e/**/*.{js,ts}"] } + } + }, + "tags": [], + "implicitDependencies": ["ww1"], + "root": "apps/ww1-e2e" + }, + "my-plugin": { + "name": "my-plugin", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/my-plugin/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/js:tsc", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/my-plugin", + "main": "libs/my-plugin/src/index.ts", + "tsConfig": "libs/my-plugin/tsconfig.lib.json", + "assets": [ + "libs/my-plugin/*.md", + { + "input": "./libs/my-plugin/src", + "glob": "**/!(*.ts)", + "output": "./src" + }, + { + "input": "./libs/my-plugin/src", + "glob": "**/*.d.ts", + "output": "./src" + }, + { + "input": "./libs/my-plugin", + "glob": "generators.json", + "output": "." + }, + { + "input": "./libs/my-plugin", + "glob": "executors.json", + "output": "." + } + ] + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "libs/my-plugin/**/*.ts", + "libs/my-plugin/generators.json", + "libs/my-plugin/executors.json", + "libs/my-plugin/package.json" + ] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/my-plugin/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [], + "root": "libs/my-plugin" + }, + "mylib": { + "name": "mylib", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "libs/mylib/src", + "targets": { "build": { "executor": "@imported-libs/my-plugin:build" } }, + "tags": [], + "root": "libs/mylib" + }, + "nglib": { + "name": "nglib", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "sourceRoot": "libs/nglib/src", + "prefix": "imported-libs", + "targets": { + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/nglib/jest.config.ts", + "passWithNoTests": true + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/nglib/**/*.ts", "libs/nglib/**/*.html"] + } + }, + "storybook": { + "executor": "@storybook/angular:start-storybook", + "options": { + "port": 4400, + "configDir": "libs/nglib/.storybook", + "browserTarget": "nglib:build-storybook", + "compodoc": false + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@storybook/angular:build-storybook", + "outputs": ["{options.outputDir}"], + "options": { + "outputDir": "dist/storybook/nglib", + "configDir": "libs/nglib/.storybook", + "browserTarget": "nglib:build-storybook", + "compodoc": false + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "tags": [], + "root": "libs/nglib" + }, + "react-rollup": { + "name": "react-rollup", + "sourceRoot": "libs/react-rollup/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/react-rollup/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nrwl/rollup:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/react-rollup", + "tsConfig": "libs/react-rollup/tsconfig.lib.json", + "project": "libs/react-rollup/package.json", + "entryFile": "libs/react-rollup/src/index.ts", + "external": ["react/jsx-runtime"], + "rollupConfig": "@nrwl/react/plugins/bundle-rollup", + "compiler": "babel", + "assets": [ + { + "glob": "libs/react-rollup/README.md", + "input": ".", + "output": "." + } + ] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/react-rollup/jest.config.ts", + "passWithNoTests": true + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "libs/react-rollup/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "configDir": "libs/react-rollup/.storybook", + "outputDir": "dist/storybook/react-rollup" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "root": "libs/react-rollup" + }, + "react-rollup-2": { + "name": "react-rollup-2", + "sourceRoot": "libs/react-rollup-2/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/react-rollup-2/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nrwl/rollup:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/react-rollup-2", + "tsConfig": "libs/react-rollup-2/tsconfig.lib.json", + "project": "libs/react-rollup-2/package.json", + "entryFile": "libs/react-rollup-2/src/index.ts", + "external": ["react/jsx-runtime"], + "rollupConfig": "@nrwl/react/plugins/bundle-rollup", + "compiler": "babel", + "assets": [ + { + "glob": "libs/react-rollup-2/README.md", + "input": ".", + "output": "." + } + ] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/react-rollup-2/jest.config.ts", + "passWithNoTests": true + } + } + }, + "root": "libs/react-rollup-2" + }, + "react-vite": { + "name": "react-vite", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/react-vite/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/react-vite/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/libs/react-vite" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "test": { + "executor": "@nrwl/vite:test", + "outputs": ["coverage/libs/react-vite"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/libs/react-vite" + } + }, + "storybook": { + "executor": "@nrwl/storybook:storybook", + "options": { + "uiFramework": "@storybook/react", + "port": 4400, + "configDir": "libs/react-vite/.storybook" + }, + "configurations": { "ci": { "quiet": true } } + }, + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputDir}"], + "options": { + "uiFramework": "@storybook/react", + "configDir": "libs/react-vite/.storybook", + "outputDir": "dist/storybook/react-vite" + }, + "configurations": { "ci": { "quiet": true } } + } + }, + "root": "libs/react-vite" + }, + "react-vite-2": { + "name": "react-vite-2", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/react-vite-2/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["libs/react-vite-2/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { "outputPath": "dist/libs/react-vite-2" }, + "configurations": { + "development": { "mode": "development" }, + "production": { "mode": "production" } + } + }, + "test": { + "executor": "@nrwl/vite:test", + "outputs": ["coverage/libs/react-vite-2"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../../coverage/libs/react-vite-2" + } + } + }, + "root": "libs/react-vite-2" + }, + "utils-one": { + "name": "utils-one", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/utils/one/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/utils/one", + "main": "libs/utils/one/src/index.ts", + "tsConfig": "libs/utils/one/tsconfig.lib.json", + "assets": [] + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["libs/utils/one/**/*.ts"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/utils/one/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [], + "root": "libs/utils/one" + }, + "utils-three-vite": { + "name": "utils-three-vite", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/utils/three-vite/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/vite:build", + "outputs": ["{options.outputPath}"], + "options": { "outputPath": "dist/libs/utils/three-vite" } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["libs/utils/three-vite/**/*.ts"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/utils/three-vite/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [], + "root": "libs/utils/three-vite" + }, + "utils-two": { + "name": "utils-two", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/utils/two/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/webpack:webpack", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/libs/utils/two", + "main": "libs/utils/two/src/index.ts", + "tsConfig": "libs/utils/two/tsconfig.lib.json", + "assets": [] + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { "lintFilePatterns": ["libs/utils/two/**/*.ts"] } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "libs/utils/two/jest.config.ts", + "passWithNoTests": true + } + } + }, + "tags": [], + "root": "libs/utils/two" + } +} diff --git a/packages/storybook/src/generators/configuration/util-functions.ts b/packages/storybook/src/generators/configuration/util-functions.ts index bbb17f8ed203a..31c8322745f70 100644 --- a/packages/storybook/src/generators/configuration/util-functions.ts +++ b/packages/storybook/src/generators/configuration/util-functions.ts @@ -21,12 +21,12 @@ import { join, relative } from 'path'; import { dedupe, findStorybookAndBuildTargetsAndCompiler, - isFramework, TsConfig, } from '../../utils/utilities'; import { StorybookConfigureSchema } from './schema'; import { getRootTsConfigPathInTree } from '@nrwl/workspace/src/utilities/typescript'; import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils'; +import { UiFramework, UiFramework7 } from '../../utils/models'; const DEFAULT_PORT = 4400; @@ -34,7 +34,8 @@ export function addStorybookTask( tree: Tree, projectName: string, uiFramework: string, - configureTestRunner: boolean + configureTestRunner: boolean, + usesV7?: boolean ) { if (uiFramework === '@storybook/react-native') { return; @@ -69,6 +70,11 @@ export function addStorybookTask( }, }; + if (usesV7) { + delete projectConfig.targets['storybook'].options.uiFramework; + delete projectConfig.targets['build-storybook'].options.uiFramework; + } + if (configureTestRunner === true) { projectConfig.targets['test-storybook'] = { executor: 'nx:run-commands', @@ -168,7 +174,8 @@ export function configureTsProjectConfig( ...(tsConfigContent.exclude || []), '**/*.stories.ts', '**/*.stories.js', - ...(isFramework('react', schema) || isFramework('react-native', schema) + ...(schema.uiFramework === '@storybook/react' || + schema.uiFramework === '@storybook/react-native' ? ['**/*.stories.jsx', '**/*.stories.tsx'] : []), ]; @@ -327,14 +334,15 @@ export function createRootStorybookDir( export function createRootStorybookDirForRootProject( tree: Tree, projectName: string, - uiFramework: StorybookConfigureSchema['uiFramework'], + uiFramework: UiFramework | UiFramework7, js: boolean, tsConfiguration: boolean, root: string, projectType: string, isNextJs?: boolean, usesSwc?: boolean, - usesVite?: boolean + usesVite?: boolean, + usesV7?: boolean ) { const rootConfigExists = tree.exists('.storybook/main.root.js') || @@ -370,7 +378,7 @@ export function createRootStorybookDirForRootProject( const templatePath = join( __dirname, - `./project-files${ + `./project-files${usesV7 ? '-7' : ''}${ rootFileIsTs(tree, 'main.root', tsConfiguration) ? '-ts' : '' }` ); @@ -399,12 +407,13 @@ export function createRootStorybookDirForRootProject( export function createProjectStorybookDir( tree: Tree, projectName: string, - uiFramework: StorybookConfigureSchema['uiFramework'], + uiFramework: UiFramework | UiFramework7, js: boolean, tsConfiguration: boolean, isNextJs?: boolean, usesSwc?: boolean, - usesVite?: boolean + usesVite?: boolean, + usesV7?: boolean ) { const { root, projectType } = readProjectConfiguration(tree, projectName); @@ -434,7 +443,7 @@ export function createProjectStorybookDir( const templatePath = join( __dirname, - `./project-files${ + `./project-files${usesV7 ? '-7' : ''}${ rootFileIsTs(tree, rootMainName, tsConfiguration) ? '-ts' : '' }` ); diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts index 95f616be0bf1e..576dd1cbe027b 100644 --- a/packages/storybook/src/generators/init/init.ts +++ b/packages/storybook/src/generators/init/init.ts @@ -7,7 +7,6 @@ import { updateJson, updateNxJson, } from '@nrwl/devkit'; -import { isFramework } from '../../utils/utilities'; import { babelCoreVersion, @@ -17,6 +16,7 @@ import { litHtmlVersion, nxVersion, reactNativeStorybookLoader, + storybook7Version, storybookReactNativeVersion, storybookVersion, svgrVersion, @@ -36,74 +36,100 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) { // base deps devDependencies['@nrwl/storybook'] = nxVersion; - devDependencies['@storybook/core-server'] = storybookVersion; - devDependencies['@storybook/addon-essentials'] = storybookVersion; - if (schema.bundler === 'vite') { - devDependencies['@storybook/builder-vite'] = viteBuilderVersion; - } else { - devDependencies['@storybook/builder-webpack5'] = storybookVersion; - devDependencies['@storybook/manager-webpack5'] = storybookVersion; - } - - // TODO(katerina): Remove this when Storybook 7.0 is added in Nx - devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion; - - if (isFramework('angular', schema)) { - devDependencies['@storybook/angular'] = storybookVersion; - devDependencies['webpack'] = webpack5Version; + if (schema.storybook7betaConfiguration) { + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/react-native'] = storybookReactNativeVersion; + } else { + devDependencies[schema.uiFramework] = storybook7Version; + } + devDependencies['@storybook/core-server'] = storybook7Version; + devDependencies['@storybook/addon-essentials'] = storybook7Version; + + if (schema.uiFramework === '@storybook/angular') { + if ( + !packageJson.dependencies['@angular/forms'] && + !packageJson.devDependencies['@angular/forms'] + ) { + devDependencies['@angular/forms'] = '*'; + } + } if ( - !packageJson.dependencies['@angular/forms'] && - !packageJson.devDependencies['@angular/forms'] + schema.uiFramework === '@storybook/web-components-vite' || + schema.uiFramework === '@storybook/web-components-webpack5' ) { - devDependencies['@angular/forms'] = '*'; + devDependencies['lit-html'] = litHtmlVersion; } - } - if (isFramework('react', schema)) { - devDependencies['@storybook/react'] = storybookVersion; - devDependencies['@svgr/webpack'] = svgrVersion; - devDependencies['url-loader'] = urlLoaderVersion; - devDependencies['babel-loader'] = babelLoaderVersion; - devDependencies['@babel/core'] = babelCoreVersion; - devDependencies['@babel/preset-typescript'] = babelPresetTypescriptVersion; - devDependencies['@storybook/react'] = storybookVersion; - } + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/addon-ondevice-actions'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-backgrounds'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-controls'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-notes'] = + storybookReactNativeVersion; + devDependencies['react-native-storybook-loader'] = + reactNativeStorybookLoader; + } + } else { + // TODO(katerina): Remove when Storybook v7 + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/react-native'] = storybookReactNativeVersion; + } else { + devDependencies[schema.uiFramework] = storybookVersion; + } - if (isFramework('html', schema)) { - devDependencies['@storybook/html'] = storybookVersion; - } + devDependencies['@storybook/core-server'] = storybookVersion; + devDependencies['@storybook/addon-essentials'] = storybookVersion; - if (isFramework('vue', schema)) { - devDependencies['@storybook/vue'] = storybookVersion; - } + if (schema.bundler === 'vite') { + devDependencies['@storybook/builder-vite'] = viteBuilderVersion; + } else { + devDependencies['@storybook/builder-webpack5'] = storybookVersion; + devDependencies['@storybook/manager-webpack5'] = storybookVersion; + } - if (isFramework('vue3', schema)) { - devDependencies['@storybook/vue3'] = storybookVersion; - } + devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion; - if (isFramework('web-components', schema)) { - devDependencies['@storybook/web-components'] = storybookVersion; - devDependencies['lit-html'] = litHtmlVersion; - } + if (schema.uiFramework === '@storybook/angular') { + devDependencies['webpack'] = webpack5Version; - if (isFramework('svelte', schema)) { - devDependencies['@storybook/svelte'] = storybookVersion; - } + if ( + !packageJson.dependencies['@angular/forms'] && + !packageJson.devDependencies['@angular/forms'] + ) { + devDependencies['@angular/forms'] = '*'; + } + } + + if (schema.uiFramework === '@storybook/react') { + devDependencies['@svgr/webpack'] = svgrVersion; + devDependencies['url-loader'] = urlLoaderVersion; + devDependencies['babel-loader'] = babelLoaderVersion; + devDependencies['@babel/core'] = babelCoreVersion; + devDependencies['@babel/preset-typescript'] = + babelPresetTypescriptVersion; + } - if (isFramework('react-native', schema)) { - devDependencies['@storybook/react-native'] = storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-actions'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-backgrounds'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-controls'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-notes'] = - storybookReactNativeVersion; - devDependencies['react-native-storybook-loader'] = - reactNativeStorybookLoader; + if (schema.uiFramework === '@storybook/web-components') { + devDependencies['lit-html'] = litHtmlVersion; + } + + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/addon-ondevice-actions'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-backgrounds'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-controls'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-notes'] = + storybookReactNativeVersion; + devDependencies['react-native-storybook-loader'] = + reactNativeStorybookLoader; + } } return addDependenciesToPackageJson(host, dependencies, devDependencies); diff --git a/packages/storybook/src/generators/init/schema.d.ts b/packages/storybook/src/generators/init/schema.d.ts index 5d7f4f1c62d1f..68fce6a2857c3 100644 --- a/packages/storybook/src/generators/init/schema.d.ts +++ b/packages/storybook/src/generators/init/schema.d.ts @@ -1,12 +1,7 @@ +import { UiFramework, UiFramework7 } from '../../utils/models'; + export interface Schema { - uiFramework: - | '@storybook/angular' - | '@storybook/react' - | '@storybook/html' - | '@storybook/web-components' - | '@storybook/vue' - | '@storybook/vue3' - | '@storybook/svelte' - | '@storybook/react-native'; - bundler?: 'webpack' | 'vite'; + uiFramework: UiFramework | UiFramework7; + bundler?: 'webpack' | 'vite'; // TODO(katerina): Remove when Storybook 7 + storybook7betaConfiguration?: boolean; } diff --git a/packages/storybook/src/generators/init/schema.json b/packages/storybook/src/generators/init/schema.json index 5690febd2ec45..a177628e6332c 100644 --- a/packages/storybook/src/generators/init/schema.json +++ b/packages/storybook/src/generators/init/schema.json @@ -10,6 +10,21 @@ "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", "@storybook/react", "@storybook/html", "@storybook/web-components", @@ -28,6 +43,12 @@ "x-prompt": "Which bundler do you want to use?", "default": "webpack", "x-priority": "important" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false, + "x-priority": "important" } } } diff --git a/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts b/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts index 90dd905878852..a35a983824e8e 100644 --- a/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts +++ b/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts @@ -7,7 +7,7 @@ import { writeJson, formatFiles, } from '@nrwl/devkit'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function updateStorybookTsconfig(tree: Tree) { let changesMade = false; @@ -37,10 +37,8 @@ export default async function updateStorybookTsconfig(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor]?.options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor]?.options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts b/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts index f51dd2853f9e3..8970ba62b96d5 100644 --- a/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts +++ b/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts @@ -9,7 +9,7 @@ import { writeJson, } from '@nrwl/devkit'; import * as path from 'path'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function addReactTypings(tree: Tree) { let changesMade = false; @@ -40,10 +40,8 @@ export default async function addReactTypings(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor].options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor].options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts b/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts index 96b045a9296f1..548ac7ab6f1ca 100644 --- a/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts +++ b/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts @@ -9,7 +9,7 @@ import { writeJson, } from '@nrwl/devkit'; import * as path from 'path'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function addStyledJsxTypings(tree: Tree) { let changesMade = false; @@ -42,10 +42,8 @@ export default async function addStyledJsxTypings(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor].options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor].options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/executors/models.ts b/packages/storybook/src/utils/models.ts similarity index 78% rename from packages/storybook/src/executors/models.ts rename to packages/storybook/src/utils/models.ts index 720adf992fc36..2efc809ff1421 100644 --- a/packages/storybook/src/executors/models.ts +++ b/packages/storybook/src/utils/models.ts @@ -1,19 +1,11 @@ -export interface StorybookConfig { - configFolder?: string; - configPath?: string; - pluginPath?: string; - srcRoot?: string; -} - export interface CommonNxStorybookConfig { - uiFramework?: UiFramework; - uiFramework7?: UiFramework7; + uiFramework?: UiFramework; // TODO(katerina): Remove when Storybook 7 } export type UiFramework7 = | '@storybook/angular' | '@storybook/html-webpack5' - | '@storybook/next' + | '@storybook/nextjs' | '@storybook/preact-webpack5' | '@storybook/react-webpack5' | '@storybook/react-vite' diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index 20cef97bef4cc..403c1a9732e71 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -6,10 +6,11 @@ import { } from '@nrwl/devkit'; import { CompilerOptions } from 'typescript'; import { storybookVersion } from './versions'; -import { StorybookConfig } from '../executors/models'; import { statSync } from 'fs'; import { findNodes } from 'nx/src/utils/typescript'; import ts = require('typescript'); +import { gte } from 'semver'; +import { join } from 'path'; export const Constants = { addonDependencies: ['@storybook/addons'], @@ -29,6 +30,24 @@ export const Constants = { svelte: '@storybook/svelte', 'react-native': '@storybook/react-native', } as const, + uiFrameworks7: [ + '@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', + ], }; type Constants = typeof Constants; @@ -36,47 +55,13 @@ type Framework = { type: keyof Constants['uiFrameworks']; uiFramework: Constants['uiFrameworks'][keyof Constants['uiFrameworks']]; }; -export function isFramework( - type: Framework['type'], - schema: Pick -) { - if (type === 'angular' && schema.uiFramework === '@storybook/angular') { - return true; - } - if (type === 'react' && schema.uiFramework === '@storybook/react') { - return true; - } - if (type === 'html' && schema.uiFramework === '@storybook/html') { - return true; - } - - if ( - type === 'web-components' && - schema.uiFramework === '@storybook/web-components' - ) { - return true; - } - - if (type === 'vue' && schema.uiFramework === '@storybook/vue') { - return true; - } - - if (type === 'vue3' && schema.uiFramework === '@storybook/vue3') { - return true; - } - - if (type === 'svelte' && schema.uiFramework === '@storybook/svelte') { - return true; - } - - if ( - type === 'react-native' && - schema.uiFramework === '@storybook/react-native' - ) { - return true; - } - return false; +export function isStorybookV7() { + const storybookPackageVersion = require(join( + '@storybook/core-server', + 'package.json' + )).version; + return gte(storybookPackageVersion, '7.0.0-alpha.0'); } export function safeFileDelete(tree: Tree, path: string): boolean { diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index 0fbeabea0d268..54743675e06bd 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -14,3 +14,5 @@ export const storybookNextAddonVersion = '^1.6.6'; export const storybookTestRunnerVersion = '^0.7.2'; export const litHtmlVersion = '^2.3.1'; export const htmlWebpackPluginVersion = '^5.5.0'; + +export const storybook7Version = '^7.0.0-beta.25';