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

feat(storybook)!: support storybook 9 (#31172)

Browse Source 
## Current Behavior
We currently do not have support for Storybook 9, nor any migrations to
help users switch to it.


## Expected Behavior
Support Storybook 9 and add a migration for users to switch to v9

BREAKING CHANGE: Remove deprecated generators:
`@nx/storybook:cypress-project`,
`@nx/react-native:storybook-configuration`, `@nx/react-native:stories`,
`@nx/react-native:component-story`
This commit is contained in:
Colum Ferry 2025-06-06 17:51:47 +01:00 committed by GitHub
parent 9c366d39c4
commit e73a1411a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
153 changed files with 1635 additions and 5731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md
View File

@ -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](/technologies/test-tools/storybook/recipes/best-practices). If you want to migrate your existing Storybook configuration to Storybook 7.0 beta, please read our [migration guide](/technologies/test-tools/storybook/api/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

50
docs/generated/manifests/menus.json
View File

@ -2547,30 +2547,6 @@
"isExternal": false,
"disableCollapsible": false
},
{
"id": "storybook-configuration",
"path": "/technologies/react/react-native/api/generators/storybook-configuration",
"name": "storybook-configuration",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "component-story",
"path": "/technologies/react/react-native/api/generators/component-story",
"name": "component-story",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "stories",
"path": "/technologies/react/react-native/api/generators/stories",
"name": "stories",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "upgrade-native",
"path": "/technologies/react/react-native/api/generators/upgrade-native",
@ -4767,9 +4743,9 @@
"disableCollapsible": false
},
{
"name": "Storybook 7",
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"id": "storybook-7-setup",
"name": "Storybook 9",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"id": "storybook-9-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
@ -4933,14 +4909,6 @@
"isExternal": false,
"disableCollapsible": false
},
{
"id": "cypress-project",
"path": "/technologies/test-tools/storybook/api/generators/cypress-project",
"name": "cypress-project",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "convert-to-inferred",
"path": "/technologies/test-tools/storybook/api/generators/convert-to-inferred",
@ -4950,17 +4918,17 @@
"disableCollapsible": false
},
{
"id": "migrate-7",
"path": "/technologies/test-tools/storybook/api/generators/migrate-7",
"name": "migrate-7",
"id": "migrate-8",
"path": "/technologies/test-tools/storybook/api/generators/migrate-8",
"name": "migrate-8",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "migrate-8",
"path": "/technologies/test-tools/storybook/api/generators/migrate-8",
"name": "migrate-8",
"id": "migrate-9",
"path": "/technologies/test-tools/storybook/api/generators/migrate-9",
"name": "migrate-9",
"children": [],
"isExternal": false,
"disableCollapsible": false

84
docs/generated/manifests/new-nx-api.json
View File

@ -4105,33 +4105,6 @@
"path": "/technologies/react/react-native/api/generators/component",
"type": "generator"
},
"/technologies/react/react-native/api/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": "/technologies/react/react-native/api/generators/storybook-configuration",
"type": "generator"
},
"/technologies/react/react-native/api/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": "/technologies/react/react-native/api/generators/component-story",
"type": "generator"
},
"/technologies/react/react-native/api/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": "/technologies/react/react-native/api/generators/stories",
"type": "generator"
},
"/technologies/react/react-native/api/generators/upgrade-native": {
"description": "Destructive command to upgrade native iOS and Android code to latest.",
"file": "generated/packages/react-native/generators/upgrade-native.json",
@ -4746,15 +4719,6 @@
"path": "/technologies/test-tools/storybook/api/generators/configuration",
"type": "generator"
},
"/technologies/test-tools/storybook/api/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": "/technologies/test-tools/storybook/api/generators/cypress-project",
"type": "generator"
},
"/technologies/test-tools/storybook/api/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",
@ -4764,15 +4728,6 @@
"path": "/technologies/test-tools/storybook/api/generators/convert-to-inferred",
"type": "generator"
},
"/technologies/test-tools/storybook/api/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": "/technologies/test-tools/storybook/api/generators/migrate-7",
"type": "generator"
},
"/technologies/test-tools/storybook/api/generators/migrate-8": {
"description": "Migrate to Storybook version 8.",
"file": "generated/packages/storybook/generators/migrate-8.json",
@ -4781,9 +4736,48 @@
"originalFilePath": "/packages/storybook/src/generators/migrate-8/schema.json",
"path": "/technologies/test-tools/storybook/api/generators/migrate-8",
"type": "generator"
},
"/technologies/test-tools/storybook/api/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": "/technologies/test-tools/storybook/api/generators/migrate-9",
"type": "generator"
}
},
"migrations": {
"/technologies/test-tools/storybook/api/migrations/update-21-2-0-migrate-storybook-v9": {
"description": "Update workspace to use Storybook v9",
"file": "generated/packages/storybook/migrations/update-21-2-0-migrate-storybook-v9.json",
"hidden": false,
"name": "update-21-2-0-migrate-storybook-v9",
"version": "21.2.0-beta.3",
"originalFilePath": "/packages/storybook",
"path": "/technologies/test-tools/storybook/api/migrations/update-21-2-0-migrate-storybook-v9",
"type": "migration"
},
"/technologies/test-tools/storybook/api/migrations/update-21-2-0-remove-addon-dependencies": {
"description": "Remove deprecated Storybook addon dependencies",
"file": "generated/packages/storybook/migrations/update-21-2-0-remove-addon-dependencies.json",
"hidden": false,
"name": "update-21-2-0-remove-addon-dependencies",
"version": "21.2.0-beta.3",
"originalFilePath": "/packages/storybook",
"path": "/technologies/test-tools/storybook/api/migrations/update-21-2-0-remove-addon-dependencies",
"type": "migration"
},
"/technologies/test-tools/storybook/api/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.2.0-beta.3",
"originalFilePath": "/packages/storybook",
"path": "/technologies/test-tools/storybook/api/migrations/21.1.0-package-updates",
"type": "migration"
},
"/technologies/test-tools/storybook/api/migrations/20.8.0-package-updates": {
"description": "",
"file": "generated/packages/storybook/migrations/20.8.0-package-updates.json",

52
docs/generated/manifests/nx.json
View File

@ -5206,14 +5206,14 @@
"tags": []
},
{
"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.",
"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.",
"mediaImage": "",
"file": "shared/packages/storybook/storybook-7-setup",
"file": "shared/packages/storybook/storybook-9-setup",
"itemList": [],
"isExternal": false,
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"tags": []
},
{
@ -10140,14 +10140,14 @@
"tags": []
},
{
"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.",
"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.",
"mediaImage": "",
"file": "shared/packages/storybook/storybook-7-setup",
"file": "shared/packages/storybook/storybook-9-setup",
"itemList": [],
"isExternal": false,
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"tags": []
},
{
@ -10736,14 +10736,14 @@
"tags": []
},
{
"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.",
"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.",
"mediaImage": "",
"file": "shared/packages/storybook/storybook-7-setup",
"file": "shared/packages/storybook/storybook-9-setup",
"itemList": [],
"isExternal": false,
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"tags": []
},
{
@ -10940,14 +10940,14 @@
"tags": []
},
{
"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.",
"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.",
"mediaImage": "",
"file": "shared/packages/storybook/storybook-7-setup",
"file": "shared/packages/storybook/storybook-9-setup",
"itemList": [],
"isExternal": false,
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"tags": []
},
{
@ -11109,15 +11109,15 @@
"path": "/technologies/test-tools/storybook/recipes/best-practices",
"tags": []
},
"/technologies/test-tools/storybook/recipes/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.",
"/technologies/test-tools/storybook/recipes/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.",
"mediaImage": "",
"file": "shared/packages/storybook/storybook-7-setup",
"file": "shared/packages/storybook/storybook-9-setup",
"itemList": [],
"isExternal": false,
"path": "/technologies/test-tools/storybook/recipes/storybook-7-setup",
"path": "/technologies/test-tools/storybook/recipes/storybook-9-setup",
"tags": []
},
"/technologies/test-tools/storybook/recipes/overview-react": {

96
docs/generated/packages-metadata.json
View File

@ -4409,33 +4409,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",
@ -5053,15 +5026,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": [
@ -5103,15 +5076,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",
@ -5121,15 +5085,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",
@ -5138,9 +5093,48 @@
"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-2-0-migrate-storybook-v9.json",
"hidden": false,
"name": "update-21-2-0-migrate-storybook-v9",
"version": "21.2.0-beta.3",
"originalFilePath": "/packages/storybook",
"path": "storybook/migrations/update-21-2-0-migrate-storybook-v9",
"type": "migration"
},
{
"description": "Remove deprecated Storybook addon dependencies",
"file": "generated/packages/storybook/migrations/update-21-2-0-remove-addon-dependencies.json",
"hidden": false,
"name": "update-21-2-0-remove-addon-dependencies",
"version": "21.2.0-beta.3",
"originalFilePath": "/packages/storybook",
"path": "storybook/migrations/update-21-2-0-remove-addon-dependencies",
"type": "migration"
},
{
"description": "",
"file": "generated/packages/storybook/migrations/21.1.0-package-updates.json",
"hidden": false,
"name": "21.1.0-package-updates",
"version": "21.2.0-beta.3",
"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",

50
docs/generated/packages/react-native/generators/component-story.json
View File

@ -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"
}

