diff --git a/docs/angular/guides/storybook-plugin.md b/docs/angular/guides/storybook-plugin.md index f6ad66cd2edace..fb09d56d2a13d3 100644 --- a/docs/angular/guides/storybook-plugin.md +++ b/docs/angular/guides/storybook-plugin.md @@ -80,37 +80,43 @@ nx run project-name-e2e:e2e The url that Cypress points to should look like this: -`'/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'` +`'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'` - `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file. - `primary` is the name of an individual story. -- `knob-style=default` sets the `style` knob to a value of `default`. +- `style=default` sets the `style` control to a value of `default`. -Changing knobs in the url query parameters allows your Cypress tests to test different configurations of your component. +Changing controls in the url query parameters allows your Cypress tests to test different configurations of your component. ### Example Files **\*.component.stories.ts file** ```typescript -import { text, number } from '@storybook/addon-knobs'; +import { moduleMetadata, Story, Meta } from '@storybook/angular'; import { ButtonComponent } from './button.component'; export default { title: 'ButtonComponent', -}; - -export const primary = () => ({ - moduleMetadata: { - imports: [], - }, component: ButtonComponent, - props: { - text: text('text', 'Click me!'), - padding: number('padding', 0), - style: text('style', 'default'), - }, + decorators: [ + moduleMetadata({ + imports: [], + }), + ], +} as Meta; + +const Template: Story = (args: ButtonComponent) => ({ + component: ButtonComponent, + props: args, }); + +export const Primary = Template.bind({}); +Primary.args = { + text: 'Click me!', + padding: 0, + style: 'default', +}; ``` **Cypress \*.spec.ts file** @@ -119,7 +125,7 @@ export const primary = () => ({ describe('shared-ui', () => { beforeEach(() => cy.visit( - '/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default' + '/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default' ) ); @@ -138,16 +144,16 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta module.exports = { stories: [...], ..., - addons: [..., '@storybook/addon-knobs/register'], + addons: [..., '@storybook/addon-essentials'], }; ``` 2. If a decorator is required, in each project's `/.storybook/preview.js` use the `addDecorator` function. ```typescript - import { configure, addDecorator } from '@storybook/angular'; - import { withKnobs } from '@storybook/addon-knobs'; + import { addDecorator } from '@storybook/angular'; + import { YourDecorator } from '@storybook/'; - addDecorator(withKnobs); + addDecorator(YourDecorator); ``` **-- OR --** @@ -159,16 +165,16 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook module.exports = { stories: [...], ..., - addons: [..., '@storybook/addon-knobs/register'], + addons: [..., '@storybook/addon-essentials'], }; ``` 2. If a decorator is required, in `preview.js` use the `addDecorator` function. ```typescript - import { configure, addDecorator } from '@storybook/angular'; - import { withKnobs } from '@storybook/addon-knobs'; + import { addDecorator } from '@storybook/angular'; + import { YourDecorator } from '@storybook/'; - addDecorator(withKnobs); + addDecorator(YourDecorator); ``` ### More Information @@ -290,11 +296,11 @@ If you have not changed the content of the files which the `storybook-configurat ```typescript module.exports = { stories: [], - addons: ['@storybook/addon-knobs/register'], + addons: ['@storybook/addon-essentials'], }; ``` -- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should only have the `@storybook/addon-knobs/register` addon, which we already put in the array. You can now delete the `addons.js` file. +- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file. - The other two files remain unchanged. @@ -323,10 +329,10 @@ After you add any addons in the `main.js` file, you can safely delete the `addon - Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this: ```typescript -import { addDecorator } from '<%= uiFramework %>'; -import { withKnobs } from '@storybook/addon-knobs'; +import { addDecorator } from '@storybook/angular'; +import { YourDecorator } from '@storybook/'; -addDecorator(withKnobs); +addDecorator(YourDecorator); ``` - Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more: diff --git a/docs/react/guides/storybook-plugin.md b/docs/react/guides/storybook-plugin.md index b869de93bc7daa..b8dee013e6ed62 100644 --- a/docs/react/guides/storybook-plugin.md +++ b/docs/react/guides/storybook-plugin.md @@ -71,28 +71,35 @@ nx run project-name-e2e:e2e The url that Cypress points to should look like this: -`'/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'` +`'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'` - `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file. - `primary` is the name of an individual story. -- `knob-style=default` sets the `style` knob to a value of `default`. +- `style=default` sets the `style` control to a value of `default`. -Changing knobs in the url query parameters allows your Cypress tests to test different configurations of your component. +Changing controls in the url query parameters allows your Cypress tests to test different configurations of your component. ### Example Files **\*.stories.tsx file** ```typescript -import React from 'react'; -import { text, number } from '@storybook/addon-knobs'; -import { Button } from './button'; +import { Story, Meta } from '@storybook/react'; +import { Button, ButtonProps } from './button'; -export default { title: 'Button' }; +export default { + component: Button, + title: 'Button', +} as Meta; -export const primary = () => ( -