diff --git a/docs/generated/packages/angular/generators/stories.json b/docs/generated/packages/angular/generators/stories.json index 8a3c3034d2..13e22d73b2 100644 --- a/docs/generated/packages/angular/generators/stories.json +++ b/docs/generated/packages/angular/generators/stories.json @@ -49,7 +49,7 @@ }, "additionalProperties": false, "required": ["name"], - "examplesFile": "This generator will generate stories for all your components in your project.\n\n```bash\nnx g @nrwl/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories).\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 `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n", + "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nrwl/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories).\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 `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, 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", "presets": [] }, "description": "Creates stories/specs for all components declared in a project.", diff --git a/docs/generated/packages/react/generators/stories.json b/docs/generated/packages/react/generators/stories.json index 6b2e31b060..0b0b1852aa 100644 --- a/docs/generated/packages/react/generators/stories.json +++ b/docs/generated/packages/react/generators/stories.json @@ -46,7 +46,7 @@ } }, "required": ["project"], - "examplesFile": "This generator will generate stories for all your components in your project.\n\n```bash\nnx g @nrwl/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories).\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 `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n", + "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nrwl/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories).\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 `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:stories --name=ui --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", "presets": [] }, "description": "Create stories/specs for all components declared in an app or library.", diff --git a/docs/generated/packages/storybook/documents/overview-angular.md b/docs/generated/packages/storybook/documents/overview-angular.md index 725350f162..569d4090eb 100644 --- a/docs/generated/packages/storybook/documents/overview-angular.md +++ b/docs/generated/packages/storybook/documents/overview-angular.md @@ -21,7 +21,7 @@ nx g @nrwl/angular:storybook-configuration project-name ## Auto-generate Stories -The `@nrwl/angular:storybook-configuration` generator has the option to automatically generate `*.stories.ts` files for each component declared in the library. +The `@nrwl/angular:storybook-configuration` generator has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). ```text / @@ -96,46 +96,47 @@ Changing args in the url query parameters allows your Cypress tests to test diff ## Example Files -```typescript {% fileName="*.component.stories.ts" %} -import { moduleMetadata, Story, Meta } from '@storybook/angular'; -import { ButtonComponent } from './button.component'; +Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui` with a component, called `my-button`. + +### Story file + +The Storybook configuration generator would generate a Story file that looks like this: + +```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.component.stories.ts" %} +import { Meta } from '@storybook/angular'; +import { MyButtonComponent } from './my-button.component'; export default { - title: 'ButtonComponent', - component: ButtonComponent, - decorators: [ - moduleMetadata({ - imports: [], - }), - ], -} as Meta; + title: 'MyButtonComponent', + component: MyButtonComponent, +} as Meta; -const Template: Story = (args: ButtonComponent) => ({ - props: args, -}); - -export const Primary = Template.bind({}); -Primary.args = { - text: 'Click me!', - padding: 0, - style: 'default', +export const Primary = { + render: (args: MyButtonComponent) => ({ + props: args, + }), + args: { + text: 'Click me!', + padding: 10, + disabled: true, + }, }; ``` -**Cypress test file** +### Cypress test file -> Depending on your Cypress version, the file will end with .spec.ts or .cy.ts +For the library described above, Nx would generate an E2E project called `feature-ui-e2e` with a Cypress test file that looks like this: -```typescript -describe('shared-ui', () => { +```typescript {% fileName="apps/feature-ui-e2e/src/e2e/my-button/my-button.component.cy.ts" %} +describe('feature-ui', () => { beforeEach(() => cy.visit( - '/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default' + '/iframe.html?id=mybuttoncomponent--primary&args=text:Click+me!;padding:10;disabled:true;' ) ); - it('should render the component', () => { - cy.get('storybook-trial-button').should('exist'); + it('should contain the right text', () => { + cy.get('button').should('contain', 'Click me!'); }); }); ``` @@ -157,3 +158,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For - [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-angular) - [Migrate to the new Storybook `webpackFinal` config](/packages/storybook/documents/migrate-webpack-final-angular) +- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup) +- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7) diff --git a/docs/generated/packages/storybook/documents/overview-react.md b/docs/generated/packages/storybook/documents/overview-react.md index c716840938..01f0cb7476 100644 --- a/docs/generated/packages/storybook/documents/overview-react.md +++ b/docs/generated/packages/storybook/documents/overview-react.md @@ -33,7 +33,7 @@ module.exports = { ## Auto-generate Stories -The `@nrwl/react:storybook-configuration` generator has the option to automatically generate `*.stories.ts` files for each component declared in the library. +The `@nrwl/react:storybook-configuration` generator has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). ```text / @@ -108,45 +108,51 @@ Changing args in the url query parameters allows your Cypress tests to test diff ## Example Files -**\*.stories.tsx file** +Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui` with a component, called `my-button`. -```typescript -import { Story, Meta } from '@storybook/react'; -import { Button, ButtonProps } from './button'; +### Story file -export default { - component: Button, - title: 'Button', -} as Meta; +The Storybook configuration generator would generate a Story file that looks like this: -const Template: Story = (args) =>