63
docs/generated/packages/react-native/generators/stories.json
View File

@ -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"
}

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

@ -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"
}

2
docs/generated/packages/storybook/documents/best-practices.md
View File

@ -53,8 +53,6 @@ If your project is [already configured](/technologies/test-tools/storybook/api),
- [Vue stories generator](/technologies/vue/api/generators/stories)
- [React Native stories generator](/technologies/react/react-native/api/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

21
docs/generated/packages/storybook/documents/overview.md
View File

@ -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](/technologies/angular/api/generators/storybook-configuration), [React](/technologies/react/api/generators/storybook-configuration), [React Native](/technologies/react/react-native/api/generators/storybook-configuration), [Vue](/technologies/vue/api/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](/technologies/angular/api/generators/storybook-configuration), [React](/technologies/react/api/generators/storybook-configuration), [Vue](/technologies/vue/api/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`](/technologies/angular/api/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/technologies/react/api/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/technologies/react/react-native/api/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/technologies/vue/api/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`](/technologies/angular/api/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/technologies/react/api/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/technologies/vue/api/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](/technologies/test-tools/storybook/api/generators/migrate-7)
- [Storybook 7 setup guide](/technologies/test-tools/storybook/recipes/best-practices)
- [Storybook 9 migration generator](/technologies/test-tools/storybook/api/generators/migrate-9)
- [Storybook 9 setup guide](/technologies/test-tools/storybook/recipes/storybook-9-setup)

