fix(storybook): cleanup v17 tasks

docs/generated/packages/storybook/documents/best-practices.md

@@ -19,7 +19,7 @@ Storybook helps you test your UIs. You can read more about testing with Storyboo
 
 ### Documentation
 
-Storybook helps you document your UI elements, or your design system, effectively and in an interactive way. You can read more in the [How-to document components](https://storybook.js.org/docs/react/writing-docs/introduction) documentation page. Essentially, you can use Storybook to publish a catalog of your components. A catalog that you can share with the design team, the developer team, the product team, anyone else in the product development process, or even the client. The components are isolated, interactive, and can be represented in all possible forms that they can take (e.g. for a button: enabled, disabled, active, etc). You can read more about publishing your Storybook in the [Publish Storybook](https://storybook.js.org/docs/react/sharing/publish-storybook) documentation page.
+Storybook helps you document your UI elements, or your design system, effectively and in an interactive way. You can read more in the [How to document components](https://storybook.js.org/docs/react/writing-docs/introduction) documentation page. Essentially, you can use Storybook to publish a catalog of your components. A catalog that you can share with the design team, the developer team, the product team, anyone else in the product development process, or even the client. The components are isolated, interactive, and can be represented in all possible forms that they can take (e.g. for a button: enabled, disabled, active, etc). You can read more about publishing your Storybook in the [Publish Storybook](https://storybook.js.org/docs/react/sharing/publish-storybook) documentation page.
 
 ## Nx and Storybook
 
@@ -42,38 +42,34 @@ If your project is not configured yet, check out one of these guides:
 - [Set up Storybook for React Projects](/recipes/storybook/overview-react)
 
 - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular)
+-
+- [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue)
 
 If your project is [already configured](/nx-api/storybook), you can use the `stories` generator:
 
-- [React stories generator](/nx-api/react/generators/stories)
+- [React (and Next.js) stories generator](/nx-api/react/generators/stories)
 
 - [React Native stories generator](/nx-api/react-native/generators/stories)
 
+- [Vue stories generator](/nx-api/vue/generators/stories)
+
 - [Angular stories generator](/nx-api/angular/generators/stories)
 
 The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled.
 
-#### Cypress tests generation
-
-Nx also generates Cypress tests for your components, that point to the corresponding component’s story. You can read more about how the Cypress tests are generated and how they look like in the [storybook-configuration generator documentation](/recipes/storybook/overview-react#cypress-tests-for-stories).
+#### Storybook interaction tests
 
-Take a look at the generated code of the Cypress test file, specifically at the URL which Cypress visits:
-
-```javascript
-cy.visit(
-  '/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'
-);
-```
+[Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) allow you to test user interactions within your Storybook stories. It enhances your [Storybook](https://storybook.js.org/) setup, ensuring that not only do your components look right, but they also work correctly when interacted with.
 
-Cypress visits the URL that hosts the story of the component we are testing, adding values to its controls (eg. `args=text:Click+me!`). Then, the test attempts to validate that the values are correctly applied.
+Nx will generate interaction tests for your stories. You can read more in our [Setting up Storybook Interaction Tests with Nx guide](/recipes/storybook/interaction-tests).
 
 ### CI/CD tools
 
 Now let’s see how Nx helps in the CI/CD journey, as well.
 
-#### Cypress testing
+#### Interaction tests in your CI
 
-When you are running the Cypress tests for a project, Cypress will start the Storybook server of that project. The Storybook server will fire up a Storybook instance, hosting all the components's stories for that project. The e2e tests will then run, which actually visit the stories and perform the tests there. Cypress will be configured to start and stop the Storybook server. The results will be cached, and they will go through the Nx graph, meaning that Nx will know if the tests need to be run again or not, depending on the affected status of your project.
+You can set up your interaction tests to run as part of your CI. You can read more in the [Storybook docs](https://storybook.js.org/docs/react/writing-tests/test-runner#set-up-ci-to-run-**tests**).
 
 #### Serve
 
@@ -97,7 +93,7 @@ Setting up Storybook on Nx reflects - and takes advantage of - the [mental model
 
 ##### Development and debugging
 
-In the process of setting up Storybook in your Nx workspace that we described above, you end up with one Storybook instance per project. That way, you can use your project’s Storybook targets to serve and build Storybook:
+In the process of setting up Storybook in your Nx workspace that we described above, you end up with one Storybook instance per project. That way, you can use your project’s Storybook targets to serve, test and build Storybook:
 
 ```shell
 nx storybook my-project
@@ -109,11 +105,13 @@ and
 nx build-storybook my-project
 ```
 
-This feature is extremely useful when developing locally. The containerized stories in your Storybook are the only ones that are built/served when you want to debug just one component, or just one library. You don’t have to wait for a huge Storybook containing all your stories in your repository to fire up. You just need to wait for the Storybook of a single project to start. This speeds up the process.
+and
 
-##### E2e tests with Cypress
+```shell
+nx test-storybook my-project
+```
 
-If you’re using Cypress, and you’re taking advantage of the generated Cypress tests that our Storybook generators generate, then your e2e tests are also going to be much faster. When you run your e2e tests for a particular project, Cypress is only going to start the specific Storybook instance, and it’s going to take much less time than having to start an all-including universal Storybook.
+This feature is extremely useful when developing locally. The containerized stories in your Storybook are the only ones that are built/served/tested when you want to debug just one component, or just one library. You don’t have to wait for a huge Storybook containing all your stories in your repository to fire up. You just need to wait for the Storybook of a single project to start. This speeds up the process.
 
 ##### Caching, affected, dependency management
 

docs/generated/packages/storybook/documents/overview.md

@@ -7,10 +7,6 @@ description: This is an overview page for the Storybook plugin in Nx. It explain
 
 This guide will briefly walk you through using Storybook within an Nx workspace.
 
-{% callout type="info" title="Storybook 7 by default" %}
-Starting with Nx 16, Storybook 7 is used by default to configure your projects.
-{% /callout %}
-
 ## Setting Up Storybook
 
 ### Add the Storybook plugin
@@ -86,7 +82,7 @@ nx g @nx/react-native:storybook-configuration my-react-native-project
 {% /tab %}
 {% /tabs %}
 
-These framework-specific generators will also **generate stories** for you.
+These framework-specific generators will also **generate stories** and interaction tests for you.
 
 If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
 
@@ -113,9 +109,7 @@ Choosing one of these frameworks will have the following effects on your workspa
 
 2. Nx will generate a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
 
-3. 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.
-
-4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
+3. Nx will create new `targets` in your project's `project.json`, called `storybook`, `test-storybook` and `build-storybook`, containing all the necessary configuration to serve, test and build Storybook.
 
 Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above.
 
@@ -147,6 +141,20 @@ or
 nx build-storybook project-name
 ```
 
+### Testing Storybook
+
+With the Storybook server running, you can test Storybook (run all the interaction tests) using this command:
+
+```shell
+nx run project-name:test-storybook
+```
+
+or
+
+```shell
+nx test-storybook project-name
+```
+
 ### Anatomy of the Storybook setup
 
 When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create a project specific Storybook configuration.
@@ -171,17 +179,21 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb
 
 1. In your project's `.storybook/main.ts` file, in the `addons` array of the `module.exports` object, add the new addon:
 
-   ```typescript {% fileName="<project-path>/.storybook/main.js" %}
-   module.exports = {
-   stories: [...],
-   ...,
-   addons: [..., '@storybook/addon-essentials'],
-   };
-   ```
+```typescript {% fileName="<project-path>/.storybook/main.ts" %}
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  ...
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', ...],
+  ...
+};
+
+export default config;
+```
 
 2. If a decorator is required, in each project's `<project-path>/.storybook/preview.ts`, you can export an array called `decorators`.
 
-   ```typescript {% fileName="<project-path>/.storybook/preview.js" %}
+   ```typescript {% fileName="<project-path>/.storybook/preview.ts" %}
    import someDecorator from 'some-storybook-addon';
    export const decorators = [someDecorator];
    ```

docs/generated/packages/storybook/executors/build.json

@@ -89,19 +89,6 @@
         "type": "boolean",
         "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation."
       },
-      "uiFramework": {
-        "type": "string",
-        "description": "Storybook framework npm package.",
-        "enum": [
-          "@storybook/react",
-          "@storybook/html",
-          "@storybook/web-components",
-          "@storybook/vue",
-          "@storybook/vue3",
-          "@storybook/svelte"
-        ],
-        "x-deprecated": "Upgrade to Storybook 7."
-      },
       "webpackStatsJson": {
         "type": ["boolean", "string"],
         "description": "Write Webpack Stats JSON to disk.",
@@ -147,7 +134,7 @@
     },
     "additionalProperties": true,
     "required": ["configDir"],
-    "examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n    \"targets\": {\n        //...\n        \"build-storybook\": {\n            \"executor\": \"@nx/storybook:build\",\n            \"outputs\": [\"{options.outputDir}\"],\n            \"options\": {\n                \"outputDir\": \"dist/storybook/ui\",\n                \"configDir\": \"libs/ui/.storybook\"\n            },\n            \"configurations\": {\n                \"ci\": {\n                    \"quiet\": true\n                }\n            }\n        }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n    \"executor\": \"@nx/storybook:build\",\n    \"options\": {\n        \"port\": 4400,\n        \"configDir\": \"libs/ui/.storybook\",\n        \"docsMode\": true\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false,\n    \"styles\": [\"some-styles.css\"],\n    \"stylePreprocessorOptions\": {\n        \"includePaths\": [\"some-style-paths\"]\n }\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
+    "examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n    \"targets\": {\n        //...\n        \"build-storybook\": {\n            \"executor\": \"@nx/storybook:build\",\n            \"outputs\": [\"{options.outputDir}\"],\n            \"options\": {\n                \"outputDir\": \"dist/storybook/ui\",\n                \"configDir\": \"libs/ui/.storybook\"\n            },\n            \"configurations\": {\n                \"ci\": {\n                    \"quiet\": true\n                }\n            }\n        }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n    \"executor\": \"@nx/storybook:build\",\n    \"options\": {\n        \"port\": 4400,\n        \"configDir\": \"libs/ui/.storybook\",\n        \"docsMode\": true\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"apps/ngapp/.storybook\",\n    \"browserTarget\": \"ngapp:build\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"apps/ngapp/.storybook\",\n    \"browserTarget\": \"ngapp:build-storybook\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"apps/ngapp/.storybook\",\n    \"browserTarget\": \"ngapp:build-storybook\",\n    \"compodoc\": false,\n    \"styles\": [\"some-styles.css\"],\n    \"stylePreprocessorOptions\": {\n        \"includePaths\": [\"some-style-paths\"]\n }\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
   },
   "description": "Build Storybook.",
   "aliases": [],