From 1eaa8bd9898f948e3c0704aac2c6b1909d77796f Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Fri, 13 Jan 2023 17:05:53 +0200 Subject: [PATCH] feat(storybook): version 7 generators --- docs/generated/manifests/menus.json | 8 + docs/generated/manifests/packages.json | 11 + docs/generated/packages-metadata.json | 11 + .../generators/storybook-configuration.json | 7 +- .../generators/storybook-configuration.json | 8 +- .../packages/storybook/documents/overview.md | 19 +- .../storybook/documents/storybook-7-setup.md | 98 + .../storybook/generators/configuration.json | 30 +- .../packages/storybook/generators/init.json | 21 + docs/map.json | 5 + .../packages/storybook/plugin-overview.md | 19 +- .../packages/storybook/storybook-7-setup.md | 98 + .../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 | 96 +- .../.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 | 141 +- .../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 + 52 files changed, 5570 insertions(+), 243 deletions(-) create mode 100644 docs/generated/packages/storybook/documents/storybook-7-setup.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 c506b0d9e039c2..61082d95c4fd78 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -5764,6 +5764,14 @@ "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": "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 6f578802941f0d..78d61ea2b5edfc 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -2390,6 +2390,17 @@ "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/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 ac4c0e486dc914..40ea60161164ff 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -2363,6 +2363,17 @@ "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": "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 f3165cb6702a90..d426d1a9645b74 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 4ecaf79fee445d..1c4396d251b692 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/overview.md b/docs/generated/packages/storybook/documents/overview.md index 3b69dc88450b12..c168381acc03d3 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 00000000000000..872388ba287dae --- /dev/null +++ b/docs/generated/packages/storybook/documents/storybook-7-setup.md @@ -0,0 +1,98 @@ +# 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. diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 04eaca63bdb05c..b0c9a4a7afb063 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 8629f60335b4b2..bd8e507c5debee 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 aacdae4dafc968..e4b5621bd904be 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1664,6 +1664,11 @@ "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": "best-practices", "name": "Storybook best practices for making the most out of Nx", diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index 3b69dc88450b12..c168381acc03d3 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 00000000000000..872388ba287dae --- /dev/null +++ b/docs/shared/packages/storybook/storybook-7-setup.md @@ -0,0 +1,98 @@ +# 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. diff --git a/packages/angular/docs/storybook-configuration-examples.md b/packages/angular/docs/storybook-configuration-examples.md index 6ee1b600976979..d36c51ccb36869 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 7035eb61a3c63d..c5b79d95a52be6 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 a0d3e99507dc7b..4a3cbae53621fa 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 b4b1fced48d578..504cb25e96cffe 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 7bc31eae347d63..8b4498d857b0b2 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 2b155914188d7e..8c5551b4135f7a 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 cb39f7707b91bd..724066ec691929 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 641e36dc093233..ac3328d3871f9a 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 223910956152f2..448aad7eb8ce31 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 86714a692c6273..83cf2cb40469e1 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 6c21356d88e1e9..067ea5f9ccab1a 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 f5b57b5923f6ad..5169f51ac1d27d 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 15d87b1757fdf0..0b70ab7689a74b 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 220c4f0970ed27..229ca3c75d7e98 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 429cc8d51f1463..45a84130827f73 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 3d512dd68b36ef..a59ae5d7191555 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 00000000000000..6ff786d61bf534 --- /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 00000000000000..3bfb73b30ebaa3 --- /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 8742390233b340..e27ff334c213fd 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,73 @@ export async function configurationGenerator( const { nextBuildTarget, compiler, viteBuildTarget } = findStorybookAndBuildTargetsAndCompiler(targets); - if (viteBuildTarget && schema.bundler !== 'vite') { + const storybook7 = isStorybookV7(); + + if (storybook7) { + 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 +127,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 +169,8 @@ export async function configurationGenerator( tree, schema.name, schema.uiFramework, - schema.configureTestRunner + schema.configureTestRunner, + schema.storybook7betaConfiguration ); } @@ -136,7 +202,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 00000000000000..beebca15532d34 --- /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 00000000000000..e69de29bb2d1d6 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 00000000000000..dd88917da02c06 --- /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 00000000000000..3ee5cd53fca234 --- /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 00000000000000..e69de29bb2d1d6 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 00000000000000..52240acaa2a525 --- /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 acaa1f82c83bc4..3b63435d6b7c15 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 1492ac61f6fd00..a9e950dcd84e98 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 2a90e7f0379f0c..75461e2a8b01b7 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 eb4ebbe9cb01d3..928f03c9dd7fd1 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 00000000000000..528b02fb6c2059 --- /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 bbb17f8ed203a0..31c8322745f70b 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 95f616be0bf1ec..5da8a16fa12495 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,101 @@ 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[schema.uiFramework] = 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 5d7f4f1c62d1fe..68fce6a2857c33 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 5690febd2ec45f..a177628e6332c6 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 90dd905878852b..a35a983824e8e0 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 f51dd2853f9e3c..8970ba62b96d51 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 96b045a9296f1b..548ac7ab6f1ca3 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 720adf992fc365..2efc809ff14210 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 20cef97bef4ccb..403c1a9732e71d 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 0fbeabea0d2687..54743675e06bdd 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';