39
docs/generated/packages/storybook/documents/storybook-7-setup.md
View File

@ -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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api) 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`](/technologies/test-tools/storybook/api/executors/storybook) and [`@nx/storybook:build`](/technologies/test-tools/storybook/api/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).

24
docs/generated/packages/storybook/documents/storybook-9-setup.md Normal file
View File

@ -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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/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).

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

@ -58,23 +58,16 @@
"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"],
"aliases": ["storybook9UiFramework"],
"x-prompt": "Choose the Storybook framework that you need to use.",
"x-priority": "important",
"hidden": false

59
docs/generated/packages/storybook/generators/cypress-project.json
View File

@ -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 <storybook-project>:static-storybook:ci or <storybook-project>: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"
}

46
docs/generated/packages/storybook/generators/migrate-7.json
View File

File diff suppressed because one or more lines are too long

42
docs/generated/packages/storybook/generators/migrate-9.json Normal file
View File

File diff suppressed because one or more lines are too long

96
docs/generated/packages/storybook/migrations/21.1.0-package-updates.json Normal file
View File

@ -0,0 +1,96 @@
{
"name": "21.1.0-package-updates",
"version": "21.2.0-beta.3",
"packages": {
"@storybook/angular": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/react": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"storybook": { "version": "^9.0.5", "alwaysAddToPackageJson": true },
"@storybook/addon-onboarding": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/addon-themes": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/builder-webpack5": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/core-webpack": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/html": { "version": "^9.0.5", "alwaysAddToPackageJson": false },
"@storybook/html-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/nextjs": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/preact": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/preact-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/react-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/react-webpack5": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/server": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/server-webpack5": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/svelte": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/svelte-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/sveltekit": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/vue3": { "version": "^9.0.5", "alwaysAddToPackageJson": false },
"@storybook/vue3-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/web-components": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
},
"@storybook/web-components-vite": {
"version": "^9.0.5",
"alwaysAddToPackageJson": false
}
},
"aliases": [],
"description": "",
"hidden": false,
"implementation": "",
"path": "/packages/storybook",
"schema": null,
"type": "migration"
}

13
docs/generated/packages/storybook/migrations/update-21-2-0-migrate-storybook-v9.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "update-21-2-0-migrate-storybook-v9",
"cli": "nx",
"version": "21.2.0-beta.3",
"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": ""
}

13
docs/generated/packages/storybook/migrations/update-21-2-0-remove-addon-dependencies.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "update-21-2-0-remove-addon-dependencies",
"cli": "nx",
"version": "21.2.0-beta.3",
"description": "Remove deprecated Storybook addon dependencies",
"implementation": "/packages/storybook/src/migrations/update-21-2-0/remove-addon-dependencies.ts",
"aliases": [],
"hidden": false,
"path": "/packages/storybook",
"schema": null,
"type": "migration",
"examplesFile": ""
}

18
docs/map.json
View File

@ -481,7 +481,6 @@
}
]
},
{
"name": "Enforce Module Boundaries",
"id": "enforce-module-boundaries",
@ -1510,7 +1509,6 @@
}
]
},
{
"name": "Rsbuild",
"id": "rsbuild",
@ -1638,10 +1636,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"
},
{
"name": "Set up Storybook for React Projects",
@ -3359,10 +3357,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"
}
]
},

2
docs/shared/packages/storybook/best-practices.md
View File

@ -53,8 +53,6 @@ If your project is [already configured](/technologies/test-tools/storybook/api),
- [Vue stories generator](/technologies/vue/api/generators/stories)
- [React Native stories generator](/technologies/react/react-native/api/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

21
docs/shared/packages/storybook/plugin-overview.md
View File

@ -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](/technologies/angular/api/generators/storybook-configuration), [React](/technologies/react/api/generators/storybook-configuration), [React Native](/technologies/react/react-native/api/generators/storybook-configuration), [Vue](/technologies/vue/api/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](/technologies/angular/api/generators/storybook-configuration), [React](/technologies/react/api/generators/storybook-configuration), [Vue](/technologies/vue/api/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`](/technologies/angular/api/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/technologies/react/api/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/technologies/react/react-native/api/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/technologies/vue/api/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`](/technologies/angular/api/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/technologies/react/api/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/technologies/vue/api/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](/technologies/test-tools/storybook/api/generators/migrate-7)
- [Storybook 7 setup guide](/technologies/test-tools/storybook/recipes/best-practices)
- [Storybook 9 migration generator](/technologies/test-tools/storybook/api/generators/migrate-9)
- [Storybook 9 setup guide](/technologies/test-tools/storybook/recipes/storybook-9-setup)

39
docs/shared/packages/storybook/storybook-7-setup.md
View File

@ -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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api) 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`](/technologies/test-tools/storybook/api/executors/storybook) and [`@nx/storybook:build`](/technologies/test-tools/storybook/api/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).

