diff --git a/docs/generated/packages/storybook.json b/docs/generated/packages/storybook.json index 0c751ed515..7f2db2b23b 100644 --- a/docs/generated/packages/storybook.json +++ b/docs/generated/packages/storybook.json @@ -17,13 +17,13 @@ "id": "overview-react", "name": "Overview (React)", "file": "shared/guides/storybook/plugin-react", - "content": "# Storybook\n\n![Storybook logo](/shared/storybook-logo.png)\n\nStorybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.\n\nThis guide will briefly walk you through using Storybook within an Nx workspace.\n\n## Setting Up Storybook\n\n### Add the Storybook plugin\n\n```bash\nyarn add --dev @nrwl/storybook\n```\n\n## Using Storybook\n\n### Generating Storybook Configuration\n\nYou can generate Storybook configuration for an individual project with this command:\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\n### Running Storybook\n\nServe Storybook using this command:\n\n```bash\nnx run project-name:storybook\n```\n\n### Anatomy of the Storybook setup\n\nWhen running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create\n\n- a global Storybook configuration\n- a project specific Storybook configuration\n\nThe **global** Storybook configuration allows to set addon-ons or custom webpack configuration at a global level that applies to all Storybook's within the Nx workspace. You can find that folder at `.storybook/` at the root of the workspace.\n\n```treeview\n/\n├── .storybook/\n│ ├── main.js\n│ ├── tsconfig.json\n├── apps/\n├── libs/\n├── nx.json\n├── package.json\n├── README.md\n└── etc...\n```\n\nThe project-specific Storybook configuration is pretty much similar what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.\n\n```treeview\n/\n├── .storybook/\n│ ├── main.js\n│ ├── preview.js\n│ ├── tsconfig.json\n├── src/\n├── README.md\n├── tsconfig.json\n└── etc...\n```\n\n### Nx React Storybook Preset\n\n`@nrwl/react` ships with a Storybook preset to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the preset to your configuration.\n\n```typescript\nconst rootMain = require('../../../.storybook/main');\n\nmodule.exports = {\n ...rootMain,\n addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],\n ...\n};\n```\n\n### Using Addons\n\nTo register a [Storybook addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:\n\n1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:\n ```typescript\n module.exports = {\n stories: [...],\n ...,\n addons: [..., '@storybook/addon-essentials'],\n };\n ```\n2. If a decorator is required, in each project's `/.storybook/preview.js`, you can export an array called `decorators`.\n\n ```typescript\n import someDecorator from 'some-storybook-addon';\n export const decorators = [someDecorator];\n ```\n\n**-- OR --**\n\nTo register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:\n\n1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:\n ```typescript\n module.exports = {\n stories: [...],\n ...,\n addons: [..., '@storybook/addon-essentials'],\n };\n ```\n2. If a decorator is required, in `preview.js` you can export an array called `decorators`.\n\n ```typescript\n import someDecorator from 'some-storybook-addon';\n export const decorators = [someDecorator];\n ```\n\n### Auto-generate Stories\n\nThe `@nrwl/react:storybook-configuration` generator has the option to automatically generate `*.stories.ts` files for each component declared in the library.\n\n```treeview\n/\n├── my.component.ts\n└── my.component.stories.ts\n```\n\nYou can re-run it at a later point using the following command:\n\n```bash\nnx g @nrwl/react:stories \n```\n\n### Cypress tests for Stories\n\nBoth `storybook-configuration` generator gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.\n\nTo launch Storybook and run the Cypress tests against the iframe inside of Storybook:\n\n```bash\nnx run project-name-e2e:e2e\n```\n\nThe url that Cypress points to should look like this:\n\n`'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'`\n\n- `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file.\n- `primary` is the name of an individual story.\n- `style=default` sets the `style` arg to a value of `default`.\n\nChanging args in the url query parameters allows your Cypress tests to test different configurations of your component. You can [read the documentation](https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url) for more information.\n\n### Example Files\n\n**\\*.stories.tsx file**\n\n```typescript\nimport { Story, Meta } from '@storybook/react';\nimport { Button, ButtonProps } from './button';\n\nexport default {\n component: Button,\n title: 'Button',\n} as Meta;\n\nconst Template: Story = (args) =>