docs(storybook): csf3 stories update (#15423)
This commit is contained in:
Katerina Skroumpelou
GitHub
parent
b84125f9dd
commit
399b8a46ec
@ -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.",
|
||||
|
||||
@ -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.",
|
||||
|
||||
@ -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
|
||||
<some-folder>/
|
||||
@ -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<ButtonComponent>;
|
||||
title: 'MyButtonComponent',
|
||||
component: MyButtonComponent,
|
||||
} as Meta<MyButtonComponent>;
|
||||
|
||||
const Template: Story<ButtonComponent> = (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)
|
||||
|
||||
@ -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
|
||||
<some-folder>/
|
||||
@ -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<ButtonProps> = (args) => <Button {...args} />;
|
||||
```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.stories.tsx" %}
|
||||
import type { Meta } from '@storybook/react';
|
||||
import { MyButton } from './my-button';
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
text: 'Click me!',
|
||||
padding: 0,
|
||||
style: 'default',
|
||||
const Story: Meta<typeof MyButton> = {
|
||||
component: MyButton,
|
||||
title: 'MyButton',
|
||||
};
|
||||
export default Story;
|
||||
|
||||
export const Primary = {
|
||||
args: {
|
||||
text: 'Click me!',
|
||||
padding: 0,
|
||||
style: 'default',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**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.cy.ts" %}
|
||||
describe('feature-ui: MyButton component', () => {
|
||||
beforeEach(() =>
|
||||
cy.visit(
|
||||
'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'
|
||||
'/iframe.html?id=mybutton--primary&args=text:Click+me!;padding;style:default'
|
||||
)
|
||||
);
|
||||
|
||||
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!');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`.
|
||||
|
||||
## More Documentation
|
||||
|
||||
You can find all Storybook-related Nx topics [here](/packages#storybook).
|
||||
@ -159,3 +165,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
|
||||
|
||||
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
|
||||
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
|
||||
- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup)
|
||||
- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7)
|
||||
|
||||
@ -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
|
||||
<some-folder>/
|
||||
@ -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<ButtonComponent>;
|
||||
title: 'MyButtonComponent',
|
||||
component: MyButtonComponent,
|
||||
} as Meta<MyButtonComponent>;
|
||||
|
||||
const Template: Story<ButtonComponent> = (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)
|
||||
|
||||
@ -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
|
||||
<some-folder>/
|
||||
@ -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<ButtonProps> = (args) => <Button {...args} />;
|
||||
```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.stories.tsx" %}
|
||||
import type { Meta } from '@storybook/react';
|
||||
import { MyButton } from './my-button';
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
text: 'Click me!',
|
||||
padding: 0,
|
||||
style: 'default',
|
||||
const Story: Meta<typeof MyButton> = {
|
||||
component: MyButton,
|
||||
title: 'MyButton',
|
||||
};
|
||||
export default Story;
|
||||
|
||||
export const Primary = {
|
||||
args: {
|
||||
text: 'Click me!',
|
||||
padding: 0,
|
||||
style: 'default',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**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.cy.ts" %}
|
||||
describe('feature-ui: MyButton component', () => {
|
||||
beforeEach(() =>
|
||||
cy.visit(
|
||||
'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'
|
||||
'/iframe.html?id=mybutton--primary&args=text:Click+me!;padding;style:default'
|
||||
)
|
||||
);
|
||||
|
||||
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!');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`.
|
||||
|
||||
## More Documentation
|
||||
|
||||
You can find all Storybook-related Nx topics [here](/packages#storybook).
|
||||
@ -159,3 +165,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
|
||||
|
||||
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
|
||||
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
|
||||
- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup)
|
||||
- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
This generator will generate stories for all your components in your project.
|
||||
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/).
|
||||
|
||||
```bash
|
||||
nx g @nrwl/angular:stories project-name
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
This generator will generate stories for all your components in your project.
|
||||
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/).
|
||||
|
||||
```bash
|
||||
nx g @nrwl/react:stories project-name
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user