24
docs/shared/packages/storybook/storybook-9-setup.md Normal file
View File

@ -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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/storybook/api/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](/technologies/test-tools/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).

4
docs/shared/recipes/storybook/plugin-angular.md
View File

@ -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](/technologies/test-tools/storybook/recipes/storybook-7-setup)
- [Migrate to Storybook version 7](/technologies/test-tools/storybook/api/generators/migrate-7)
- [Set up Storybook version 9](/technologies/test-tools/storybook/recipes/storybook-9-setup)
- [Migrate to Storybook version 9](/technologies/test-tools/storybook/api/generators/migrate-9)

4
docs/shared/recipes/storybook/plugin-react.md
View File

@ -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](/technologies/test-tools/storybook/recipes/storybook-7-setup)
- [Migrate to Storybook version 7](/technologies/test-tools/storybook/api/generators/migrate-7)
- [Set up Storybook version 9](/technologies/test-tools/storybook/recipes/storybook-9-setup)
- [Migrate to Storybook version 9](/technologies/test-tools/storybook/api/generators/migrate-9)

8
docs/shared/reference/sitemap.md
View File

@ -308,9 +308,6 @@
- [application](/technologies/react/react-native/api/generators/application)
- [library](/technologies/react/react-native/api/generators/library)
- [component](/technologies/react/react-native/api/generators/component)
- [storybook-configuration](/technologies/react/react-native/api/generators/storybook-configuration)
- [component-story](/technologies/react/react-native/api/generators/component-story)
- [stories](/technologies/react/react-native/api/generators/stories)
- [upgrade-native](/technologies/react/react-native/api/generators/upgrade-native)
- [web-configuration](/technologies/react/react-native/api/generators/web-configuration)
- [convert-to-inferred](/technologies/react/react-native/api/generators/convert-to-inferred)
@ -575,7 +572,7 @@
- [Introduction](/technologies/test-tools/storybook/introduction)
- [Guides](/technologies/test-tools/storybook/recipes)
- [Storybook best practices for making the most out of Nx](/technologies/test-tools/storybook/recipes/best-practices)
- [Storybook 7](/technologies/test-tools/storybook/recipes/storybook-7-setup)
- [Storybook 9](/technologies/test-tools/storybook/recipes/storybook-9-setup)
- [Set up Storybook for React Projects](/technologies/test-tools/storybook/recipes/overview-react)
- [Set up Storybook for Angular Projects](/technologies/test-tools/storybook/recipes/overview-angular)
- [Set up Storybook for Vue Projects](/technologies/test-tools/storybook/recipes/overview-vue)
@ -596,10 +593,9 @@
- [generators](/technologies/test-tools/storybook/api/generators)
- [init](/technologies/test-tools/storybook/api/generators/init)
- [configuration](/technologies/test-tools/storybook/api/generators/configuration)
- [cypress-project](/technologies/test-tools/storybook/api/generators/cypress-project)
- [convert-to-inferred](/technologies/test-tools/storybook/api/generators/convert-to-inferred)
- [migrate-7](/technologies/test-tools/storybook/api/generators/migrate-7)
- [migrate-8](/technologies/test-tools/storybook/api/generators/migrate-8)
- [migrate-9](/technologies/test-tools/storybook/api/generators/migrate-9)
- [migrations](/technologies/test-tools/storybook/api/migrations)
- [Detox](/technologies/test-tools/detox)
- [Introduction](/technologies/test-tools/detox/introduction)

