diff --git a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md index 6a900dfc0ceabf..7ef2cf79a5d97a 100644 --- a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md +++ b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md @@ -135,7 +135,7 @@ Stay tuned for a more in-depth blog post coming soon to [our blog](/blog). Nx provides support for Storybook version 7.0 beta, with generators and executors, so that you can try it out now, either in a new or in your existing Nx workspace. Storybook version 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 enhancements, 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 so is the Nx support for it. -You can try out Storybook 7.0 beta in a new Nx workspace by passing the `--storybook7betaConfiguration` flag when generating the Storybook configuration for your projects. Read more in our [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup). If you want to migrate your existing Storybook configuration to Storybook 7.0 beta, please read our [migration guide](/nx-api/storybook/generators/migrate-7). +You can try out Storybook 7.0 beta in a new Nx workspace by passing the `--storybook7betaConfiguration` flag when generating the Storybook configuration for your projects. ## More flexible Webpack config diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index a117664e15c0ea..c9d379c2d42564 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -10059,30 +10059,6 @@ "isExternal": false, "disableCollapsible": false }, - { - "id": "storybook-configuration", - "path": "/nx-api/react-native/generators/storybook-configuration", - "name": "storybook-configuration", - "children": [], - "isExternal": false, - "disableCollapsible": false - }, - { - "id": "component-story", - "path": "/nx-api/react-native/generators/component-story", - "name": "component-story", - "children": [], - "isExternal": false, - "disableCollapsible": false - }, - { - "id": "stories", - "path": "/nx-api/react-native/generators/stories", - "name": "stories", - "children": [], - "isExternal": false, - "disableCollapsible": false - }, { "id": "upgrade-native", "path": "/nx-api/react-native/generators/upgrade-native", @@ -10603,9 +10579,9 @@ "disableCollapsible": false }, { - "name": "Storybook 7", - "path": "/nx-api/storybook/documents/storybook-7-setup", - "id": "storybook-7-setup", + "name": "Storybook 9", + "path": "/nx-api/storybook/documents/storybook-9-setup", + "id": "storybook-9-setup", "isExternal": false, "children": [], "disableCollapsible": false @@ -10660,14 +10636,6 @@ "isExternal": false, "disableCollapsible": false }, - { - "id": "cypress-project", - "path": "/nx-api/storybook/generators/cypress-project", - "name": "cypress-project", - "children": [], - "isExternal": false, - "disableCollapsible": false - }, { "id": "convert-to-inferred", "path": "/nx-api/storybook/generators/convert-to-inferred", @@ -10677,17 +10645,17 @@ "disableCollapsible": false }, { - "id": "migrate-7", - "path": "/nx-api/storybook/generators/migrate-7", - "name": "migrate-7", + "id": "migrate-8", + "path": "/nx-api/storybook/generators/migrate-8", + "name": "migrate-8", "children": [], "isExternal": false, "disableCollapsible": false }, { - "id": "migrate-8", - "path": "/nx-api/storybook/generators/migrate-8", - "name": "migrate-8", + "id": "migrate-9", + "path": "/nx-api/storybook/generators/migrate-9", + "name": "migrate-9", "children": [], "isExternal": false, "disableCollapsible": false diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json index 34176fd382cd1e..40e5f98ff5111d 100644 --- a/docs/generated/manifests/nx-api.json +++ b/docs/generated/manifests/nx-api.json @@ -4206,33 +4206,6 @@ "path": "/nx-api/react-native/generators/component", "type": "generator" }, - "/nx-api/react-native/generators/storybook-configuration": { - "description": "Set up Storybook for a React Native application or library.", - "file": "generated/packages/react-native/generators/storybook-configuration.json", - "hidden": false, - "name": "storybook-configuration", - "originalFilePath": "/packages/react-native/src/generators/storybook-configuration/schema.json", - "path": "/nx-api/react-native/generators/storybook-configuration", - "type": "generator" - }, - "/nx-api/react-native/generators/component-story": { - "description": "Generate Storybook story for a React Native component.", - "file": "generated/packages/react-native/generators/component-story.json", - "hidden": false, - "name": "component-story", - "originalFilePath": "/packages/react-native/src/generators/component-story/schema.json", - "path": "/nx-api/react-native/generators/component-story", - "type": "generator" - }, - "/nx-api/react-native/generators/stories": { - "description": "Create stories for all components declared in an application or library.", - "file": "generated/packages/react-native/generators/stories.json", - "hidden": false, - "name": "stories", - "originalFilePath": "/packages/react-native/src/generators/stories/schema.json", - "path": "/nx-api/react-native/generators/stories", - "type": "generator" - }, "/nx-api/react-native/generators/upgrade-native": { "description": "Destructive command to upgrade native iOS and Android code to latest.", "file": "generated/packages/react-native/generators/upgrade-native.json", @@ -4852,16 +4825,16 @@ "tags": [], "originalFilePath": "shared/packages/storybook/best-practices" }, - "/nx-api/storybook/documents/storybook-7-setup": { - "id": "storybook-7-setup", - "name": "Storybook 7", - "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", - "file": "generated/packages/storybook/documents/storybook-7-setup", + "/nx-api/storybook/documents/storybook-9-setup": { + "id": "storybook-9-setup", + "name": "Storybook 9", + "description": "This guide explains how you can set up Storybook version 9 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", + "file": "generated/packages/storybook/documents/storybook-9-setup", "itemList": [], "isExternal": false, - "path": "/nx-api/storybook/documents/storybook-7-setup", + "path": "/nx-api/storybook/documents/storybook-9-setup", "tags": [], - "originalFilePath": "shared/packages/storybook/storybook-7-setup" + "originalFilePath": "shared/packages/storybook/storybook-9-setup" } }, "root": "/packages/storybook", @@ -4905,15 +4878,6 @@ "path": "/nx-api/storybook/generators/configuration", "type": "generator" }, - "/nx-api/storybook/generators/cypress-project": { - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "file": "generated/packages/storybook/generators/cypress-project.json", - "hidden": false, - "name": "cypress-project", - "originalFilePath": "/packages/storybook/src/generators/cypress-project/schema.json", - "path": "/nx-api/storybook/generators/cypress-project", - "type": "generator" - }, "/nx-api/storybook/generators/convert-to-inferred": { "description": "Convert existing Storybook project(s) using `@nx/storybook:*` executors to use `@nx/storybook/plugin`. Defaults to migrating all projects. Pass '--project' to migrate only one target.", "file": "generated/packages/storybook/generators/convert-to-inferred.json", @@ -4923,15 +4887,6 @@ "path": "/nx-api/storybook/generators/convert-to-inferred", "type": "generator" }, - "/nx-api/storybook/generators/migrate-7": { - "description": "Migrate to Storybook version 7.", - "file": "generated/packages/storybook/generators/migrate-7.json", - "hidden": false, - "name": "migrate-7", - "originalFilePath": "/packages/storybook/src/generators/migrate-7/schema.json", - "path": "/nx-api/storybook/generators/migrate-7", - "type": "generator" - }, "/nx-api/storybook/generators/migrate-8": { "description": "Migrate to Storybook version 8.", "file": "generated/packages/storybook/generators/migrate-8.json", @@ -4940,9 +4895,38 @@ "originalFilePath": "/packages/storybook/src/generators/migrate-8/schema.json", "path": "/nx-api/storybook/generators/migrate-8", "type": "generator" + }, + "/nx-api/storybook/generators/migrate-9": { + "description": "Migrate to Storybook version 9.", + "file": "generated/packages/storybook/generators/migrate-9.json", + "hidden": false, + "name": "migrate-9", + "originalFilePath": "/packages/storybook/src/generators/migrate-9/schema.json", + "path": "/nx-api/storybook/generators/migrate-9", + "type": "generator" } }, "migrations": { + "/nx-api/storybook/migrations/update-21-1-0-migrate-storybook-v9": { + "description": "Update workspace to use Storybook v9", + "file": "generated/packages/storybook/migrations/update-21-1-0-migrate-storybook-v9.json", + "hidden": false, + "name": "update-21-1-0-migrate-storybook-v9", + "version": "21.1.0-beta.0", + "originalFilePath": "/packages/storybook", + "path": "/nx-api/storybook/migrations/update-21-1-0-migrate-storybook-v9", + "type": "migration" + }, + "/nx-api/storybook/migrations/21.1.0-package-updates": { + "description": "", + "file": "generated/packages/storybook/migrations/21.1.0-package-updates.json", + "hidden": false, + "name": "21.1.0-package-updates", + "version": "21.1.0-beta.0", + "originalFilePath": "/packages/storybook", + "path": "/nx-api/storybook/migrations/21.1.0-package-updates", + "type": "migration" + }, "/nx-api/storybook/migrations/20.8.0-package-updates": { "description": "", "file": "generated/packages/storybook/migrations/20.8.0-package-updates.json", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 5c37f7f098d221..f529f622d8aa70 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -4178,33 +4178,6 @@ "path": "react-native/generators/component", "type": "generator" }, - { - "description": "Set up Storybook for a React Native application or library.", - "file": "generated/packages/react-native/generators/storybook-configuration.json", - "hidden": false, - "name": "storybook-configuration", - "originalFilePath": "/packages/react-native/src/generators/storybook-configuration/schema.json", - "path": "react-native/generators/storybook-configuration", - "type": "generator" - }, - { - "description": "Generate Storybook story for a React Native component.", - "file": "generated/packages/react-native/generators/component-story.json", - "hidden": false, - "name": "component-story", - "originalFilePath": "/packages/react-native/src/generators/component-story/schema.json", - "path": "react-native/generators/component-story", - "type": "generator" - }, - { - "description": "Create stories for all components declared in an application or library.", - "file": "generated/packages/react-native/generators/stories.json", - "hidden": false, - "name": "stories", - "originalFilePath": "/packages/react-native/src/generators/stories/schema.json", - "path": "react-native/generators/stories", - "type": "generator" - }, { "description": "Destructive command to upgrade native iOS and Android code to latest.", "file": "generated/packages/react-native/generators/upgrade-native.json", @@ -4822,15 +4795,15 @@ "originalFilePath": "shared/packages/storybook/best-practices" }, { - "id": "storybook-7-setup", - "name": "Storybook 7", - "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", - "file": "generated/packages/storybook/documents/storybook-7-setup", + "id": "storybook-9-setup", + "name": "Storybook 9", + "description": "This guide explains how you can set up Storybook version 9 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", + "file": "generated/packages/storybook/documents/storybook-9-setup", "itemList": [], "isExternal": false, - "path": "storybook/documents/storybook-7-setup", + "path": "storybook/documents/storybook-9-setup", "tags": [], - "originalFilePath": "shared/packages/storybook/storybook-7-setup" + "originalFilePath": "shared/packages/storybook/storybook-9-setup" } ], "executors": [ @@ -4872,15 +4845,6 @@ "path": "storybook/generators/configuration", "type": "generator" }, - { - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "file": "generated/packages/storybook/generators/cypress-project.json", - "hidden": false, - "name": "cypress-project", - "originalFilePath": "/packages/storybook/src/generators/cypress-project/schema.json", - "path": "storybook/generators/cypress-project", - "type": "generator" - }, { "description": "Convert existing Storybook project(s) using `@nx/storybook:*` executors to use `@nx/storybook/plugin`. Defaults to migrating all projects. Pass '--project' to migrate only one target.", "file": "generated/packages/storybook/generators/convert-to-inferred.json", @@ -4890,15 +4854,6 @@ "path": "storybook/generators/convert-to-inferred", "type": "generator" }, - { - "description": "Migrate to Storybook version 7.", - "file": "generated/packages/storybook/generators/migrate-7.json", - "hidden": false, - "name": "migrate-7", - "originalFilePath": "/packages/storybook/src/generators/migrate-7/schema.json", - "path": "storybook/generators/migrate-7", - "type": "generator" - }, { "description": "Migrate to Storybook version 8.", "file": "generated/packages/storybook/generators/migrate-8.json", @@ -4907,9 +4862,38 @@ "originalFilePath": "/packages/storybook/src/generators/migrate-8/schema.json", "path": "storybook/generators/migrate-8", "type": "generator" + }, + { + "description": "Migrate to Storybook version 9.", + "file": "generated/packages/storybook/generators/migrate-9.json", + "hidden": false, + "name": "migrate-9", + "originalFilePath": "/packages/storybook/src/generators/migrate-9/schema.json", + "path": "storybook/generators/migrate-9", + "type": "generator" } ], "migrations": [ + { + "description": "Update workspace to use Storybook v9", + "file": "generated/packages/storybook/migrations/update-21-1-0-migrate-storybook-v9.json", + "hidden": false, + "name": "update-21-1-0-migrate-storybook-v9", + "version": "21.1.0-beta.0", + "originalFilePath": "/packages/storybook", + "path": "storybook/migrations/update-21-1-0-migrate-storybook-v9", + "type": "migration" + }, + { + "description": "", + "file": "generated/packages/storybook/migrations/21.1.0-package-updates.json", + "hidden": false, + "name": "21.1.0-package-updates", + "version": "21.1.0-beta.0", + "originalFilePath": "/packages/storybook", + "path": "storybook/migrations/21.1.0-package-updates", + "type": "migration" + }, { "description": "", "file": "generated/packages/storybook/migrations/20.8.0-package-updates.json", diff --git a/docs/generated/packages/react-native/generators/component-story.json b/docs/generated/packages/react-native/generators/component-story.json deleted file mode 100644 index cef0d5c36513a3..00000000000000 --- a/docs/generated/packages/react-native/generators/component-story.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "component-story", - "factory": "./src/generators/component-story/component-story#componentStoryGenerator", - "schema": { - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeComponentStory", - "title": "React native component story", - "description": "Generate storybook story for a react-native component.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "The project where to add the components.", - "examples": ["shared-ui-component"], - "$default": { "$source": "projectName", "index": 0 }, - "x-prompt": "What's name of the project where the component lives?", - "x-priority": "important" - }, - "componentPath": { - "type": "string", - "description": "Relative path to the component file from the library root.", - "examples": ["lib/components"], - "x-prompt": "What's path of the component relative to the project's lib root?", - "x-priority": "important" - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "default": true, - "x-priority": "important" - } - }, - "required": ["project", "componentPath"], - "presets": [] - }, - "description": "Generate Storybook story for a React Native component.", - "implementation": "/packages/react-native/src/generators/component-story/component-story#componentStoryGenerator.ts", - "aliases": [], - "hidden": false, - "path": "/packages/react-native/src/generators/component-story/schema.json", - "type": "generator" -} diff --git a/docs/generated/packages/react-native/generators/stories.json b/docs/generated/packages/react-native/generators/stories.json deleted file mode 100644 index b0521437272b03..00000000000000 --- a/docs/generated/packages/react-native/generators/stories.json +++ /dev/null @@ -1,63 +0,0 @@ -{ - "name": "stories", - "factory": "./src/generators/stories/stories#storiesGenerator", - "schema": { - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeStorybookStories", - "title": "Generate React Native Storybook stories", - "description": "Generate stories/specs for all components declared in a React Native project.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "Project for which to generate stories.", - "$default": { "$source": "projectName", "index": 0 }, - "x-prompt": "For which project do you want to generate stories?", - "x-priority": "important" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "x-prompt": "Do you want to set up Storybook interaction tests?", - "x-priority": "important", - "default": true - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript files rather than TypeScript files.", - "default": false - }, - "ignorePaths": { - "type": "array", - "description": "Paths to ignore when looking for components.", - "items": { "type": "string", "description": "Path to ignore." }, - "default": [ - "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx" - ], - "examples": [ - "apps/my-app/src/not-stories/**", - "**/**/src/**/not-stories/**", - "libs/my-lib/**/*.something.ts", - "**/**/src/**/*.other.*", - "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts" - ] - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - } - }, - "required": ["project"], - "presets": [] - }, - "description": "Create stories for all components declared in an application or library.", - "implementation": "/packages/react-native/src/generators/stories/stories#storiesGenerator.ts", - "aliases": [], - "hidden": false, - "path": "/packages/react-native/src/generators/stories/schema.json", - "type": "generator" -} diff --git a/docs/generated/packages/react-native/generators/storybook-configuration.json b/docs/generated/packages/react-native/generators/storybook-configuration.json deleted file mode 100644 index f213f58be63767..00000000000000 --- a/docs/generated/packages/react-native/generators/storybook-configuration.json +++ /dev/null @@ -1,85 +0,0 @@ -{ - "name": "storybook-configuration", - "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal", - "schema": { - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeStorybookConfigure", - "title": "React native Storybook configuration", - "description": "Set up Storybook for a React-Native app or library.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "Project for which to generate Storybook configuration.", - "$default": { "$source": "argv", "index": 0 }, - "x-prompt": "For which project do you want to generate Storybook configuration?", - "x-dropdown": "projects", - "x-priority": "important" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "x-prompt": "Do you want to set up Storybook interaction tests?", - "x-priority": "important", - "alias": ["configureTestRunner"], - "default": true - }, - "generateStories": { - "type": "boolean", - "description": "Automatically generate `*.stories.ts` files for components declared in this project?", - "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?", - "default": true, - "x-priority": "important" - }, - "configureStaticServe": { - "type": "boolean", - "description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.", - "x-prompt": "Configure a static file server for the storybook instance?", - "default": true, - "x-priority": "important" - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript story files rather than TypeScript story files.", - "default": false - }, - "tsConfiguration": { - "type": "boolean", - "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.", - "default": true - }, - "linter": { - "description": "The tool to use for running lint checks.", - "type": "string", - "enum": ["eslint"], - "default": "eslint" - }, - "ignorePaths": { - "type": "array", - "description": "Paths to ignore when looking for components.", - "items": { "type": "string", "description": "Path to ignore." }, - "default": [ - "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx" - ], - "examples": [ - "apps/my-app/src/not-stories/**", - "**/**/src/**/not-stories/**", - "libs/my-lib/**/*.something.ts", - "**/**/src/**/*.other.*", - "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts" - ] - } - }, - "required": ["project"], - "examplesFile": "This generator will set up Storybook for your **React Native** project.\n\n```bash\nnx g @nx/react-native:storybook-configuration project-name\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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/recipes/storybook/storybook-interaction-tests#setup-storybook-interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/react-native:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react-native:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react-native:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/react-native:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", - "presets": [] - }, - "description": "Set up Storybook for a React Native application or library.", - "implementation": "/packages/react-native/src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal.ts", - "aliases": [], - "hidden": false, - "path": "/packages/react-native/src/generators/storybook-configuration/schema.json", - "type": "generator" -} diff --git a/docs/generated/packages/storybook/documents/best-practices.md b/docs/generated/packages/storybook/documents/best-practices.md index e715968a4f217b..98c55949e3ae5d 100644 --- a/docs/generated/packages/storybook/documents/best-practices.md +++ b/docs/generated/packages/storybook/documents/best-practices.md @@ -53,8 +53,6 @@ If your project is [already configured](/nx-api/storybook), you can use the `sto - [Vue stories generator](/nx-api/vue/generators/stories) -- [React Native stories generator](/nx-api/react-native/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. #### Storybook interaction tests diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index 9fbfee2842fafd..f3f4fb692dd1fb 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -93,35 +93,22 @@ nx g @nx/react:storybook-configuration my-react-project nx g @nx/vue:storybook-configuration my-vue-project ``` -{% /tab %} -{% tab label="React Native" %} - -```shell -nx g @nx/react-native:storybook-configuration my-react-native-project -``` - {% /tab %} {% /tabs %} 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: +If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` 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` Choosing one of these frameworks will have the following effects on your workspace: @@ -132,7 +119,7 @@ Choosing one of these frameworks will have the following effects on your workspa 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, Vue, Nuxt, 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), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above. +Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above. ### Running Storybook @@ -241,5 +228,5 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) -- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) -- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup) +- [Storybook 9 migration generator](/nx-api/storybook/generators/migrate-9) +- [Storybook 9 setup guide](/nx-api/storybook/documents/storybook-9-setup) diff --git a/docs/generated/packages/storybook/documents/storybook-7-setup.md b/docs/generated/packages/storybook/documents/storybook-7-setup.md deleted file mode 100644 index 773cf00fabfc6d..00000000000000 --- a/docs/generated/packages/storybook/documents/storybook-7-setup.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Storybook 7 overview -description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 6 to Storybook 7. ---- - -# Storybook 7 is here - and Nx is ready - -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.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). - -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. Nx also provides a [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7. - -So, let's see how you can use Storybook 7 on your Nx workspace. - -## Migrate your existing workspace to Storybook 7 - -If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/nx-api/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7. - -## Set up Storybook 7 in a _new_ Nx Workspace - -Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace. - -## 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 [`@nx/storybook:storybook`](/nx-api/storybook/executors/storybook) and [`@nx/storybook:build`](/nx-api/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. - -## Report any issues and bugs - -Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/generated/packages/storybook/documents/storybook-9-setup.md b/docs/generated/packages/storybook/documents/storybook-9-setup.md new file mode 100644 index 00000000000000..8371096bbbe2e8 --- /dev/null +++ b/docs/generated/packages/storybook/documents/storybook-9-setup.md @@ -0,0 +1,24 @@ +--- +title: Storybook 9 overview +description: This guide explains how you can set up Storybook version 9 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 8 to Storybook 9. +--- + +# Storybook 9 is here - and Nx is ready + +Storybook 9 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 9.0.0 release article](https://storybook.js.org/blog/storybook-9/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 9 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-8x-to-900) and the [Storybook 9.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). + +Nx provides new generators that allow you to generate Storybook 9 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 9 migration generator](/nx-api/storybook/generators/migrate-9) that you can use to migrate your existing Storybook configuration to version 9. + +So, let's see how you can use Storybook 9 on your Nx workspace. + +## Migrate your existing workspace to Storybook 9 + +If you already have Storybook configured in your Nx workspace, you can use the [Storybook 9 migrator generator](/nx-api/storybook/generators/migrate-9) to migrate your existing Storybook configuration to version 9. + +## Set up Storybook 9 in a _new_ Nx Workspace + +Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace. + +## Report any issues and bugs + +Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index cdbf2c7a0228b8..3567120ef93046 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/docs/generated/packages/storybook/generators/configuration.json @@ -58,20 +58,14 @@ "description": "Storybook UI Framework to use.", "enum": [ "@storybook/angular", - "@storybook/html-webpack5", "@storybook/nextjs", - "@storybook/preact-webpack5", "@storybook/react-webpack5", "@storybook/react-vite", "@storybook/server-webpack5", - "@storybook/svelte-webpack5", "@storybook/svelte-vite", "@storybook/sveltekit", - "@storybook/vue-webpack5", "@storybook/vue-vite", - "@storybook/vue3-webpack5", "@storybook/vue3-vite", - "@storybook/web-components-webpack5", "@storybook/web-components-vite" ], "aliases": ["storybook7UiFramework"], diff --git a/docs/generated/packages/storybook/generators/cypress-project.json b/docs/generated/packages/storybook/generators/cypress-project.json deleted file mode 100644 index 38fd06719f4b62..00000000000000 --- a/docs/generated/packages/storybook/generators/cypress-project.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "name": "cypress-project", - "factory": "./src/generators/cypress-project/cypress-project", - "schema": { - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "cypress-configure", - "title": "Cypress Configuration", - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "x-deprecated": "Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.", - "type": "object", - "properties": { - "name": { - "type": "string", - "aliases": ["project", "projectName"], - "description": "Project for which to generate the cypress E2E app.", - "$default": { "$source": "argv", "index": 0 }, - "x-prompt": "For which project do you want to generate the Cypress E2E app?", - "x-dropdown": "projects", - "x-priority": "important" - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript files rather than TypeScript files.", - "default": false - }, - "directory": { - "type": "string", - "description": "A directory where the project is placed." - }, - "linter": { - "description": "The tool to use for running lint checks.", - "type": "string", - "enum": ["eslint", "none"], - "default": "eslint" - }, - "ciTargetName": { - "type": "string", - "description": "The name of the devServerTarget to use for the Cypress CI configuration. Used to control if using :static-storybook:ci or :storybook:ci", - "x-priority": "internal" - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - } - }, - "required": ["name"], - "presets": [] - }, - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "x-deprecated": "Deprecated: Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.", - "hidden": false, - "implementation": "/packages/storybook/src/generators/cypress-project/cypress-project.ts", - "aliases": [], - "path": "/packages/storybook/src/generators/cypress-project/schema.json", - "type": "generator" -} diff --git a/docs/generated/packages/storybook/generators/migrate-7.json b/docs/generated/packages/storybook/generators/migrate-7.json deleted file mode 100644 index af968b1faf9433..00000000000000 --- a/docs/generated/packages/storybook/generators/migrate-7.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "migrate-7", - "factory": "./src/generators/migrate-7/migrate-7", - "schema": { - "cli": "nx", - "title": "Migrate Storybook to version 7.", - "description": "Migrate Storybook to version 7.", - "$id": "migrate-7", - "type": "object", - "properties": { - "autoAcceptAllPrompts": { - "type": "boolean", - "description": "Say yes to all the prompts from the Storybook CLI migration scripts.", - "default": false - }, - "onlyShowListOfCommands": { - "type": "boolean", - "description": "Only show the steps that you need to follow in order to migrate. This does NOT make any changes to your code.", - "default": false - }, - "noUpgrade": { - "type": "boolean", - "description": "Skip upgrading Storybook packages. Only use this option if you are already on version 7, and you do not want the latest beta.", - "default": false - }, - "onlyPrepare": { - "type": "boolean", - "description": "Only run the Nx scripts that will prepare your Storybook configuration files for the Storybook CLI automigration.", - "default": false - }, - "afterMigration": { - "type": "boolean", - "description": "Only run the Nx post-migration scripts that make the final adjustments to your workspace.", - "default": false - } - }, - "examplesFile": "---\ntitle: Storybook 7 Migration Generator Examples\ndescription: This page contains examples for the @nx/storybook:migrate-7 generator.\n---\n\n{% callout type=\"info\" title=\"Setting up Storybook 7 in a new workspace\" %}\nFor setting up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured already, please refer to our [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup).\n{% /callout %}\n\nStorybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).\n\nYou can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 7. To help you, Nx offers the `@nx/storybook:migrate-7` generator. This generator will help you migrate your existing Storybook setup to version 7.\n\n## How to use it\n\nJust call:\n\n```bash\nnpx nx g @nx/storybook:migrate-7\n```\n\n{% callout type=\"warning\" title=\"Commit your changes\" %}\nIt is advised that you start with a clean git history before running this generator, since it is going to be making lots of changes to your workspace.\n{% /callout %}\n\nYou can run this generator using the above command, without passing any options. This will start the migration process for all your projects that have Storybook configured. The logs will explain what is happening in every step, and the logs are mixed Nx and Storybook CLI logs. During the process you will be prompted by the Storybook CLI to accept the automigration scripts. You can read more about that in the next section.\n\nWhen the generator finishes, you will see a summary of the changes that were made to your workspace, and it will also create a new file, called `storybook-migration-summary.md` at the root of your project, which will contain a list of all the changes that were made to your workspace.\n\n### Accept the automigration prompts\n\nThe Storybook CLI (running through our generator) will prompt you to run some code generators and modifiers.\n\nYou can say `yes` to these prompts, which are usually the following (there may be more or less, depending on your setup,\nand depending on the latest versions of the Storybook CLI - this code is NOT managed by Nx, but by Storybook):\n\n- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.\n- `eslintPlugin`: installs the `eslint-plugin-storybook`\n- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)\n- `autodocsTrue`: adds `autodocs: true` to your project's `.storybook/main.js|ts` file\n\n### Check the result\n\nOnce the generator finishes, and the Storybook CLI automigration scripts have run, you should check the result. Examples of migrated `.storybook/main.js|ts` files would look like this:\n\n#### Full example for Angular projects\n\nHere is an example of a project-level `.storybook/main.js|ts` file for an Angular project that has been migrated to Storybook version 7:\n\n```ts {% fileName=\"apps/my-angular-app/.storybook/main.js\" %}\nconst config = {\n stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],\n addons: ['@storybook/addon-essentials'],\n framework: {\n name: '@storybook/angular',\n options: {},\n },\n};\n\nexport default config;\n```\n\n#### Full example for React projects with Vite\n\nHere is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite that has been migrated to Storybook version 7:\n\n```ts {% fileName=\"apps/my-react-app/.storybook/main.js\" %}\nconst config = {\n stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],\n addons: ['@storybook/addon-essentials'],\n framework: {\n name: '@storybook/react-vite',\n options: {\n builder: {\n viteConfigPath: 'apps/rv1/vite.config.ts',\n },\n },\n },\n};\n\nexport default config;\n```\n\n### Make sure that all works by running Storybook\n\nYou can now use Storybook 7! ๐ŸŽ‰\n\n```bash\nnpx nx build-storybook PROJECT_NAME\n```\n\nand\n\n```bash\nnpx nx storybook PROJECT_NAME\n```\n\n## Run the generator by automatically accepting the Storybook CLI prompts\n\nYou can run the generator with the `--autoAcceptAllPrompts` flag, which will automatically accept all the Storybook CLI prompts. This is useful if you want to run the generator in a CI environment, or if you want to run the generator in a script. Or if you are sure that you want to accept all the prompts!\n\n```bash\nnpx nx g @nx/storybook:migrate-7 --autoAcceptAllPrompts\n```\n\nThe Storybook CLI may still ask you about some things, but mostly it should just run the whole migration suite uninterrupted.\n\n## Run the migration manually\n\nNx gives you the ability to run all the migration steps one by one, manually, but still with the help of our migrator. To help you out with the commands that you need to run, Nx will print out the instructions if you run the generator with the `--onlyShowListOfCommands` flag, like this:\n\n```bash\nnpx nx g @nx/storybook:migrate-7 --onlyShowListOfCommands\n```\n\nEssentially, the way to run the migration manually is the following:\n\n1. Call the Nx generator to show you the list of commands:\n `npx nx g @nx/storybook:migrate-7 --onlyShowListOfCommands`\n2. Call the Storybook upgrade script:\n `npx storybook@latest upgrade`\n3. Call the Nx generator to prepare your files for migration. The steps are explained in [Step 02](#step-02) above.\n `nx g @nx/storybook:migrate-7 --onlyPrepare`\n4. Call the Storybook automigrate scripts for each one of the projects using Storybook (the `@nx/storybook:migrate-7` will give you the list of all the commands)\n5. Call the Nx generator to finish the migration. The steps are explained in [Step 04](#step-04) above.\n `nx g @nx/storybook:migrate-7 --afterMigration`\n\n## How the generator works under the hood\n\nNow let's see how the `@nx/storybook:migrate-7` generator works under the hood. It essentially does the following things:\n\n### Step 01\n\nIt calls the Storybook CLI upgrade script:\n\n```bash\nnpx storybook@latest upgrade\n```\n\nThis script will upgrade your Storybook dependencies to the latest version, as explained in the [Storybook documentation](https://storybook.js.org/docs/7.0/react/configure/upgrading).\n\n### Step 02\n\nIt prepares all your project-level `.storybook/main.js|ts` files, so that\nthe Storybook automigration scripts can run successfully. This means that it makes the following adjustments to your files:\n\n- Remove the \"`as StorybookConfig`\" typecast from the `.storybook/main.ts` files, if you have any `.storybook/main.ts` files with typecast, since it is not needed any more\n- Remove the \"`path.resolve`\" calls from the Next.js Storybook configuration in project-level `.storybook/main.js|ts` files, if it exists, since it breaks the Storybook automigration scripts\n\n### Step 03\n\nIt calls the Storybook CLI automigrate script, for each one of your projects that have Storybook configured. It does that by passing the `--config-dir` flag and the `--renderer` flag, for each one of your projects that has Storybook configured. An example command would look like this:\n\n```bash\nnpx storybook@latest automigrate --config-dir apps/my-react-app/.storybook --renderer @storybook/react\n```\n\nThis script will make changes to your Storybook configuration files, and other changes to your repository, to make it work for Storybook 7, as explained in the [Storybook documentation](https://storybook.js.org/docs/7.0/react/configure/upgrading).\n\n### Step 04\n\nAfter the Storybook CLI automigrate scripts have run, some additional adjustments are made to your workspace, to make sure that everything is working as expected. These adjustments are as follows:\n\n- Remove the \"`vite-tsconfig-paths`\" plugin from the Storybook configuration files for Vite projects, since it's no longer needed in v7\n- Add the \"`viteConfigPath`\" option to the Storybook builder options for Vite projects, since now Storybook needs the path to the Vite config file\n- Change the import package for the `StorybookConfig` type to be framework specific (e.g. from `@storybook/common` to `@storybook/react-vite` for React projects using Vite)\n- Add the \"`lit`\" package to your workspace, if you are using Web Components\n- Remove the \"`uiFramework`\" option from your project's Storybook targets\n\nOur generator is based on the guide to migration using the Storybook CLI, sp please refer to the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937) for more information.\n\n## I am not on Nx 15.9.0 yet but I still want to migrate to Storybook 7\n\nYou can migrate to Storybook 7 by just using the [Storybook `upgrade` and `automigrate` scripts](https://storybook.js.org/docs/7.0/react/configure/upgrading), but you will have to manually point the `automigrate` script to each one of your projects using Storybook, explained in [Step 03](#step-03) above.\n\nFirst, you would have to run the `npx storybook@latest upgrade` to get the latest versions of all the `@storybook/*` packages. Then, for each one of your projects that use Storybook, you would have to run `npx storybook@latest automigrate --config-dir /.storybook --renderer @storybook/`.\n\nThe `@nx/storybook:migrate-7` generator helps you by figuring out all the project paths and the renderers that need to be passed in the `automigrate` script, and also by performing a number of adjustments to your code to make sure the migration scripts run smoothly, so it is recommended to use the generator instead of running the scripts manually.\n\n## Report any issues and bugs\n\nPlease report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose).\n", - "presets": [] - }, - "description": "Migrate to Storybook version 7.", - "hidden": false, - "implementation": "/packages/storybook/src/generators/migrate-7/migrate-7.ts", - "aliases": [], - "path": "/packages/storybook/src/generators/migrate-7/schema.json", - "type": "generator" -} diff --git a/docs/generated/packages/storybook/generators/migrate-9.json b/docs/generated/packages/storybook/generators/migrate-9.json new file mode 100644 index 00000000000000..6bf78ac697a9d2 --- /dev/null +++ b/docs/generated/packages/storybook/generators/migrate-9.json @@ -0,0 +1,42 @@ +{ + "name": "migrate-9", + "factory": "./src/generators/migrate-9/migrate-9", + "schema": { + "cli": "nx", + "title": "Migrate Storybook to version 9.", + "description": "Migrate Storybook to version 9.", + "$id": "migrate-9", + "type": "object", + "properties": { + "autoAcceptAllPrompts": { + "type": "boolean", + "description": "Say yes to all the prompts from the Storybook CLI migration scripts.", + "default": false + }, + "onlyShowListOfCommands": { + "type": "boolean", + "description": "Only show the steps that you need to follow in order to migrate. This does NOT make any changes to your code.", + "default": false + }, + "noUpgrade": { + "type": "boolean", + "description": "Skip upgrading Storybook packages. Only use this option if you are already on version 9, and you do not want to install the packages again.", + "default": false + }, + "versionTag": { + "type": "string", + "description": "The version of Storybook to use. Use 'latest' to use the latest stable version, or 'next' to use the latest beta.", + "default": "latest", + "enum": ["latest", "next"] + } + }, + "examplesFile": "---\ntitle: Storybook 9 Migration Generator Examples\ndescription: This page contains examples for the @nx/storybook:migrate-9 generator.\n---\n\nStorybook 9 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 9.0.0 release article](https://storybook.js.org/blog/storybook-9). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 9 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800) and the [Storybook 9.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).\n\nYou can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 8. To help you, Nx offers the `@nx/storybook:migrate-9` generator. This generator will help you migrate your existing Storybook setup to version 8.\n\n## How to use it\n\nJust call:\n\n```bash\nnpx nx g @nx/storybook:migrate-9\n```\n\n{% callout type=\"warning\" title=\"Commit your changes\" %}\nIt is advised that you start with a clean git history before running this generator, since it is going to be making lots of changes to your workspace.\n{% /callout %}\n\nYou can run this generator using the above command, without passing any options. This will start the migration process for all your projects that have Storybook configured. The logs will explain what is happening in every step, and the logs are mixed Nx and Storybook CLI logs. During the process you will be prompted by the Storybook CLI to accept the automigration scripts. You can read more about that in the next section.\n\nWhen the generator finishes, you will see a summary of the changes that were made to your workspace, and it will also create a new file, called `storybook-migration-summary.md` at the root of your project, which will contain a list of all the changes that were made to your workspace.\n\n### Accept the automigration prompts\n\nThe Storybook CLI (running through our generator) will prompt you to run some code generators and modifiers.\n\nYou can say `yes` to these prompts, which are usually the following (there may be more or less, depending on your setup,\nand depending on the latest versions of the Storybook CLI - this code is NOT managed by Nx, but by Storybook):\n\n- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.\n- `eslintPlugin`: installs the `eslint-plugin-storybook`\n- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)\n- `autodocsTrue`: adds `autodocs: true` to your project's `.storybook/main.js|ts` file\n\n### Check the result\n\nOnce the generator finishes, and the Storybook CLI automigration scripts have run, you should check the result. Examples of migrated `.storybook/main.js|ts` files would look like this:\n\n#### Full example for Angular projects\n\nHere is an example of a project-level `.storybook/main.js|ts` file for an Angular project that has been migrated to Storybook version 8:\n\n```ts {% fileName=\"apps/my-angular-app/.storybook/main.js\" %}\nconst config = {\n stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'],\n addons: ['@storybook/addon-essentials'],\n framework: {\n name: '@storybook/angular',\n options: {},\n },\n};\n\nexport default config;\n```\n\n#### Full example for React projects with Vite\n\nHere is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite that has been migrated to Storybook version 8:\n\n```ts {% fileName=\"apps/my-react-app/.storybook/main.js\" %}\nconst config = {\n stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'],\n addons: ['@storybook/addon-essentials'],\n framework: {\n name: '@storybook/react-vite',\n options: {\n builder: {\n viteConfigPath: 'apps/rv1/vite.config.ts',\n },\n },\n },\n};\n\nexport default config;\n```\n\n### Make sure that all works by running Storybook\n\nYou can now use Storybook 9! ๐ŸŽ‰\n\n```bash\nnpx nx build-storybook PROJECT_NAME\n```\n\nand\n\n```bash\nnpx nx storybook PROJECT_NAME\n```\n\n## Run the generator by automatically accepting the Storybook CLI prompts\n\nYou can run the generator with the `--autoAcceptAllPrompts` flag, which will automatically accept all the Storybook CLI prompts. This is useful if you want to run the generator in a CI environment, or if you want to run the generator in a script. Or if you are sure that you want to accept all the prompts!\n\n```bash\nnpx nx g @nx/storybook:migrate-9 --autoAcceptAllPrompts\n```\n\nThe Storybook CLI may still ask you about some things, but mostly it should just run the whole migration suite uninterrupted.\n\n## Run the migration manually\n\nNx gives you the ability to run all the migration steps one by one, manually, but still with the help of our migrator. To help you out with the commands that you need to run, Nx will print out the instructions if you run the generator with the `--onlyShowListOfCommands` flag, like this:\n\n```bash\nnpx nx g @nx/storybook:migrate-9 --onlyShowListOfCommands\n```\n\nEssentially, the way to run the migration manually is the following:\n\n1. Call the Nx generator to show you the list of commands:\n `npx nx g @nx/storybook:migrate-9 --onlyShowListOfCommands`\n2. Call the Storybook upgrade script:\n `npx storybook@latest upgrade`\n3. Call the Storybook automigrate scripts for each one of the projects using Storybook (the `@nx/storybook:migrate-9` will give you the list of all the commands)\n\n## Report any issues and bugs\n\nPlease report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose).\n", + "presets": [] + }, + "description": "Migrate to Storybook version 9.", + "hidden": false, + "implementation": "/packages/storybook/src/generators/migrate-9/migrate-9.ts", + "aliases": [], + "path": "/packages/storybook/src/generators/migrate-9/schema.json", + "type": "generator" +} diff --git a/docs/generated/packages/storybook/migrations/21.1.0-package-updates.json b/docs/generated/packages/storybook/migrations/21.1.0-package-updates.json new file mode 100644 index 00000000000000..27e5e7e8ec7ce2 --- /dev/null +++ b/docs/generated/packages/storybook/migrations/21.1.0-package-updates.json @@ -0,0 +1,100 @@ +{ + "name": "21.1.0-package-updates", + "version": "21.1.0-beta.0", + "packages": { + "@storybook/angular": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "storybook": { "version": "^9.0.0", "alwaysAddToPackageJson": true }, + "@storybook/addon-onboarding": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/addon-themes": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/builder-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/core-webpack": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/html": { "version": "^9.0.0", "alwaysAddToPackageJson": false }, + "@storybook/html-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/nextjs": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/preact": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/preact-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/server": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/server-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/svelte": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/svelte-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/sveltekit": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/vue-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/vue3": { "version": "^9.0.0", "alwaysAddToPackageJson": false }, + "@storybook/vue3-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/web-components": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/web-components-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + } + }, + "aliases": [], + "description": "", + "hidden": false, + "implementation": "", + "path": "/packages/storybook", + "schema": null, + "type": "migration" +} diff --git a/docs/generated/packages/storybook/migrations/update-21-1-0-migrate-storybook-v9.json b/docs/generated/packages/storybook/migrations/update-21-1-0-migrate-storybook-v9.json new file mode 100644 index 00000000000000..df789277075c6d --- /dev/null +++ b/docs/generated/packages/storybook/migrations/update-21-1-0-migrate-storybook-v9.json @@ -0,0 +1,13 @@ +{ + "name": "update-21-1-0-migrate-storybook-v9", + "cli": "nx", + "version": "21.1.0-beta.0", + "description": "Update workspace to use Storybook v9", + "implementation": "/packages/storybook/src/migrations/update-21-1-0/update-sb-9.ts", + "aliases": [], + "hidden": false, + "path": "/packages/storybook", + "schema": null, + "type": "migration", + "examplesFile": "" +} diff --git a/docs/map.json b/docs/map.json index 58448dcf261d0e..4b1eb399be2de8 100644 --- a/docs/map.json +++ b/docs/map.json @@ -2614,10 +2614,10 @@ "file": "shared/packages/storybook/best-practices" }, { - "id": "storybook-7-setup", - "name": "Storybook 7", - "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", - "file": "shared/packages/storybook/storybook-7-setup" + "id": "storybook-9-setup", + "name": "Storybook 9", + "description": "This guide explains how you can set up Storybook version 9 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", + "file": "shared/packages/storybook/storybook-9-setup" } ] }, diff --git a/docs/shared/packages/storybook/best-practices.md b/docs/shared/packages/storybook/best-practices.md index e715968a4f217b..98c55949e3ae5d 100644 --- a/docs/shared/packages/storybook/best-practices.md +++ b/docs/shared/packages/storybook/best-practices.md @@ -53,8 +53,6 @@ If your project is [already configured](/nx-api/storybook), you can use the `sto - [Vue stories generator](/nx-api/vue/generators/stories) -- [React Native stories generator](/nx-api/react-native/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. #### Storybook interaction tests diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index 9fbfee2842fafd..f3f4fb692dd1fb 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -93,35 +93,22 @@ nx g @nx/react:storybook-configuration my-react-project nx g @nx/vue:storybook-configuration my-vue-project ``` -{% /tab %} -{% tab label="React Native" %} - -```shell -nx g @nx/react-native:storybook-configuration my-react-native-project -``` - {% /tab %} {% /tabs %} 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: +If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` 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` Choosing one of these frameworks will have the following effects on your workspace: @@ -132,7 +119,7 @@ Choosing one of these frameworks will have the following effects on your workspa 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, Vue, Nuxt, 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), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above. +Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above. ### Running Storybook @@ -241,5 +228,5 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) -- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) -- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup) +- [Storybook 9 migration generator](/nx-api/storybook/generators/migrate-9) +- [Storybook 9 setup guide](/nx-api/storybook/documents/storybook-9-setup) diff --git a/docs/shared/packages/storybook/storybook-7-setup.md b/docs/shared/packages/storybook/storybook-7-setup.md deleted file mode 100644 index 773cf00fabfc6d..00000000000000 --- a/docs/shared/packages/storybook/storybook-7-setup.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Storybook 7 overview -description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 6 to Storybook 7. ---- - -# Storybook 7 is here - and Nx is ready - -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.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). - -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. Nx also provides a [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7. - -So, let's see how you can use Storybook 7 on your Nx workspace. - -## Migrate your existing workspace to Storybook 7 - -If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/nx-api/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7. - -## Set up Storybook 7 in a _new_ Nx Workspace - -Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace. - -## 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 [`@nx/storybook:storybook`](/nx-api/storybook/executors/storybook) and [`@nx/storybook:build`](/nx-api/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. - -## Report any issues and bugs - -Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/shared/packages/storybook/storybook-9-setup.md b/docs/shared/packages/storybook/storybook-9-setup.md new file mode 100644 index 00000000000000..8371096bbbe2e8 --- /dev/null +++ b/docs/shared/packages/storybook/storybook-9-setup.md @@ -0,0 +1,24 @@ +--- +title: Storybook 9 overview +description: This guide explains how you can set up Storybook version 9 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 8 to Storybook 9. +--- + +# Storybook 9 is here - and Nx is ready + +Storybook 9 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 9.0.0 release article](https://storybook.js.org/blog/storybook-9/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 9 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-8x-to-900) and the [Storybook 9.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). + +Nx provides new generators that allow you to generate Storybook 9 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 9 migration generator](/nx-api/storybook/generators/migrate-9) that you can use to migrate your existing Storybook configuration to version 9. + +So, let's see how you can use Storybook 9 on your Nx workspace. + +## Migrate your existing workspace to Storybook 9 + +If you already have Storybook configured in your Nx workspace, you can use the [Storybook 9 migrator generator](/nx-api/storybook/generators/migrate-9) to migrate your existing Storybook configuration to version 9. + +## Set up Storybook 9 in a _new_ Nx Workspace + +Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace. + +## Report any issues and bugs + +Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/docs/shared/recipes/storybook/plugin-angular.md b/docs/shared/recipes/storybook/plugin-angular.md index 27fe4ad2af69f3..a5ea83f9b5b42a 100644 --- a/docs/shared/recipes/storybook/plugin-angular.md +++ b/docs/shared/recipes/storybook/plugin-angular.md @@ -187,5 +187,5 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) -- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup) -- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7) +- [Set up Storybook version 9](/nx-api/storybook/documents/storybook-9-setup) +- [Migrate to Storybook version 9](/nx-api/storybook/generators/migrate-9) diff --git a/docs/shared/recipes/storybook/plugin-react.md b/docs/shared/recipes/storybook/plugin-react.md index f879d13c43203d..97ea6dfb90548f 100644 --- a/docs/shared/recipes/storybook/plugin-react.md +++ b/docs/shared/recipes/storybook/plugin-react.md @@ -147,5 +147,5 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) -- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup) -- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7) +- [Set up Storybook version 9](/nx-api/storybook/documents/storybook-9-setup) +- [Migrate to Storybook version 9](/nx-api/storybook/generators/migrate-9) diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 270a12104b61af..3128a68cae7210 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -681,9 +681,6 @@ - [application](/nx-api/react-native/generators/application) - [library](/nx-api/react-native/generators/library) - [component](/nx-api/react-native/generators/component) - - [storybook-configuration](/nx-api/react-native/generators/storybook-configuration) - - [component-story](/nx-api/react-native/generators/component-story) - - [stories](/nx-api/react-native/generators/stories) - [upgrade-native](/nx-api/react-native/generators/upgrade-native) - [web-configuration](/nx-api/react-native/generators/web-configuration) - [convert-to-inferred](/nx-api/react-native/generators/convert-to-inferred) @@ -747,17 +744,16 @@ - [documents](/nx-api/storybook/documents) - [Overview](/nx-api/storybook/documents/overview) - [Storybook best practices for making the most out of Nx](/nx-api/storybook/documents/best-practices) - - [Storybook 7](/nx-api/storybook/documents/storybook-7-setup) + - [Storybook 9](/nx-api/storybook/documents/storybook-9-setup) - [executors](/nx-api/storybook/executors) - [storybook](/nx-api/storybook/executors/storybook) - [build](/nx-api/storybook/executors/build) - [generators](/nx-api/storybook/generators) - [init](/nx-api/storybook/generators/init) - [configuration](/nx-api/storybook/generators/configuration) - - [cypress-project](/nx-api/storybook/generators/cypress-project) - [convert-to-inferred](/nx-api/storybook/generators/convert-to-inferred) - - [migrate-7](/nx-api/storybook/generators/migrate-7) - [migrate-8](/nx-api/storybook/generators/migrate-8) + - [migrate-9](/nx-api/storybook/generators/migrate-9) - [migrations](/nx-api/storybook/migrations) - [vite](/nx-api/vite) - [documents](/nx-api/vite/documents) diff --git a/e2e/react-native/src/react-native-legacy.test.ts b/e2e/react-native/src/react-native-legacy.test.ts index 4032caf85f5227..c0494c49fd7a80 100644 --- a/e2e/react-native/src/react-native-legacy.test.ts +++ b/e2e/react-native/src/react-native-legacy.test.ts @@ -172,7 +172,7 @@ describe('@nx/react-native (legacy)', () => { it('should create storybook with application', async () => { runCLI( - `generate @nx/react-native:storybook-configuration ${appName} --generateStories --no-interactive` + `generate @nx/react:storybook-configuration ${appName} --generateStories --no-interactive` ); checkFilesExist( `apps/${appName}/.storybook/main.ts`, @@ -296,7 +296,7 @@ describe('@nx/react-native (legacy)', () => { } runCLI( - `generate @nx/react-native:storybook-configuration ${appName2} --generateStories --no-interactive` + `generate @nx/react:storybook-configuration ${appName2} --generateStories --no-interactive` ); checkFilesExist( `apps/${appName2}/.storybook/main.ts`, diff --git a/e2e/react-native/src/react-native.test.ts b/e2e/react-native/src/react-native.test.ts index 1cacffc310a788..956fffa2c06015 100644 --- a/e2e/react-native/src/react-native.test.ts +++ b/e2e/react-native/src/react-native.test.ts @@ -125,7 +125,7 @@ describe('@nx/react-native', () => { it('should create storybook with application', async () => { runCLI( - `generate @nx/react-native:storybook-configuration ${appName} --generateStories --no-interactive` + `generate @nx/react:storybook-configuration ${appName} --generateStories --no-interactive` ); checkFilesExist( `${appName}/.storybook/main.ts`, @@ -148,7 +148,7 @@ describe('@nx/react-native', () => { it('should create storybook with library', async () => { runCLI( - `generate @nx/react-native:storybook-configuration ${libName} --generateStories --no-interactive` + `generate @nx/react:storybook-configuration ${libName} --generateStories --no-interactive` ); checkFilesExist( `${libName}/.storybook/main.ts`, @@ -162,7 +162,7 @@ describe('@nx/react-native', () => { it('should run build with vite bundler and e2e with playwright', async () => { const appName2 = uniq('my-app'); runCLI( - `generate @nx/react-native:application ${appName2} --directory=apps/${appName2} --bundler=vite --e2eTestRunner=playwright --install=false --no-interactive --unitTestRunner=jest --linter=eslint` + `generate @nx/react:application ${appName2} --directory=apps/${appName2} --bundler=vite --e2eTestRunner=playwright --install=false --no-interactive --unitTestRunner=jest --linter=eslint` ); expect(() => runCLI(`build ${appName2}`)).not.toThrow(); if (runE2ETests()) { @@ -178,7 +178,7 @@ describe('@nx/react-native', () => { } runCLI( - `generate @nx/react-native:storybook-configuration ${appName2} --generateStories --no-interactive` + `generate @nx/react:storybook-configuration ${appName2} --generateStories --no-interactive` ); checkFilesExist( `apps/${appName2}/.storybook/main.ts`, diff --git a/e2e/storybook/src/storybook-nested.test.ts b/e2e/storybook/src/storybook-nested.test.ts index 9a6ed39028cc1f..11ef5b2e472a11 100644 --- a/e2e/storybook/src/storybook-nested.test.ts +++ b/e2e/storybook/src/storybook-nested.test.ts @@ -102,7 +102,7 @@ describe('Storybook generators and executors for standalone workspaces - using R writeFileSync( tmpProjPath(`src/app/test-button.stories.tsx`), ` - import type { Meta } from '@storybook/react'; + import type { Meta } from '@storybook/react-webpack5'; import { TestButton } from './test-button'; const Story: Meta = { diff --git a/e2e/storybook/src/storybook.test.ts b/e2e/storybook/src/storybook.test.ts index ea69bb48ffb634..f92a3298a7d393 100644 --- a/e2e/storybook/src/storybook.test.ts +++ b/e2e/storybook/src/storybook.test.ts @@ -89,7 +89,7 @@ describe('Storybook generators and executors for monorepos', () => { writeFileSync( tmpProjPath(`${reactStorybookApp}/src/app/test-button.stories.tsx`), ` - import type { Meta } from '@storybook/react'; + import type { Meta } from '@storybook/react-webpack5'; import { TestButton } from './test-button'; const Story: Meta = { diff --git a/graph/client/.storybook/main.js b/graph/client/.storybook/main.js index 5777c521ad4003..17e2618a1f9e02 100644 --- a/graph/client/.storybook/main.js +++ b/graph/client/.storybook/main.js @@ -1,10 +1,6 @@ module.exports = { stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-dark-mode', - ], + addons: ['@nx/react/plugins/storybook', 'storybook-dark-mode'], framework: { name: '@storybook/react-webpack5', options: {}, diff --git a/graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx b/graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx index 40ca508fa88421..aaf1f6a138bbb7 100644 --- a/graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx +++ b/graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { CollapseEdgesPanel } from './collapse-edges-panel'; const meta: Meta = { diff --git a/graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx b/graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx index 374b4703c40944..3b6487923832a7 100644 --- a/graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx +++ b/graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { RankdirPanel } from './rankdir-panel'; const meta: Meta = { diff --git a/graph/client/src/app/feature-projects/panels/search-depth.stories.tsx b/graph/client/src/app/feature-projects/panels/search-depth.stories.tsx index 3f656d5b9736be..69e47317f72741 100644 --- a/graph/client/src/app/feature-projects/panels/search-depth.stories.tsx +++ b/graph/client/src/app/feature-projects/panels/search-depth.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { SearchDepth } from './search-depth'; const meta: Meta = { diff --git a/graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx b/graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx index 6bf47bef2319a4..32ea8bd7bf57d7 100644 --- a/graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx +++ b/graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TextFilterPanel } from './text-filter-panel'; const meta: Meta = { diff --git a/graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx b/graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx index a0a411fcfafccb..428a00145ada35 100644 --- a/graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx +++ b/graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TracingPanel } from './tracing-panel'; const meta: Meta = { diff --git a/graph/client/src/app/feature-tasks/task-list.stories.tsx b/graph/client/src/app/feature-tasks/task-list.stories.tsx index 52c92e4f174b0d..fb2cf67ef96f2a 100644 --- a/graph/client/src/app/feature-tasks/task-list.stories.tsx +++ b/graph/client/src/app/feature-tasks/task-list.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TaskList, TaskListProps } from './task-list'; const meta: Meta = { diff --git a/graph/client/src/app/ui-components/checkbox-panel.stories.tsx b/graph/client/src/app/ui-components/checkbox-panel.stories.tsx index 0fab62f2f4a7d9..2014cc514746af 100644 --- a/graph/client/src/app/ui-components/checkbox-panel.stories.tsx +++ b/graph/client/src/app/ui-components/checkbox-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { CheckboxPanel } from './checkbox-panel'; const meta: Meta = { diff --git a/graph/client/src/app/ui-components/debugger-panel.stories.tsx b/graph/client/src/app/ui-components/debugger-panel.stories.tsx index f3d45fed076462..249119e025dcb6 100644 --- a/graph/client/src/app/ui-components/debugger-panel.stories.tsx +++ b/graph/client/src/app/ui-components/debugger-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { DebuggerPanel } from './debugger-panel'; const meta: Meta = { diff --git a/graph/client/src/app/ui-components/focused-project-panel.stories.tsx b/graph/client/src/app/ui-components/focused-project-panel.stories.tsx index 0fb586ab5cbf9a..99a63ca4297bd3 100644 --- a/graph/client/src/app/ui-components/focused-project-panel.stories.tsx +++ b/graph/client/src/app/ui-components/focused-project-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { FocusedPanel } from './focused-panel'; const meta: Meta = { diff --git a/graph/client/src/app/ui-components/show-hide-all.stories.tsx b/graph/client/src/app/ui-components/show-hide-all.stories.tsx index a92b804a6fc519..b799c1f8a7babb 100644 --- a/graph/client/src/app/ui-components/show-hide-all.stories.tsx +++ b/graph/client/src/app/ui-components/show-hide-all.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { ShowHideAll } from './show-hide-all'; const meta: Meta = { diff --git a/graph/migrate/.storybook/main.ts b/graph/migrate/.storybook/main.ts index d009dc861b18d1..40155133d2d844 100644 --- a/graph/migrate/.storybook/main.ts +++ b/graph/migrate/.storybook/main.ts @@ -4,7 +4,7 @@ import { mergeConfig } from 'vite'; const config: StorybookConfig = { stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: ['@storybook/addon-docs'], framework: { name: '@storybook/react-vite', diff --git a/graph/migrate/src/lib/migrate.stories.tsx b/graph/migrate/src/lib/migrate.stories.tsx index 2e59b61e4f960d..9681f785917a88 100644 --- a/graph/migrate/src/lib/migrate.stories.tsx +++ b/graph/migrate/src/lib/migrate.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { MigrateUI } from './migrate'; const meta: Meta = { diff --git a/graph/ui-code-block/.storybook/main.ts b/graph/ui-code-block/.storybook/main.ts index a4718d529b9596..acbc6c7996644c 100644 --- a/graph/ui-code-block/.storybook/main.ts +++ b/graph/ui-code-block/.storybook/main.ts @@ -4,17 +4,22 @@ import { mergeConfig } from 'vite'; const config: StorybookConfig = { stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: ['@storybook/addon-docs'], framework: { name: '@storybook/react-vite', options: {}, }, - viteFinal: async (config) => - mergeConfig(config, { - plugins: [], - }), + viteFinal: async (config) => { + const { + nxViteTsPaths, + // nx-ignore-next-line + } = require('@nx/vite/plugins/nx-tsconfig-paths.plugin'); + return mergeConfig(config, { + plugins: [nxViteTsPaths()], + }); + }, }; export default config; diff --git a/graph/ui-code-block/src/lib/json-code-block.stories.tsx b/graph/ui-code-block/src/lib/json-code-block.stories.tsx index 16837899354dfe..1a107667369716 100644 --- a/graph/ui-code-block/src/lib/json-code-block.stories.tsx +++ b/graph/ui-code-block/src/lib/json-code-block.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { JsonCodeBlock } from './json-code-block'; const meta: Meta = { diff --git a/graph/ui-project-details/.eslintrc.json b/graph/ui-project-details/.eslintrc.json index a39ac5d0578035..7a336d10241f8b 100644 --- a/graph/ui-project-details/.eslintrc.json +++ b/graph/ui-project-details/.eslintrc.json @@ -1,6 +1,6 @@ { "extends": ["plugin:@nx/react", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], + "ignorePatterns": ["!**/*", "node_modules"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], diff --git a/graph/ui-project-details/.storybook/main.ts b/graph/ui-project-details/.storybook/main.ts index 173cdb4d828cdb..a9e018a5e59114 100644 --- a/graph/ui-project-details/.storybook/main.ts +++ b/graph/ui-project-details/.storybook/main.ts @@ -4,17 +4,22 @@ import { mergeConfig } from 'vite'; const config: StorybookConfig = { stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials'], + addons: ['@storybook/addon-docs'], framework: { name: '@storybook/react-vite', options: {}, }, - viteFinal: async (config) => - mergeConfig(config, { - plugins: [], - }), + viteFinal: async (config) => { + const { + nxViteTsPaths, + // nx-ignore-next-line + } = require('@nx/vite/plugins/nx-tsconfig-paths.plugin'); + return mergeConfig(config, { + plugins: [nxViteTsPaths()], + }); + }, docs: {}, }; diff --git a/graph/ui-project-details/src/lib/owners-list/owners-list.stories.tsx b/graph/ui-project-details/src/lib/owners-list/owners-list.stories.tsx index 5676694b8694d2..f912304d80d440 100644 --- a/graph/ui-project-details/src/lib/owners-list/owners-list.stories.tsx +++ b/graph/ui-project-details/src/lib/owners-list/owners-list.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { OwnersList } from './owners-list'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx index 8c3cba6a1f40fa..a0c094b34bd6a9 100644 --- a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx +++ b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-webpack5'; import { ProjectDetails } from './project-details'; import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared'; diff --git a/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx b/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx index 7b5cebe7daf077..937f931ba9d785 100644 --- a/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx +++ b/graph/ui-project-details/src/lib/source-info/source-info.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { SourceInfo } from './source-info'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/tag-list/tag-list.stories.tsx b/graph/ui-project-details/src/lib/tag-list/tag-list.stories.tsx index 0bbc5cf5dc8b90..2508745f7721bc 100644 --- a/graph/ui-project-details/src/lib/tag-list/tag-list.stories.tsx +++ b/graph/ui-project-details/src/lib/tag-list/tag-list.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TagList } from './tag-list'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx index 5d94f388dd9f13..1004865069ec97 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetConfigurationGroupHeader } from './target-configuration-details-group-header'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx index 0402b514a8e770..df007f519d36be 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetConfigurationGroupList, TargetConfigurationGroupListProps, diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx index eabcb7989e713d..61c9fe65c44d66 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetConfigurationDetailsHeader, TargetConfigurationDetailsHeaderProps, diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx index 51db052b8c6d1c..c4d5960cba00ff 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetConfigurationDetailsListItem, TargetConfigurationDetailsListItemProps, diff --git a/graph/ui-project-details/src/lib/target-executor/target-executor-title.stories.tsx b/graph/ui-project-details/src/lib/target-executor/target-executor-title.stories.tsx index abc8761879de04..1cb2090e59bbb0 100644 --- a/graph/ui-project-details/src/lib/target-executor/target-executor-title.stories.tsx +++ b/graph/ui-project-details/src/lib/target-executor/target-executor-title.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetExecutorTitle } from './target-executor-title'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/target-executor/target-executor.stories.tsx b/graph/ui-project-details/src/lib/target-executor/target-executor.stories.tsx index 4d5b0f5786774d..d5ce079e404769 100644 --- a/graph/ui-project-details/src/lib/target-executor/target-executor.stories.tsx +++ b/graph/ui-project-details/src/lib/target-executor/target-executor.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetExecutor } from './target-executor'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx b/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx index bf29d539ddf316..1dd815d3ec0fdc 100644 --- a/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx +++ b/graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { TargetTechnologies } from './target-technologies'; const meta: Meta = { diff --git a/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx index 090a38a9b76bbb..4ddf78794debcb 100644 --- a/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx +++ b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { AtomizerTooltip, AtomizerTooltipProps } from './atomizer-tooltip'; import { Tooltip } from '@nx/graph/legacy/tooltips'; diff --git a/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx index 788261ff79e096..d27cdcab699af3 100644 --- a/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx +++ b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { PropertyInfoTooltip, PropertyInfoTooltipProps, diff --git a/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx index 9554033365ae22..702e8b7bb16639 100644 --- a/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx +++ b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { SourcemapInfoToolTip, SourcemapInfoToolTipProps, diff --git a/graph/ui-theme/.storybook/main.ts b/graph/ui-theme/.storybook/main.ts index b30df673d51598..cc036fec663795 100644 --- a/graph/ui-theme/.storybook/main.ts +++ b/graph/ui-theme/.storybook/main.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../src/lib/**/*.stories.@(mdx|js|jsx|ts|tsx)'], - addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'], + addons: ['@storybook/addon-docs', '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, @@ -11,7 +11,3 @@ const config: StorybookConfig = { }; export default config; - -// To customize your Vite configuration you can use the viteFinal field. -// Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/recipes/storybook/custom-builder-configs diff --git a/graph/ui-theme/src/lib/theme-panel.stories.tsx b/graph/ui-theme/src/lib/theme-panel.stories.tsx index 91a6036f76186f..900be8e08bc340 100644 --- a/graph/ui-theme/src/lib/theme-panel.stories.tsx +++ b/graph/ui-theme/src/lib/theme-panel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { ThemePanel } from './theme-panel'; const meta: Meta = { diff --git a/nx.json b/nx.json index 181ff1ae2dd525..c1fc4d0d50e922 100644 --- a/nx.json +++ b/nx.json @@ -336,56 +336,28 @@ "@typescript-eslint/typescript-estree" ], [ - "@storybook/addon-controls", - "@storybook/addon-essentials", - "@storybook/addon-jest", - "@storybook/addon-mdx-gfm", "@storybook/addon-onboarding", "@storybook/addon-themes", "@storybook/angular", - "@storybook/blocks", - "@storybook/builder-manager", "@storybook/builder-webpack5", - "@storybook/cli", - "@storybook/components", - "@storybook/core", - "@storybook/core-common", - "@storybook/core-events", - "@storybook/core-server", "@storybook/core-webpack", - "@storybook/csf-tools", "@storybook/html", "@storybook/html-vite", - "@storybook/html-webpack5", - "@storybook/manager", - "@storybook/manager-api", "@storybook/nextjs", "@storybook/preact", "@storybook/preact-vite", - "@storybook/preact-webpack5", - "@storybook/preset-create-react-app", - "@storybook/preset-html-webpack", - "@storybook/preset-preact-webpack", - "@storybook/preset-react-webpack", - "@storybook/preset-server-webpack", - "@storybook/preset-vue3-webpack", "@storybook/react", "@storybook/react-vite", "@storybook/react-webpack5", - "@storybook/router", "@storybook/server", "@storybook/server-webpack5", "@storybook/svelte", "@storybook/svelte-vite", "@storybook/sveltekit", - "@storybook/theming", - "@storybook/types", "@storybook/vue3", "@storybook/vue3-vite", - "@storybook/vue3-webpack5", "@storybook/web-components", - "@storybook/web-components-vite", - "@storybook/web-components-webpack5" + "@storybook/web-components-vite" ] ] } diff --git a/package.json b/package.json index 492a5a0d074cf6..68a2d3bbcc5909 100644 --- a/package.json +++ b/package.json @@ -115,14 +115,9 @@ "@rspack/plugin-minify": "^0.7.5", "@rspack/plugin-react-refresh": "^1.0.0", "@schematics/angular": "~19.2.0", - "@storybook/addon-essentials": "8.4.6", - "@storybook/addon-interactions": "8.4.6", - "@storybook/core-server": "8.4.6", - "@storybook/react": "8.4.6", - "@storybook/react-vite": "8.4.6", - "@storybook/react-webpack5": "8.4.6", - "@storybook/test": "^8.5.1", - "@storybook/types": "^8.4.6", + "@storybook/addon-docs": "9.0.0-rc.0", + "@storybook/react-vite": "9.0.0-rc.0", + "@storybook/react-webpack5": "9.0.0-rc.0", "@supabase/supabase-js": "^2.26.0", "@svgr/rollup": "^8.1.0", "@svgr/webpack": "^8.0.1", @@ -303,7 +298,7 @@ "semver": "^7.6.3", "source-map-loader": "^5.0.0", "source-map-support": "0.5.19", - "storybook": "^8.4.6", + "storybook": "9.0.0-rc.0", "storybook-dark-mode": "^4.0.2", "style-loader": "^3.3.0", "tar-stream": "~2.2.0", diff --git a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ index c10f05da004f84..fc96b932aaba65 100644 --- a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ +++ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ @@ -1,8 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { <%=componentName%> } from './<%=componentFileName%>'; <%_ if ( interactionTests ) { _%> -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; <%_ } _%> const meta: Meta<<%= componentName %>> = { @@ -23,9 +22,8 @@ export const Heading: Story = { args: {<% for (let prop of props) { %> <%= prop.name %>: <%- prop.defaultValue %>,<% } %> }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/<%=componentNameSimple%> works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/<%=componentNameSimple%> works!/gi)).toBeTruthy(); }, }; -<%_ } _%> \ No newline at end of file +<%_ } _%> diff --git a/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap b/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap index 5b5de71b2be55b..1f69ed6f5e5538 100644 --- a/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap +++ b/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap @@ -3,8 +3,7 @@ exports[`angularStories generator: applications should generate stories file for inline scam component 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { MyScamComponent } from './my-scam.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: MyScamComponent, @@ -21,9 +20,8 @@ export const Primary: Story = { export const Heading: Story = { args: { }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/my-scam works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/my-scam works!/gi)).toBeTruthy(); }, }; " @@ -32,8 +30,7 @@ export const Heading: Story = { exports[`angularStories generator: applications should generate stories file with interaction tests 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { AppComponent } from './app.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: AppComponent, @@ -48,9 +45,8 @@ export const Primary: Story = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/app works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/app works!/gi)).toBeTruthy(); }, }; " @@ -59,8 +55,7 @@ export const Heading: Story = { exports[`angularStories generator: applications should ignore a path that has a nested component, but still generate nested component stories 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { ComponentBComponent } from './component-b.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: ComponentBComponent, @@ -77,9 +72,8 @@ export const Primary: Story = { export const Heading: Story = { args: { }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/component-b works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/component-b works!/gi)).toBeTruthy(); }, }; " @@ -88,8 +82,7 @@ export const Heading: Story = { exports[`angularStories generator: applications should ignore a path when using a routing module 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { ComponentComponent } from './component.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: ComponentComponent, @@ -106,9 +99,8 @@ export const Primary: Story = { export const Heading: Story = { args: { }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/component works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/component works!/gi)).toBeTruthy(); }, }; " diff --git a/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap b/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap index 72842c417c3e37..3c6ba705075073 100644 --- a/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap +++ b/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap @@ -3,8 +3,7 @@ exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories file for standalone components 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { StandaloneComponent } from './standalone.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: StandaloneComponent, @@ -19,9 +18,8 @@ export const Primary: Story = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/standalone works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/standalone works!/gi)).toBeTruthy(); }, }; " @@ -30,8 +28,7 @@ export const Heading: Story = { exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories file for standalone components 2`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { SecondaryStandaloneComponent } from './secondary-standalone.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: SecondaryStandaloneComponent, @@ -46,9 +43,10 @@ export const Primary: Story = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/secondary-standalone works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect( + canvas.getByText(/secondary-standalone works!/gi) + ).toBeTruthy(); }, }; " @@ -57,8 +55,7 @@ export const Heading: Story = { exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories.ts files 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { TestButtonComponent } from './test-button.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestButtonComponent, @@ -83,9 +80,8 @@ export const Heading: Story = { age: 0, isOn: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); }, }; " @@ -94,8 +90,7 @@ export const Heading: Story = { exports[`angularStories generator: libraries Stories for non-empty Angular library should ignore paths 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { TestButtonComponent } from './test-button.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestButtonComponent, @@ -120,9 +115,8 @@ export const Heading: Story = { age: 0, isOn: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); }, }; " diff --git a/packages/angular/src/generators/stories/stories.ts b/packages/angular/src/generators/stories/stories.ts index e634a824d0853f..b2e522e212935b 100644 --- a/packages/angular/src/generators/stories/stories.ts +++ b/packages/angular/src/generators/stories/stories.ts @@ -23,7 +23,7 @@ import { nxVersion } from '../../utils/versions'; export async function angularStoriesGenerator( tree: Tree, options: StoriesGeneratorOptions -): Promise { +) { const entryPoints = getProjectEntryPoints(tree, options.name); const componentsInfo: ComponentInfo[] = []; for (const entryPoint of entryPoints) { @@ -62,24 +62,10 @@ export async function angularStoriesGenerator( skipFormat: true, }); } - const tasks: GeneratorCallback[] = []; - - if (options.interactionTests) { - const { interactionTestsDependencies, addInteractionsInAddons } = - ensurePackage('@nx/storybook', nxVersion); - - const projectConfiguration = readProjectConfiguration(tree, options.name); - addInteractionsInAddons(tree, projectConfiguration); - - tasks.push( - addDependenciesToPackageJson(tree, {}, interactionTestsDependencies()) - ); - } if (!options.skipFormat) { await formatFiles(tree); } - return runTasksInSerial(...tasks); } export default angularStoriesGenerator; diff --git a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap index 0c718a36b087fa..8d142a77e15a4b 100644 --- a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap +++ b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap @@ -8,7 +8,7 @@ const config: StorybookConfig = { stories: [ '../**/*.@(mdx|stories.@(js|jsx|ts|tsx))' ], - addons: ['@storybook/addon-essentials' , '@storybook/addon-interactions' ], + addons: [], framework: { name: '@storybook/angular', options: { @@ -33,8 +33,7 @@ export default config; exports[`StorybookConfiguration generator should configure storybook with interaction tests and install dependencies 1`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { TestButtonComponent } from './test-button.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestButtonComponent, @@ -59,9 +58,8 @@ export const Heading: Story = { age: 0, isOn: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/test-button works!/gi)).toBeTruthy(); }, }; " @@ -70,8 +68,7 @@ export const Heading: Story = { exports[`StorybookConfiguration generator should configure storybook with interaction tests and install dependencies 2`] = ` "import type { Meta, StoryObj } from '@storybook/angular'; import { TestOtherComponent } from './test-other.component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestOtherComponent, @@ -86,9 +83,8 @@ export const Primary: Story = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/test-other works!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/test-other works!/gi)).toBeTruthy(); }, }; " diff --git a/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts b/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts index a2f4458ed4b711..b8263f121c84f4 100644 --- a/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts +++ b/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts @@ -95,13 +95,6 @@ describe('StorybookConfiguration generator', () => { const packageJson = JSON.parse(tree.read('package.json', 'utf-8')); expect(packageJson.devDependencies['@storybook/angular']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should generate the right files', async () => { diff --git a/packages/nuxt/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/nuxt/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap index c4fc185341529a..872f5964b96ca7 100644 --- a/packages/nuxt/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/nuxt/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap @@ -9,7 +9,7 @@ import vue from '@vitejs/plugin-vue'; const config: StorybookConfig = { stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/vue3-vite', options: {}, diff --git a/packages/react-native/generators.json b/packages/react-native/generators.json index 5786bef815d43d..5aad40c4fbddc2 100644 --- a/packages/react-native/generators.json +++ b/packages/react-native/generators.json @@ -29,21 +29,6 @@ "description": "Create a React Native component.", "aliases": ["c"] }, - "storybook-configuration": { - "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal", - "schema": "./src/generators/storybook-configuration/schema.json", - "description": "Set up Storybook for a React Native application or library." - }, - "component-story": { - "factory": "./src/generators/component-story/component-story#componentStoryGenerator", - "schema": "./src/generators/component-story/schema.json", - "description": "Generate Storybook story for a React Native component." - }, - "stories": { - "factory": "./src/generators/stories/stories#storiesGenerator", - "schema": "./src/generators/stories/schema.json", - "description": "Create stories for all components declared in an application or library." - }, "upgrade-native": { "factory": "./src/generators/upgrade-native/upgrade-native#reactNativeUpgradeNativeGenerator", "schema": "./src/generators/upgrade-native/schema.json", diff --git a/packages/react-native/src/generators/component-story/component-story.ts b/packages/react-native/src/generators/component-story/component-story.ts deleted file mode 100644 index f178bdcdb70690..00000000000000 --- a/packages/react-native/src/generators/component-story/component-story.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Tree, logger } from '@nx/devkit'; -import { componentStoryGenerator as reactComponentStoryGenerator } from '@nx/react'; -import { CreateComponentStoriesFileSchema } from './schema'; - -/** - * @deprecated This would be a direct pass through to @nx/react:component-story generator. - * TODO (@xiongemi): remove this generator for v19 - */ -export async function componentStoryGenerator( - host: Tree, - schema: CreateComponentStoriesFileSchema -) { - logger.warn( - `Please run 'nx run @nx/react:component-story ${schema.project}' instead.` - ); - return reactComponentStoryGenerator(host, schema); -} - -export default componentStoryGenerator; diff --git a/packages/react-native/src/generators/component-story/schema.d.ts b/packages/react-native/src/generators/component-story/schema.d.ts deleted file mode 100644 index 0db6571bab401a..00000000000000 --- a/packages/react-native/src/generators/component-story/schema.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface CreateComponentStoriesFileSchema { - project: string; - componentPath: string; - interactionTests?: boolean; - skipFormat?: boolean; -} diff --git a/packages/react-native/src/generators/component-story/schema.json b/packages/react-native/src/generators/component-story/schema.json deleted file mode 100644 index 0cfbfaeb220074..00000000000000 --- a/packages/react-native/src/generators/component-story/schema.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeComponentStory", - "title": "React native component story", - "description": "Generate storybook story for a react-native component.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "The project where to add the components.", - "examples": ["shared-ui-component"], - "$default": { - "$source": "projectName", - "index": 0 - }, - "x-prompt": "What's name of the project where the component lives?", - "x-priority": "important" - }, - "componentPath": { - "type": "string", - "description": "Relative path to the component file from the library root.", - "examples": ["lib/components"], - "x-prompt": "What's path of the component relative to the project's lib root?", - "x-priority": "important" - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "default": true, - "x-priority": "important" - } - }, - "required": ["project", "componentPath"] -} diff --git a/packages/react-native/src/generators/stories/schema.d.ts b/packages/react-native/src/generators/stories/schema.d.ts deleted file mode 100644 index b74b85eb2dd7ed..00000000000000 --- a/packages/react-native/src/generators/stories/schema.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface StorybookStoriesSchema { - project: string; - interactionTests?: boolean; - js?: boolean; - ignorePaths?: string[]; - skipFormat?: boolean; -} diff --git a/packages/react-native/src/generators/stories/schema.json b/packages/react-native/src/generators/stories/schema.json deleted file mode 100644 index a45e1feb270c6e..00000000000000 --- a/packages/react-native/src/generators/stories/schema.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeStorybookStories", - "title": "Generate React Native Storybook stories", - "description": "Generate stories/specs for all components declared in a React Native project.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "Project for which to generate stories.", - "$default": { - "$source": "projectName", - "index": 0 - }, - "x-prompt": "For which project do you want to generate stories?", - "x-priority": "important" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "x-prompt": "Do you want to set up Storybook interaction tests?", - "x-priority": "important", - "default": true - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript files rather than TypeScript files.", - "default": false - }, - "ignorePaths": { - "type": "array", - "description": "Paths to ignore when looking for components.", - "items": { - "type": "string", - "description": "Path to ignore." - }, - "default": [ - "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx" - ], - "examples": [ - "apps/my-app/src/not-stories/**", - "**/**/src/**/not-stories/**", - "libs/my-lib/**/*.something.ts", - "**/**/src/**/*.other.*", - "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts" - ] - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - } - }, - "required": ["project"] -} diff --git a/packages/react-native/src/generators/stories/stories.ts b/packages/react-native/src/generators/stories/stories.ts deleted file mode 100644 index f22bc922960ca4..00000000000000 --- a/packages/react-native/src/generators/stories/stories.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Tree } from '@nx/devkit'; -import { storiesGenerator as reactStoriesGenerator } from '@nx/react'; -import { StorybookStoriesSchema } from './schema'; - -/** - * @deprecated This would be a direct pass through to @nx/react:stories generator. - * TODO (@xiongemi): remove this generator for v19 - */ -export async function storiesGenerator( - host: Tree, - schema: StorybookStoriesSchema -) { - return reactStoriesGenerator(host, schema); -} - -export default storiesGenerator; diff --git a/packages/react-native/src/generators/storybook-configuration/configuration.ts b/packages/react-native/src/generators/storybook-configuration/configuration.ts deleted file mode 100644 index 85606724e7f227..00000000000000 --- a/packages/react-native/src/generators/storybook-configuration/configuration.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Tree, logger, readNxJson } from '@nx/devkit'; -import { storybookConfigurationGenerator as reactStorybookConfigurationGenerator } from '@nx/react'; -import { StorybookConfigureSchema } from './schema'; - -export function storybookConfigurationGenerator( - tree: Tree, - schema: StorybookConfigureSchema -) { - return storybookConfigurationGeneratorInternal(tree, { - addPlugin: false, - ...schema, - }); -} - -/** - * This would be a direct pass through to @nx/react:storybook-configuration generator. - * @TODO (@xiongemi): remove this generator for v19 - */ -export async function storybookConfigurationGeneratorInternal( - host: Tree, - schema: StorybookConfigureSchema -) { - logger.warn( - `Please run 'nx run @nx/react:storybook-configuration ${schema.project}' instead.` - ); - const nxJson = readNxJson(host); - const addPluginDefault = - process.env.NX_ADD_PLUGINS !== 'false' && - nxJson.useInferencePlugins !== false; - schema.addPlugin ??= addPluginDefault; - - return reactStorybookConfigurationGenerator(host, schema); -} - -export default storybookConfigurationGenerator; diff --git a/packages/react-native/src/generators/storybook-configuration/schema.d.ts b/packages/react-native/src/generators/storybook-configuration/schema.d.ts deleted file mode 100644 index 5095c16b5a9cc4..00000000000000 --- a/packages/react-native/src/generators/storybook-configuration/schema.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Linter, LinterType } from '@nx/eslint'; - -export interface StorybookConfigureSchema { - project: string; - interactionTests?: boolean; - generateStories?: boolean; - js?: boolean; - tsConfiguration?: boolean; - linter?: Linter | LinterType; - ignorePaths?: string[]; - configureStaticServe?: boolean; - addPlugin?: boolean; -} diff --git a/packages/react-native/src/generators/storybook-configuration/schema.json b/packages/react-native/src/generators/storybook-configuration/schema.json deleted file mode 100644 index 07e5de252b53a6..00000000000000 --- a/packages/react-native/src/generators/storybook-configuration/schema.json +++ /dev/null @@ -1,80 +0,0 @@ -{ - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "NxReactNativeStorybookConfigure", - "title": "React native Storybook configuration", - "description": "Set up Storybook for a React-Native app or library.", - "type": "object", - "properties": { - "project": { - "type": "string", - "aliases": ["name", "projectName"], - "description": "Project for which to generate Storybook configuration.", - "$default": { - "$source": "argv", - "index": 0 - }, - "x-prompt": "For which project do you want to generate Storybook configuration?", - "x-dropdown": "projects", - "x-priority": "important" - }, - "interactionTests": { - "type": "boolean", - "description": "Set up Storybook interaction tests.", - "x-prompt": "Do you want to set up Storybook interaction tests?", - "x-priority": "important", - "alias": ["configureTestRunner"], - "default": true - }, - "generateStories": { - "type": "boolean", - "description": "Automatically generate `*.stories.ts` files for components declared in this project?", - "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?", - "default": true, - "x-priority": "important" - }, - "configureStaticServe": { - "type": "boolean", - "description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.", - "x-prompt": "Configure a static file server for the storybook instance?", - "default": true, - "x-priority": "important" - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript story files rather than TypeScript story files.", - "default": false - }, - "tsConfiguration": { - "type": "boolean", - "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.", - "default": true - }, - "linter": { - "description": "The tool to use for running lint checks.", - "type": "string", - "enum": ["eslint"], - "default": "eslint" - }, - "ignorePaths": { - "type": "array", - "description": "Paths to ignore when looking for components.", - "items": { - "type": "string", - "description": "Path to ignore." - }, - "default": [ - "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx" - ], - "examples": [ - "apps/my-app/src/not-stories/**", - "**/**/src/**/not-stories/**", - "libs/my-lib/**/*.something.ts", - "**/**/src/**/*.other.*", - "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts" - ] - } - }, - "required": ["project"], - "examplesFile": "../../../docs/storybook-configuration-examples.md" -} diff --git a/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap b/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap index aa03506592e3c5..26186dfe86aca6 100644 --- a/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap +++ b/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap @@ -3,8 +3,7 @@ exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: PureComponent class & then default export new JSX transform should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -25,9 +24,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -36,8 +34,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: PureComponent class & then default export should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -58,9 +55,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -69,8 +65,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: arrow function should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -91,9 +86,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -102,8 +96,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: arrow function without {..} should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -124,9 +117,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -135,8 +127,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: component class & then default export new JSX transform should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -157,9 +148,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -168,8 +158,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: component class & then default export should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -190,9 +179,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -201,8 +189,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: default export function should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -223,9 +210,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -234,8 +220,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: direct export of component class new JSX transform should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -256,9 +241,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -267,8 +251,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: direct export of component class should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -289,9 +272,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -300,8 +282,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: function and then export should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -322,9 +303,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -333,8 +313,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default PureComponent class & then default export new JSX transform should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -355,9 +334,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -366,8 +344,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default PureComponent class & then default export should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -388,9 +365,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -399,8 +375,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default arrow function should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -421,9 +396,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -432,8 +406,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default arrow function without {..} should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -454,9 +427,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -465,8 +437,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default component class should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -487,9 +458,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -498,8 +468,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default direct export of component class new JSX transform should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -520,9 +489,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -531,8 +499,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default direct export of component class should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -553,9 +520,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -564,8 +530,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default simple export function should properly setup the controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -586,9 +551,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -597,8 +561,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { One } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: One, @@ -613,9 +576,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to One!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to One!/gi)).toBeTruthy(); }, }; " @@ -624,8 +586,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 2`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Two } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Two, @@ -640,9 +601,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Two!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Two!/gi)).toBeTruthy(); }, }; " @@ -651,8 +611,7 @@ export const Heading: Story = { exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 3`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Three } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Three, @@ -671,9 +630,8 @@ export const Heading: Story = { args: { name: '', }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Three!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Three!/gi)).toBeTruthy(); }, }; " @@ -682,8 +640,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props and actions should setup controls based on the component props 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -709,9 +666,8 @@ export const Heading: Story = { displayAge: false, style: '', }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -720,8 +676,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props should setup controls based on the component destructured props defined in an inline literal type 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -742,9 +697,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -753,8 +707,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props should setup controls based on the component destructured props without type 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -775,9 +728,8 @@ export const Heading: Story = { name: '', displayAge: '', }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -786,8 +738,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props should setup controls based on the component props defined in a literal type 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -808,9 +759,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -819,8 +769,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props should setup controls based on the component props defined in an inline literal type 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -841,9 +790,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -852,8 +800,7 @@ export const Heading: Story = { exports[`react:component-story default setup component with props should setup controls based on the component props defined in an interface 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -874,9 +821,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -885,8 +831,7 @@ export const Heading: Story = { exports[`react:component-story default setup component without any props defined should create a story without controls 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -901,9 +846,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -912,8 +856,7 @@ export const Heading: Story = { exports[`react:component-story default setup default component setup should properly set up the story 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { TestUiLib } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestUiLib, @@ -928,9 +871,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to TestUiLib!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to TestUiLib!/gi)).toBeTruthy(); }, }; " @@ -938,8 +880,7 @@ export const Heading: Story = { exports[`react:component-story default setup when using plain JS components should properly set up the story 1`] = ` "import componentName from './test-ui-libplain'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; export default { component: Test, @@ -951,9 +892,8 @@ export const Primary = { }; export const Heading: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " diff --git a/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__ b/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__ index 6fc760353b05c6..336c2b07afe3d0 100644 --- a/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__ +++ b/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__ @@ -1,7 +1,6 @@ import componentName from './<%= componentImportFileName %>'; <%_ if ( interactionTests ) { _%> -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; <%_ } _%> export default { @@ -21,9 +20,8 @@ export const Primary = { <%_ if ( interactionTests ) { _%> export const Heading: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy(); }, }; -<%_ } _%> \ No newline at end of file +<%_ } _%> diff --git a/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__ b/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__ index 6a040ba9d2e006..eb22de9d871b8e 100644 --- a/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__ +++ b/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__ @@ -1,8 +1,7 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from 'storybook/internal/types'; import { <%= componentName %> } from './<%= componentImportFileName %>'; <%_ if ( interactionTests ) { _%> -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; <%_ } _%> const meta: Meta> = { @@ -27,9 +26,8 @@ export const Heading: Story = { args: {<% for (let prop of props) { %> <%= prop.name %>: <%- prop.defaultValue %>,<% } %> }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy(); }, }; <% } %> diff --git a/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap b/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap index 06ba42f218602f..0cd53302f41fcc 100644 --- a/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap +++ b/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap @@ -3,8 +3,7 @@ exports[`react:stories for applications should create the stories with interaction tests 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { NxWelcome } from './nx-welcome'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: NxWelcome, @@ -23,9 +22,8 @@ export const Heading: Story = { args: { title: '', }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to NxWelcome!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to NxWelcome!/gi)).toBeTruthy(); }, }; " @@ -34,8 +32,7 @@ export const Heading: Story = { exports[`react:stories for applications should create the stories with interaction tests 2`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './another-cmp'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -56,9 +53,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " @@ -104,6 +100,6 @@ export const Primary = { `; exports[`react:stories for applications should not update existing stories 1`] = ` -"import { ComponentStory, ComponentMeta } from '@storybook/react'; +"import { ComponentStory, ComponentMeta } from '@storybook/react-webpack5'; " `; diff --git a/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap b/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap index dac210a67a66f2..ea60221afd1fe2 100644 --- a/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap +++ b/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap @@ -3,8 +3,7 @@ exports[`react:stories for libraries should create the stories with interaction tests 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { TestUiLib } from './test-ui-lib'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: TestUiLib, @@ -19,9 +18,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to TestUiLib!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to TestUiLib!/gi)).toBeTruthy(); }, }; " @@ -30,8 +28,7 @@ export const Heading: Story = { exports[`react:stories for libraries should create the stories with interaction tests 2`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { Test } from './another-cmp'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: Test, @@ -52,9 +49,8 @@ export const Heading: Story = { name: '', displayAge: false, }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " diff --git a/packages/react/src/generators/stories/stories.app.spec.ts b/packages/react/src/generators/stories/stories.app.spec.ts index 5a4bbd53dbbf36..47151406e1725b 100644 --- a/packages/react/src/generators/stories/stories.app.spec.ts +++ b/packages/react/src/generators/stories/stories.app.spec.ts @@ -90,7 +90,7 @@ describe('react:stories for applications', () => { it('should not update existing stories', async () => { appTree.write( 'test-ui-app/src/app/nx-welcome.stories.tsx', - `import { ComponentStory, ComponentMeta } from '@storybook/react'` + `import { ComponentStory, ComponentMeta } from '@storybook/react-webpack5'` ); await storiesGenerator(appTree, { diff --git a/packages/react/src/generators/stories/stories.lib.spec.ts b/packages/react/src/generators/stories/stories.lib.spec.ts index 1586e151561c12..b0eb0f5ec1328f 100644 --- a/packages/react/src/generators/stories/stories.lib.spec.ts +++ b/packages/react/src/generators/stories/stories.lib.spec.ts @@ -52,13 +52,6 @@ describe('react:stories for libraries', () => { ).toMatchSnapshot(); const packageJson = JSON.parse(appTree.read('package.json', 'utf-8')); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should create the stories without interaction tests', async () => { diff --git a/packages/react/src/generators/stories/stories.nextjs.spec.ts b/packages/react/src/generators/stories/stories.nextjs.spec.ts index 7bd56fb507d4d4..9c29f44f823d62 100644 --- a/packages/react/src/generators/stories/stories.nextjs.spec.ts +++ b/packages/react/src/generators/stories/stories.nextjs.spec.ts @@ -42,13 +42,6 @@ describe('nextjs:stories for applications', () => { ).toMatchSnapshot(); const packageJson = JSON.parse(tree.read('package.json', 'utf-8')); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should create the stories without interaction tests', async () => { diff --git a/packages/react/src/generators/stories/stories.ts b/packages/react/src/generators/stories/stories.ts index 4666e7042acce5..225491a052cbfb 100644 --- a/packages/react/src/generators/stories/stories.ts +++ b/packages/react/src/generators/stories/stories.ts @@ -158,21 +158,9 @@ export async function storiesGenerator( schema.ignorePaths ); - const tasks: GeneratorCallback[] = []; - - if (schema.interactionTests) { - const { interactionTestsDependencies, addInteractionsInAddons } = - ensurePackage('@nx/storybook', nxVersion); - tasks.push( - addDependenciesToPackageJson(host, {}, interactionTestsDependencies()) - ); - addInteractionsInAddons(host, projectConfiguration); - } - if (!schema.skipFormat) { await formatFiles(host); } - return runTasksInSerial(...tasks); } async function isNextJsProject(tree: Tree, config: ProjectConfiguration) { diff --git a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap index baa4f5a82200d2..13ec3f52ef0d7e 100644 --- a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap @@ -9,7 +9,7 @@ import react from '@vitejs/plugin-react'; const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: {}, @@ -32,8 +32,7 @@ export default config; exports[`react:storybook-configuration should generate stories for components 1`] = ` "import type { Meta, StoryObj } from '@storybook/react'; import { MyComponent } from './my-component'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; const meta: Meta = { component: MyComponent, @@ -48,9 +47,8 @@ export const Primary = { export const Heading: Story = { args: {}, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to MyComponent!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to MyComponent!/gi)).toBeTruthy(); }, }; " @@ -58,8 +56,7 @@ export const Heading: Story = { exports[`react:storybook-configuration should generate stories for components written in plain JS 1`] = ` "import componentName from './test-ui-libplain'; -import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from 'storybook/jest'; export default { component: Test, @@ -71,9 +68,8 @@ export const Primary = { }; export const Heading: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); + play: async ({ canvas }) => { + await expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy(); }, }; " diff --git a/packages/react/src/generators/storybook-configuration/configuration.spec.ts b/packages/react/src/generators/storybook-configuration/configuration.spec.ts index e0de26d3e96679..566b0c596064f1 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.spec.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.spec.ts @@ -40,13 +40,6 @@ describe('react:storybook-configuration', () => { const packageJson = JSON.parse(appTree.read('package.json', 'utf-8')); expect(packageJson.devDependencies['@storybook/react-vite']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should generate stories for components', async () => { diff --git a/packages/remix/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap b/packages/remix/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap index 6ffe05a24c9e86..2f0ff62f81c9fa 100644 --- a/packages/remix/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap +++ b/packages/remix/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap @@ -24,7 +24,7 @@ exports[`Storybook Configuration it should create a storybook configuration and const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -67,7 +67,7 @@ exports[`Storybook Configuration it should create a storybook configuration and const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -121,7 +121,7 @@ exports[`Storybook Configuration it should create a storybook configuration and const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { diff --git a/packages/storybook/.eslintrc.json b/packages/storybook/.eslintrc.json index 173eb4ad9766d3..eb3ff56fdb1957 100644 --- a/packages/storybook/.eslintrc.json +++ b/packages/storybook/.eslintrc.json @@ -39,13 +39,7 @@ "error", { "buildTargets": ["build-base"], - "ignoredDependencies": [ - "nx", - "typescript", - "@nx/web", // Just types used - "@storybook/core-server", - "@storybook/types" - ] + "ignoredDependencies": ["nx", "typescript", "@nx/web"] } ] } diff --git a/packages/storybook/docs/migrate-7-generator-examples.md b/packages/storybook/docs/migrate-7-generator-examples.md deleted file mode 100644 index 5ce7aa540eb9a3..00000000000000 --- a/packages/storybook/docs/migrate-7-generator-examples.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Storybook 7 Migration Generator Examples -description: This page contains examples for the @nx/storybook:migrate-7 generator. ---- - -{% callout type="info" title="Setting up Storybook 7 in a new workspace" %} -For setting up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured already, please refer to our [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup). -{% /callout %} - -Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). - -You can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 7. To help you, Nx offers the `@nx/storybook:migrate-7` generator. This generator will help you migrate your existing Storybook setup to version 7. - -## How to use it - -Just call: - -```bash -npx nx g @nx/storybook:migrate-7 -``` - -{% callout type="warning" title="Commit your changes" %} -It is advised that you start with a clean git history before running this generator, since it is going to be making lots of changes to your workspace. -{% /callout %} - -You can run this generator using the above command, without passing any options. This will start the migration process for all your projects that have Storybook configured. The logs will explain what is happening in every step, and the logs are mixed Nx and Storybook CLI logs. During the process you will be prompted by the Storybook CLI to accept the automigration scripts. You can read more about that in the next section. - -When the generator finishes, you will see a summary of the changes that were made to your workspace, and it will also create a new file, called `storybook-migration-summary.md` at the root of your project, which will contain a list of all the changes that were made to your workspace. - -### Accept the automigration prompts - -The Storybook CLI (running through our generator) will prompt you to run some code generators and modifiers. - -You can say `yes` to these prompts, which are usually the following (there may be more or less, depending on your setup, -and depending on the latest versions of the Storybook CLI - this code is NOT managed by Nx, but by Storybook): - -- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file. -- `eslintPlugin`: installs the `eslint-plugin-storybook` -- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`) -- `autodocsTrue`: adds `autodocs: true` to your project's `.storybook/main.js|ts` file - -### Check the result - -Once the generator finishes, and the Storybook CLI automigration scripts have run, you should check the result. Examples of migrated `.storybook/main.js|ts` files would look like this: - -#### Full example for Angular projects - -Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project that has been migrated to Storybook version 7: - -```ts {% fileName="apps/my-angular-app/.storybook/main.js" %} -const config = { - stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {}, - }, -}; - -export default config; -``` - -#### Full example for React projects with Vite - -Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite that has been migrated to Storybook version 7: - -```ts {% fileName="apps/my-react-app/.storybook/main.js" %} -const config = { - stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/react-vite', - options: { - builder: { - viteConfigPath: 'apps/rv1/vite.config.ts', - }, - }, - }, -}; - -export default config; -``` - -### Make sure that all works by running Storybook - -You can now use Storybook 7! ๐ŸŽ‰ - -```bash -npx nx build-storybook PROJECT_NAME -``` - -and - -```bash -npx nx storybook PROJECT_NAME -``` - -## Run the generator by automatically accepting the Storybook CLI prompts - -You can run the generator with the `--autoAcceptAllPrompts` flag, which will automatically accept all the Storybook CLI prompts. This is useful if you want to run the generator in a CI environment, or if you want to run the generator in a script. Or if you are sure that you want to accept all the prompts! - -```bash -npx nx g @nx/storybook:migrate-7 --autoAcceptAllPrompts -``` - -The Storybook CLI may still ask you about some things, but mostly it should just run the whole migration suite uninterrupted. - -## Run the migration manually - -Nx gives you the ability to run all the migration steps one by one, manually, but still with the help of our migrator. To help you out with the commands that you need to run, Nx will print out the instructions if you run the generator with the `--onlyShowListOfCommands` flag, like this: - -```bash -npx nx g @nx/storybook:migrate-7 --onlyShowListOfCommands -``` - -Essentially, the way to run the migration manually is the following: - -1. Call the Nx generator to show you the list of commands: - `npx nx g @nx/storybook:migrate-7 --onlyShowListOfCommands` -2. Call the Storybook upgrade script: - `npx storybook@latest upgrade` -3. Call the Nx generator to prepare your files for migration. The steps are explained in [Step 02](#step-02) above. - `nx g @nx/storybook:migrate-7 --onlyPrepare` -4. Call the Storybook automigrate scripts for each one of the projects using Storybook (the `@nx/storybook:migrate-7` will give you the list of all the commands) -5. Call the Nx generator to finish the migration. The steps are explained in [Step 04](#step-04) above. - `nx g @nx/storybook:migrate-7 --afterMigration` - -## How the generator works under the hood - -Now let's see how the `@nx/storybook:migrate-7` generator works under the hood. It essentially does the following things: - -### Step 01 - -It calls the Storybook CLI upgrade script: - -```bash -npx storybook@latest upgrade -``` - -This script will upgrade your Storybook dependencies to the latest version, as explained in the [Storybook documentation](https://storybook.js.org/docs/7.0/react/configure/upgrading). - -### Step 02 - -It prepares all your project-level `.storybook/main.js|ts` files, so that -the Storybook automigration scripts can run successfully. This means that it makes the following adjustments to your files: - -- Remove the "`as StorybookConfig`" typecast from the `.storybook/main.ts` files, if you have any `.storybook/main.ts` files with typecast, since it is not needed any more -- Remove the "`path.resolve`" calls from the Next.js Storybook configuration in project-level `.storybook/main.js|ts` files, if it exists, since it breaks the Storybook automigration scripts - -### Step 03 - -It calls the Storybook CLI automigrate script, for each one of your projects that have Storybook configured. It does that by passing the `--config-dir` flag and the `--renderer` flag, for each one of your projects that has Storybook configured. An example command would look like this: - -```bash -npx storybook@latest automigrate --config-dir apps/my-react-app/.storybook --renderer @storybook/react -``` - -This script will make changes to your Storybook configuration files, and other changes to your repository, to make it work for Storybook 7, as explained in the [Storybook documentation](https://storybook.js.org/docs/7.0/react/configure/upgrading). - -### Step 04 - -After the Storybook CLI automigrate scripts have run, some additional adjustments are made to your workspace, to make sure that everything is working as expected. These adjustments are as follows: - -- Remove the "`vite-tsconfig-paths`" plugin from the Storybook configuration files for Vite projects, since it's no longer needed in v7 -- Add the "`viteConfigPath`" option to the Storybook builder options for Vite projects, since now Storybook needs the path to the Vite config file -- Change the import package for the `StorybookConfig` type to be framework specific (e.g. from `@storybook/common` to `@storybook/react-vite` for React projects using Vite) -- Add the "`lit`" package to your workspace, if you are using Web Components -- Remove the "`uiFramework`" option from your project's Storybook targets - -Our generator is based on the guide to migration using the Storybook CLI, sp please refer to the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937) for more information. - -## I am not on Nx 15.9.0 yet but I still want to migrate to Storybook 7 - -You can migrate to Storybook 7 by just using the [Storybook `upgrade` and `automigrate` scripts](https://storybook.js.org/docs/7.0/react/configure/upgrading), but you will have to manually point the `automigrate` script to each one of your projects using Storybook, explained in [Step 03](#step-03) above. - -First, you would have to run the `npx storybook@latest upgrade` to get the latest versions of all the `@storybook/*` packages. Then, for each one of your projects that use Storybook, you would have to run `npx storybook@latest automigrate --config-dir /.storybook --renderer @storybook/`. - -The `@nx/storybook:migrate-7` generator helps you by figuring out all the project paths and the renderers that need to be passed in the `automigrate` script, and also by performing a number of adjustments to your code to make sure the migration scripts run smoothly, so it is recommended to use the generator instead of running the scripts manually. - -## Report any issues and bugs - -Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/packages/storybook/docs/migrate-9-generator-examples.md b/packages/storybook/docs/migrate-9-generator-examples.md new file mode 100644 index 00000000000000..cfa709ab076ae5 --- /dev/null +++ b/packages/storybook/docs/migrate-9-generator-examples.md @@ -0,0 +1,122 @@ +--- +title: Storybook 9 Migration Generator Examples +description: This page contains examples for the @nx/storybook:migrate-9 generator. +--- + +Storybook 9 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 9.0.0 release article](https://storybook.js.org/blog/storybook-9). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 9 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800) and the [Storybook 9.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide). + +You can now migrate your existing Nx workspace with Storybook configuration to use Storybook version 8. To help you, Nx offers the `@nx/storybook:migrate-9` generator. This generator will help you migrate your existing Storybook setup to version 8. + +## How to use it + +Just call: + +```bash +npx nx g @nx/storybook:migrate-9 +``` + +{% callout type="warning" title="Commit your changes" %} +It is advised that you start with a clean git history before running this generator, since it is going to be making lots of changes to your workspace. +{% /callout %} + +You can run this generator using the above command, without passing any options. This will start the migration process for all your projects that have Storybook configured. The logs will explain what is happening in every step, and the logs are mixed Nx and Storybook CLI logs. During the process you will be prompted by the Storybook CLI to accept the automigration scripts. You can read more about that in the next section. + +When the generator finishes, you will see a summary of the changes that were made to your workspace, and it will also create a new file, called `storybook-migration-summary.md` at the root of your project, which will contain a list of all the changes that were made to your workspace. + +### Accept the automigration prompts + +The Storybook CLI (running through our generator) will prompt you to run some code generators and modifiers. + +You can say `yes` to these prompts, which are usually the following (there may be more or less, depending on your setup, +and depending on the latest versions of the Storybook CLI - this code is NOT managed by Nx, but by Storybook): + +- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file. +- `eslintPlugin`: installs the `eslint-plugin-storybook` +- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`) +- `autodocsTrue`: adds `autodocs: true` to your project's `.storybook/main.js|ts` file + +### Check the result + +Once the generator finishes, and the Storybook CLI automigration scripts have run, you should check the result. Examples of migrated `.storybook/main.js|ts` files would look like this: + +#### Full example for Angular projects + +Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project that has been migrated to Storybook version 8: + +```ts {% fileName="apps/my-angular-app/.storybook/main.js" %} +const config = { + stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-essentials'], + framework: { + name: '@storybook/angular', + options: {}, + }, +}; + +export default config; +``` + +#### Full example for React projects with Vite + +Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite that has been migrated to Storybook version 8: + +```ts {% fileName="apps/my-react-app/.storybook/main.js" %} +const config = { + stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-essentials'], + framework: { + name: '@storybook/react-vite', + options: { + builder: { + viteConfigPath: 'apps/rv1/vite.config.ts', + }, + }, + }, +}; + +export default config; +``` + +### Make sure that all works by running Storybook + +You can now use Storybook 9! ๐ŸŽ‰ + +```bash +npx nx build-storybook PROJECT_NAME +``` + +and + +```bash +npx nx storybook PROJECT_NAME +``` + +## Run the generator by automatically accepting the Storybook CLI prompts + +You can run the generator with the `--autoAcceptAllPrompts` flag, which will automatically accept all the Storybook CLI prompts. This is useful if you want to run the generator in a CI environment, or if you want to run the generator in a script. Or if you are sure that you want to accept all the prompts! + +```bash +npx nx g @nx/storybook:migrate-9 --autoAcceptAllPrompts +``` + +The Storybook CLI may still ask you about some things, but mostly it should just run the whole migration suite uninterrupted. + +## Run the migration manually + +Nx gives you the ability to run all the migration steps one by one, manually, but still with the help of our migrator. To help you out with the commands that you need to run, Nx will print out the instructions if you run the generator with the `--onlyShowListOfCommands` flag, like this: + +```bash +npx nx g @nx/storybook:migrate-9 --onlyShowListOfCommands +``` + +Essentially, the way to run the migration manually is the following: + +1. Call the Nx generator to show you the list of commands: + `npx nx g @nx/storybook:migrate-9 --onlyShowListOfCommands` +2. Call the Storybook upgrade script: + `npx storybook@latest upgrade` +3. Call the Storybook automigrate scripts for each one of the projects using Storybook (the `@nx/storybook:migrate-9` will give you the list of all the commands) + +## Report any issues and bugs + +Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose). diff --git a/packages/storybook/generators.json b/packages/storybook/generators.json index 1ce60c09584256..b28d6a431890e2 100644 --- a/packages/storybook/generators.json +++ b/packages/storybook/generators.json @@ -15,29 +15,22 @@ "description": "Add Storybook configuration to a UI library or an application.", "hidden": false }, - "cypress-project": { - "factory": "./src/generators/cypress-project/cypress-project", - "schema": "./src/generators/cypress-project/schema.json", - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "x-deprecated": "Deprecated: Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.", - "hidden": false - }, "convert-to-inferred": { "factory": "./src/generators/convert-to-inferred/convert-to-inferred", "schema": "./src/generators/convert-to-inferred/schema.json", "description": "Convert existing Storybook project(s) using `@nx/storybook:*` executors to use `@nx/storybook/plugin`. Defaults to migrating all projects. Pass '--project' to migrate only one target." }, - "migrate-7": { - "factory": "./src/generators/migrate-7/migrate-7", - "schema": "./src/generators/migrate-7/schema.json", - "description": "Migrate to Storybook version 7.", - "hidden": false - }, "migrate-8": { "factory": "./src/generators/migrate-8/migrate-8", "schema": "./src/generators/migrate-8/schema.json", "description": "Migrate to Storybook version 8.", "hidden": false + }, + "migrate-9": { + "factory": "./src/generators/migrate-9/migrate-9", + "schema": "./src/generators/migrate-9/schema.json", + "description": "Migrate to Storybook version 9.", + "hidden": false } } } diff --git a/packages/storybook/index.ts b/packages/storybook/index.ts index 5ddc34d2cd395f..0ab8806ab5c26a 100644 --- a/packages/storybook/index.ts +++ b/packages/storybook/index.ts @@ -1,7 +1,2 @@ export { configurationGenerator } from './src/generators/configuration/configuration'; -export { cypressProjectGenerator } from './src/generators/cypress-project/cypress-project'; export { storybookVersion } from './src/utils/versions'; -export { - interactionTestsDependencies, - addInteractionsInAddons, -} from './src/generators/configuration/lib/interaction-testing.utils'; diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json index 2263c4e0e20a8a..4f74402e81ff3d 100644 --- a/packages/storybook/migrations.json +++ b/packages/storybook/migrations.json @@ -5,6 +5,12 @@ "version": "19.6.0-beta.0", "description": "Update workspace to use Storybook v8", "implementation": "./src/migrations/update-19-6-0/update-sb-8" + }, + "update-21-1-0-migrate-storybook-v9": { + "cli": "nx", + "version": "21.1.0-beta.0", + "description": "Update workspace to use Storybook v9", + "implementation": "./src/migrations/update-21-1-0/update-sb-9" } }, "packageJsonUpdates": { @@ -738,6 +744,107 @@ "alwaysAddToPackageJson": false } } + }, + "21.1.0": { + "version": "21.1.0-beta.0", + "packages": { + "@storybook/angular": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "storybook": { + "version": "^9.0.0", + "alwaysAddToPackageJson": true + }, + "@storybook/addon-onboarding": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/addon-themes": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/builder-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/core-webpack": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/html": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/html-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/nextjs": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/preact": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/preact-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/react-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/server": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/server-webpack5": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/svelte": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/svelte-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/sveltekit": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/vue-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/vue3": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/vue3-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/web-components": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + }, + "@storybook/web-components-vite": { + "version": "^9.0.0", + "alwaysAddToPackageJson": false + } + } } } } diff --git a/packages/storybook/package.json b/packages/storybook/package.json index e2049d915c3b3e..c9311e43d5b878 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -41,6 +41,9 @@ "@nx/js": "file:../js", "@nx/eslint": "file:../eslint" }, + "peerDependencies": { + "storybook": ">=7.0.0 <10.0.0" + }, "publishConfig": { "access": "public" } 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 0622b32d57c67f..a9b914c2a86319 100644 --- a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts +++ b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts @@ -1,10 +1,12 @@ import { ExecutorContext, logger } from '@nx/devkit'; -import { CLIOptions } from '@storybook/types'; +import type { CLIOptions } from 'storybook/internal/types'; import { pleaseUpgrade, storybookConfigExistsCheck, storybookMajorVersion, + getInstalledStorybookVersion, } from '../../utils/utilities'; +import { gte } from 'semver'; export default async function buildStorybookExecutor( options: CLIOptions, @@ -33,7 +35,16 @@ async function runInstance(options: CLIOptions): Promise { - const storybookCore = await import('@storybook/core-server'); + const installedStorybookVersion = getInstalledStorybookVersion(); + const hasCoreServerInStorybookPackage = gte( + installedStorybookVersion, + '8.2.0' + ); + const storybookCore = await (hasCoreServerInStorybookPackage + ? import('storybook/internal/core-server') + : // This is needed for backwards compatibility - but we do not have the package installed in the nx repo + // @ts-ignore + import('@storybook/core-server')); const env = process.env.NODE_ENV ?? 'production'; process.env.NODE_ENV = env; return storybookCore.build({ diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts index 5dd3965f4b2486..b5f97e4cb69e84 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.ts @@ -1,10 +1,12 @@ import { ExecutorContext, logger } from '@nx/devkit'; import { + getInstalledStorybookVersion, pleaseUpgrade, storybookConfigExistsCheck, storybookMajorVersion, } from '../../utils/utilities'; -import { CLIOptions } from '@storybook/types'; +import type { CLIOptions } from 'storybook/internal/types'; +import { gte } from 'semver'; export default async function* storybookExecutor( options: CLIOptions, @@ -42,7 +44,16 @@ async function runInstance(options: CLIOptions): Promise { - const storybookCore = await import('@storybook/core-server'); + const installedStorybookVersion = getInstalledStorybookVersion(); + const hasCoreServerInStorybookPackage = gte( + installedStorybookVersion, + '8.2.0' + ); + const storybookCore = await (hasCoreServerInStorybookPackage + ? import('storybook/internal/core-server') + : // This is needed for backwards compatibility - but we do not have the package installed in the nx repo + // @ts-ignore + import('@storybook/core-server')); const env = process.env.NODE_ENV ?? 'development'; process.env.NODE_ENV = env; return storybookCore.build({ 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 c0bb4e028f2962..350a829dbd2562 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 @@ -9,7 +9,7 @@ import react from '@vitejs/plugin-react'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: {}, @@ -71,11 +71,7 @@ exports[`@nx/storybook:configuration for workspaces with Root project basic func const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@nx/react/plugins/storybook', - ], + addons: [, '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index a8127944fd3ca3..95c2b0d979e408 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`@nx/storybook:configuration for Storybook v7 basic functionalities should generate TS config for project by default 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 basic functionalities should generate TS config for project by default 1`] = ` "import type { StorybookConfig } from '@storybook/angular'; const config: StorybookConfig = { stories: ['../**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/angular', options: {}, @@ -20,12 +20,12 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files by default 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 basic functionalities should generate TypeScript Configuration files by default 1`] = ` "import type { StorybookConfig } from '@storybook/angular'; const config: StorybookConfig = { stories: ['../**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/angular', options: {}, @@ -40,7 +40,7 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 basic functionalities should have the proper typings 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 basic functionalities should have the proper typings 1`] = ` "{ "extends": "./tsconfig.json", "compilerOptions": { @@ -75,10 +75,10 @@ exports[`@nx/storybook:configuration for Storybook v7 basic functionalities shou " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = ` "const config = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -97,14 +97,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 2`] = `null`; -exports[`@nx/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`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -123,18 +123,14 @@ export default config; " `; -exports[`@nx/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`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@nx/react/plugins/storybook', - ], + addons: [, '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, @@ -149,14 +145,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/nextjs'; const config: StorybookConfig = { stories: ['../**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/nextjs', options: {}, @@ -171,18 +167,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@nx/react/plugins/storybook', - ], + addons: [, '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, @@ -197,12 +189,12 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reapp/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reapp/.storybook/" 1`] = ` "const config = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -221,18 +213,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reapp/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reapp/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@nx/react/plugins/storybook', - ], + addons: [, '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, @@ -247,14 +235,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/web-components-vite'; const config: StorybookConfig = { stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/web-components-vite', options: { @@ -273,40 +261,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 2`] = `null`; - -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 1`] = ` -"import type { StorybookConfig } from '@storybook/web-components-webpack5'; - -const config: StorybookConfig = { - stories: ['../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], - framework: { - name: '@storybook/web-components-webpack5', - options: {}, - }, -}; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 2`] = `null`; -export default 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 -// and https://nx.dev/recipes/storybook/custom-builder-configs -" -`; - -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 2`] = `null`; - -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@nx/react/plugins/storybook', - ], + addons: [, '@nx/react/plugins/storybook'], framework: { name: '@storybook/react-webpack5', options: {}, @@ -321,14 +283,14 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 2`] = `null`; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 1`] = ` +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 1`] = ` "import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/react-vite', options: { @@ -347,4 +309,4 @@ export default config; " `; -exports[`@nx/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 2`] = `null`; +exports[`@nx/storybook:configuration for Storybook v9 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 2`] = `null`; diff --git a/packages/storybook/src/generators/configuration/configuration-nested.spec.ts b/packages/storybook/src/generators/configuration/configuration-nested.spec.ts index 37037aba710454..5d531ade43ac11 100644 --- a/packages/storybook/src/generators/configuration/configuration-nested.spec.ts +++ b/packages/storybook/src/generators/configuration/configuration-nested.spec.ts @@ -71,14 +71,13 @@ describe('@nx/storybook:configuration for workspaces with Root project', () => { }); writeJson(tree, 'package.json', { devDependencies: { - '@storybook/addon-essentials': storybookVersion, - '@storybook/react': storybookVersion, - '@storybook/core-server': storybookVersion, + '@storybook/react-webpack5': storybookVersion, + storybook: storybookVersion, }, }); jest.resetModules(); - jest.doMock('@storybook/core-server/package.json', () => ({ + jest.doMock('storybook/package.json', () => ({ version: storybookVersion, })); }); diff --git a/packages/storybook/src/generators/configuration/configuration.spec.ts b/packages/storybook/src/generators/configuration/configuration.spec.ts index 332855f2416469..ac15bf668cf620 100644 --- a/packages/storybook/src/generators/configuration/configuration.spec.ts +++ b/packages/storybook/src/generators/configuration/configuration.spec.ts @@ -24,7 +24,7 @@ jest.mock('nx/src/project-graph/project-graph', () => ({ .mockImplementation(async () => ({ nodes: {}, dependencies: {} })), })); -describe('@nx/storybook:configuration for Storybook v7', () => { +describe('@nx/storybook:configuration for Storybook v9', () => { describe('dependencies', () => { let tree: Tree; @@ -38,7 +38,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { }); jest.resetModules(); - jest.doMock('@storybook/core-server/package.json', () => ({ + jest.doMock('storybook/package.json', () => ({ version: storybookVersion, })); }); @@ -65,10 +65,10 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); expect( packageJson.devDependencies['@storybook/core-server'] - ).toBeDefined(); + ).not.toBeDefined(); // angular specific expect(packageJson.devDependencies['@storybook/angular']).toBeDefined(); expect(packageJson.devDependencies['@angular/forms']).toBeDefined(); @@ -109,7 +109,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -150,7 +150,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -183,7 +183,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { project: 'test-ui-lib', - uiFramework: '@storybook/web-components-webpack5', + uiFramework: '@storybook/web-components-vite', addPlugin: true, }); @@ -193,7 +193,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -211,7 +211,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { ).not.toBeDefined(); // generic web-components specific expect( - packageJson.devDependencies['@storybook/web-components-webpack5'] + packageJson.devDependencies['@storybook/web-components-vite'] ).toBeDefined(); // generic vue specific expect( @@ -234,7 +234,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { project: 'test-ui-lib', - uiFramework: '@storybook/vue-webpack5', + uiFramework: '@storybook/vue-vite', addPlugin: true, }); @@ -244,7 +244,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -269,9 +269,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { packageJson.devDependencies['@storybook/svelte-webpack5'] ).not.toBeDefined(); // generic vue specific - expect( - packageJson.devDependencies['@storybook/vue-webpack5'] - ).toBeDefined(); + expect(packageJson.devDependencies['@storybook/vue-vite']).toBeDefined(); }); it('should add vue3 related dependencies when using vue3 as uiFramework', async () => { @@ -285,7 +283,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { project: 'test-ui-lib', - uiFramework: '@storybook/vue3-webpack5', + uiFramework: '@storybook/vue3-vite', addPlugin: true, }); @@ -295,7 +293,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -324,9 +322,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { packageJson.devDependencies['@storybook/svelte-webpack5'] ).not.toBeDefined(); // generic vue3 specific - expect( - packageJson.devDependencies['@storybook/vue3-webpack5'] - ).toBeDefined(); + expect(packageJson.devDependencies['@storybook/vue3-vite']).toBeDefined(); }); it('should add svelte related dependencies when using svelte as uiFramework', async () => { @@ -340,7 +336,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { project: 'test-ui-lib', - uiFramework: '@storybook/svelte-webpack5', + uiFramework: '@storybook/svelte-vite', addPlugin: true, }); @@ -350,7 +346,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { expect(packageJson.devDependencies[existing]).toBeDefined(); expect( packageJson.devDependencies['@storybook/addon-essentials'] - ).toBeDefined(); + ).not.toBeDefined(); // react specific expect( packageJson.devDependencies['@storybook/react-webpack5'] @@ -380,7 +376,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { ).not.toBeDefined(); // generic svelte specific expect( - packageJson.devDependencies['@storybook/svelte-webpack5'] + packageJson.devDependencies['@storybook/svelte-vite'] ).toBeDefined(); }); }); @@ -403,14 +399,13 @@ describe('@nx/storybook:configuration for Storybook v7', () => { }); writeJson(tree, 'package.json', { devDependencies: { - '@storybook/addon-essentials': storybookVersion, - '@storybook/react': storybookVersion, - '@storybook/core-server': storybookVersion, + '@storybook/react-webpack5': storybookVersion, + storybook: storybookVersion, }, }); jest.resetModules(); - jest.doMock('@storybook/core-server/package.json', () => ({ + jest.doMock('storybook/package.json', () => ({ version: storybookVersion, })); }); @@ -552,29 +547,9 @@ describe('@nx/storybook:configuration for Storybook v7', () => { addPlugin: true, }); - expect( - readJson(tree, 'package.json').devDependencies['@storybook/test-runner'] - ).toBeTruthy(); - expect( readJson(tree, 'package.json').devDependencies['core-js'] ).toBeTruthy(); - - expect( - readJson(tree, 'package.json').devDependencies[ - '@storybook/testing-library' - ] - ).toBeTruthy(); - - expect( - readJson(tree, 'package.json').devDependencies['@storybook/jest'] - ).toBeTruthy(); - - expect( - readJson(tree, 'package.json').devDependencies[ - '@storybook/addon-interactions' - ] - ).toBeTruthy(); }); }); @@ -591,7 +566,7 @@ describe('@nx/storybook:configuration for Storybook v7', () => { }); jest.resetModules(); - jest.doMock('@storybook/core-server/package.json', () => ({ + jest.doMock('storybook/package.json', () => ({ version: storybookVersion, })); }); @@ -764,12 +739,6 @@ describe('@nx/storybook:configuration for Storybook v7', () => { uiFramework: '@storybook/web-components-vite', addPlugin: true, }); - - await configurationGenerator(tree, { - project: 'ww1', - uiFramework: '@storybook/web-components-webpack5', - addPlugin: true, - }); }); test.each(testCases)( diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index ab7ee91a42dd96..52f4e66ca9704f 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -44,7 +44,6 @@ import { tsLibVersion, tsNodeVersion, } from '../../utils/versions'; -import { interactionTestsDependencies } from './lib/interaction-testing.utils'; import { ensureDependencies } from './lib/ensure-dependencies'; import { editRootTsConfig } from './lib/edit-root-tsconfig'; import { getProjectType } from '@nx/js/src/utils/typescript/ts-solution-setup'; @@ -61,11 +60,11 @@ export async function configurationGeneratorInternal( rawSchema: StorybookConfigureSchema ) { const storybookMajor = storybookMajorVersion(); - if (storybookMajor > 0 && storybookMajor === 6) { + if (storybookMajor > 0 && storybookMajor === 7) { throw new Error(pleaseUpgrade()); - } else if (storybookMajor === 7) { + } else if (storybookMajor === 8) { logger.warn( - `Support for Storybook 7 is deprecated. Please upgrade to Storybook 8. See https://nx.dev/nx-api/storybook/generators/migrate-8 for more details.` + `Support for Storybook 8 is deprecated. Please upgrade to Storybook 9. See https://nx.dev/nx-api/storybook/generators/migrate-9 for more details.` ); } @@ -204,13 +203,6 @@ export async function configurationGeneratorInternal( devDeps['tslib'] = tsLibVersion; } - if (schema.interactionTests) { - devDeps = { - ...devDeps, - ...interactionTestsDependencies(), - }; - } - if (schema.configureStaticServe) { devDeps['@nx/web'] = nxVersion; } diff --git a/packages/storybook/src/generators/configuration/lib/__snapshots__/interaction-testing.utils.spec.ts.snap b/packages/storybook/src/generators/configuration/lib/__snapshots__/interaction-testing.utils.spec.ts.snap deleted file mode 100644 index 15ce4a62e3b01d..00000000000000 --- a/packages/storybook/src/generators/configuration/lib/__snapshots__/interaction-testing.utils.spec.ts.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Helper functions for the Storybook 7 migration generator should add addon-interactions in main.ts if it does not exist 1`] = ` -"import type { StorybookConfig } from '@storybook/angular'; - - const config: StorybookConfig = { - stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-interactions', '@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {}, - }, - }; - - export default config;" -`; - -exports[`Helper functions for the Storybook 7 migration generator should do nothing if addon-interactions already exists in main.ts 1`] = ` -"import type { StorybookConfig } from '@storybook/angular'; - - const config: StorybookConfig = { - stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], - framework: { - name: '@storybook/angular', - options: {}, - }, - }; - - export default config;" -`; diff --git a/packages/storybook/src/generators/configuration/lib/ensure-dependencies.ts b/packages/storybook/src/generators/configuration/lib/ensure-dependencies.ts index 5c34016f62f4eb..e58ba3a128d9cc 100644 --- a/packages/storybook/src/generators/configuration/lib/ensure-dependencies.ts +++ b/packages/storybook/src/generators/configuration/lib/ensure-dependencies.ts @@ -25,26 +25,30 @@ export function ensureDependencies( tree: Tree, options: EnsureDependenciesOptions ) { - let storybook7VersionToInstall = storybookVersion; + let storybookVersionToInstall = storybookVersion; + const installedStorybookMajorVersion = storybookMajorVersion(); if ( - storybookMajorVersion() >= 7 && + installedStorybookMajorVersion >= 7 && getInstalledStorybookVersion() && gte(getInstalledStorybookVersion(), '7.0.0') ) { - storybook7VersionToInstall = getInstalledStorybookVersion(); + storybookVersionToInstall = getInstalledStorybookVersion(); } const dependencies: Record = {}; - const devDependencies: Record = { - '@storybook/core-server': storybook7VersionToInstall, - '@storybook/addon-essentials': storybook7VersionToInstall, - }; + const devDependencies: Record = + installedStorybookMajorVersion < 9 + ? { + '@storybook/core-server': storybookVersionToInstall, + '@storybook/addon-essentials': storybookVersionToInstall, + } + : {}; const packageJson = readJson(tree, 'package.json'); packageJson.dependencies ??= {}; packageJson.devDependencies ??= {}; - if (!gte(coerce(storybook7VersionToInstall), '8.0.0')) { + if (!gte(coerce(storybookVersionToInstall), '8.0.0')) { // Needed for Storybook 7 // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required if ( @@ -62,7 +66,7 @@ export function ensureDependencies( } if (options.uiFramework) { - devDependencies[options.uiFramework] = storybook7VersionToInstall; + devDependencies[options.uiFramework] = storybookVersionToInstall; const isPnpm = detectPackageManager(tree.root) === 'pnpm'; if (isPnpm) { // If it's pnpm, it needs the framework without the builder @@ -70,7 +74,7 @@ export function ensureDependencies( const matchResult = options.uiFramework?.match(/^@storybook\/(\w+)/); const uiFrameworkWithoutBuilder = matchResult ? matchResult[0] : null; if (uiFrameworkWithoutBuilder) { - devDependencies[uiFrameworkWithoutBuilder] = storybook7VersionToInstall; + devDependencies[uiFrameworkWithoutBuilder] = storybookVersionToInstall; } } @@ -79,7 +83,7 @@ export function ensureDependencies( !packageJson.dependencies['@storybook/vue3'] && !packageJson.devDependencies['@storybook/vue3'] ) { - devDependencies['@storybook/vue3'] = storybook7VersionToInstall; + devDependencies['@storybook/vue3'] = storybookVersionToInstall; } } @@ -92,10 +96,7 @@ export function ensureDependencies( } } - if ( - options.uiFramework === '@storybook/web-components-vite' || - options.uiFramework === '@storybook/web-components-webpack5' - ) { + if (options.uiFramework === '@storybook/web-components-vite') { devDependencies['lit'] = litVersion; } diff --git a/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.spec.ts b/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.spec.ts deleted file mode 100644 index ef4172e79f3c6b..00000000000000 --- a/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { ProjectConfiguration, Tree } from '@nx/devkit'; -import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; -import { addInteractionsInAddons } from './interaction-testing.utils'; -describe('Helper functions for the Storybook 7 migration generator', () => { - let tree: Tree; - - beforeEach(async () => { - tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); - }); - - it('should add addon-interactions in main.ts if it does not exist', () => { - tree.write( - `.storybook/main.ts`, - `import type { StorybookConfig } from '@storybook/angular'; - - const config: StorybookConfig = { - stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {}, - }, - }; - - export default config;` - ); - addInteractionsInAddons(tree, { - name: 'my-proj', - targets: { - storybook: { - executor: '@nx/storybook:storybook', - options: { - configDir: `.storybook`, - }, - }, - }, - } as unknown as ProjectConfiguration); - expect(tree.read(`.storybook/main.ts`, 'utf-8')).toMatchSnapshot(); - }); - - it('should do nothing if addon-interactions already exists in main.ts', () => { - tree.write( - `.storybook/main.ts`, - `import type { StorybookConfig } from '@storybook/angular'; - - const config: StorybookConfig = { - stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], - framework: { - name: '@storybook/angular', - options: {}, - }, - }; - - export default config;` - ); - addInteractionsInAddons(tree, { - name: 'my-proj', - targets: { - storybook: { - executor: '@nx/storybook:storybook', - options: { - configDir: `.storybook`, - }, - }, - }, - } as unknown as ProjectConfiguration); - expect(tree.read(`.storybook/main.ts`, 'utf-8')).toMatchSnapshot(); - }); -}); diff --git a/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.ts b/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.ts index f877b0db6ce9b8..a5fc03d744d5c6 100644 --- a/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.ts +++ b/packages/storybook/src/generators/configuration/lib/interaction-testing.utils.ts @@ -12,57 +12,6 @@ import { storybookVersion, } from '../../../utils/versions'; -export function interactionTestsDependencies(): { [key: string]: string } { - return { - '@storybook/test-runner': storybookTestRunnerVersion, - '@storybook/addon-interactions': storybookVersion, - '@storybook/testing-library': storybookTestingLibraryVersion, - '@storybook/jest': storybookJestVersion, - }; -} - -export function addInteractionsInAddons( - tree: Tree, - projectConfig: ProjectConfiguration -) { - const mainJsTsPath = getMainTsJsPath(tree, projectConfig); - if (!mainJsTsPath) return; - let mainJsTs = tree.read(mainJsTsPath, 'utf-8'); - if (!mainJsTs) return; - - // Find addons array - const addonsArray = tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="addons"]))` - )?.[0]; - - // if there's no addons array don't do anything - // they may be setting up storybook in another project - if (!addonsArray) return; - - // Check if addons array already has addon-interactions - const addonsArrayHasAddonInteractions = tsquery.query( - addonsArray, - `StringLiteral:has([text="@storybook/addon-interactions"])` - )?.[0]; - if (addonsArrayHasAddonInteractions) return; - - // get the array of the addons - const arrayLiteralExpression = tsquery.query( - addonsArray, - `ArrayLiteralExpression` - )?.[0]; - if (!arrayLiteralExpression) return; - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Insert, - index: arrayLiteralExpression.getStart() + 1, - text: `'@storybook/addon-interactions', `, - }, - ]); - tree.write(mainJsTsPath, mainJsTs); -} - function getMainTsJsPath( host: Tree, projectConfig: ProjectConfiguration diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ index 309b03caa88030..8f4e7b7f0fcb62 100644 --- a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ @@ -10,7 +10,7 @@ const config: StorybookConfig = { '../**/*.@(mdx|stories.@(js|jsx|ts|tsx))' <% } else { %> '../<%= projectDirectory %>/**/*.@(mdx|stories.@(js|jsx|ts|tsx))' <% } %>], - addons: ['@storybook/addon-essentials' <% if(interactionTests) { %>, '@storybook/addon-interactions' <% } %><% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %>], + addons: [<% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %>], framework: { name: '<%= uiFramework %>', options: { diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ index 0d48090125ecf7..a53127850a7949 100644 --- a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ @@ -9,7 +9,7 @@ const config = { '../**/*.@(mdx|stories.@(js|jsx|ts|tsx))' <% } else { %> '../<%= projectDirectory %>/**/*.@(mdx|stories.@(js|jsx|ts|tsx))' <% } %>], - addons: ['@storybook/addon-essentials' <% if(interactionTests) { %>, '@storybook/addon-interactions' <% } %><% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %>], + addons: [<% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %>], framework: { name: '<%= uiFramework %>', options: { diff --git a/packages/storybook/src/generators/configuration/schema.json b/packages/storybook/src/generators/configuration/schema.json index 096606169fa77d..17722eb033a363 100644 --- a/packages/storybook/src/generators/configuration/schema.json +++ b/packages/storybook/src/generators/configuration/schema.json @@ -58,20 +58,14 @@ "description": "Storybook UI Framework to use.", "enum": [ "@storybook/angular", - "@storybook/html-webpack5", "@storybook/nextjs", - "@storybook/preact-webpack5", "@storybook/react-webpack5", "@storybook/react-vite", "@storybook/server-webpack5", - "@storybook/svelte-webpack5", "@storybook/svelte-vite", "@storybook/sveltekit", - "@storybook/vue-webpack5", "@storybook/vue-vite", - "@storybook/vue3-webpack5", "@storybook/vue3-vite", - "@storybook/web-components-webpack5", "@storybook/web-components-vite" ], "aliases": ["storybook7UiFramework"], diff --git a/packages/storybook/src/generators/cypress-project/__snapshots__/cypress-project.spec.ts.snap b/packages/storybook/src/generators/cypress-project/__snapshots__/cypress-project.spec.ts.snap deleted file mode 100644 index a9cf97371ddba2..00000000000000 --- a/packages/storybook/src/generators/cypress-project/__snapshots__/cypress-project.spec.ts.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`@nx/storybook:cypress-project should generate a correct cypress.config.ts file when using inferred plugins 1`] = ` -"import { defineConfig } from 'cypress'; -import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress'; - -export default defineConfig({ - e2e: nxE2EStorybookPreset(__dirname, { - cypressDir: 'src', - webServerCommands: { - default: 'npx nx run test-ui-lib:storybook', - ci: 'npx nx run test-ui-lib:storybook:ci', - }, - ciWebServerCommand: 'npx nx run test-ui-lib:storybook:ci', - }), -}); -" -`; - -exports[`@nx/storybook:cypress-project should generate files 1`] = ` -"import { defineConfig } from 'cypress'; -import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress'; - -export default defineConfig({ - e2e: nxE2EStorybookPreset(__dirname), -}); -" -`; diff --git a/packages/storybook/src/generators/cypress-project/cypress-project.spec.ts b/packages/storybook/src/generators/cypress-project/cypress-project.spec.ts deleted file mode 100644 index 075a0e0219d4ea..00000000000000 --- a/packages/storybook/src/generators/cypress-project/cypress-project.spec.ts +++ /dev/null @@ -1,96 +0,0 @@ -jest.mock('nx/src/project-graph/plugins/in-process-loader', () => ({ - ...jest.requireActual('nx/src/project-graph/plugins/in-process-loader'), - loadNxPlugin: jest.fn().mockImplementation(() => { - return [Promise.resolve({}), () => {}]; - }), -})); -import { - readNxJson, - readProjectConfiguration, - Tree, - updateNxJson, -} from '@nx/devkit'; -import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; -import { libraryGenerator } from '@nx/js'; -import { cypressProjectGenerator } from './cypress-project'; - -describe('@nx/storybook:cypress-project', () => { - let tree: Tree; - - beforeEach(async () => { - tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); - await libraryGenerator(tree, { - name: 'test-ui-lib', - directory: 'apps/test-ui-lib', - }); - }); - afterEach(() => jest.clearAllMocks()); - - it('should generate files', async () => { - await cypressProjectGenerator(tree, { - name: 'test-ui-lib', - directory: 'apps/test-ui-lib-e2e', - linter: 'eslint', - }); - - expect(tree.exists('apps/test-ui-lib-e2e/cypress.config.ts')).toBeTruthy(); - const cypressConfig = tree.read( - 'apps/test-ui-lib-e2e/cypress.config.ts', - 'utf-8' - ); - expect(cypressConfig).toMatchSnapshot(); - }); - - it('should update `angular.json` file', async () => { - await cypressProjectGenerator(tree, { - name: 'test-ui-lib', - directory: 'apps/test-ui-lib-e2e', - linter: 'eslint', - }); - const project = readProjectConfiguration(tree, 'test-ui-lib-e2e'); - - expect(project.targets.e2e.options.devServerTarget).toEqual( - 'test-ui-lib:storybook' - ); - expect(project.targets.e2e.options.headless).toBeUndefined(); - expect(project.targets.e2e.options.watch).toBeUndefined(); - expect(project.targets.e2e.configurations).toEqual({ - ci: { devServerTarget: `test-ui-lib:storybook:ci` }, - }); - }); - - it('should generate in the correct folder', async () => { - await cypressProjectGenerator(tree, { - name: 'test-ui-lib', - directory: 'apps/one/two/test-ui-lib-e2e', - linter: 'eslint', - }); - expect(readProjectConfiguration(tree, 'test-ui-lib-e2e')).toBeDefined(); - expect( - tree.exists('apps/one/two/test-ui-lib-e2e/cypress.config.ts') - ).toBeTruthy(); - }); - - it('should generate a correct cypress.config.ts file when using inferred plugins', async () => { - // ARRANGE - const nxJson = readNxJson(tree); - nxJson.plugins ??= []; - nxJson.plugins.push('@nx/cypress/plugin'); - updateNxJson(tree, nxJson); - - // ACT - await cypressProjectGenerator(tree, { - name: 'test-ui-lib', - directory: 'apps/test-ui-lib-e2e', - linter: 'eslint', - }); - - // ASSERT - expect(tree.exists('apps/test-ui-lib-e2e/cypress.config.ts')).toBeTruthy(); - const cypressConfig = tree.read( - 'apps/test-ui-lib-e2e/cypress.config.ts', - 'utf-8' - ); - expect(cypressConfig).toMatchSnapshot(); - }); -}); diff --git a/packages/storybook/src/generators/cypress-project/cypress-project.ts b/packages/storybook/src/generators/cypress-project/cypress-project.ts deleted file mode 100644 index ee2af4b0cdaa57..00000000000000 --- a/packages/storybook/src/generators/cypress-project/cypress-project.ts +++ /dev/null @@ -1,212 +0,0 @@ -import { getE2eProjectName } from '@nx/cypress/src/utils/project-name'; -import { - addProjectConfiguration, - ensurePackage, - formatFiles, - generateFiles, - joinPathFragments, - logger, - readJson, - readNxJson, - readProjectConfiguration, - Tree, - updateJson, - updateProjectConfiguration, -} from '@nx/devkit'; -import { Linter, LinterType } from '@nx/eslint'; -import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils'; -import { join } from 'path'; - -import { safeFileDelete } from '../../utils/utilities'; -import { nxVersion } from '../../utils/versions'; - -export interface CypressConfigureSchema { - name: string; - js?: boolean; - directory?: string; - linter: Linter | LinterType; - standaloneConfig?: boolean; - ciTargetName?: string; - skipFormat?: boolean; -} - -export async function cypressProjectGenerator( - tree: Tree, - schema: CypressConfigureSchema -) { - logger.warn( - `Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.` - ); - const { configurationGenerator } = ensurePackage< - typeof import('@nx/cypress') - >('@nx/cypress', nxVersion); - - const e2eName = schema.name ? `${schema.name}-e2e` : undefined; - const { projectName, projectRoot } = await determineProjectNameAndRootOptions( - tree, - { - name: e2eName, - projectType: 'application', - directory: schema.directory, - } - ); - const libConfig = readProjectConfiguration(tree, schema.name); - const libRoot = libConfig.root; - - addProjectConfiguration(tree, projectName, { - root: projectRoot, - projectType: 'application', - sourceRoot: joinPathFragments(projectRoot, 'src'), - targets: {}, - implicitDependencies: [projectName], - }); - - const cypressTask = await configurationGenerator(tree, { - project: projectName, - js: schema.js, - linter: schema.linter, - devServerTarget: `${schema.name}:storybook`, - skipFormat: true, - }); - - const generatedCypressProjectName = projectName; - removeUnneededFiles(tree, generatedCypressProjectName, schema.js); - - const project = readProjectConfiguration(tree, generatedCypressProjectName); - if (project.targets.e2e && project.targets.e2e.options) { - addBaseUrlToCypressConfig(tree, generatedCypressProjectName, project.root); - updateAngularJsonBuilder(tree, { - e2eProjectName: generatedCypressProjectName, - targetProjectName: schema.name, - ciTargetName: schema.ciTargetName, - }); - } else if (hasCypressPlugin(tree)) { - generateCypressConfigForInferredPlugin( - tree, - generatedCypressProjectName, - project.root, - schema.name, - schema.ciTargetName - ); - } else { - throw new Error( - `Unable to generate Cypress Project for Storybook project. Please report this issue at https://github.com/nrwl/nx/issues/new/choose` - ); - } - - if (!schema.skipFormat) { - await formatFiles(tree); - } - - return cypressTask; -} - -function hasCypressPlugin(tree: Tree) { - const nxJson = readNxJson(tree); - return nxJson.plugins?.some((p) => - typeof p === 'string' - ? p === '@nx/cypress/plugin' - : p.plugin === '@nx/cypress/plugin' - ); -} - -function removeUnneededFiles(tree: Tree, projectName: string, js: boolean) { - const { sourceRoot, root } = readProjectConfiguration(tree, projectName); - const fileType = js ? 'js' : 'ts'; - if (tree.exists(joinPathFragments(root, 'cypress.config.ts'))) { - safeFileDelete(tree, `${sourceRoot}/e2e/app.cy.${fileType}`); - safeFileDelete(tree, `${sourceRoot}/support/app.po.${fileType}`); - } else { - safeFileDelete(tree, `${sourceRoot}/integration/app.spec.${fileType}`); - safeFileDelete(tree, `${sourceRoot}/support/app.po.${fileType}`); - } -} - -function generateCypressConfigForInferredPlugin( - tree: Tree, - projectName: string, - projectRoot: string, - targetProjectName: string, - ciTargetName?: string -) { - const cypressJson = joinPathFragments(projectRoot, 'cypress.json'); - const cypressTs = joinPathFragments(projectRoot, 'cypress.config.ts'); - - if (tree.exists(cypressJson)) { - tree.delete(cypressJson); - } - if (tree.exists(cypressTs)) { - // cypress >= v10 - tree.delete(cypressTs); - generateFiles( - tree, - join(__dirname, 'files', 'inferred-target'), - projectRoot, - { - defaultWebServerCommand: `npx nx run ${targetProjectName}:storybook`, - ciWebServerCommand: ciTargetName - ? `npx nx run ${targetProjectName}:${ciTargetName}:ci` - : `npx nx run ${targetProjectName}:storybook:ci`, - tpl: '', - } - ); - } -} - -function addBaseUrlToCypressConfig( - tree: Tree, - projectName: string, - projectRoot: string -) { - const cypressJson = joinPathFragments(projectRoot, 'cypress.json'); - const cypressTs = joinPathFragments(projectRoot, 'cypress.config.ts'); - // TODO(caleb): remove this when cypress < v10 is deprecated - - if (tree.exists(cypressJson)) { - // cypress < v10 - updateJson(tree, cypressJson, (json) => { - json.baseUrl = 'http://localhost:4400'; - return json; - }); - } else if (tree.exists(cypressTs)) { - // cypress >= v10 - tree.delete(cypressTs); - generateFiles( - tree, - join(__dirname, 'files', 'explicit-target'), - projectRoot, - { - tpl: '', - } - ); - } -} - -function updateAngularJsonBuilder( - tree: Tree, - opts: { - e2eProjectName: string; - targetProjectName: string; - ciTargetName?: string; - } -) { - const project = readProjectConfiguration(tree, opts.e2eProjectName); - const e2eTarget = project.targets.e2e ?? {}; - project.targets.e2e = { - ...e2eTarget, - options: { - ...e2eTarget.options, - devServerTarget: `${opts.targetProjectName}:storybook`, - }, - configurations: { - ci: { - devServerTarget: opts.ciTargetName - ? `${opts.targetProjectName}:${opts.ciTargetName}:ci` - : `${opts.targetProjectName}:storybook:ci`, - }, - }, - }; - updateProjectConfiguration(tree, opts.e2eProjectName, project); -} - -export default cypressProjectGenerator; diff --git a/packages/storybook/src/generators/cypress-project/files/explicit-target/cypress.config.ts__tpl__ b/packages/storybook/src/generators/cypress-project/files/explicit-target/cypress.config.ts__tpl__ deleted file mode 100644 index b61050fb8cf71e..00000000000000 --- a/packages/storybook/src/generators/cypress-project/files/explicit-target/cypress.config.ts__tpl__ +++ /dev/null @@ -1,6 +0,0 @@ -import { defineConfig } from 'cypress'; -import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress'; - -export default defineConfig({ - e2e: nxE2EStorybookPreset(__dirname) -}); diff --git a/packages/storybook/src/generators/cypress-project/files/inferred-target/cypress.config.ts__tpl__ b/packages/storybook/src/generators/cypress-project/files/inferred-target/cypress.config.ts__tpl__ deleted file mode 100644 index 2a709f2653f8d5..00000000000000 --- a/packages/storybook/src/generators/cypress-project/files/inferred-target/cypress.config.ts__tpl__ +++ /dev/null @@ -1,13 +0,0 @@ -import { defineConfig } from 'cypress'; -import { nxE2EStorybookPreset } from '@nx/storybook/presets/cypress'; - -export default defineConfig({ - e2e: nxE2EStorybookPreset(__dirname, { - cypressDir: 'src', - webServerCommands: { - default: "<%= defaultWebServerCommand %>", - ci: "<%= ciWebServerCommand %>" - }, - ciWebServerCommand: "<%= ciWebServerCommand %>" - }), -}); diff --git a/packages/storybook/src/generators/cypress-project/schema.json b/packages/storybook/src/generators/cypress-project/schema.json deleted file mode 100644 index 4499b15119ac2a..00000000000000 --- a/packages/storybook/src/generators/cypress-project/schema.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "$schema": "https://json-schema.org/schema", - "cli": "nx", - "$id": "cypress-configure", - "title": "Cypress Configuration", - "description": "Add cypress E2E app to test a ui library that is set up for Storybook.", - "x-deprecated": "Use 'interactionTests' instead when running '@nx/storybook:configuration'. This generator will be removed in v21.", - "type": "object", - "properties": { - "name": { - "type": "string", - "aliases": ["project", "projectName"], - "description": "Project for which to generate the cypress E2E app.", - "$default": { - "$source": "argv", - "index": 0 - }, - "x-prompt": "For which project do you want to generate the Cypress E2E app?", - "x-dropdown": "projects", - "x-priority": "important" - }, - "js": { - "type": "boolean", - "description": "Generate JavaScript files rather than TypeScript files.", - "default": false - }, - "directory": { - "type": "string", - "description": "A directory where the project is placed." - }, - "linter": { - "description": "The tool to use for running lint checks.", - "type": "string", - "enum": ["eslint", "none"], - "default": "eslint" - }, - "ciTargetName": { - "type": "string", - "description": "The name of the devServerTarget to use for the Cypress CI configuration. Used to control if using :static-storybook:ci or :storybook:ci", - "x-priority": "internal" - }, - "skipFormat": { - "description": "Skip formatting files.", - "type": "boolean", - "default": false, - "x-priority": "internal" - } - }, - "required": ["name"] -} diff --git a/packages/storybook/src/generators/migrate-7/__snapshots__/helper-functions.spec.ts.snap b/packages/storybook/src/generators/migrate-7/__snapshots__/helper-functions.spec.ts.snap deleted file mode 100644 index 56fc02e400bb9f..00000000000000 --- a/packages/storybook/src/generators/migrate-7/__snapshots__/helper-functions.spec.ts.snap +++ /dev/null @@ -1,379 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Helper functions for the Storybook 7 migration generator addViteConfigFilePathInFrameworkOptions should add viteConfigFilePath in frameworkOptions in main.js 1`] = ` -" - const { mergeConfig } = require('vite'); - - module.exports = { - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, {}); - }, - framework: { - name: '@storybook/react-vite', - options: { - builder: { - viteConfigPath: 'apps/rv1/vite.config.js', - }, - }, - }, - }; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator addViteConfigFilePathInFrameworkOptions should add viteConfigFilePath in frameworkOptions in main.js if no options present 1`] = ` -" - const { mergeConfig } = require('vite'); - - module.exports = { - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, {}); - }, - framework: { options: { - builder: { - viteConfigPath: 'apps/wv1/vite.config.js', - }, - }, - - name: '@storybook/web-components-vite', - }, - }; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator changeCoreCommonImportToFramework should change imports 1`] = ` -" - import type { StorybookConfig } from '@storybook/react-vite'; - import { mergeConfig } from 'vite'; - const config: StorybookConfig = { - core: {}, - stories: ['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, {}); - }, - framework: { - name: '@storybook/react-vite', - options: {} - } - }; - module.exports = config; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator changeCoreCommonImportToFramework should change imports 2`] = ` -" - import type { StorybookConfig } from '@storybook/angular'; - const config: StorybookConfig = { - core: {}, - stories: ['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {} - } - }; - module.exports = config; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator getAllStorybookInfo and onlyShowGuide should return all info for all projects with Storybook 1`] = ` -{ - "nextapp": { - "configDir": "apps/nextapp/.storybook", - "uiFramework": "@storybook/react", - "viteConfigFilePath": undefined, - }, - "nextapp-ts": { - "configDir": "apps/nextapp-ts/.storybook", - "uiFramework": "@storybook/react", - "viteConfigFilePath": undefined, - }, - "ngapp": { - "configDir": "apps/ngapp/.storybook", - "uiFramework": "@storybook/angular", - }, - "ngapp-ts": { - "configDir": "apps/ngapp-ts/.storybook", - "uiFramework": "@storybook/angular", - }, - "rv1": { - "configDir": "apps/rv1/.storybook", - "uiFramework": "@storybook/react", - "viteConfigFilePath": "apps/rv1/vite.config.js", - }, - "rv2-ts": { - "configDir": "apps/rv2-ts/.storybook", - "uiFramework": "@storybook/react", - "viteConfigFilePath": "apps/rv2-ts/vite.config.ts", - }, - "rw1": { - "configDir": "apps/rw1/.storybook", - "uiFramework": "@storybook/react", - "viteConfigFilePath": undefined, - }, - "wv1": { - "configDir": "apps/wv1/.storybook", - "uiFramework": "@storybook/web-components", - "viteConfigFilePath": "apps/wv1/vite.config.ts", - }, - "ww1": { - "configDir": "apps/ww1/.storybook", - "uiFramework": "@storybook/web-components", - "viteConfigFilePath": undefined, - }, -} -`; - -exports[`Helper functions for the Storybook 7 migration generator logResult should create the summary file with the correct content 1`] = ` -"# Storybook 7 Migration Summary - -## Upgrade Storybook packages - -The following command was ran to upgrade the Storybook packages: - -\`\`\`bash -npx storybook@latest upgrade -\`\`\` - -## Your \`.storybook/main.js|ts\` files were prepared for Storybook's automigration scripts - -Some adjustments were made to your \`.storybook/main.js|ts\` files so that -the Storybook automigration scripts could run successfully. The changes that were made are as follows: - -- Remove the \`as StorybookConfig\` typecast from the main.ts files, if any, - since it is not needed any more. -- Remove the \`path.resolve\` calls from the Next.js Storybook configuration, if any, since it breaks the Storybook automigration scripts. - -## The Storybook automigration scripts were ran - - -The following commands ran successfully and your Storybook configuration was successfully migrated to the latest version 7: - - -- \`npx storybook@latest automigrate --config-dir apps/nextapp/.storybook --renderer @storybook/react\` - -- \`npx storybook@latest automigrate --config-dir apps/rv1/.storybook --renderer @storybook/react\` - - -Please make sure to check the results yourself and make sure that everything is working as expected. - - - -### Some migrations failed - -The following commands failed and your Storybook configuration for these projects was not -migrated to the latest version 7: - - -- \`npx storybook@latest automigrate --config-dir apps/rv2-ts/.storybook --renderer @storybook/react\` - -- \`npx storybook@latest automigrate --config-dir apps/rw1/.storybook --renderer @storybook/react\` - - -You can run these commands again, manually, and follow the instructions in the -output of these commands to migrate your Storybook configuration to the latest version 7. - - -Also, we may have missed something. Please make sure to check the logs of the Storybook CLI commands that were run, and look for -the \`โŒ Failed trying to evaluate\` message or \`โŒ The migration failed to update\` message. This will indicate if a command was -unsuccessful, and will help you run the migration again, manually. - -## Final adjustments - -After the Storybook automigration scripts have run, some additional adjustments were made to your -workspace, to make sure that everything is working as expected. These adjustments are as follows: - -- The \`vite-tsconfig-paths\` plugin was removed from the Storybook configuration files since it's no longer needed. -- The \`viteConfigPath\` option was added to the Storybook builder, where needed. -- The import package for the \`StorybookConfig\` type was changed to be framework specific. -- The \`uiFramework\` option was removed from your project's Storybook targets. -- The \`lit\` package was added to your workspace, if you are using the -Web Components \`@storybook/web-components\` package. Please note that the \`lit-html\` package is -no longer needed by Storybook v7. So, if you are not using it anywhere else, you can safely remove it. - -## Next steps - -You can make sure everything is working as expected by trying -to build or serve your Storybook as you normally would. - -\`\`\`bash -npx nx build-storybook project-name -\`\`\` - -\`\`\`bash -npx nx storybook project-name -\`\`\` - -Please read the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/) and the -official [Storybook 7.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide) -for more information. - -You can also read the docs for the [@nx/storybook:migrate-7 generator](https://nx.dev/nx-api/storybook/generators/migrate-7) and our [Storybook 7 setup guide](https://nx.dev/nx-api/storybook/documents/storybook-7-setup). -" -`; - -exports[`Helper functions for the Storybook 7 migration generator removePathResolvesFromNextConfig should remove path from nextConfigPath in main.js 1`] = ` -" - const path = require('path'); - - module.exports = { - core: { builder: 'webpack5' }, - stories: [ - '../components/**/*.stories.mdx', - '../components/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-addon-swc', - { - name: 'storybook-addon-next', - options: { - nextConfigPath: '../next.config.js', - }, - }, - ], - }; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator removePathResolvesFromNextConfig should remove path from nextConfigPath in main.js 2`] = ` -" - import type { StorybookConfig } from '@storybook/core-common'; - import path from 'path'; - - const config: StorybookConfig = { - core: { builder: 'webpack5' }, - stories: [ - '../components/**/*.stories.mdx', - '../components/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-addon-swc', - { - name: 'storybook-addon-next', - options: { - nextConfigPath: '../next.config.js', - }, - }, - ], - } as StorybookConfig; - - module.exports = config; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator removeTypecastFromMainTs should remove typecast from TypeScript files 1`] = ` -" - import type { StorybookConfig } from '@storybook/core-common'; - - import { mergeConfig } from 'vite'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; - - const config: StorybookConfig = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: '../../../', - }), - ], - }); - }, - } ; - - module.exports = config; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator removeTypecastFromMainTs should remove typecast from TypeScript files 2`] = ` -" - import type { StorybookConfig } from '@storybook/core-common'; - import path from 'path'; - - const config: StorybookConfig = { - core: { builder: 'webpack5' }, - stories: [ - '../components/**/*.stories.mdx', - '../components/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-addon-swc', - { - name: 'storybook-addon-next', - options: { - nextConfigPath: path.resolve(__dirname, '../next.config.js'), - }, - }, - ], - } ; - - module.exports = config; - " -`; - -exports[`Helper functions for the Storybook 7 migration generator removeViteTsConfigPathsPlugin should remove ViteTsConfigPathsPlugin from main.js and the whole plugin array if empty 1`] = ` -" - const { mergeConfig } = require('vite'); - - - module.exports = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, { - - }); - }, - }; -" -`; - -exports[`Helper functions for the Storybook 7 migration generator removeViteTsConfigPathsPlugin should remove ViteTsConfigPathsPlugin from main.ts and the whole plugin array if empty 1`] = ` -" - import type { StorybookConfig } from '@storybook/core-common'; - - import { mergeConfig } from 'vite'; - - - const config: StorybookConfig = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, { - - }); - }, - } as StorybookConfig; - - module.exports = config; - " -`; diff --git a/packages/storybook/src/generators/migrate-7/files/storybook-migration-summary.md__tmpl__ b/packages/storybook/src/generators/migrate-7/files/storybook-migration-summary.md__tmpl__ deleted file mode 100644 index 60e5cb7925c08b..00000000000000 --- a/packages/storybook/src/generators/migrate-7/files/storybook-migration-summary.md__tmpl__ +++ /dev/null @@ -1,80 +0,0 @@ -# Storybook 7 Migration Summary - -## Upgrade Storybook packages - -The following command was ran to upgrade the Storybook packages: - -```bash -npx storybook@latest upgrade -``` - -## Your `.storybook/main.js|ts` files were prepared for Storybook's automigration scripts - -Some adjustments were made to your `.storybook/main.js|ts` files so that -the Storybook automigration scripts could run successfully. The changes that were made are as follows: - -- Remove the `as StorybookConfig` typecast from the main.ts files, if any, - since it is not needed any more. -- Remove the `path.resolve` calls from the Next.js Storybook configuration, if any, since it breaks the Storybook automigration scripts. - -## The Storybook automigration scripts were ran - -<% if ( hasSuccessfulProjects ) { %> -The following commands ran successfully and your Storybook configuration was successfully migrated to the latest version 7: - -<% for (let command of successfulProjects) { %> -- `<%= command %>` -<% } %> - -Please make sure to check the results yourself and make sure that everything is working as expected. -<% } %> - -<% if ( hasFailedProjects ) { %> -### Some migrations failed - -The following commands failed and your Storybook configuration for these projects was not -migrated to the latest version 7: - -<% for (let command of failedProjects) { %> -- `<%= command %>` -<% } %> - -You can run these commands again, manually, and follow the instructions in the -output of these commands to migrate your Storybook configuration to the latest version 7. -<% } %> - -Also, we may have missed something. Please make sure to check the logs of the Storybook CLI commands that were run, and look for -the `โŒ Failed trying to evaluate` message or `โŒ The migration failed to update` message. This will indicate if a command was -unsuccessful, and will help you run the migration again, manually. - -## Final adjustments - -After the Storybook automigration scripts have run, some additional adjustments were made to your -workspace, to make sure that everything is working as expected. These adjustments are as follows: - -- The `vite-tsconfig-paths` plugin was removed from the Storybook configuration files since it's no longer needed. -- The `viteConfigPath` option was added to the Storybook builder, where needed. -- The import package for the `StorybookConfig` type was changed to be framework specific. -- The `uiFramework` option was removed from your project's Storybook targets. -- The `lit` package was added to your workspace, if you are using the -Web Components `@storybook/web-components` package. Please note that the `lit-html` package is -no longer needed by Storybook v7. So, if you are not using it anywhere else, you can safely remove it. - -## Next steps - -You can make sure everything is working as expected by trying -to build or serve your Storybook as you normally would. - -```bash -npx nx build-storybook project-name -``` - -```bash -npx nx storybook project-name -``` - -Please read the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/) and the -official [Storybook 7.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide) -for more information. - -You can also read the docs for the [@nx/storybook:migrate-7 generator](https://nx.dev/nx-api/storybook/generators/migrate-7) and our [Storybook 7 setup guide](https://nx.dev/nx-api/storybook/documents/storybook-7-setup). diff --git a/packages/storybook/src/generators/migrate-7/helper-functions.spec.ts b/packages/storybook/src/generators/migrate-7/helper-functions.spec.ts deleted file mode 100644 index 36826cf8087ff0..00000000000000 --- a/packages/storybook/src/generators/migrate-7/helper-functions.spec.ts +++ /dev/null @@ -1,447 +0,0 @@ -import { - addProjectConfiguration, - getPackageManagerCommand, - output, - ProjectConfiguration, - readProjectConfiguration, - Tree, -} from '@nx/devkit'; -import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; -import * as allProjects from './test-configs/all-projects.json'; -import { - addViteConfigFilePathInFrameworkOptions, - changeCoreCommonImportToFramework, - getAllStorybookInfo, - logResult, - onlyShowGuide, - removePathResolvesFromNextConfig, - removeTypecastFromMainTs, - removeUiFrameworkFromProjectJson, - removeViteTsConfigPathsPlugin, -} from './helper-functions'; - -describe('Helper functions for the Storybook 7 migration generator', () => { - let tree: Tree; - - beforeEach(async () => { - tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); - addAllProjectsToWorkspace(tree); - }); - - describe('removePathResolvesFromNextConfig', () => { - it(`should remove path from nextConfigPath in main.js`, async () => { - const { content: content1 } = removePathResolvesFromNextConfig( - tree, - `apps/nextapp/.storybook/main.js` - ); - const { content: content2 } = removePathResolvesFromNextConfig( - tree, - `apps/nextapp-ts/.storybook/main.ts` - ); - - expect(content1).toMatchSnapshot(); - - expect(content2).toMatchSnapshot(); - }); - }); - - describe('removeTypecastFromMainTs', () => { - it(`should remove typecast from TypeScript files`, async () => { - const { content: content1 } = removeTypecastFromMainTs( - tree, - `apps/rv2-ts/.storybook/main.ts` - ); - const { content: content2 } = removeTypecastFromMainTs( - tree, - `apps/nextapp-ts/.storybook/main.ts` - ); - - expect(content1).toMatchSnapshot(); - - expect(content2).toMatchSnapshot(); - }); - }); - - describe('getAllStorybookInfo and onlyShowGuide', () => { - let allStorybookInfo; - beforeEach(() => { - allStorybookInfo = getAllStorybookInfo(tree); - }); - it('should return all info for all projects with Storybook', () => { - expect(allStorybookInfo).toMatchSnapshot(); - }); - - it('should onlyShowGuide and the correct instructions', () => { - const outputSpy = jest.spyOn(output, 'log').mockImplementation(); - onlyShowGuide(allStorybookInfo); - const pm = getPackageManagerCommand(); - expect(outputSpy).toHaveBeenCalledWith( - expect.objectContaining({ - bodyLines: [ - 'You can run the following commands manually to upgrade your Storybook projects to Storybook 7:', - '', - '1. Call the Storybook upgrade script:', - `${pm.exec} storybook@latest upgrade`, - '', - '2. Call the Nx generator to prepare your files for migration:', - 'nx g @nx/storybook:migrate-7 --onlyPrepare', - '', - '3. Call the Storybook automigrate scripts:', - 'Run the following commands for each Storybook project:', - `${pm.exec} storybook@latest automigrate --config-dir apps/nextapp/.storybook --renderer @storybook/react`, - `${pm.exec} storybook@latest automigrate --config-dir apps/nextapp-ts/.storybook --renderer @storybook/react`, - `${pm.exec} storybook@latest automigrate --config-dir apps/rv1/.storybook --renderer @storybook/react`, - `${pm.exec} storybook@latest automigrate --config-dir apps/rv2-ts/.storybook --renderer @storybook/react`, - `${pm.exec} storybook@latest automigrate --config-dir apps/rw1/.storybook --renderer @storybook/react`, - `${pm.exec} storybook@latest automigrate --config-dir apps/wv1/.storybook --renderer @storybook/web-components`, - `${pm.exec} storybook@latest automigrate --config-dir apps/ww1/.storybook --renderer @storybook/web-components`, - `${pm.exec} storybook@latest automigrate --config-dir apps/ngapp/.storybook --renderer @storybook/angular`, - `${pm.exec} storybook@latest automigrate --config-dir apps/ngapp-ts/.storybook --renderer @storybook/angular`, - '', - '4. Call the Nx generator to finish the migration:', - 'nx g @nx/storybook:migrate-7 --afterMigration', - ], - title: 'Storybook 7 Migration Guide', - }) - ); - }); - }); - - describe('removeViteTsConfigPathsPlugin', () => { - it(`should remove ViteTsConfigPathsPlugin from main.js and the whole plugin array if empty`, () => { - removeViteTsConfigPathsPlugin(tree, `apps/rv1/.storybook/main.js`); - - expect( - tree.read('apps/rv1/.storybook/main.js', 'utf-8') - ).toMatchSnapshot(); - }); - - it(`should remove ViteTsConfigPathsPlugin from main.ts and the whole plugin array if empty`, () => { - removeViteTsConfigPathsPlugin(tree, `apps/rv1/.storybook/main.js`); - removeViteTsConfigPathsPlugin(tree, `apps/rv2-ts/.storybook/main.ts`); - - expect( - tree.read('apps/rv2-ts/.storybook/main.ts', 'utf-8') - ).toMatchSnapshot(); - }); - }); - - describe('addViteConfigFilePathInFrameworkOptions', () => { - it(`should add viteConfigFilePath in frameworkOptions in main.js`, () => { - writeNewMainJs(tree); - tree.write('apps/rv1/vite.config.js', ''); - addViteConfigFilePathInFrameworkOptions( - tree, - 'apps/rv1/.storybook/main.js', - 'apps/rv1/vite.config.js' - ); - - expect( - tree.read('apps/rv1/.storybook/main.js', 'utf-8') - ).toMatchSnapshot(); - }); - - it(`should add viteConfigFilePath in frameworkOptions in main.js if no options present`, () => { - writeNewMainJs(tree); - tree.write('apps/wv1/vite.config.js', ''); - addViteConfigFilePathInFrameworkOptions( - tree, - 'apps/wv1/.storybook/main.js', - 'apps/wv1/vite.config.js' - ); - - expect( - tree.read('apps/wv1/.storybook/main.js', 'utf-8') - ).toMatchSnapshot(); - }); - }); - - describe('changeCoreCommonImportToFramework', () => { - it(`should change imports`, async () => { - writeNewMainTs(tree); - changeCoreCommonImportToFramework(tree, `apps/rv2-ts/.storybook/main.ts`); - changeCoreCommonImportToFramework( - tree, - `apps/ngapp-ts/.storybook/main.ts` - ); - - expect( - tree.read('apps/rv2-ts/.storybook/main.ts', 'utf-8') - ).toMatchSnapshot(); - expect( - tree.read('apps/ngapp-ts/.storybook/main.ts', 'utf-8') - ).toMatchSnapshot(); - }); - }); - - describe('removeUiFrameworkFromProjectJson', () => { - it('should remove uiFramework from project.json', () => { - expect( - readProjectConfiguration(tree, 'rv1').targets['storybook']['options'][ - 'uiFramework' - ] - ).toBeDefined(); - expect( - readProjectConfiguration(tree, 'rv2-ts').targets['storybook'][ - 'options' - ]['uiFramework'] - ).toBeDefined(); - - removeUiFrameworkFromProjectJson(tree); - - expect( - readProjectConfiguration(tree, 'rv1').targets['storybook']['options'][ - 'uiFramework' - ] - ).toBeUndefined(); - - expect( - readProjectConfiguration(tree, 'rv2-ts').targets['storybook'][ - 'options' - ]['uiFramework'] - ).toBeUndefined(); - }); - }); - - describe('logResult', () => { - it('should create the summary file with the correct content', () => { - logResult(tree, { - successfulProjects: { - nextapp: - 'npx storybook@latest automigrate --config-dir apps/nextapp/.storybook --renderer @storybook/react', - rv1: 'npx storybook@latest automigrate --config-dir apps/rv1/.storybook --renderer @storybook/react', - }, - failedProjects: { - 'rv2-ts': `npx storybook@latest automigrate --config-dir apps/rv2-ts/.storybook --renderer @storybook/react`, - rw1: 'npx storybook@latest automigrate --config-dir apps/rw1/.storybook --renderer @storybook/react', - }, - }); - expect( - tree.read('storybook-migration-summary.md', 'utf-8') - ).toMatchSnapshot(); - }); - }); -}); - -export function addAllProjectsToWorkspace(tree: Tree) { - for (const [name, project] of Object.entries(allProjects)) { - addProjectConfiguration(tree, name, project as ProjectConfiguration); - } - writeMainJs(tree); - writeViteConfig(tree); -} - -function writeViteConfig(tree: Tree) { - tree.write( - `apps/rv1/vite.config.js`, - `const { defineConfig } = require('vite');` - ); - - tree.write( - `apps/rv2-ts/vite.config.ts`, - `const { defineConfig } = require('vite');` - ); - - tree.write( - `apps/wv1/vite.config.ts`, - `const { defineConfig } = require('vite');` - ); -} - -function writeMainJs(tree: Tree) { - tree.write( - `apps/rv1/.storybook/main.js`, - ` - const { mergeConfig } = require('vite'); - const viteTsConfigPaths = require('vite-tsconfig-paths').default; - - module.exports = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: '../../../', - }), - ], - }); - }, - }; -` - ); - - tree.write( - `apps/rv2-ts/.storybook/main.ts`, - ` - import type { StorybookConfig } from '@storybook/core-common'; - - import { mergeConfig } from 'vite'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; - - const config: StorybookConfig = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: '../../../', - }), - ], - }); - }, - } as StorybookConfig; - - module.exports = config; - ` - ); - - tree.write( - `apps/nextapp/.storybook/main.js`, - ` - const path = require('path'); - - module.exports = { - core: { builder: 'webpack5' }, - stories: [ - '../components/**/*.stories.mdx', - '../components/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-addon-swc', - { - name: 'storybook-addon-next', - options: { - nextConfigPath: path.resolve(__dirname, '../next.config.js'), - }, - }, - ], - }; - ` - ); - - tree.write( - `apps/nextapp-ts/.storybook/main.ts`, - ` - import type { StorybookConfig } from '@storybook/core-common'; - import path from 'path'; - - const config: StorybookConfig = { - core: { builder: 'webpack5' }, - stories: [ - '../components/**/*.stories.mdx', - '../components/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [ - '@storybook/addon-essentials', - '@nx/react/plugins/storybook', - 'storybook-addon-swc', - { - name: 'storybook-addon-next', - options: { - nextConfigPath: path.resolve(__dirname, '../next.config.js'), - }, - }, - ], - } as StorybookConfig; - - module.exports = config; - ` - ); -} - -function writeNewMainJs(tree: Tree) { - tree.write( - `apps/rv1/.storybook/main.js`, - ` - const { mergeConfig } = require('vite'); - - module.exports = { - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, {}); - }, - framework: { - name: '@storybook/react-vite', - options: {}, - }, - }; - ` - ); - - tree.write( - `apps/wv1/.storybook/main.js`, - ` - const { mergeConfig } = require('vite'); - - module.exports = { - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], - async viteFinal(config, { configType }) { - return mergeConfig(config, {}); - }, - framework: { - name: '@storybook/web-components-vite', - }, - }; - ` - ); -} - -function writeNewMainTs(tree: Tree) { - tree.write( - `apps/rv2-ts/.storybook/main.ts`, - ` - import type { StorybookConfig } from '@storybook/core-common'; - import { mergeConfig } from 'vite'; - const config: StorybookConfig = { - core: {}, - stories: ['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, {}); - }, - framework: { - name: '@storybook/react-vite', - options: {} - } - }; - module.exports = config; - ` - ); - - tree.write( - `apps/ngapp-ts/.storybook/main.ts`, - ` - import type { StorybookConfig } from '@storybook/core-common'; - const config: StorybookConfig = { - core: {}, - stories: ['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {} - } - }; - module.exports = config; - ` - ); -} diff --git a/packages/storybook/src/generators/migrate-7/helper-functions.ts b/packages/storybook/src/generators/migrate-7/helper-functions.ts deleted file mode 100644 index e3483709363b96..00000000000000 --- a/packages/storybook/src/generators/migrate-7/helper-functions.ts +++ /dev/null @@ -1,700 +0,0 @@ -import { - applyChangesToString, - ChangeType, - generateFiles, - getPackageManagerCommand, - joinPathFragments, - output, - readProjectConfiguration, - Tree, - updateProjectConfiguration, - workspaceRoot, -} from '@nx/devkit'; -import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils'; -import { tsquery } from '@phenomnomnominal/tsquery'; -import ts = require('typescript'); -import * as fs from 'fs'; -import { fileExists } from 'nx/src/utils/fileutils'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -export function onlyShowGuide(storybookProjects: { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; -}) { - const pm = getPackageManagerCommand(); - - output.log({ - title: 'Storybook 7 Migration Guide', - bodyLines: [ - `You can run the following commands manually to upgrade your Storybook projects to Storybook 7:`, - ``, - `1. Call the Storybook upgrade script:`, - `${pm.exec} storybook@latest upgrade`, - ``, - `2. Call the Nx generator to prepare your files for migration:`, - `nx g @nx/storybook:migrate-7 --onlyPrepare`, - ``, - `3. Call the Storybook automigrate scripts:`, - `Run the following commands for each Storybook project:`, - ...Object.entries(storybookProjects).map( - ([_projectName, storybookProjectInfo]) => { - return `${pm.exec} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`; - } - ), - ``, - `4. Call the Nx generator to finish the migration:`, - `nx g @nx/storybook:migrate-7 --afterMigration`, - ], - }); -} - -export function writeFile(file?: { path?: string; content?: string }) { - if (file?.path && file?.content) { - fs.writeFileSync(file.path, file.content); - } -} - -export function removePathResolvesFromNextConfig( - tree: Tree, - mainJsTsPath: string -): { path: string; content: string } | undefined { - let mainJsTs = tree.read(mainJsTsPath, 'utf-8'); - const hasNextConfig = tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="nextConfigPath"]))` - ); - - const nextConfigPathAssignment = hasNextConfig?.find((propertyAssignment) => { - return propertyAssignment.getText().startsWith('nextConfigPath'); - }); - - if (!nextConfigPathAssignment) { - // No nextConfigPath found, nothing to do - return; - } - - const pathResolve = tsquery.query( - nextConfigPathAssignment, - `CallExpression:has(PropertyAccessExpression:has([name="path"]):has([name="resolve"]))` - )?.[0]; - - if (pathResolve) { - const getStringLiteral = tsquery.query(pathResolve, 'StringLiteral')?.[0]; - if (getStringLiteral) { - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Delete, - start: pathResolve.getStart(), - length: pathResolve.getText().length, - }, - { - type: ChangeType.Insert, - index: pathResolve.getStart(), - text: getStringLiteral.getText(), - }, - ]); - - return { - path: mainJsTsPath, - content: mainJsTs, - }; - } - } -} - -export function removeViteTsConfigPathsPlugin( - tree: Tree, - mainJsTsPath: string -) { - let mainJsTs = tree.read(mainJsTsPath, 'utf-8'); - const { vitePluginVariableName, importExpression } = - getViteTsConfigPathsNameAndImport(mainJsTs); - - const viteTsConfigPathsPluginParent = tsquery.query( - mainJsTs, - `CallExpression:has(Identifier[name="${vitePluginVariableName}"])` - ); - const viteTsConfigPathsPlugin = viteTsConfigPathsPluginParent?.find( - (callExpression) => { - return callExpression.getText().startsWith(vitePluginVariableName); - } - ); - - if (viteTsConfigPathsPlugin && importExpression) { - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Delete, - start: viteTsConfigPathsPlugin.getStart(), - length: - mainJsTs[viteTsConfigPathsPlugin.getEnd()] === ',' - ? viteTsConfigPathsPlugin.getText().length + 1 - : viteTsConfigPathsPlugin.getText().length, - }, - { - type: ChangeType.Delete, - start: importExpression.getStart(), - length: importExpression.getText().length, - }, - ]); - tree.write(mainJsTsPath, mainJsTs); - removePluginsArrayIfEmpty(tree, mainJsTsPath); - } -} - -function getViteTsConfigPathsNameAndImport(mainJsTs: string): { - vitePluginVariableName: string; - importExpression: ts.Node; -} { - const requireVariableStatement = tsquery.query( - mainJsTs, - `VariableStatement:has(CallExpression:has(Identifier[name="require"]))` - ); - - let vitePluginVariableName: string; - let importExpression: ts.Node; - - if (requireVariableStatement?.length) { - importExpression = requireVariableStatement.find((statement) => { - const requireCallExpression = tsquery.query( - statement, - 'CallExpression:has(Identifier[name="require"])' - ); - return requireCallExpression?.[0] - ?.getText() - ?.includes('vite-tsconfig-paths'); - }); - if (importExpression) { - vitePluginVariableName = tsquery - .query(importExpression, 'Identifier')?.[0] - ?.getText(); - } - } else { - const importDeclarations = tsquery.query(mainJsTs, 'ImportDeclaration'); - importExpression = importDeclarations?.find((statement) => { - const stringLiteral = tsquery.query(statement, 'StringLiteral'); - return stringLiteral?.[0]?.getText()?.includes('vite-tsconfig-paths'); - }); - if (importExpression) { - vitePluginVariableName = tsquery - .query(importExpression, 'Identifier')?.[0] - ?.getText(); - } - } - - return { - vitePluginVariableName, - importExpression, - }; -} - -function removePluginsArrayIfEmpty(tree: Tree, mainJsTsPath: string) { - let mainJsTs = tree.read(mainJsTsPath, 'utf-8'); - - const viteFinalMethodDeclaration = tsquery.query( - mainJsTs, - `MethodDeclaration:has([name="viteFinal"])` - )?.[0]; - if (!viteFinalMethodDeclaration) { - return; - } - const pluginsPropertyAssignment = tsquery.query( - viteFinalMethodDeclaration, - `PropertyAssignment:has(Identifier:has([name="plugins"]))` - )?.[0]; - if (!pluginsPropertyAssignment) { - return; - } - const pluginsArrayLiteralExpression = tsquery.query( - pluginsPropertyAssignment, - `ArrayLiteralExpression` - )?.[0]; - if (pluginsArrayLiteralExpression?.getText()?.replace(/\s/g, '') === '[]') { - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Delete, - start: pluginsPropertyAssignment.getStart(), - length: - mainJsTs[pluginsPropertyAssignment.getEnd()] === ',' - ? pluginsPropertyAssignment.getText().length + 1 - : pluginsPropertyAssignment.getText().length, - }, - ]); - tree.write(mainJsTsPath, mainJsTs); - } -} - -export function addViteConfigFilePathInFrameworkOptions( - tree: Tree, - mainJsTsPath: string, - viteConfigPath: string -) { - let mainJsTs = tree.read(mainJsTsPath, 'utf-8'); - - const viteFramework = - tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="framework"])):has(StringLiteral:has([text="@storybook/react-vite"]))` - )?.[0] ?? - tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="framework"])):has(StringLiteral:has([text="@storybook/web-components-vite"]))` - )?.[0] ?? - tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="framework"])):has(StringLiteral:has([text="@storybook/svelte-vite"]))` - )?.[0] ?? - tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="framework"])):has(StringLiteral:has([text="@storybook/vue-vite"]))` - )?.[0] ?? - tsquery.query( - mainJsTs, - `PropertyAssignment:has(Identifier:has([name="framework"])):has(StringLiteral:has([text="@storybook/vue3-vite"]))` - )?.[0]; - - if (viteFramework) { - const optionsPropertyAssignments = tsquery.query( - viteFramework, - `PropertyAssignment:has(Identifier:has([name="options"]))` - ); - - const frameworkOptionsPropertyAssignment = optionsPropertyAssignments?.find( - (expression) => { - return expression.getText().startsWith('options'); - } - ); - if (frameworkOptionsPropertyAssignment) { - const objectLiteralExpression = tsquery.query( - frameworkOptionsPropertyAssignment, - `ObjectLiteralExpression` - )?.[0]; - - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Insert, - index: objectLiteralExpression.getStart() + 1, - text: ` - builder: { - viteConfigPath: '${viteConfigPath}', - }, - `, - }, - ]); - tree.write(mainJsTsPath, mainJsTs); - } else { - const objectLiteralExpression = tsquery.query( - viteFramework, - `ObjectLiteralExpression` - )?.[0]; - if (!objectLiteralExpression) { - return; - } - mainJsTs = applyChangesToString(mainJsTs, [ - { - type: ChangeType.Insert, - index: objectLiteralExpression.getStart() + 1, - text: ` options: { - builder: { - viteConfigPath: '${viteConfigPath}', - }, - }, - `, - }, - ]); - tree.write(mainJsTsPath, mainJsTs); - } - } -} - -export function normalizeViteConfigFilePathWithTree( - tree: Tree, - projectRoot: string, - configFile?: string -): string { - return configFile && tree.exists(configFile) - ? configFile - : tree.exists(joinPathFragments(`${projectRoot}/vite.config.ts`)) - ? joinPathFragments(`${projectRoot}/vite.config.ts`) - : tree.exists(joinPathFragments(`${projectRoot}/vite.config.js`)) - ? joinPathFragments(`${projectRoot}/vite.config.js`) - : undefined; -} - -export function removeTypecastFromMainTs( - tree: Tree, - mainTsPath: string -): { path: string; content: string } | undefined { - let mainTs = tree.read(mainTsPath, 'utf-8'); - mainTs = mainTs.replace(/as StorybookConfig/g, ''); - return { - path: mainTsPath, - content: mainTs, - }; -} - -export function removeUiFrameworkFromProjectJson(tree: Tree) { - forEachExecutorOptions( - tree, - '@nx/storybook:build', - (options, projectName, targetName) => { - if (projectName && options?.['uiFramework']) { - const projectConfiguration = readProjectConfiguration( - tree, - projectName - ); - delete projectConfiguration.targets[targetName].options['uiFramework']; - updateProjectConfiguration(tree, projectName, projectConfiguration); - } - } - ); - - forEachExecutorOptions( - tree, - '@nx/storybook:storybook', - (options, projectName, targetName) => { - if (projectName && options?.['uiFramework']) { - const projectConfiguration = readProjectConfiguration( - tree, - projectName - ); - delete projectConfiguration.targets[targetName].options['uiFramework']; - updateProjectConfiguration(tree, projectName, projectConfiguration); - } - } - ); -} - -export function changeCoreCommonImportToFramework( - tree: Tree, - mainTsPath: string -) { - let mainTs = tree.read(mainTsPath, 'utf-8'); - - const importDeclarations = tsquery.query( - mainTs, - 'ImportDeclaration:has(ImportSpecifier:has([text="StorybookConfig"]))' - )?.[0]; - if (!importDeclarations) { - return; - } - const storybookConfigImportPackage = tsquery.query( - importDeclarations, - 'StringLiteral' - )?.[0]; - if (storybookConfigImportPackage?.getText() === `'@storybook/core-common'`) { - const frameworkPropertyAssignment = tsquery.query( - mainTs, - `PropertyAssignment:has(Identifier:has([text="framework"]))` - )?.[0]; - - if (!frameworkPropertyAssignment) { - return; - } - - const propertyAssignments = tsquery.query( - frameworkPropertyAssignment, - `PropertyAssignment:has(Identifier:has([text="name"]))` - ); - - const namePropertyAssignment = propertyAssignments?.find((expression) => { - return expression.getText().startsWith('name'); - }); - - if (!namePropertyAssignment) { - return; - } - - const frameworkName = tsquery.query( - namePropertyAssignment, - `StringLiteral` - )?.[0]; - - if (frameworkName) { - mainTs = applyChangesToString(mainTs, [ - { - type: ChangeType.Delete, - start: storybookConfigImportPackage.getStart(), - length: storybookConfigImportPackage.getWidth(), - }, - { - type: ChangeType.Insert, - index: storybookConfigImportPackage.getStart(), - text: frameworkName.getText(), - }, - ]); - tree.write(mainTsPath, mainTs); - } - } -} - -export function getAllStorybookInfo(tree: Tree): { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; -} { - const allStorybookDirs = {}; - forEachExecutorOptions( - tree, - '@nx/storybook:build', - (options, projectName) => { - if (projectName && options?.['configDir']) { - const projectConfiguration = readProjectConfiguration( - tree, - projectName - ); - - allStorybookDirs[projectName] = { - configDir: options?.['configDir'], - uiFramework: options?.['uiFramework'], - viteConfigFilePath: normalizeViteConfigFilePathWithTree( - tree, - projectConfiguration.root, - projectConfiguration.targets?.build?.options?.configFile - ), - }; - } - } - ); - - forEachExecutorOptions( - tree, - '@storybook/angular:build-storybook', - (options, projectName) => { - if (projectName && options?.['configDir']) { - allStorybookDirs[projectName] = { - configDir: options?.['configDir'], - uiFramework: '@storybook/angular', - }; - } - } - ); - return allStorybookDirs; -} - -export function prepareFiles( - tree: Tree, - allStorybookProjects: { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; - } -) { - output.log({ - title: `Preparing Storybook files.`, - bodyLines: [ - `Nx will make some adjustments to the Storybook configuration files of your workspace`, - `so that the Storybook automigration scripts can run successfully.`, - `The adjustments are:`, - ` - Remove the "as StorybookConfig" typecast from the main.ts files, if any`, - ` - Remove the "path.resolve" calls from the Next.js Storybook configuration, if any`, - ], - color: 'blue', - }); - Object.entries(allStorybookProjects).forEach( - ([projectName, storybookProjectInfo]) => { - const mainJsTsPath = tree.exists( - `${storybookProjectInfo.configDir}/main.js` - ) - ? `${storybookProjectInfo.configDir}/main.js` - : tree.exists(`${storybookProjectInfo.configDir}/main.ts`) - ? `${storybookProjectInfo.configDir}/main.ts` - : undefined; - - if (!mainJsTsPath) { - output.error({ - title: `Failed to prepare Storybook files for ${projectName}.`, - bodyLines: [ - `Could not find main.js or main.ts in ${storybookProjectInfo.configDir}`, - `Skipping project ${projectName}.`, - ], - }); - } - - if (mainJsTsPath.endsWith('.ts')) { - writeFile(removeTypecastFromMainTs(tree, mainJsTsPath)); - } - writeFile(removePathResolvesFromNextConfig(tree, mainJsTsPath)); - } - ); - - output.log({ - title: `Files prepared successfully!`, - bodyLines: [`Nx prepared your files successfully.`], - color: 'green', - }); -} - -export function handleMigrationResult( - migrateResult: { - successfulProjects: {}; - failedProjects: {}; - }, - allStorybookProjects: { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; - } -): { successfulProjects: {}; failedProjects: {} } { - if ( - fileExists(join(workspaceRoot, 'migration-storybook.log')) && - Object.keys(migrateResult.successfulProjects)?.length - ) { - const sbLogFile = readFileSync( - join(workspaceRoot, 'migration-storybook.log'), - 'utf-8' - ); - Object.keys(migrateResult.successfulProjects).forEach((projectName) => { - if ( - sbLogFile.includes( - `The migration failed to update your ${allStorybookProjects[projectName].configDir}` - ) - ) { - migrateResult.failedProjects[projectName] = - migrateResult.successfulProjects[projectName]; - delete migrateResult.successfulProjects[projectName]; - } - }); - } - - if ( - Object.keys(allStorybookProjects)?.length === - Object.keys(migrateResult.successfulProjects)?.length || - Object.keys(migrateResult.failedProjects)?.length === 0 - ) { - output.log({ - title: `Storybook configuration migrated.`, - bodyLines: [ - `โ˜‘๏ธ The automigrate command was successful.`, - `All your projects were migrated successfully.`, - ], - color: 'green', - }); - } else { - if (Object.keys(migrateResult.failedProjects).length) { - if (Object.keys(migrateResult.failedProjects).length) { - output.log({ - title: `Storybook configuration migrated.`, - bodyLines: [ - `โ˜‘๏ธ The automigrate command was successful.`, - `The following projects were migrated successfully:`, - ...Object.keys(migrateResult.successfulProjects).map( - (project) => ` - ${project}` - ), - ], - color: 'green', - }); - } - - output.log({ - title: `Failed migrations.`, - bodyLines: [ - `There were some projects that were not migrated successfully.`, - `โš ๏ธ The following projects were not migrated successfully:`, - ...Object.keys(migrateResult.failedProjects).map( - (project) => ` - ${project}` - ), - `You can run the following commands to migrate them manually:`, - ...Object.entries(migrateResult.failedProjects).map( - ([_project, command]) => `- ${command}` - ), - ], - color: 'red', - }); - } - } - return migrateResult; -} - -export function checkStorybookInstalled(packageJson): boolean { - return ( - (packageJson.dependencies['@storybook/core-server'] || - packageJson.devDependencies['@storybook/core-server']) && - (packageJson.dependencies['@nx/storybook'] || - packageJson.devDependencies['@nx/storybook']) - ); -} - -export function checkWebComponentsInstalled(packageJson): boolean { - return ( - packageJson.dependencies['@storybook/web-components'] || - packageJson.devDependencies['@storybook/web-components-vite'] || - packageJson.dependencies['@storybook/web-components-vite'] || - packageJson.devDependencies['@storybook/web-components-webpack5'] || - packageJson.dependencies['@storybook/web-components-webpack5'] - ); -} - -export function afterMigration( - tree: Tree, - allStorybookProjects: { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; - } -) { - Object.entries(allStorybookProjects).forEach( - async ([_projectName, storybookProjectInfo]) => { - const mainJsTsPath = tree.exists( - `${storybookProjectInfo.configDir}/main.js` - ) - ? `${storybookProjectInfo.configDir}/main.js` - : tree.exists(`${storybookProjectInfo.configDir}/main.ts`) - ? `${storybookProjectInfo.configDir}/main.ts` - : undefined; - - removeViteTsConfigPathsPlugin(tree, mainJsTsPath); - if (storybookProjectInfo.viteConfigFilePath) { - addViteConfigFilePathInFrameworkOptions( - tree, - mainJsTsPath, - storybookProjectInfo.viteConfigFilePath - ); - } - - changeCoreCommonImportToFramework(tree, mainJsTsPath); - } - ); -} - -export function logResult( - tree: Tree, - migrationSummary: { - successfulProjects: { [key: string]: string }; - failedProjects: { [key: string]: string }; - } -) { - output.log({ - title: `Migration complete!`, - bodyLines: [ - `๐ŸŽ‰ Your Storybook configuration has been migrated to Storybook 7.0.0!`, - `๐Ÿ“– You can see a summary of the tasks that were performed in the storybook-migration-summary.md file in the root of your workspace.`, - ], - color: 'green', - }); - - generateFiles(tree, join(__dirname, 'files'), '.', { - tmpl: '', - successfulProjects: Object.entries( - migrationSummary?.successfulProjects - )?.map(([_projectName, command]) => command), - failedProjects: Object.entries(migrationSummary?.failedProjects)?.map( - ([_projectName, command]) => command - ), - hasFailedProjects: - Object.keys(migrationSummary?.failedProjects)?.length > 0, - hasSuccessfulProjects: - Object.keys(migrationSummary?.successfulProjects)?.length > 0, - }); -} diff --git a/packages/storybook/src/generators/migrate-7/migrate-7.ts b/packages/storybook/src/generators/migrate-7/migrate-7.ts deleted file mode 100644 index 553a1e6878af2d..00000000000000 --- a/packages/storybook/src/generators/migrate-7/migrate-7.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { - addDependenciesToPackageJson, - formatFiles, - GeneratorCallback, - readJson, - runTasksInSerial, - Tree, -} from '@nx/devkit'; - -import { output } from 'nx/src/utils/output'; -import { litVersion } from '../../utils/versions'; -import { callAutomigrate, callUpgrade } from './calling-storybook-cli'; -import { - afterMigration, - checkStorybookInstalled, - checkWebComponentsInstalled, - getAllStorybookInfo, - handleMigrationResult, - logResult, - onlyShowGuide, - prepareFiles, - removeUiFrameworkFromProjectJson, -} from './helper-functions'; -import { Schema } from './schema'; - -export async function migrate7Generator(tree: Tree, schema: Schema) { - const tasks: GeneratorCallback[] = []; - - const packageJson = readJson(tree, 'package.json'); - if (!checkStorybookInstalled(packageJson)) { - output.error({ - title: 'No Storybook packages installed', - bodyLines: [ - `๐Ÿšจ Nx did not find any Storybook packages installed in your workspace.`, - `So no migration is necessary.`, - ], - }); - return; - } - - const allStorybookProjects: { - [key: string]: { - configDir: string; - uiFramework: string; - viteConfigFilePath?: string; - }; - } = getAllStorybookInfo(tree); - - let migrateResult: { - successfulProjects: {}; - failedProjects: {}; - }; - if (schema.onlyShowListOfCommands) { - onlyShowGuide(allStorybookProjects); - return; - } - if (!schema.afterMigration) { - if (!schema.noUpgrade) { - callUpgrade(schema); - } - - if (Object.entries(allStorybookProjects).length) { - prepareFiles(tree, allStorybookProjects); - if (schema.onlyPrepare) { - return; - } - - migrateResult = callAutomigrate(allStorybookProjects, schema); - - migrateResult = handleMigrationResult( - migrateResult, - allStorybookProjects - ); - } - } - output.log({ - title: `Final adjustments`, - bodyLines: [ - `We are now running some final adjustments to your configuration files.`, - `The adjustments are:`, - ` - Remove the "vite-tsconfig-paths" plugin from the Storybook configuration files since it's no longer needed`, - ` - Add the "viteConfigPath" option to the Storybook builder, where needed`, - ` - Change the import package for the StorybookConfig type to be framework specific`, - ` - Add the "lit" package to your workspace, if you are using Web Components`, - ` - Remove the "uiFramework" option from your project's Storybook targets`, - ], - color: 'blue', - }); - - if (Object.entries(allStorybookProjects).length) { - afterMigration(tree, allStorybookProjects); - } - - if (checkWebComponentsInstalled(packageJson)) { - tasks.push(addDependenciesToPackageJson(tree, {}, { lit: litVersion })); - } - - removeUiFrameworkFromProjectJson(tree); - - if (!schema.afterMigration) { - logResult(tree, migrateResult); - } - - await formatFiles(tree); - return runTasksInSerial(...tasks); -} - -export default migrate7Generator; diff --git a/packages/storybook/src/generators/migrate-7/schema.json b/packages/storybook/src/generators/migrate-7/schema.json deleted file mode 100644 index 44b2a7eb59ae79..00000000000000 --- a/packages/storybook/src/generators/migrate-7/schema.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "cli": "nx", - "title": "Migrate Storybook to version 7.", - "description": "Migrate Storybook to version 7.", - "$id": "migrate-7", - "type": "object", - "properties": { - "autoAcceptAllPrompts": { - "type": "boolean", - "description": "Say yes to all the prompts from the Storybook CLI migration scripts.", - "default": false - }, - "onlyShowListOfCommands": { - "type": "boolean", - "description": "Only show the steps that you need to follow in order to migrate. This does NOT make any changes to your code.", - "default": false - }, - "noUpgrade": { - "type": "boolean", - "description": "Skip upgrading Storybook packages. Only use this option if you are already on version 7, and you do not want the latest beta.", - "default": false - }, - "onlyPrepare": { - "type": "boolean", - "description": "Only run the Nx scripts that will prepare your Storybook configuration files for the Storybook CLI automigration.", - "default": false - }, - "afterMigration": { - "type": "boolean", - "description": "Only run the Nx post-migration scripts that make the final adjustments to your workspace.", - "default": false - } - }, - "examplesFile": "../../../docs/migrate-7-generator-examples.md" -} diff --git a/packages/storybook/src/generators/migrate-7/test-configs/all-projects.json b/packages/storybook/src/generators/migrate-7/test-configs/all-projects.json deleted file mode 100644 index bd64ad1e28906d..00000000000000 --- a/packages/storybook/src/generators/migrate-7/test-configs/all-projects.json +++ /dev/null @@ -1,748 +0,0 @@ -{ - "nextapp": { - "name": "nextapp", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/nextapp", - "projectType": "application", - "targets": { - "build": { - "executor": "@nx/next:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { - "root": "apps/nextapp", - "outputPath": "dist/apps/nextapp" - }, - "configurations": { - "development": { "outputPath": "apps/nextapp" }, - "production": {} - } - }, - "serve": { - "executor": "@nx/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 - } - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "apps/nextapp/jest.config.ts", - "passWithNoTests": true - }, - "configurations": { "ci": { "ci": true, "codeCoverage": true } } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/nextapp/**/*.{ts,tsx,js,jsx}"] } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/react", - "port": 4400, - "configDir": "apps/nextapp/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/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-ts": { - "name": "nextapp-ts", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/nextapp-ts", - "projectType": "application", - "targets": { - "build": { - "executor": "@nx/next:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { - "root": "apps/nextapp-ts", - "outputPath": "dist/apps/nextapp-ts" - }, - "configurations": { - "development": { "outputPath": "apps/nextapp-ts" }, - "production": {} - } - }, - "serve": { - "executor": "@nx/next:server", - "defaultConfiguration": "development", - "options": { "buildTarget": "nextapp-ts:build", "dev": true }, - "configurations": { - "development": { - "buildTarget": "nextapp-ts:build:development", - "dev": true - }, - "production": { - "buildTarget": "nextapp-ts:build:production", - "dev": false - } - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "apps/nextapp-ts/jest.config.ts", - "passWithNoTests": true - }, - "configurations": { "ci": { "ci": true, "codeCoverage": true } } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/nextapp-ts/**/*.{ts,tsx,js,jsx}"] - } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/react", - "port": 4400, - "configDir": "apps/nextapp-ts/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/storybook:build", - "outputs": ["{options.outputDir}"], - "options": { - "uiFramework": "@storybook/react", - "outputDir": "dist/storybook/nextapp-ts", - "configDir": "apps/nextapp-ts/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - } - }, - "tags": [], - "root": "apps/nextapp-ts" - }, - "ngapp": { - "name": "ngapp", - "$schema": "../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/ngapp/src", - "prefix": "sbmigrat", - "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": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["apps/ngapp/**/*.ts", "apps/ngapp/**/*.html"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "apps/ngapp/jest.config.ts", - "passWithNoTests": true - }, - "configurations": { "ci": { "ci": true, "codeCoverage": 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-ts": { - "name": "ngapp-ts", - "$schema": "../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/ngapp-ts/src", - "prefix": "sbmigrat", - "targets": { - "build": { - "executor": "@angular-devkit/build-angular:browser", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/apps/ngapp-ts", - "index": "apps/ngapp-ts/src/index.html", - "main": "apps/ngapp-ts/src/main.ts", - "polyfills": ["zone.js"], - "tsConfig": "apps/ngapp-ts/tsconfig.app.json", - "assets": [ - "apps/ngapp-ts/src/favicon.ico", - "apps/ngapp-ts/src/assets" - ], - "styles": ["apps/ngapp-ts/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-ts:build:production" }, - "development": { "browserTarget": "ngapp-ts:build:development" } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { "browserTarget": "ngapp-ts:build" } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": [ - "apps/ngapp-ts/**/*.ts", - "apps/ngapp-ts/**/*.html" - ] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "apps/ngapp-ts/jest.config.ts", - "passWithNoTests": true - }, - "configurations": { "ci": { "ci": true, "codeCoverage": true } } - }, - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - "port": 4400, - "configDir": "apps/ngapp-ts/.storybook", - "browserTarget": "ngapp-ts:build", - "compodoc": false - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - "outputs": ["{options.outputDir}"], - "options": { - "outputDir": "dist/storybook/ngapp-ts", - "configDir": "apps/ngapp-ts/.storybook", - "browserTarget": "ngapp-ts:build", - "compodoc": false - }, - "configurations": { "ci": { "quiet": true } } - } - }, - "tags": [], - "root": "apps/ngapp-ts" - }, - "rv1": { - "name": "rv1", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/rv1/src", - "projectType": "application", - "targets": { - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { "outputPath": "dist/apps/rv1" }, - "configurations": { - "development": { "mode": "development" }, - "production": { "mode": "production" } - } - }, - "serve": { - "executor": "@nx/vite:dev-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "rv1:build" }, - "configurations": { - "development": { - "buildTarget": "rv1:build:development", - "hmr": true - }, - "production": { "buildTarget": "rv1:build:production", "hmr": false } - } - }, - "preview": { - "executor": "@nx/vite:preview-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "rv1:build" }, - "configurations": { - "development": { "buildTarget": "rv1:build:development" }, - "production": { "buildTarget": "rv1:build:production" } - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["coverage/apps/rv1"], - "options": { - "passWithNoTests": true, - "reportsDirectory": "../../coverage/apps/rv1" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/rv1/**/*.{ts,tsx,js,jsx}"] } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/react", - "port": 4400, - "configDir": "apps/rv1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/storybook:build", - "outputs": ["{options.outputDir}"], - "options": { - "uiFramework": "@storybook/react", - "outputDir": "dist/storybook/rv1", - "configDir": "apps/rv1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - } - }, - "tags": [], - "root": "apps/rv1" - }, - "rv2-ts": { - "name": "rv2-ts", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/rv2-ts/src", - "projectType": "application", - "targets": { - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { "outputPath": "dist/apps/rv2-ts" }, - "configurations": { - "development": { "mode": "development" }, - "production": { "mode": "production" } - } - }, - "serve": { - "executor": "@nx/vite:dev-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "rv2-ts:build" }, - "configurations": { - "development": { - "buildTarget": "rv2-ts:build:development", - "hmr": true - }, - "production": { - "buildTarget": "rv2-ts:build:production", - "hmr": false - } - } - }, - "preview": { - "executor": "@nx/vite:preview-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "rv2-ts:build" }, - "configurations": { - "development": { "buildTarget": "rv2-ts:build:development" }, - "production": { "buildTarget": "rv2-ts:build:production" } - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["coverage/apps/rv2-ts"], - "options": { - "passWithNoTests": true, - "reportsDirectory": "../../coverage/apps/rv2-ts" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/rv2-ts/**/*.{ts,tsx,js,jsx}"] } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/react", - "port": 4400, - "configDir": "apps/rv2-ts/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/storybook:build", - "outputs": ["{options.outputDir}"], - "options": { - "uiFramework": "@storybook/react", - "outputDir": "dist/storybook/rv2-ts", - "configDir": "apps/rv2-ts/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - } - }, - "tags": [], - "root": "apps/rv2-ts" - }, - "rw1": { - "name": "rw1", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/rw1/src", - "projectType": "application", - "targets": { - "build": { - "executor": "@nx/webpack:webpack", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { - "compiler": "babel", - "outputPath": "dist/apps/rw1", - "index": "apps/rw1/src/index.html", - "baseHref": "/", - "main": "apps/rw1/src/main.tsx", - "tsConfig": "apps/rw1/tsconfig.app.json", - "assets": ["apps/rw1/src/favicon.ico", "apps/rw1/src/assets"], - "styles": ["apps/rw1/src/styles.css"], - "scripts": [], - "isolatedConfig": true, - "webpackConfig": "apps/rw1/webpack.config.js" - }, - "configurations": { - "development": { - "extractLicenses": false, - "optimization": false, - "sourceMap": true, - "vendorChunk": true - }, - "production": { - "fileReplacements": [ - { - "replace": "apps/rw1/src/environments/environment.ts", - "with": "apps/rw1/src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false - } - } - }, - "serve": { - "executor": "@nx/webpack:dev-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "rw1:build", "hmr": true }, - "configurations": { - "development": { "buildTarget": "rw1:build:development" }, - "production": { "buildTarget": "rw1:build:production", "hmr": false } - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/rw1/**/*.{ts,tsx,js,jsx}"] } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], - "options": { - "jestConfig": "apps/rw1/jest.config.ts", - "passWithNoTests": true - }, - "configurations": { "ci": { "ci": true, "codeCoverage": true } } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/react", - "port": 4400, - "configDir": "apps/rw1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/storybook:build", - "outputs": ["{options.outputDir}"], - "options": { - "uiFramework": "@storybook/react", - "outputDir": "dist/storybook/rw1", - "configDir": "apps/rw1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - } - }, - "tags": [], - "root": "apps/rw1" - }, - "wv1": { - "name": "wv1", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/wv1/src", - "tags": [], - "targets": { - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { "outputPath": "dist/apps/wv1" }, - "configurations": { - "development": { "mode": "development" }, - "production": { "mode": "production" } - } - }, - "serve": { - "executor": "@nx/vite:dev-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "wv1:build" }, - "configurations": { - "development": { - "buildTarget": "wv1:build:development", - "hmr": true - }, - "production": { "buildTarget": "wv1:build:production", "hmr": false } - } - }, - "preview": { - "executor": "@nx/vite:preview-server", - "defaultConfiguration": "development", - "options": { "buildTarget": "wv1:build" }, - "configurations": { - "development": { "buildTarget": "wv1:build:development" }, - "production": { "buildTarget": "wv1:build:production" } - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["coverage/apps/wv1"], - "options": { - "passWithNoTests": true, - "reportsDirectory": "../../coverage/apps/wv1" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/wv1/**/*.ts"] } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/web-components", - "port": 4400, - "configDir": "apps/wv1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/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" - }, - "ww1": { - "name": "ww1", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/ww1/src", - "tags": [], - "targets": { - "build": { - "executor": "@nx/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": "@nx/webpack:dev-server", - "options": { "buildTarget": "ww1:build" }, - "configurations": { - "production": { "buildTarget": "ww1:build:production" } - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["coverage/apps/ww1"], - "options": { - "passWithNoTests": true, - "reportsDirectory": "../../coverage/apps/ww1" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { "lintFilePatterns": ["apps/ww1/**/*.ts"] } - }, - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - "uiFramework": "@storybook/web-components", - "port": 4400, - "configDir": "apps/ww1/.storybook" - }, - "configurations": { "ci": { "quiet": true } } - }, - "build-storybook": { - "executor": "@nx/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" - } -} diff --git a/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts b/packages/storybook/src/generators/migrate-9/calling-storybook-cli.ts similarity index 79% rename from packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts rename to packages/storybook/src/generators/migrate-9/calling-storybook-cli.ts index 5149de1a304272..95bb44b87bb3b4 100644 --- a/packages/storybook/src/generators/migrate-7/calling-storybook-cli.ts +++ b/packages/storybook/src/generators/migrate-9/calling-storybook-cli.ts @@ -1,9 +1,14 @@ -import { getPackageManagerCommand, output } from '@nx/devkit'; +import { + detectPackageManager, + getPackageManagerCommand, + output, +} from '@nx/devkit'; import { execSync } from 'child_process'; import { Schema } from './schema'; export function callUpgrade(schema: Schema): 1 | Buffer { - const pm = getPackageManagerCommand(); + const packageManager = detectPackageManager(); + const pm = getPackageManagerCommand(packageManager); try { output.log({ title: `Calling sb upgrade`, @@ -15,9 +20,9 @@ export function callUpgrade(schema: Schema): 1 | Buffer { }); execSync( - `${pm.dlx} storybook@latest upgrade ${ - schema.autoAcceptAllPrompts ? '--yes' : '' - }`, + `${pm.dlx} ${ + packageManager === 'yarn' ? 'storybook' : 'storybook@latest' + } upgrade ${schema.autoAcceptAllPrompts ? '--yes' : ''}`, { stdio: [0, 1, 2], windowsHide: false, @@ -38,7 +43,7 @@ export function callUpgrade(schema: Schema): 1 | Buffer { bodyLines: [ `๐Ÿšจ The Storybook CLI failed to upgrade your @storybook/* packages to the latest version.`, `Please try running the sb upgrade command manually:`, - `${pm.exec} storybook@latest upgrade`, + `${pm.exec} storybook@${schema.versionTag} upgrade`, ], color: 'red', }); @@ -51,8 +56,6 @@ export function callAutomigrate( allStorybookProjects: { [key: string]: { configDir: string; - uiFramework: string; - viteConfigFilePath?: string; }; }, schema: Schema @@ -73,8 +76,9 @@ export function callAutomigrate( Object.entries(allStorybookProjects).forEach( ([projectName, storybookProjectInfo]) => { - const pm = getPackageManagerCommand(); - const commandToRun = `${pm.dlx} storybook@latest automigrate --config-dir ${storybookProjectInfo.configDir} --renderer ${storybookProjectInfo.uiFramework}`; + const packageManager = detectPackageManager(); + const pm = getPackageManagerCommand(packageManager); + const commandToRun = `${pm.dlx} storybook automigrate --config-dir ${storybookProjectInfo.configDir}`; try { output.log({ title: `Calling sb automigrate for ${projectName}`, @@ -87,6 +91,9 @@ export function callAutomigrate( { stdio: 'inherit', windowsHide: false, + env: { + STORYBOOK_PROJECT_ROOT: storybookProjectInfo.configDir, + }, } ); diff --git a/packages/storybook/src/generators/migrate-9/files/storybook-migration-summary.md__tmpl__ b/packages/storybook/src/generators/migrate-9/files/storybook-migration-summary.md__tmpl__ new file mode 100644 index 00000000000000..de9b9e8d944edd --- /dev/null +++ b/packages/storybook/src/generators/migrate-9/files/storybook-migration-summary.md__tmpl__ @@ -0,0 +1,55 @@ +# Storybook 9 Migration Summary + +## Upgrade Storybook packages + +The following command was ran to upgrade the Storybook packages: + +```bash +npx storybook@latest upgrade +``` + +## The Storybook automigration scripts were ran + +<% if ( hasSuccessfulProjects ) { %> +The following commands ran successfully and your Storybook configuration was successfully migrated to the latest version 9: + +<% for (let command of successfulProjects) { %> +- `<%= command %>` +<% } %> + +Please make sure to check the results yourself and make sure that everything is working as expected. +<% } %> + +<% if ( hasFailedProjects ) { %> +### Some migrations failed + +The following commands failed and your Storybook configuration for these projects was not +migrated to the latest version 9: + +<% for (let command of failedProjects) { %> +- `<%= command %>` +<% } %> + +You can run these commands again, manually, and follow the instructions in the +output of these commands to migrate your Storybook configuration to the latest version 9. +<% } %> + +Also, we may have missed something. Please make sure to check the logs of the Storybook CLI commands that were run, and look for +the `โŒ Failed trying to evaluate` message or `โŒ The migration failed to update` message. This will indicate if a command was +unsuccessful, and will help you run the migration again, manually. + +## Next steps + +You can make sure everything is working as expected by trying +to build or serve your Storybook as you normally would. + +```bash +npx nx build-storybook project-name +``` + +```bash +npx nx storybook project-name +``` + +Please read the [Storybook 9.0.0 migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) +for more information. diff --git a/packages/storybook/src/generators/migrate-9/helper-functions.ts b/packages/storybook/src/generators/migrate-9/helper-functions.ts new file mode 100644 index 00000000000000..99f28c96c32916 --- /dev/null +++ b/packages/storybook/src/generators/migrate-9/helper-functions.ts @@ -0,0 +1,215 @@ +import { + generateFiles, + getPackageManagerCommand, + output, + Tree, + workspaceRoot, + visitNotIgnoredFiles, + joinPathFragments, + readJson, + detectPackageManager, +} from '@nx/devkit'; +import { fileExists } from 'nx/src/utils/fileutils'; +import { readFileSync } from 'fs'; +import { dirname, join } from 'path'; + +export function onlyShowGuide(storybookProjects: { + [key: string]: { + configDir: string; + }; +}) { + const packageManager = detectPackageManager(); + const pm = getPackageManagerCommand(packageManager); + + output.log({ + title: 'Storybook 8 Migration Guide', + bodyLines: [ + `You can run the following commands manually to upgrade your Storybook projects to Storybook 8:`, + ``, + `1. Call the Storybook upgrade script:`, + `${pm.exec} ${ + packageManager === 'yarn' ? 'storybook' : 'storybook@latest' + } upgrade`, + ``, + `2. Call the Storybook automigrate scripts:`, + `Run the following commands for each Storybook project:`, + ...Object.entries(storybookProjects).map( + ([_projectName, storybookProjectInfo]) => { + return `${pm.exec} ${ + packageManager === 'yarn' ? 'storybook' : 'storybook@latest' + } automigrate --config-dir ${storybookProjectInfo.configDir}`; + } + ), + ``, + ], + }); +} + +export function getAllStorybookInfo(tree: Tree): { + [key: string]: { + configDir: string; + }; +} { + const allStorybookDirs: { [key: string]: { configDir: string } } = {}; + + const extensions = ['ts', 'js', 'cjs', 'mts', 'mjs', 'cts']; + const isStorybookMainFile = (path: string) => + extensions.some((ext) => path.endsWith(`.storybook/main.${ext}`)); + + visitNotIgnoredFiles(tree, '', (storybookConfigPath) => { + if (isStorybookMainFile(storybookConfigPath)) { + return; + } + const storybookConfigDir = dirname(storybookConfigPath); + + let projectRoot = ''; + if (storybookConfigPath.includes('/.storybook')) { + projectRoot = storybookConfigDir.replace('/.storybook', ''); + } else { + projectRoot = storybookConfigDir.replace('.storybook', ''); + } + + if (projectRoot === '') { + projectRoot = '.'; + } + + const packageOrProjectJson = [ + joinPathFragments(projectRoot, 'package.json'), + joinPathFragments(projectRoot, 'project.json'), + ].find((p) => tree.exists(p)); + if (!packageOrProjectJson) { + return; + } + + const projectName = readJson(tree, packageOrProjectJson)?.name; + if (!projectName) { + return; + } + allStorybookDirs[projectName] = { + configDir: storybookConfigDir, + }; + }); + + return allStorybookDirs; +} + +export function handleMigrationResult( + migrateResult: { + successfulProjects: {}; + failedProjects: {}; + }, + allStorybookProjects: { + [key: string]: { + configDir: string; + }; + } +): { successfulProjects: {}; failedProjects: {} } { + if ( + fileExists(join(workspaceRoot, 'migration-storybook.log')) && + Object.keys(migrateResult.successfulProjects)?.length + ) { + const sbLogFile = readFileSync( + join(workspaceRoot, 'migration-storybook.log'), + 'utf-8' + ); + Object.keys(migrateResult.successfulProjects).forEach((projectName) => { + if ( + sbLogFile.includes( + `The migration failed to update your ${allStorybookProjects[projectName].configDir}` + ) + ) { + migrateResult.failedProjects[projectName] = + migrateResult.successfulProjects[projectName]; + delete migrateResult.successfulProjects[projectName]; + } + }); + } + + if ( + Object.keys(allStorybookProjects)?.length === + Object.keys(migrateResult.successfulProjects)?.length || + Object.keys(migrateResult.failedProjects)?.length === 0 + ) { + output.log({ + title: `Storybook configuration migrated.`, + bodyLines: [ + `โ˜‘๏ธ The automigrate command was successful.`, + `All your projects were migrated successfully.`, + ], + color: 'green', + }); + } else { + if (Object.keys(migrateResult.failedProjects).length) { + if (Object.keys(migrateResult.failedProjects).length) { + output.log({ + title: `Storybook configuration migrated.`, + bodyLines: [ + `โ˜‘๏ธ The automigrate command was successful.`, + `The following projects were migrated successfully:`, + ...Object.keys(migrateResult.successfulProjects).map( + (project) => ` - ${project}` + ), + ], + color: 'green', + }); + } + + output.log({ + title: `Failed migrations.`, + bodyLines: [ + `There were some projects that were not migrated successfully.`, + `โš ๏ธ The following projects were not migrated successfully:`, + ...Object.keys(migrateResult.failedProjects).map( + (project) => ` - ${project}` + ), + `You can run the following commands to migrate them manually:`, + ...Object.entries(migrateResult.failedProjects).map( + ([_project, command]) => `- ${command}` + ), + ], + color: 'red', + }); + } + } + return migrateResult; +} + +export function checkStorybookInstalled(packageJson): boolean { + return ( + (packageJson.dependencies['storybook'] || + packageJson.devDependencies['storybook']) && + (packageJson.dependencies['@nx/storybook'] || + packageJson.devDependencies['@nx/storybook']) + ); +} + +export function logResult( + tree: Tree, + migrationSummary: { + successfulProjects: { [key: string]: string }; + failedProjects: { [key: string]: string }; + } +) { + output.log({ + title: `Migration complete!`, + bodyLines: [ + `๐ŸŽ‰ Your Storybook configuration has been migrated to Storybook ^9.0.0!`, + `๐Ÿ“– You can see a summary of the tasks that were performed in the storybook-migration-summary.md file in the root of your workspace.`, + ], + color: 'green', + }); + + generateFiles(tree, join(__dirname, 'files'), '.', { + tmpl: '', + successfulProjects: Object.entries( + migrationSummary?.successfulProjects + )?.map(([_projectName, command]) => command), + failedProjects: Object.entries(migrationSummary?.failedProjects)?.map( + ([_projectName, command]) => command + ), + hasFailedProjects: + Object.keys(migrationSummary?.failedProjects)?.length > 0, + hasSuccessfulProjects: + Object.keys(migrationSummary?.successfulProjects)?.length > 0, + }); +} diff --git a/packages/storybook/src/generators/migrate-9/migrate-9.ts b/packages/storybook/src/generators/migrate-9/migrate-9.ts new file mode 100644 index 00000000000000..ccc35701a50f5e --- /dev/null +++ b/packages/storybook/src/generators/migrate-9/migrate-9.ts @@ -0,0 +1,56 @@ +import { formatFiles, readJson, Tree } from '@nx/devkit'; + +import { output } from 'nx/src/utils/output'; +import { callAutomigrate, callUpgrade } from './calling-storybook-cli'; +import { + checkStorybookInstalled, + getAllStorybookInfo, + handleMigrationResult, + logResult, + onlyShowGuide, +} from './helper-functions'; +import { Schema } from './schema'; + +export async function migrate9Generator(tree: Tree, schema: Schema) { + schema.versionTag = schema.versionTag ?? 'latest'; + const packageJson = readJson(tree, 'package.json'); + if (!checkStorybookInstalled(packageJson)) { + output.error({ + title: 'No Storybook packages installed', + bodyLines: [ + `๐Ÿšจ Nx did not find any Storybook packages installed in your workspace.`, + `So no migration is necessary.`, + ], + }); + return; + } + + const allStorybookProjects: { + [key: string]: { + configDir: string; + }; + } = getAllStorybookInfo(tree); + + if (schema.onlyShowListOfCommands) { + onlyShowGuide(allStorybookProjects); + return; + } + if (!schema.noUpgrade) { + callUpgrade(schema); + } + + if (Object.entries(allStorybookProjects).length) { + let migrateResult: { + successfulProjects: {}; + failedProjects: {}; + }; + migrateResult = callAutomigrate(allStorybookProjects, schema); + + migrateResult = handleMigrationResult(migrateResult, allStorybookProjects); + logResult(tree, migrateResult); + } + + await formatFiles(tree); +} + +export default migrate9Generator; diff --git a/packages/storybook/src/generators/migrate-7/schema.d.ts b/packages/storybook/src/generators/migrate-9/schema.d.ts similarity index 69% rename from packages/storybook/src/generators/migrate-7/schema.d.ts rename to packages/storybook/src/generators/migrate-9/schema.d.ts index b204e28928654e..aec9549fcbfb80 100644 --- a/packages/storybook/src/generators/migrate-7/schema.d.ts +++ b/packages/storybook/src/generators/migrate-9/schema.d.ts @@ -2,6 +2,5 @@ export interface Schema { autoAcceptAllPrompts?: boolean; onlyShowListOfCommands?: boolean; noUpgrade?: boolean; - onlyPrepare?: boolean; - afterMigration?: boolean; + versionTag: 'latest' | 'next'; } diff --git a/packages/storybook/src/generators/migrate-9/schema.json b/packages/storybook/src/generators/migrate-9/schema.json new file mode 100644 index 00000000000000..946c82811f6075 --- /dev/null +++ b/packages/storybook/src/generators/migrate-9/schema.json @@ -0,0 +1,31 @@ +{ + "cli": "nx", + "title": "Migrate Storybook to version 9.", + "description": "Migrate Storybook to version 9.", + "$id": "migrate-9", + "type": "object", + "properties": { + "autoAcceptAllPrompts": { + "type": "boolean", + "description": "Say yes to all the prompts from the Storybook CLI migration scripts.", + "default": false + }, + "onlyShowListOfCommands": { + "type": "boolean", + "description": "Only show the steps that you need to follow in order to migrate. This does NOT make any changes to your code.", + "default": false + }, + "noUpgrade": { + "type": "boolean", + "description": "Skip upgrading Storybook packages. Only use this option if you are already on version 9, and you do not want to install the packages again.", + "default": false + }, + "versionTag": { + "type": "string", + "description": "The version of Storybook to use. Use 'latest' to use the latest stable version, or 'next' to use the latest beta.", + "default": "latest", + "enum": ["latest", "next"] + } + }, + "examplesFile": "../../../docs/migrate-9-generator-examples.md" +} diff --git a/packages/storybook/src/migrations/update-21-1-0/update-sb-9.ts b/packages/storybook/src/migrations/update-21-1-0/update-sb-9.ts new file mode 100644 index 00000000000000..61662c7d1d3a8d --- /dev/null +++ b/packages/storybook/src/migrations/update-21-1-0/update-sb-9.ts @@ -0,0 +1,33 @@ +import { Tree } from '@nx/devkit'; +import { output } from 'nx/src/utils/output'; +import migrate9Generator from '../../generators/migrate-9/migrate-9'; +import { storybookMajorVersion } from '../../utils/utilities'; + +export default async function changeStorybookTargets(tree: Tree) { + const storybookVersion = storybookMajorVersion(); + if (!storybookVersion) { + /** + * This just checks if Storybook is installed in the workspace. + * The thing here is that during the previous step of the migration, + * during packageJsonUpdates, Nx has already set Storybook + * to version 9, if Storybook exists in the workspace. + * So, it makes no sense here to check if the version is + * 8, because it will always be. + */ + return; + } + + output.log({ + title: 'Migrating Storybook to v9', + bodyLines: [ + `๐Ÿš€ This migration will update your Storybook configuration to v9.`, + `It will call the @nx/storybook:migrate-9 generator for you.`, + `You can read more about the migration and how this generator works here:`, + `https://nx.dev/nx-api/storybook/generators/migrate-9`, + ], + }); + return migrate9Generator(tree, { + autoAcceptAllPrompts: true, + versionTag: 'latest', + }); +} diff --git a/packages/storybook/src/plugins/plugin.spec.ts b/packages/storybook/src/plugins/plugin.spec.ts index fee1fb9438a0fc..f2ecd470873f6e 100644 --- a/packages/storybook/src/plugins/plugin.spec.ts +++ b/packages/storybook/src/plugins/plugin.spec.ts @@ -1,6 +1,6 @@ import { CreateNodesContext } from '@nx/devkit'; import { TempFs } from '@nx/devkit/internal-testing-utils'; -import type { StorybookConfig } from '@storybook/types'; +import type { StorybookConfig } from 'storybook/internal/types'; import { join } from 'node:path'; import { createNodesV2 } from './plugin'; diff --git a/packages/storybook/src/plugins/plugin.ts b/packages/storybook/src/plugins/plugin.ts index e350233db0fe50..1851d5f28c6f40 100644 --- a/packages/storybook/src/plugins/plugin.ts +++ b/packages/storybook/src/plugins/plugin.ts @@ -20,7 +20,7 @@ import { calculateHashForCreateNodes } from '@nx/devkit/src/utils/calculate-hash import { workspaceDataDirectory } from 'nx/src/utils/cache-directory'; import { getLockFileName } from '@nx/js'; import { loadConfigFile } from '@nx/devkit/src/utils/config-utils'; -import type { StorybookConfig } from '@storybook/types'; +import type { StorybookConfig } from 'storybook/internal/types'; import { hashObject } from 'nx/src/hasher/file-hasher'; export interface StorybookPluginOptions { diff --git a/packages/storybook/src/utils/utilities.spec.ts b/packages/storybook/src/utils/utilities.spec.ts index 2fe57be4a7e6a3..a4002ed6c9a184 100644 --- a/packages/storybook/src/utils/utilities.spec.ts +++ b/packages/storybook/src/utils/utilities.spec.ts @@ -16,7 +16,7 @@ describe('testing utilities', () => { appTree.write( `test-ui-lib/src/lib/button/button.component.stories.ts`, ` - import { Story, Meta } from '@storybook/react'; + import { Story, Meta } from '@storybook/react-webpack5'; import { Button } from './button'; export default { @@ -34,7 +34,7 @@ describe('testing utilities', () => { appTree.write( `test-ui-lib/src/lib/button/button.other.stories.ts`, ` - import type { Meta } from '@storybook/react'; + import type { Meta } from '@storybook/react-webpack5'; import { Button } from './button'; const Story: Meta = { @@ -62,7 +62,7 @@ describe('testing utilities', () => { `test-ui-lib/src/lib/button/button.test.stories.ts`, ` import { Button } from './button'; - import * as Storybook from '@storybook/react'; + import * as Storybook from '@storybook/react-webpack5'; // test test ` @@ -80,7 +80,7 @@ describe('testing utilities', () => { appTree.write( `test-ui-lib/src/lib/button/button.component.new-syntax.ts`, ` - import { ComponentStory } from '@storybook/react'; + import { ComponentStory } from '@storybook/react-webpack5'; // test test ` diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index bb56e2111bcbcd..31f72d12bb83de 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -38,7 +38,7 @@ type Constants = typeof Constants; export function storybookMajorVersion(): number | undefined { try { const storybookPackageVersion = require(join( - '@storybook/core-server', + 'storybook', 'package.json' )).version; return major(storybookPackageVersion); @@ -50,7 +50,7 @@ export function storybookMajorVersion(): number | undefined { export function getInstalledStorybookVersion(): string | undefined { try { const storybookPackageVersion = require(join( - '@storybook/core-server', + 'storybook', 'package.json' )).version; return storybookPackageVersion; @@ -249,10 +249,10 @@ export function getTsSourceFile(host: Tree, path: string): ts.SourceFile { export function pleaseUpgrade(): string { return ` - Storybook 6 and lower are no longer maintained, and not supported in Nx. - Please upgrade to Storybook 7. + Storybook 7 and lower are no longer maintained, and not supported in Nx. + Please upgrade to Storybook 8. Here is a guide on how to upgrade: - https://nx.dev/nx-api/storybook/generators/migrate-7 + https://nx.dev/nx-api/storybook/generators/migrate-8 `; } diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index 7fab78e6f5ea43..6904cb2c893bb0 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -6,7 +6,7 @@ export const litVersion = '^2.6.1'; export const tsNodeVersion = '10.9.1'; export const tsLibVersion = '^2.3.0'; -export const storybookVersion = '^8.6.11'; +export const storybookVersion = '^9.0.0-rc.0'; export const reactVersion = '^18.2.0'; export const viteVersion = '^6.0.0'; diff --git a/packages/vue/src/generators/stories/stories.lib.spec.ts b/packages/vue/src/generators/stories/stories.lib.spec.ts index 0ed55eabe76b8f..df3f5413af1a95 100644 --- a/packages/vue/src/generators/stories/stories.lib.spec.ts +++ b/packages/vue/src/generators/stories/stories.lib.spec.ts @@ -46,13 +46,6 @@ describe('vue:stories for libraries', () => { ).toMatchSnapshot(); const packageJson = JSON.parse(appTree.read('package.json', 'utf-8')); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should create the stories without interaction tests', async () => { diff --git a/packages/vue/src/generators/stories/stories.ts b/packages/vue/src/generators/stories/stories.ts index 2e8eaffc10db36..d70251f8540146 100644 --- a/packages/vue/src/generators/stories/stories.ts +++ b/packages/vue/src/generators/stories/stories.ts @@ -89,21 +89,9 @@ export async function storiesGenerator( schema.ignorePaths ); - const tasks: GeneratorCallback[] = []; - - if (schema.interactionTests) { - const { interactionTestsDependencies, addInteractionsInAddons } = - ensurePackage('@nx/storybook', nxVersion); - tasks.push( - addDependenciesToPackageJson(host, {}, interactionTestsDependencies()) - ); - addInteractionsInAddons(host, projectConfiguration); - } - if (!schema.skipFormat) { await formatFiles(host); } - return runTasksInSerial(...tasks); } export default storiesGenerator; diff --git a/packages/vue/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/vue/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap index ebb6c1816241d9..cd3f16dce3d544 100644 --- a/packages/vue/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/vue/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap @@ -9,7 +9,7 @@ import vue from '@vitejs/plugin-vue'; const config: StorybookConfig = { stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [], framework: { name: '@storybook/vue3-vite', options: {}, diff --git a/packages/vue/src/generators/storybook-configuration/configuration.spec.ts b/packages/vue/src/generators/storybook-configuration/configuration.spec.ts index 5ecd74744b1c7e..cdfd2866619df5 100644 --- a/packages/vue/src/generators/storybook-configuration/configuration.spec.ts +++ b/packages/vue/src/generators/storybook-configuration/configuration.spec.ts @@ -54,13 +54,6 @@ describe('vue:storybook-configuration', () => { const packageJson = JSON.parse(appTree.read('package.json', 'utf-8')); expect(packageJson.devDependencies['@storybook/vue3-vite']).toBeDefined(); expect(packageJson.devDependencies['@storybook/vue3']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/addon-interactions'] - ).toBeDefined(); - expect(packageJson.devDependencies['@storybook/test-runner']).toBeDefined(); - expect( - packageJson.devDependencies['@storybook/testing-library'] - ).toBeDefined(); }); it('should generate stories for components', async () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a71c9df64d1719..26c9a514f337a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -441,30 +441,15 @@ importers: '@schematics/angular': specifier: ~19.2.0 version: 19.2.0(chokidar@3.6.0) - '@storybook/addon-essentials': - specifier: 8.4.6 - version: 8.4.6(@types/react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) - '@storybook/addon-interactions': - specifier: 8.4.6 - version: 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/core-server': - specifier: 8.4.6 - version: 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/react': - specifier: 8.4.6 - version: 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) + '@storybook/addon-docs': + specifier: 9.0.0-rc.0 + version: 9.0.0-rc.0(@types/react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) '@storybook/react-vite': - specifier: 8.4.6 - version: 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.22.0)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3) + specifier: 9.0.0-rc.0 + version: 9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.22.0)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3) '@storybook/react-webpack5': - specifier: 8.4.6 - version: 8.4.6(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) - '@storybook/test': - specifier: ^8.5.1 - version: 8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/types': - specifier: ^8.4.6 - version: 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + specifier: 9.0.0-rc.0 + version: 9.0.0-rc.0(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) '@supabase/supabase-js': specifier: ^2.26.0 version: 2.45.4(bufferutil@4.0.7) @@ -1000,11 +985,11 @@ importers: specifier: 0.5.19 version: 0.5.19 storybook: - specifier: ^8.4.6 - version: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + specifier: 9.0.0-rc.0 + version: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) storybook-dark-mode: specifier: ^4.0.2 - version: 4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + version: 4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) style-loader: specifier: ^3.3.0 version: 3.3.4(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) @@ -4512,8 +4497,8 @@ packages: resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - '@joshwooding/vite-plugin-react-docgen-typescript@0.4.2': - resolution: {integrity: sha512-feQ+ntr+8hbVudnsTUapiMN9q8T90XA1d5jn9QzY09sNoj4iD9wi0PY1vsBFTda4ZjEaxRK9S81oarR2nj7TFQ==} + '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0': + resolution: {integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==} peerDependencies: typescript: '>= 4.3.x' vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 @@ -4677,8 +4662,8 @@ packages: '@mdx-js/mdx@3.1.0': resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==} - '@mdx-js/react@3.0.1': - resolution: {integrity: sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==} + '@mdx-js/react@3.1.0': + resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==} peerDependencies: '@types/react': '>=16' react: '>=16' @@ -7471,83 +7456,21 @@ packages: '@stackblitz/sdk@1.11.0': resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==} - '@storybook/addon-actions@8.4.6': - resolution: {integrity: sha512-vbplwjMj7UXbdzoFhQkqFHLQAPJX8OVGTM9Q+yjuWDHViaKKUlgRWp0jclT7aIDNJQU2a6wJbTimHgJeF16Vhg==} + '@storybook/addon-docs@9.0.0-rc.0': + resolution: {integrity: sha512-evSK+ylGjPOF6MktM+Kc3xadQogwZSahwv+LE41d3Y1NsnALmFNDszjQ022ZYp95KoIJv4COGSomSDuFmLJa/g==} peerDependencies: - storybook: ^8.4.6 + storybook: ^9.0.0-rc.0 - '@storybook/addon-backgrounds@8.4.6': - resolution: {integrity: sha512-RSjJ3iElxlQXebZrz1s5LeoLpAXr9LAGifX7w0abMzN5sg6QSwNeUHko2eT3V57M3k1Fa/5Eelso/QBQifFEog==} + '@storybook/builder-vite@9.0.0-rc.0': + resolution: {integrity: sha512-z0VUmeKDPv5dhP2XUu6ruJMCZFF6YW4Vn2riIz7s462ezjMaMPrA+mNOfpgXIWQbj/WJrprR1TjlNXjS/4q6gA==} peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-controls@8.4.6': - resolution: {integrity: sha512-70pEGWh0C2g8s0DYsISElOzsMbQS6p/K9iU5EqfotDF+hvEqstjsV/bTbR5f3OK4vR/7Gxamk7j8RVd14Nql6A==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-docs@8.4.6': - resolution: {integrity: sha512-olxz61W7PW/EsXrKhLrYbI3rn9GMBhY3KIOF/6tumbRkh0Siu/qe4EAImaV9NNwiC1R7+De/1OIVMY6o0EIZVw==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-essentials@8.4.6': - resolution: {integrity: sha512-TbFqyvWFUKw8LBpVcZuGQydzVB/3kSuHxDHi+Wj3Qas3cxBl7+w4/HjwomT2D2Tni1dZ1uPDOsAtNLmwp1POsg==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-highlight@8.4.6': - resolution: {integrity: sha512-m8wedbqDMbwkP99dNHkHAiAUkx5E7FEEEyLPX1zfkhZWOGtTkavXHH235SGp50zD75LQ6eC/BvgegrzxSQa9Wg==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-interactions@8.4.6': - resolution: {integrity: sha512-sR2oUSYIGUoAdrHT+fM1zgykhad98bsJ11c79r7HfBMXEPWc1yRcjIMmz8Xz06FMROMfebqduYDf60V++/I0Jw==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-measure@8.4.6': - resolution: {integrity: sha512-N2IRpr39g5KpexCAS1vIHJT+phc9Yilwm3PULds2rQ66VMTbkxobXJDdt0NS05g5n9/eDniroNQwdCeLg4tkpw==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-outline@8.4.6': - resolution: {integrity: sha512-EhcWx8OpK85HxQulLWzpWUHEwQpDYuAiKzsFj9ivAbfeljkIWNTG04mierfaH1xX016uL9RtLJL/zwBS5ChnFg==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-toolbars@8.4.6': - resolution: {integrity: sha512-+Xao/uGa8FnYsyUiREUkYXWNysm3Aba8tL/Bwd+HufHtdiKJGa9lrXaC7VLCqBUaEjwqM3aaPwqEWIROsthmPQ==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/addon-viewport@8.4.6': - resolution: {integrity: sha512-BuQll5YzOCpMS7p5Rsw9wcmi8hTnEKyg6+qAbkZNfiZ2JhXCa1GFUqX725fF1whpYVQULtkQxU8r+vahoRn7Yg==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/blocks@8.4.6': - resolution: {integrity: sha512-Gzbx8hM7ZQIHlQELcFIMbY1v+r1Po4mlinq0QVPtKS4lBcW4eZIsesbxOaL+uFNrxb583TLFzXo0DbRPzS46sg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - - '@storybook/builder-vite@8.4.6': - resolution: {integrity: sha512-PyJsaEPyuRFFEplpNUi+nbuJd7d1DC2dAZjpsaHTXyqg5iPIbkIgsbCJLUDeIXnUDqM/utjmMpN0sQKJuhIc6w==} - peerDependencies: - storybook: ^8.4.6 - vite: ^4.0.0 || ^5.0.0 || ^6.0.0 + storybook: ^9.0.0-rc.0 + vite: ^5.0.0 || ^6.0.0 - '@storybook/builder-webpack5@8.4.6': - resolution: {integrity: sha512-/ZInCFk2myJZinnAU05bATe+9iJn3+YRoxl+CUpYljxzsjoqb7iAwaNaMNolZCDOnMj24Kg2Pt87WtzAhu+ilw==} + '@storybook/builder-webpack5@9.0.0-rc.0': + resolution: {integrity: sha512-oaa8cBl75ZedR13t+sr9CsI1gSuu0F6xeB057Z00LxpnDdEZnPjNSqmQ/WqjP3s2Hga0iW+u22djDTiE3wV4tA==} peerDependencies: - storybook: ^8.4.6 + storybook: ^9.0.0-rc.0 typescript: '*' peerDependenciesMeta: typescript: @@ -7558,48 +7481,24 @@ packages: peerDependencies: storybook: ^8.3.2 - '@storybook/components@8.4.6': - resolution: {integrity: sha512-9tKSJJCyFT5RZMRGyozTBJkr9C9Yfk1nuOE9XbDEE1Z+3/IypKR9+iwc5mfNBStDNY+rxtYWNLKBb5GPR2yhzA==} - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - '@storybook/core-events@8.3.2': resolution: {integrity: sha512-Nf63X2MLIiw1Czc/zxZ1hWLCNr6+NujJb6Dy96pgcGYLiKduFi9nKPG5eP0VEXpPWFWOc7ccCPxZ+Iw0q+USPw==} peerDependencies: storybook: ^8.3.2 - '@storybook/core-server@8.4.6': - resolution: {integrity: sha512-FQm9G4XSXKwDHTmoNadRoPloPPKqlluCwoukdNQw/Shdne77PXZDPCICkL2w25kaVoGwnh9AOh47WrggG83r5Q==} + '@storybook/core-webpack@9.0.0-rc.0': + resolution: {integrity: sha512-MVp6DCNL8KKaM38o6WK8X7R35JlFCTNiJA566Rug3nKxsGdaRCslT4C4jPtW4aOuEoyDSOHrdnettV43tZFACA==} peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + storybook: ^9.0.0-rc.0 - '@storybook/core-webpack@8.4.6': - resolution: {integrity: sha512-5NE4pUy0iHKc8UKHm7A7SikxSMOO92udl7kcBUlQKwcAgrAk1rFpvfXGodDb48AVgfK+07qAOSjBm7GcZ7X1jw==} + '@storybook/csf-plugin@9.0.0-rc.0': + resolution: {integrity: sha512-6bGUD69+qWjG4OFYh6+ibA+ehGBAo4fvNAyGjMiUZyiUIg1Fb2X34G/PKYFoYsBQay0MOpcjan9SwiZquYnO4A==} peerDependencies: - storybook: ^8.4.6 - - '@storybook/core@8.4.6': - resolution: {integrity: sha512-WeojVtHy0/t50tzw/15S+DLzKsj8BN9yWdo3vJMvm+nflLFvfq1XvD9WGOWeaFp8E/o3AP+4HprXG0r42KEJtA==} - peerDependencies: - prettier: ^2 || ^3 - peerDependenciesMeta: - prettier: - optional: true - - '@storybook/csf-plugin@8.4.6': - resolution: {integrity: sha512-JDIT0czC4yMgKGNf39KTZr3zm5MusAZdn6LBrTfvWb7CrTCR4iVHa4lp2yb7EJk41vHsBec0QUYDDuiFH/vV0g==} - peerDependencies: - storybook: ^8.4.6 + storybook: ^9.0.0-rc.0 '@storybook/csf@0.0.1': resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==} - '@storybook/csf@0.1.11': - resolution: {integrity: sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==} - - '@storybook/csf@0.1.12': - resolution: {integrity: sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==} - '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} @@ -7610,117 +7509,74 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - '@storybook/instrumenter@8.4.6': - resolution: {integrity: sha512-snXjlgbp065A6KoK9zkjBYEIMCSlN5JefPKzt1FC0rbcbtahhD+iPpqISKhDSczwgOku/JVhVUDp/vU7AIf4mg==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/instrumenter@8.5.1': - resolution: {integrity: sha512-wMAhsIzwOh/xXKANAP3IbtXxRWFAZtpRisB0sy8WVTPS3a1L1cA6X+U80Ex/omek6L0FZwKZSKmmfkDeZkYnCQ==} - peerDependencies: - storybook: ^8.5.1 - '@storybook/manager-api@8.3.2': resolution: {integrity: sha512-8FuwE3BGsLPF0H154+1X/4krSbvmH5xu5YmaVTVDV8DRPlBeRIlNV0HDiZfBvftF4EB7fRYolzghXQplHIX8Fg==} peerDependencies: storybook: ^8.3.2 - '@storybook/manager-api@8.4.6': - resolution: {integrity: sha512-TsXlQ5m5rTl2KNT9icPFyy822AqXrx1QplZBt/L7cFn7SpqQKDeSta21FH7MG0piAvzOweXebVSqKngJ6cCWWQ==} - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - - '@storybook/preset-react-webpack@8.4.6': - resolution: {integrity: sha512-4AdsRug6NaWras/bbcFx7KEnJY5GLt3REPlSqMtZwhdY3f7LF0W++Wyo/F2ly82f57welquGURyL+YxjQ9yFkA==} - engines: {node: '>=18.0.0'} + '@storybook/preset-react-webpack@9.0.0-rc.0': + resolution: {integrity: sha512-pEd4GLVLU8Tjy2drPY7IrRioNZm5u3ffmNWrRaxwhxvs2c7P/AAN39ZizuOesHjY4apLulFhKW87q7OufbbAcA==} + engines: {node: '>=20.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 + storybook: ^9.0.0-rc.0 typescript: '*' peerDependenciesMeta: typescript: optional: true - '@storybook/preview-api@8.4.6': - resolution: {integrity: sha512-LbD+lR1FGvWaJBXteVx5xdgs1x1D7tyidBg2CsW2ex+cP0iJ176JgjPfutZxlWOfQnhfRYNnJ3WKoCIfxFOTKA==} - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0': resolution: {integrity: sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==} peerDependencies: typescript: '>= 4.x' webpack: '>= 4' - '@storybook/react-dom-shim@8.4.6': - resolution: {integrity: sha512-f7RM8GO++fqMxbjNdEzeGS1P821jXuwRnAraejk5hyjB5SqetauFxMwoFYEYfJXPaLX2qIubnIJ78hdJ/IBaEA==} + '@storybook/react-dom-shim@9.0.0-rc.0': + resolution: {integrity: sha512-i26iT1SKoGc0FB4Ahc0CTHlkWJwsnfKSfhgI2xtfQjaQa136C0DecTsal90c6EYSqaKNcxxOiamnwSsg27UHtw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 + storybook: ^9.0.0-rc.0 - '@storybook/react-vite@8.4.6': - resolution: {integrity: sha512-bVoYj3uJRz0SknK2qN3vBVSoEXsvyARQLuHjP9eX0lWBd9XSxZinmVbexPdD0OeJYcJIdmbli2/Gw7/hu5CjFA==} - engines: {node: '>=18.0.0'} + '@storybook/react-vite@9.0.0-rc.0': + resolution: {integrity: sha512-fOL1dSN8uIkJ6pjFGu7ndB9GCezRg3HlKd9MCCQP/VlTjBL1DK5y70qUNjGvrjiVYykynQVScJTN0NjXC+lXJw==} + engines: {node: '>=20.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 - vite: ^4.0.0 || ^5.0.0 || ^6.0.0 + storybook: ^9.0.0-rc.0 + vite: ^5.0.0 || ^6.0.0 - '@storybook/react-webpack5@8.4.6': - resolution: {integrity: sha512-qUCOUoYW09voRhk0PzEZpZz6F5Ek9aHvVto8KW3lyYEuk6qujqUTNO6Y/X7hMraVt/C3l0+Ds4D5LEmxNBvd8g==} - engines: {node: '>=18.0.0'} + '@storybook/react-webpack5@9.0.0-rc.0': + resolution: {integrity: sha512-fJ7YvvbShcZ8rzYUy+ncFUpoSjsi4TpxkR5zxI/AptUv09Xxzjsrj3kZgbhiyCnG44hWi+/EGmUgJS0N3s+ZXw==} + engines: {node: '>=20.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 - typescript: '>= 4.2.x' + storybook: ^9.0.0-rc.0 + typescript: '>= 4.9.x' peerDependenciesMeta: typescript: optional: true - '@storybook/react@8.4.6': - resolution: {integrity: sha512-QAT23beoYNLhFGAXPimtuMErvpcI7eZbZ4AlLqW1fhiTZrRYw06cjC1bs9H3tODMcHH9LS5p3Wz9b29jtV2XGw==} - engines: {node: '>=18.0.0'} + '@storybook/react@9.0.0-rc.0': + resolution: {integrity: sha512-38+zktdnrhF0w7v5U0jiJcg4SLzGdHrQKAjW8+ow6KJ+6W0QWmbcBhV0AMYHnXoODatOeJJfkdkDeexTvNVr2Q==} + engines: {node: '>=20.0.0'} peerDependencies: - '@storybook/test': 8.4.6 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.6 - typescript: '>= 4.2.x' + storybook: ^9.0.0-rc.0 + typescript: '>= 4.9.x' peerDependenciesMeta: - '@storybook/test': - optional: true typescript: optional: true - '@storybook/test@8.4.6': - resolution: {integrity: sha512-MeU1g65YgU66M2NtmEIL9gVeHk+en0k9Hp0wfxEO7NT/WLfaOD5RXLRDJVhbAlrH/6tLeWKIPNh/D26y27vO/g==} - peerDependencies: - storybook: ^8.4.6 - - '@storybook/test@8.5.1': - resolution: {integrity: sha512-V0sEXqL5kS0YKugCqWgmCpNODdlCCiVlPqm3i+E2+G97DR980BwXf8J6VPscQDRS9ZG39BrM83Aau6Anxrt1Tg==} - peerDependencies: - storybook: ^8.5.1 - '@storybook/theming@8.3.2': resolution: {integrity: sha512-JXAVc08Tlbu4GTTMGNmwUy69lShqSpJixAJc4bvWTnNAtPTRltiNJCg/KJ0GauEyRFk8ZR2Ha4KhN3DB1felNQ==} peerDependencies: storybook: ^8.3.2 - '@storybook/theming@8.4.6': - resolution: {integrity: sha512-q7vDPN/mgj7cXIVQ9R1/V75hrzNgKkm2G0LjMo57//9/djQ+7LxvBsR1iScbFIRSEqppvMiBFzkts+2uXidySA==} - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - - '@storybook/types@8.4.6': - resolution: {integrity: sha512-W5cxyzji35Q0N4oLyani/4184m2bb07PiHSB88bgLRZR1/2Pi8ICRBv/sFQG+76cGP6x01RxddDwQmulCxieNg==} - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - '@supabase/auth-js@2.65.0': resolution: {integrity: sha512-+wboHfZufAE2Y612OsKeVP4rVOeGZzzMLD/Ac3HrTQkkY4qXNjI6Af9gtmxwccE5nFvTiF114FEbIQ1hRq5uUw==} @@ -7977,8 +7833,8 @@ packages: resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} engines: {node: '>=18'} - '@testing-library/jest-dom@6.5.0': - resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==} + '@testing-library/jest-dom@6.6.3': + resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==} engines: {node: '>=14', npm: '>=6', yarn: '>=1'} '@testing-library/react@15.0.6': @@ -7992,8 +7848,8 @@ packages: '@types/react': optional: true - '@testing-library/user-event@14.5.2': - resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} + '@testing-library/user-event@14.6.1': + resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} engines: {node: '>=12', npm: '>=6'} peerDependencies: '@testing-library/dom': '>=7.21.4' @@ -8268,9 +8124,6 @@ packages: '@types/node@20.16.10': resolution: {integrity: sha512-vQUKgWTjEIRFCvK6CyriPH3MZYiYlNy0fKiEYHWbcoWLEgs4opurGGKlebrTLqdSMIbXImH6XExNiIyNUv3WpA==} - '@types/node@22.5.5': - resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==} - '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} @@ -8379,9 +8232,6 @@ packages: '@types/use-sync-external-store@0.0.3': resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==} - '@types/uuid@9.0.8': - resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} - '@types/webxr@0.5.20': resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==} @@ -8723,12 +8573,12 @@ packages: vite: ^5.0.0 vue: ^3.2.25 - '@vitest/expect@2.0.5': - resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==} - '@vitest/expect@3.0.5': resolution: {integrity: sha512-nNIOqupgZ4v5jWuQx2DSlHLEs7Q4Oh/7AYwNyE+k0UQzG7tSmjPXShUikn1mpNGzYEN2jJbTvLejwShMitovBA==} + '@vitest/expect@3.0.9': + resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==} + '@vitest/mocker@3.0.5': resolution: {integrity: sha512-CLPNBFBIE7x6aEGbIjaQAX03ZZlBMaWwAjBdMkIf/cAn6xzLTiM3zYqO/WAbieEjsAZir6tO71mzeHZoodThvw==} peerDependencies: @@ -8740,36 +8590,30 @@ packages: vite: optional: true - '@vitest/pretty-format@2.0.5': - resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==} - - '@vitest/pretty-format@2.1.1': - resolution: {integrity: sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==} - '@vitest/pretty-format@3.0.5': resolution: {integrity: sha512-CjUtdmpOcm4RVtB+up8r2vVDLR16Mgm/bYdkGFe3Yj/scRfCpbSi2W/BDSDcFK7ohw8UXvjMbOp9H4fByd/cOA==} + '@vitest/pretty-format@3.0.9': + resolution: {integrity: sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==} + '@vitest/runner@3.0.5': resolution: {integrity: sha512-BAiZFityFexZQi2yN4OX3OkJC6scwRo8EhRB0Z5HIGGgd2q+Nq29LgHU/+ovCtd0fOfXj5ZI6pwdlUmC5bpi8A==} '@vitest/snapshot@3.0.5': resolution: {integrity: sha512-GJPZYcd7v8QNUJ7vRvLDmRwl+a1fGg4T/54lZXe+UOGy47F9yUfE18hRCtXL5aHN/AONu29NGzIXSVFh9K0feA==} - '@vitest/spy@2.0.5': - resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==} - '@vitest/spy@3.0.5': resolution: {integrity: sha512-5fOzHj0WbUNqPK6blI/8VzZdkBlQLnT25knX0r4dbZI9qoZDf3qAdjoMmDcLG5A83W6oUUFJgUd0EYBc2P5xqg==} - '@vitest/utils@2.0.5': - resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==} - - '@vitest/utils@2.1.1': - resolution: {integrity: sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==} + '@vitest/spy@3.0.9': + resolution: {integrity: sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==} '@vitest/utils@3.0.5': resolution: {integrity: sha512-N9AX0NUoUtVwKwy21JtwzaqR5L5R5A99GAbrHfCCXK1lp593i/3AZAXhSP43wRQuxYsflrdzEfXZFo1reR1Nkg==} + '@vitest/utils@3.0.9': + resolution: {integrity: sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==} + '@volar/kit@2.4.12': resolution: {integrity: sha512-f9JE8oy9C2rBcCWxUYKUF23hOXz4mwgVXFjk7nHhxzplaoVjEOsKpBm8NI2nBH7Cwu8DRxDwBsbIxMl/8wlLxw==} peerDependencies: @@ -9719,9 +9563,6 @@ packages: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} - browser-assert@1.2.1: - resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==} - browserify-zlib@0.1.4: resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==} @@ -9922,14 +9763,14 @@ packages: ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} - chai@5.1.1: - resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==} - engines: {node: '>=12'} - chai@5.1.2: resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==} engines: {node: '>=12'} + chai@5.2.0: + resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==} + engines: {node: '>=12'} + chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -10299,9 +10140,6 @@ packages: console-control-strings@1.1.0: resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} - constants-browserify@1.0.0: - resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==} - content-disposition@0.5.4: resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==} engines: {node: '>= 0.6'} @@ -13582,10 +13420,6 @@ packages: jsc-safe-url@0.2.4: resolution: {integrity: sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==} - jsdoc-type-pratt-parser@4.1.0: - resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==} - engines: {node: '>=12.0.0'} - jsdom@20.0.3: resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==} engines: {node: '>=14'} @@ -14087,9 +13921,6 @@ packages: magic-string@0.30.11: resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==} - magic-string@0.30.12: - resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} - magic-string@0.30.15: resolution: {integrity: sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==} @@ -15694,10 +15525,6 @@ packages: resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==} engines: {node: '>=4'} - polished@4.3.1: - resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==} - engines: {node: '>=10'} - portfinder@1.0.32: resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==} engines: {node: '>= 0.12.0'} @@ -16667,9 +16494,6 @@ packages: pumpify@1.5.1: resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==} - punycode@1.4.1: - resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==} - punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -16762,8 +16586,8 @@ packages: peerDependencies: typescript: '>= 4.3.x' - react-docgen@7.0.3: - resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==} + react-docgen@7.1.1: + resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==} engines: {node: '>=16.14.0'} react-dom@18.3.1: @@ -17987,8 +17811,8 @@ packages: storybook-dark-mode@4.0.2: resolution: {integrity: sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==} - storybook@8.4.6: - resolution: {integrity: sha512-J6juZSZT2u3PUW0QZYZZYxBq6zU5O0OrkSgkMXGMg/QrS9to9IHmt4FjEMEyACRbXo8POcB/fSXa3VpGe7bv3g==} + storybook@9.0.0-rc.0: + resolution: {integrity: sha512-3eioxVQdYT77nXr8SRBGqjoWMJFHRoyCkGaw6Y+yjixdTfZsCPaSOcU4avbtLcWqzurOwup6xxkarHuRaqKoqg==} hasBin: true peerDependencies: prettier: ^2 || ^3 @@ -18469,10 +18293,6 @@ packages: resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==} engines: {node: ^18.0.0 || >=20.0.0} - tinyrainbow@1.2.0: - resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==} - engines: {node: '>=14.0.0'} - tinyrainbow@2.0.0: resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==} engines: {node: '>=14.0.0'} @@ -19153,10 +18973,6 @@ packages: url-parse@1.5.10: resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} - url@0.11.4: - resolution: {integrity: sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==} - engines: {node: '>= 0.4'} - urlpattern-polyfill@8.0.2: resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==} @@ -24330,8 +24146,9 @@ snapshots: '@types/yargs': 17.0.10 chalk: 4.1.2 - '@joshwooding/vite-plugin-react-docgen-typescript@0.4.2(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))': + '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))': dependencies: + glob: 10.4.5 magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.7.3) vite: 6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1) @@ -24546,7 +24363,7 @@ snapshots: - acorn - supports-color - '@mdx-js/react@3.0.1(@types/react@18.3.1)(react@18.3.1)': + '@mdx-js/react@3.1.0(@types/react@18.3.1)(react@18.3.1)': dependencies: '@types/mdx': 2.0.13 '@types/react': 18.3.1 @@ -28357,139 +28174,43 @@ snapshots: '@stackblitz/sdk@1.11.0': {} - '@storybook/addon-actions@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/addon-docs@9.0.0-rc.0(@types/react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3)': dependencies: - '@storybook/global': 5.0.0 - '@types/uuid': 9.0.8 - dequal: 2.0.3 - polished: 4.3.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - uuid: 9.0.1 - - '@storybook/addon-backgrounds@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - memoizerific: 1.11.3 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - - '@storybook/addon-controls@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - dequal: 2.0.3 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - - '@storybook/addon-docs@8.4.6(@types/react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3)': - dependencies: - '@mdx-js/react': 3.0.1(@types/react@18.3.1)(react@18.3.1) - '@storybook/blocks': 8.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/csf-plugin': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) - '@storybook/react-dom-shim': 8.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + '@mdx-js/react': 3.1.0(@types/react@18.3.1)(react@18.3.1) + '@storybook/csf-plugin': 9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) + '@storybook/icons': 1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/react-dom-shim': 9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) ts-dedent: 2.2.0 transitivePeerDependencies: - '@types/react' - webpack-sources - '@storybook/addon-essentials@8.4.6(@types/react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3)': - dependencies: - '@storybook/addon-actions': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-backgrounds': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-controls': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-docs': 8.4.6(@types/react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) - '@storybook/addon-highlight': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-measure': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-outline': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-toolbars': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/addon-viewport': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - transitivePeerDependencies: - - '@types/react' - - webpack-sources - - '@storybook/addon-highlight@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/addon-interactions@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - '@storybook/instrumenter': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/test': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - polished: 4.3.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - - '@storybook/addon-measure@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - tiny-invariant: 1.3.3 - - '@storybook/addon-outline@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - - '@storybook/addon-toolbars@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/addon-viewport@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - memoizerific: 1.11.3 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/blocks@8.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/csf': 0.1.11 - '@storybook/icons': 1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - ts-dedent: 2.2.0 - optionalDependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - - '@storybook/builder-vite@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3)': + '@storybook/builder-vite@9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3)': dependencies: - '@storybook/csf-plugin': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) - browser-assert: 1.2.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + '@storybook/csf-plugin': 9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) ts-dedent: 2.2.0 vite: 6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1) transitivePeerDependencies: - webpack-sources - '@storybook/builder-webpack5@8.4.6(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': + '@storybook/builder-webpack5@9.0.0-rc.0(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': dependencies: - '@storybook/core-webpack': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@types/node': 22.5.5 - '@types/semver': 7.5.8 - browser-assert: 1.2.1 + '@storybook/core-webpack': 9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) case-sensitive-paths-webpack-plugin: 2.4.0 cjs-module-lexer: 1.4.1 - constants-browserify: 1.0.0 css-loader: 6.11.0(@rspack/core@1.3.9(@swc/helpers@0.5.11))(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) es-module-lexer: 1.6.0 fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.7.3)(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) html-webpack-plugin: 5.5.0(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) magic-string: 0.30.17 - path-browserify: 1.0.1 - process: 0.11.10 - semver: 7.7.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) style-loader: 3.3.4(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) terser-webpack-plugin: 5.3.11(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) ts-dedent: 2.2.0 - url: 0.11.4 - util: 0.12.5 - util-deprecate: 1.0.2 webpack: 5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) webpack-dev-middleware: 6.1.3(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) webpack-hot-middleware: 2.26.1 @@ -28503,51 +28224,22 @@ snapshots: - uglify-js - webpack-cli - '@storybook/components@8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/components@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/core-events@8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/components@8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) - '@storybook/core-server@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/core-events@8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) - '@storybook/core-webpack@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/core-webpack@9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: - '@types/node': 22.5.5 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) ts-dedent: 2.2.0 - '@storybook/core@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)': + '@storybook/csf-plugin@9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3)': dependencies: - '@storybook/csf': 0.1.11 - better-opn: 3.0.2 - browser-assert: 1.2.1 - esbuild: 0.24.2 - esbuild-register: 3.6.0(esbuild@0.24.2) - jsdoc-type-pratt-parser: 4.1.0 - process: 0.11.10 - recast: 0.23.9 - semver: 7.7.1 - util: 0.12.5 - ws: 8.18.0(bufferutil@4.0.7) - optionalDependencies: - prettier: 2.8.8 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - - '@storybook/csf-plugin@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(webpack-sources@3.2.3)': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) unplugin: 1.14.1(webpack-sources@3.2.3) transitivePeerDependencies: - webpack-sources @@ -28556,14 +28248,6 @@ snapshots: dependencies: lodash: 4.17.21 - '@storybook/csf@0.1.11': - dependencies: - type-fest: 2.19.0 - - '@storybook/csf@0.1.12': - dependencies: - type-fest: 2.19.0 - '@storybook/global@5.0.0': {} '@storybook/icons@1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -28571,57 +28255,34 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@storybook/instrumenter@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/manager-api@8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: - '@storybook/global': 5.0.0 - '@vitest/utils': 2.1.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/instrumenter@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/global': 5.0.0 - '@vitest/utils': 2.1.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) - '@storybook/manager-api@8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/preset-react-webpack@9.0.0-rc.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/manager-api@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/preset-react-webpack@8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': - dependencies: - '@storybook/core-webpack': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/react': 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) + '@storybook/core-webpack': 9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.7.3)(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))) - '@types/node': 22.5.5 '@types/semver': 7.5.8 find-up: 5.0.0 magic-string: 0.30.17 react: 18.3.1 - react-docgen: 7.0.3 + react-docgen: 7.1.1 react-dom: 18.3.1(react@18.3.1) resolve: 1.22.10 semver: 7.7.1 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) tsconfig-paths: 4.2.0 webpack: 5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) optionalDependencies: typescript: 5.7.3 transitivePeerDependencies: - - '@storybook/test' - '@swc/core' - esbuild - supports-color - uglify-js - webpack-cli - '@storybook/preview-api@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.7.3)(webpack@5.98.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)))': dependencies: debug: 4.4.0(supports-color@8.1.1) @@ -28636,104 +28297,64 @@ snapshots: transitivePeerDependencies: - supports-color - '@storybook/react-dom-shim@8.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/react-dom-shim@9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) - '@storybook/react-vite@8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.22.0)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3)': + '@storybook/react-vite@9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.22.0)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3)': dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.4.2(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1)) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.7.3)(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1)) '@rollup/pluginutils': 5.1.0(rollup@4.22.0) - '@storybook/builder-vite': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3) - '@storybook/react': 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) + '@storybook/builder-vite': 9.0.0-rc.0(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))(webpack-sources@3.2.3) + '@storybook/react': 9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) find-up: 5.0.0 - magic-string: 0.30.12 + magic-string: 0.30.17 react: 18.3.1 - react-docgen: 7.0.3 + react-docgen: 7.1.1 react-dom: 18.3.1(react@18.3.1) - resolve: 1.22.8 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + resolve: 1.22.10 + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) tsconfig-paths: 4.2.0 vite: 6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1) transitivePeerDependencies: - - '@storybook/test' - rollup - supports-color - typescript - webpack-sources - '@storybook/react-webpack5@8.4.6(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': + '@storybook/react-webpack5@9.0.0-rc.0(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0))': dependencies: - '@storybook/builder-webpack5': 8.4.6(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) - '@storybook/preset-react-webpack': 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) - '@storybook/react': 8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) - '@types/node': 22.5.5 + '@storybook/builder-webpack5': 9.0.0-rc.0(@rspack/core@1.3.9(@swc/helpers@0.5.11))(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) + '@storybook/preset-react-webpack': 9.0.0-rc.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)(webpack-cli@5.1.4(webpack-dev-server@5.2.1)(webpack@5.98.0)) + '@storybook/react': 9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) optionalDependencies: typescript: 5.7.3 transitivePeerDependencies: - '@rspack/core' - - '@storybook/test' - '@swc/core' - esbuild - supports-color - uglify-js - webpack-cli - '@storybook/react@8.4.6(@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)': + '@storybook/react@9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))(typescript@5.7.3)': dependencies: - '@storybook/components': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) '@storybook/global': 5.0.0 - '@storybook/manager-api': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/preview-api': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/react-dom-shim': 8.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/theming': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + '@storybook/react-dom-shim': 9.0.0-rc.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) optionalDependencies: - '@storybook/test': 8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) typescript: 5.7.3 - '@storybook/test@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/csf': 0.1.11 - '@storybook/global': 5.0.0 - '@storybook/instrumenter': 8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@testing-library/dom': 10.4.0 - '@testing-library/jest-dom': 6.5.0 - '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0) - '@vitest/expect': 2.0.5 - '@vitest/spy': 2.0.5 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/test@8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - '@storybook/csf': 0.1.12 - '@storybook/global': 5.0.0 - '@storybook/instrumenter': 8.5.1(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@testing-library/dom': 10.4.0 - '@testing-library/jest-dom': 6.5.0 - '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0) - '@vitest/expect': 2.0.5 - '@vitest/spy': 2.0.5 - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/theming@8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/theming@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': + '@storybook/theming@8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8))': dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) - - '@storybook/types@8.4.6(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8))': - dependencies: - storybook: 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + storybook: 9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8) '@supabase/auth-js@2.65.0': dependencies: @@ -29042,7 +28663,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.5.0': + '@testing-library/jest-dom@6.6.3': dependencies: '@adobe/css-tools': 4.4.0 aria-query: 5.3.2 @@ -29062,7 +28683,7 @@ snapshots: optionalDependencies: '@types/react': 18.3.1 - '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)': + '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)': dependencies: '@testing-library/dom': 10.4.0 @@ -29513,10 +29134,6 @@ snapshots: dependencies: undici-types: 6.19.8 - '@types/node@22.5.5': - dependencies: - undici-types: 6.19.8 - '@types/normalize-package-data@2.4.4': {} '@types/npm-package-arg@6.1.1': {} @@ -29626,8 +29243,6 @@ snapshots: '@types/use-sync-external-store@0.0.3': {} - '@types/uuid@9.0.8': {} - '@types/webxr@0.5.20': {} '@types/ws@8.5.12': @@ -30247,13 +29862,6 @@ snapshots: vite: 5.4.11(@types/node@20.16.10)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0) vue: 3.5.6(typescript@5.7.3) - '@vitest/expect@2.0.5': - dependencies: - '@vitest/spy': 2.0.5 - '@vitest/utils': 2.0.5 - chai: 5.1.1 - tinyrainbow: 1.2.0 - '@vitest/expect@3.0.5': dependencies: '@vitest/spy': 3.0.5 @@ -30261,6 +29869,13 @@ snapshots: chai: 5.1.2 tinyrainbow: 2.0.0 + '@vitest/expect@3.0.9': + dependencies: + '@vitest/spy': 3.0.9 + '@vitest/utils': 3.0.9 + chai: 5.2.0 + tinyrainbow: 2.0.0 + '@vitest/mocker@3.0.5(vite@6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1))': dependencies: '@vitest/spy': 3.0.5 @@ -30269,15 +29884,11 @@ snapshots: optionalDependencies: vite: 6.2.0(@types/node@20.16.10)(jiti@1.21.6)(less@4.1.3)(sass-embedded@1.85.1)(sass@1.55.0)(stylus@0.64.0)(terser@5.39.0)(yaml@2.6.1) - '@vitest/pretty-format@2.0.5': - dependencies: - tinyrainbow: 1.2.0 - - '@vitest/pretty-format@2.1.1': + '@vitest/pretty-format@3.0.5': dependencies: - tinyrainbow: 1.2.0 + tinyrainbow: 2.0.0 - '@vitest/pretty-format@3.0.5': + '@vitest/pretty-format@3.0.9': dependencies: tinyrainbow: 2.0.0 @@ -30292,26 +29903,13 @@ snapshots: magic-string: 0.30.17 pathe: 2.0.2 - '@vitest/spy@2.0.5': - dependencies: - tinyspy: 3.0.2 - '@vitest/spy@3.0.5': dependencies: tinyspy: 3.0.2 - '@vitest/utils@2.0.5': - dependencies: - '@vitest/pretty-format': 2.0.5 - estree-walker: 3.0.3 - loupe: 3.1.1 - tinyrainbow: 1.2.0 - - '@vitest/utils@2.1.1': + '@vitest/spy@3.0.9': dependencies: - '@vitest/pretty-format': 2.1.1 - loupe: 3.1.1 - tinyrainbow: 1.2.0 + tinyspy: 3.0.2 '@vitest/utils@3.0.5': dependencies: @@ -30319,6 +29917,12 @@ snapshots: loupe: 3.1.3 tinyrainbow: 2.0.0 + '@vitest/utils@3.0.9': + dependencies: + '@vitest/pretty-format': 3.0.9 + loupe: 3.1.3 + tinyrainbow: 2.0.0 + '@volar/kit@2.4.12(typescript@5.7.3)': dependencies: '@volar/language-service': 2.4.12 @@ -31721,8 +31325,6 @@ snapshots: dependencies: fill-range: 7.1.1 - browser-assert@1.2.1: {} - browserify-zlib@0.1.4: dependencies: pako: 0.2.9 @@ -31961,7 +31563,7 @@ snapshots: ccount@2.0.1: {} - chai@5.1.1: + chai@5.1.2: dependencies: assertion-error: 2.0.1 check-error: 2.1.1 @@ -31969,12 +31571,12 @@ snapshots: loupe: 3.1.1 pathval: 2.0.0 - chai@5.1.2: + chai@5.2.0: dependencies: assertion-error: 2.0.1 check-error: 2.1.1 deep-eql: 5.0.2 - loupe: 3.1.1 + loupe: 3.1.3 pathval: 2.0.0 chalk@2.4.2: @@ -32321,8 +31923,6 @@ snapshots: console-control-strings@1.1.0: {} - constants-browserify@1.0.0: {} - content-disposition@0.5.4: dependencies: safe-buffer: 5.2.1 @@ -33622,10 +33222,10 @@ snapshots: local-pkg: 0.5.0 resolve.exports: 2.0.3 - esbuild-register@3.6.0(esbuild@0.24.2): + esbuild-register@3.6.0(esbuild@0.25.0): dependencies: debug: 4.4.0(supports-color@8.1.1) - esbuild: 0.24.2 + esbuild: 0.25.0 transitivePeerDependencies: - supports-color @@ -36660,8 +36260,6 @@ snapshots: jsc-safe-url@0.2.4: {} - jsdoc-type-pratt-parser@4.1.0: {} - jsdom@20.0.3(bufferutil@4.0.7): dependencies: abab: 2.0.6 @@ -37271,10 +36869,6 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 - magic-string@0.30.12: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.0 - magic-string@0.30.15: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -39811,10 +39405,6 @@ snapshots: pluralize@8.0.0: {} - polished@4.3.1: - dependencies: - '@babel/runtime': 7.26.0 - portfinder@1.0.32: dependencies: async: 2.6.4 @@ -40779,8 +40369,6 @@ snapshots: inherits: 2.0.4 pump: 2.0.1 - punycode@1.4.1: {} - punycode@2.3.1: {} pure-rand@6.1.0: {} @@ -40865,11 +40453,11 @@ snapshots: dependencies: typescript: 5.7.3 - react-docgen@7.0.3: + react-docgen@7.1.1: dependencies: '@babel/core': 7.26.9 - '@babel/traverse': 7.25.9 - '@babel/types': 7.26.0 + '@babel/traverse': 7.26.9 + '@babel/types': 7.26.9 '@types/babel__core': 7.20.5 '@types/babel__traverse': 7.20.6 '@types/doctrine': 0.0.9 @@ -42461,14 +42049,14 @@ snapshots: stoppable@1.1.0: optional: true - storybook-dark-mode@4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)): + storybook-dark-mode@4.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)): dependencies: - '@storybook/components': 8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/core-events': 8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + '@storybook/components': 8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) + '@storybook/core-events': 8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) '@storybook/global': 5.0.0 '@storybook/icons': 1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@storybook/manager-api': 8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) - '@storybook/theming': 8.3.2(storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8)) + '@storybook/manager-api': 8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) + '@storybook/theming': 8.3.2(storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8)) fast-deep-equal: 3.1.3 memoizerific: 1.11.3 transitivePeerDependencies: @@ -42476,12 +42064,23 @@ snapshots: - react-dom - storybook - storybook@8.4.6(bufferutil@4.0.7)(prettier@2.8.8): + storybook@9.0.0-rc.0(@testing-library/dom@10.4.0)(bufferutil@4.0.7)(prettier@2.8.8): dependencies: - '@storybook/core': 8.4.6(bufferutil@4.0.7)(prettier@2.8.8) + '@storybook/global': 5.0.0 + '@testing-library/jest-dom': 6.6.3 + '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0) + '@vitest/expect': 3.0.9 + '@vitest/spy': 3.0.9 + better-opn: 3.0.2 + esbuild: 0.25.0 + esbuild-register: 3.6.0(esbuild@0.25.0) + recast: 0.23.9 + semver: 7.7.1 + ws: 8.18.0(bufferutil@4.0.7) optionalDependencies: prettier: 2.8.8 transitivePeerDependencies: + - '@testing-library/dom' - bufferutil - supports-color - utf-8-validate @@ -43073,8 +42672,6 @@ snapshots: tinypool@1.0.2: {} - tinyrainbow@1.2.0: {} - tinyrainbow@2.0.0: {} tinyspy@3.0.2: {} @@ -43849,11 +43446,6 @@ snapshots: querystringify: 2.2.0 requires-port: 1.0.0 - url@0.11.4: - dependencies: - punycode: 1.4.1 - qs: 6.14.0 - urlpattern-polyfill@8.0.2: {} use-callback-ref@1.3.3(@types/react@18.3.1)(react@18.3.1):