4
e2e/react-native/src/react-native-legacy.test.ts
View File

@ -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`,

8
e2e/react-native/src/react-native.test.ts
View File

@ -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`,

2
e2e/storybook/src/storybook-nested.test.ts
View File

@ -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<typeof TestButton> = {

2
e2e/storybook/src/storybook.test.ts
View File

@ -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<typeof TestButton> = {

6
graph/client/.storybook/main.js
View File

@ -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: {},

2
graph/client/src/app/feature-projects/panels/collapse-edges-panel.stories.tsx
View File

@ -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<typeof CollapseEdgesPanel> = {

2
graph/client/src/app/feature-projects/panels/rankdir-panel.stories.tsx
View File

@ -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<typeof RankdirPanel> = {

2
graph/client/src/app/feature-projects/panels/search-depth.stories.tsx
View File

@ -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<typeof SearchDepth> = {

2
graph/client/src/app/feature-projects/panels/text-filter-panel.stories.tsx
View File

@ -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<typeof TextFilterPanel> = {

2
graph/client/src/app/feature-projects/panels/tracing-panel.stories.tsx
View File

@ -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<typeof TracingPanel> = {

2
graph/client/src/app/feature-tasks/task-list.stories.tsx
View File

@ -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<typeof TaskList> = {

2
graph/client/src/app/ui-components/checkbox-panel.stories.tsx
View File

@ -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<typeof CheckboxPanel> = {

2
graph/client/src/app/ui-components/debugger-panel.stories.tsx
View File

@ -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<typeof DebuggerPanel> = {

2
graph/client/src/app/ui-components/focused-project-panel.stories.tsx
View File

@ -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<typeof FocusedPanel> = {

2
graph/client/src/app/ui-components/show-hide-all.stories.tsx
View File

@ -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<typeof ShowHideAll> = {

2
graph/migrate/.storybook/main.ts
View File

@ -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',

2
graph/migrate/src/lib/migrate.stories.tsx
View File

@ -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<typeof MigrateUI> = {

15
graph/ui-code-block/.storybook/main.ts
View File

@ -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;

2
graph/ui-code-block/src/lib/json-code-block.stories.tsx
View File

@ -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<typeof JsonCodeBlock> = {

2
graph/ui-project-details/.eslintrc.json
View File

@ -1,6 +1,6 @@
{
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"ignorePatterns": ["!**/*", "node_modules"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

15
graph/ui-project-details/.storybook/main.ts
View File

@ -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: {},
};

2
graph/ui-project-details/src/lib/owners-list/owners-list.stories.tsx
View File

@ -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<typeof OwnersList> = {

2
graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
View File

@ -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';

2
graph/ui-project-details/src/lib/source-info/source-info.stories.tsx
View File

@ -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<typeof SourceInfo> = {

2
graph/ui-project-details/src/lib/tag-list/tag-list.stories.tsx
View File

@ -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<typeof TagList> = {

2
graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.stories.tsx
View File

@ -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<typeof TargetConfigurationGroupHeader> = {

2
graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import {
TargetConfigurationGroupList,
TargetConfigurationGroupListProps,

2
graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import {
TargetConfigurationDetailsHeader,
TargetConfigurationDetailsHeaderProps,

2
graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import {
TargetConfigurationDetailsListItem,
TargetConfigurationDetailsListItemProps,

2
graph/ui-project-details/src/lib/target-executor/target-executor-title.stories.tsx
View File

@ -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<typeof TargetExecutorTitle> = {

2
graph/ui-project-details/src/lib/target-executor/target-executor.stories.tsx
View File

@ -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<typeof TargetExecutor> = {

2
graph/ui-project-details/src/lib/target-technologies/target-technologies.stories.tsx
View File

@ -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<typeof TargetTechnologies> = {

2
graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx
View File

@ -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';

2
graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import {
PropertyInfoTooltip,
PropertyInfoTooltipProps,

2
graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx
View File

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import {
SourcemapInfoToolTip,
SourcemapInfoToolTipProps,

6
graph/ui-theme/.storybook/main.ts
View File

@ -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

2
graph/ui-theme/src/lib/theme-panel.stories.tsx
View File

@ -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<typeof ThemePanel> = {

30
nx.json
View File

@ -339,56 +339,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"
]
]
}

13
package.json
View File

@ -117,14 +117,9 @@
"@rspack/plugin-minify": "^0.7.5",
"@rspack/plugin-react-refresh": "^1.0.0",
"@schematics/angular": "~20.0.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.5",
"@storybook/react-vite": "^9.0.5",
"@storybook/react-webpack5": "^9.0.5",
"@supabase/supabase-js": "^2.26.0",
"@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^8.0.1",
@ -304,7 +299,7 @@
"semver": "^7.6.3",
"source-map-loader": "^5.0.0",
"source-map-support": "0.5.19",
"storybook": "^8.4.6",
"storybook": "^9.0.5",
"storybook-dark-mode": "^4.0.2",
"style-loader": "^3.3.0",
"tar-stream": "~2.2.0",

8
packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
View File

@ -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/test';
<%_ } _%>
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();
},
};
<%_ } _%>

32
packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap
View File

@ -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 { MyScam } from './my-scam';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<MyScam> = {
component: MyScam,
@ -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 { App } from './app';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<App> = {
component: App,
@ -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 { ComponentB } from './component-b';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<ComponentB> = {
component: ComponentB,
@ -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 { Component } from './component';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<Component> = {
component: Component,
@ -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();
},
};
"

34
packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap
View File

@ -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 { Standalone } from './standalone';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<Standalone> = {
component: Standalone,
@ -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 { SecondaryStandalone } from './secondary-standalone';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<SecondaryStandalone> = {
component: SecondaryStandalone,
@ -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 { TestButton } from './test-button';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<TestButton> = {
component: TestButton,
@ -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 { TestButton } from './test-button';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<TestButton> = {
component: TestButton,
@ -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();
},
};
"

8
packages/angular/src/generators/stories/stories-lib.spec.ts
View File

@ -115,8 +115,7 @@ describe('angularStories generator: libraries', () => {
).toMatchInlineSnapshot(`
"import type { Meta, StoryObj } from '@storybook/angular';
import { SecondaryButtonComponent } from './secondary-button.component';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<SecondaryButtonComponent> = {
component: SecondaryButtonComponent,
@ -131,9 +130,8 @@ describe('angularStories generator: libraries', () => {
export const Heading: Story = {
args: {},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(canvas.getByText(/secondary-button works!/gi)).toBeTruthy();
play: async ({ canvas }) => {
await expect(canvas.getByText(/secondary-button works!/gi)).toBeTruthy();
},
};
"

16
packages/angular/src/generators/stories/stories.ts
View File

@ -23,7 +23,7 @@ import { nxVersion } from '../../utils/versions';
export async function angularStoriesGenerator(
tree: Tree,
options: StoriesGeneratorOptions
): Promise<GeneratorCallback> {
) {
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<typeof import('@nx/storybook')>('@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;

18
packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
View File

@ -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 { TestButton } from './test-button';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<TestButton> = {
component: TestButton,
@ -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 { TestOther } from './test-other';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<TestOther> = {
component: TestOther,
@ -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();
},
};
"

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

@ -88,13 +88,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 () => {

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

@ -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: {},

15
packages/react-native/generators.json
View File

@ -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",

19
packages/react-native/src/generators/component-story/component-story.ts
View File

@ -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;

6
packages/react-native/src/generators/component-story/schema.d.ts vendored
View File

@ -1,6 +0,0 @@
export interface CreateComponentStoriesFileSchema {
project: string;
componentPath: string;
interactionTests?: boolean;
skipFormat?: boolean;
}

42
packages/react-native/src/generators/component-story/schema.json
View File

@ -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"]
}

7
packages/react-native/src/generators/stories/schema.d.ts vendored
View File

@ -1,7 +0,0 @@
export interface StorybookStoriesSchema {
project: string;
interactionTests?: boolean;
js?: boolean;
ignorePaths?: string[];
skipFormat?: boolean;
}

58
packages/react-native/src/generators/stories/schema.json
View File

@ -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"]
}

16
packages/react-native/src/generators/stories/stories.ts
View File

@ -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;

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

@ -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;

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

@ -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;
}

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

@ -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"
}

300
packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap
View File

@ -1,10 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -25,19 +24,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -58,19 +55,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -91,19 +86,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -124,19 +117,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -157,19 +148,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -190,19 +179,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -223,19 +210,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -256,19 +241,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -289,19 +272,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -322,19 +303,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -355,19 +334,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -388,19 +365,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -421,19 +396,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -454,19 +427,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -487,19 +458,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -520,19 +489,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -553,19 +520,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -586,19 +551,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { One } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof One> = {
component: One,
@ -613,19 +576,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Two } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Two> = {
component: Two,
@ -640,19 +601,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Three } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Three> = {
component: Three,
@ -671,19 +630,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -709,19 +666,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -742,19 +697,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -775,19 +728,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -808,19 +759,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -841,19 +790,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -874,19 +821,17 @@ 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();
},
};
"
`;
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 type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -901,19 +846,17 @@ 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();
},
};
"
`;
exports[`react:component-story default setup default component setup should properly set up the story 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { TestUiLib } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof TestUiLib> = {
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/test';
export default {
component: Test,
@ -951,16 +892,15 @@ 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();
},
};
"
`;
exports[`react:component-story using eslint - not using interaction tests should properly set up the story 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { TestUiLib } from './test-ui-lib';
const meta: Meta<typeof TestUiLib> = {

8
packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__
View File

@ -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/test';
<%_ } _%>
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();
},
};
<%_ } _%>

10
packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__
View File

@ -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/test';
<%_ } _%>
const meta: Meta<typeof <%= componentName %>> = {
@ -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();
},
};
<% } %>

26
packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap
View File

@ -1,10 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react:stories for applications should create the stories with interaction tests 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { NxWelcome } from './nx-welcome';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof NxWelcome> = {
component: NxWelcome,
@ -23,19 +22,17 @@ 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();
},
};
"
`;
exports[`react:stories for applications should create the stories with interaction tests 2`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './another-cmp';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -56,16 +53,15 @@ 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();
},
};
"
`;
exports[`react:stories for applications should create the stories without interaction tests 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { NxWelcome } from './nx-welcome';
const meta: Meta<typeof NxWelcome> = {
@ -84,7 +80,7 @@ export const Primary = {
`;
exports[`react:stories for applications should create the stories without interaction tests 2`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './another-cmp';
const meta: Meta<typeof Test> = {
@ -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';
"
`;

24
packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap
View File

@ -1,10 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react:stories for libraries should create the stories with interaction tests 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { TestUiLib } from './test-ui-lib';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof TestUiLib> = {
component: TestUiLib,
@ -19,19 +18,17 @@ 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();
},
};
"
`;
exports[`react:stories for libraries should create the stories with interaction tests 2`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './another-cmp';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof Test> = {
component: Test,
@ -52,16 +49,15 @@ 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();
},
};
"
`;
exports[`react:stories for libraries should create the stories without interaction tests 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { TestUiLib } from './test-ui-lib';
const meta: Meta<typeof TestUiLib> = {
@ -78,7 +74,7 @@ export const Primary = {
`;
exports[`react:stories for libraries should create the stories without interaction tests 2`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { Test } from './another-cmp';
const meta: Meta<typeof Test> = {

2
packages/react/src/generators/stories/stories.app.spec.ts
View File

@ -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, {

7
packages/react/src/generators/stories/stories.lib.spec.ts
View File

@ -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 () => {

7
packages/react/src/generators/stories/stories.nextjs.spec.ts
View File

@ -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 () => {

12
packages/react/src/generators/stories/stories.ts
View File

@ -158,21 +158,9 @@ export async function storiesGenerator(
schema.ignorePaths
);
const tasks: GeneratorCallback[] = [];
if (schema.interactionTests) {
const { interactionTestsDependencies, addInteractionsInAddons } =
ensurePackage<typeof import('@nx/storybook')>('@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) {

20
packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
View File

@ -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: {},
@ -30,10 +30,9 @@ export default config;
`;
exports[`react:storybook-configuration should generate stories for components 1`] = `
"import type { Meta, StoryObj } from '@storybook/react';
"import type { Meta, StoryObj } from 'storybook/internal/types';
import { MyComponent } from './my-component';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { expect } from 'storybook/test';
const meta: Meta<typeof MyComponent> = {
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/test';
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();
},
};
"

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

@ -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 () => {

6
packages/remix/src/generators/storybook-configuration/__snapshots__/storybook-configuration.impl.spec.ts.snap
View File

@ -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: {

8
packages/storybook/.eslintrc.json
View File

@ -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"]
}
]
}

182
packages/storybook/docs/migrate-7-generator-examples.md
View File

@ -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](/technologies/test-tools/storybook/recipes/best-practices).
{% /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 <MY-PROJECT>/.storybook --renderer @storybook/<react|angular|etc>`.
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).

122
packages/storybook/docs/migrate-9-generator-examples.md Normal file
View File

@ -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).

19
packages/storybook/generators.json
View File

@ -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
}
}
}

Some files were not shown because too many files have changed in this diff Show More