mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 00:51:04 +08:00
Merge branch 'next' into 16426-callback-call-ids
This commit is contained in:
Gert Hengeveld
commit
b5707b7aff
22
.github/workflows/linear-export.yml
vendored
22
.github/workflows/linear-export.yml
vendored
@ -12,12 +12,16 @@ jobs:
|
||||
name: Export to linear
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Install dependencies
|
||||
run: yarn install
|
||||
- name: Export to linear
|
||||
run: >
|
||||
yarn linear-export ${{ github.event.issue.number }}
|
||||
env:
|
||||
GH_TOKEN: ${{ secrets.LINEAR_GH_TOKEN }}
|
||||
LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
|
||||
# - uses: hmarr/debug-action@v2
|
||||
- name: Linear action
|
||||
uses: shilman/linear-action@v1
|
||||
with:
|
||||
ghIssueNumber: ${{ github.event.number || github.event.issue.number }}
|
||||
ghRepoOwner: ${{ github.event.repository.owner.login }}
|
||||
ghRepoName: ${{ github.event.repository.name }}
|
||||
ghToken: ${{ secrets.LINEAR_GH_TOKEN }}
|
||||
linearIssuePrefix: SB
|
||||
linearLabel: Storybook
|
||||
linearPRLabel: PR
|
||||
linearTeam: CH
|
||||
linearApiKey: ${{ secrets.LINEAR_API_KEY }}
|
||||
|
||||
70
CHANGELOG.md
70
CHANGELOG.md
@ -1,8 +1,76 @@
|
||||
## 6.4.0-rc.7 (November 24, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Add `./` to start of hidden file & folder paths ([#16723](https://github.com/storybookjs/storybook/pull/16723))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Update peer dependencies for angular 13 support ([#16758](https://github.com/storybookjs/storybook/pull/16758))
|
||||
|
||||
## 6.4.0-rc.6 (November 22, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF: Fix component id handling ([#16746](https://github.com/storybookjs/storybook/pull/16746))
|
||||
- Addon-docs: Improved loading state ([#16709](https://github.com/storybookjs/storybook/pull/16709))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- WebComponents: Update Lit peerDep to use Lit 2 stable version ([#16670](https://github.com/storybookjs/storybook/pull/16670))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade react-router to 6.0.0 ([#16742](https://github.com/storybookjs/storybook/pull/16742))
|
||||
|
||||
## 6.4.0-rc.5 (November 19, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Restore `stringifyEnvs` utility used by Vite builder ([#16731](https://github.com/storybookjs/storybook/pull/16731))
|
||||
|
||||
## 6.4.0-rc.4 (November 19, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix `process.env` stringification ([#16725](https://github.com/storybookjs/storybook/pull/16725))
|
||||
- Core: Fix build-storybook sort bug in v6-mode ([#16724](https://github.com/storybookjs/storybook/pull/16724))
|
||||
- Addon-docs/Angular: fix extractEnumValues undefined error ([#16524](https://github.com/storybookjs/storybook/pull/16524))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Angular: update addon interactions example ([#16698](https://github.com/storybookjs/storybook/pull/16698))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade from node-sass to sass in examples/angular-cli ([#16663](https://github.com/storybookjs/storybook/pull/16663))
|
||||
|
||||
## 6.4.0-rc.3 (November 16, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix detection of @angular/cli package version ([#16696](https://github.com/storybookjs/storybook/pull/16696))
|
||||
|
||||
## 6.4.0-rc.2 (November 16, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add option to use webpack filesystem cache ([#16219](https://github.com/storybookjs/storybook/pull/16219))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix automigrate command for eslint with extends as string ([#16687](https://github.com/storybookjs/storybook/pull/16687))
|
||||
- Core: Bust the prebuilt manager cache if user has set `features` ([#16684](https://github.com/storybookjs/storybook/pull/16684))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: GH Action for exporting to linear by GH label ([#16683](https://github.com/storybookjs/storybook/pull/16683))
|
||||
|
||||
## 6.4.0-rc.1 (November 13, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
* Angular: Add getWebpackConfig for angular 12.2.x & 13.x.x ([#16644](https://github.com/storybookjs/storybook/pull/16644))
|
||||
- Angular: Add getWebpackConfig for angular 12.2.x & 13.x.x ([#16644](https://github.com/storybookjs/storybook/pull/16644))
|
||||
|
||||
## 6.4.0-rc.0 (November 12, 2021)
|
||||
|
||||
|
||||
24
MIGRATION.md
24
MIGRATION.md
@ -1,6 +1,7 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Automigrate](#automigrate)
|
||||
- [CRA5 upgrade](#cra5-upgrade)
|
||||
- [CSF3 enabled](#csf3-enabled)
|
||||
- [Optional titles](#optional-titles)
|
||||
@ -10,8 +11,8 @@
|
||||
- [Behavioral differences](#behavioral-differences)
|
||||
- [Main.js framework field](#mainjs-framework-field)
|
||||
- [Using the v7 store](#using-the-v7-store)
|
||||
- [V7-style story sort](#v7-style-story-sort)
|
||||
- [V7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
|
||||
- [v7-style story sort](#v7-style-story-sort)
|
||||
- [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
|
||||
- [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
|
||||
- [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
|
||||
- [Babel mode v7](#babel-mode-v7)
|
||||
@ -186,10 +187,25 @@
|
||||
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
|
||||
Automigrate is a new 6.4 feature that provides zero-config upgrades to your dependencies, configurations, and story files.
|
||||
|
||||
Each automigration analyzes your project, and if it's is applicable, propose a change alongside relevant documentation. If you accept the changes, the automigration will update your files accordingly.
|
||||
|
||||
For example, if you're in a webpack5 project but still use Storybook's default webpack4 builder, the automigration can detect this and propose an upgrade. If you opt-in, it will install the webpack5 builder and update your `main.js` configuration automatically.
|
||||
|
||||
You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes:
|
||||
|
||||
```
|
||||
npx sb@next automigrate
|
||||
```
|
||||
|
||||
The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`).
|
||||
|
||||
### CRA5 upgrade
|
||||
|
||||
Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to
|
||||
upgrade the configuration. You can do this automatically by running:
|
||||
Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running:
|
||||
|
||||
```
|
||||
npx sb@next automigrate
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/channels": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/channels": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -79,7 +79,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.20",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -63,7 +63,8 @@ basic.parameters = {
|
||||
|
||||
```md
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import \* as stories from './Button.stories.js';
|
||||
import * as stories from './Button.stories.js';
|
||||
import { Button } from './Button';
|
||||
import { SomeComponent } from 'path/to/SomeComponent';
|
||||
|
||||
<Meta title="Demo/Button" component={Button} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,21 +63,21 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/csf-tools": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/postinstall": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/csf-tools": "6.4.0-rc.7",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@storybook/postinstall": "6.4.0-rc.7",
|
||||
"@storybook/preview-web": "6.4.0-rc.7",
|
||||
"@storybook/source-loader": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -106,11 +106,11 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/html": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"@storybook/angular": "6.4.0-rc.7",
|
||||
"@storybook/html": "6.4.0-rc.7",
|
||||
"@storybook/react": "6.4.0-rc.7",
|
||||
"@storybook/vue": "6.4.0-rc.7",
|
||||
"@storybook/web-components": "6.4.0-rc.7",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -126,8 +126,8 @@
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^26.6.3",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"lit-element": "^3.0.0-rc.2",
|
||||
"lit-html": "^2.0.0-rc.3",
|
||||
"lit-element": "^3.0.2",
|
||||
"lit-html": "^2.0.2",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rxjs": "^6.6.3",
|
||||
"styled-components": "^5.2.1",
|
||||
@ -140,14 +140,14 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/html": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/vue3": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"@storybook/angular": "6.4.0-rc.7",
|
||||
"@storybook/html": "6.4.0-rc.7",
|
||||
"@storybook/react": "6.4.0-rc.7",
|
||||
"@storybook/vue": "6.4.0-rc.7",
|
||||
"@storybook/vue3": "6.4.0-rc.7",
|
||||
"@storybook/web-components": "6.4.0-rc.7",
|
||||
"lit": "^2.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
"svelte": "^3.31.2",
|
||||
@ -202,7 +202,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -162,7 +162,7 @@ export const StoryTable: FC<
|
||||
const story = useStory(storyId, context);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs, resetArgs] = useArgs(storyId, context);
|
||||
if (!story) return <PureArgsTable isLoading />;
|
||||
if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;
|
||||
|
||||
const argTypes = filterArgTypes(story.argTypes, include, exclude);
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@ const extractTypeFromValue = (defaultValue: any) => {
|
||||
|
||||
const extractEnumValues = (compodocType: any) => {
|
||||
const compodocJson = getCompodocJson();
|
||||
const enumType = compodocJson?.miscellaneous.enumerations.find((x) => x.name === compodocType);
|
||||
const enumType = compodocJson?.miscellaneous?.enumerations?.find((x) => x.name === compodocType);
|
||||
|
||||
if (enumType?.childs.every((x) => x.value)) {
|
||||
return enumType.childs.map((x) => x.value);
|
||||
|
||||
@ -32,7 +32,7 @@ function applyTransformSource(
|
||||
export function sourceDecorator(
|
||||
storyFn: PartialStoryFn<WebComponentsFramework>,
|
||||
context: StoryContext<WebComponentsFramework>
|
||||
) {
|
||||
): WebComponentsFramework['storyResult'] {
|
||||
const story = context?.parameters.docs?.source?.excludeDecorators
|
||||
? (context.originalStoryFn as ArgsStoryFn<WebComponentsFramework>)(context.args, context)
|
||||
: storyFn();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.4.0-rc.1",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.1",
|
||||
"@storybook/addon-controls": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/addon-measure": "6.4.0-rc.1",
|
||||
"@storybook/addon-outline": "6.4.0-rc.1",
|
||||
"@storybook/addon-toolbars": "6.4.0-rc.1",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/addon-actions": "6.4.0-rc.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-rc.7",
|
||||
"@storybook/addon-controls": "6.4.0-rc.7",
|
||||
"@storybook/addon-docs": "6.4.0-rc.7",
|
||||
"@storybook/addon-measure": "6.4.0-rc.7",
|
||||
"@storybook/addon-outline": "6.4.0-rc.7",
|
||||
"@storybook/addon-toolbars": "6.4.0-rc.7",
|
||||
"@storybook/addon-viewport": "6.4.0-rc.7",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.7",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/web-components": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.7",
|
||||
"@storybook/web-components": "6.4.0-rc.7",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -41,14 +41,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/instrumenter": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/instrumenter": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.0.5",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/router": "6.4.0-rc.1",
|
||||
"@storybook/router": "6.4.0-rc.7",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-client": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-client": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -69,11 +69,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.4.0-rc.1",
|
||||
"@storybook/angular": "6.4.0-rc.1",
|
||||
"@storybook/react": "6.4.0-rc.1",
|
||||
"@storybook/vue": "6.4.0-rc.1",
|
||||
"@storybook/vue3": "6.4.0-rc.1",
|
||||
"@storybook/addon-docs": "6.4.0-rc.7",
|
||||
"@storybook/angular": "6.4.0-rc.7",
|
||||
"@storybook/react": "6.4.0-rc.7",
|
||||
"@storybook/vue": "6.4.0-rc.7",
|
||||
"@storybook/vue3": "6.4.0-rc.7",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -151,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,7 +42,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.1",
|
||||
"@storybook/addon-storyshots": "6.4.0-rc.7",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4"
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/router": "6.4.0-rc.1",
|
||||
"@storybook/source-loader": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/router": "6.4.0-rc.7",
|
||||
"@storybook/source-loader": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -67,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-logger": "6.4.0-rc.1",
|
||||
"@storybook/components": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/theming": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-logger": "6.4.0-rc.7",
|
||||
"@storybook/components": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/theming": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/core-events": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/core-events": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -80,6 +80,7 @@
|
||||
"@angular-devkit/architect": "~0.1102.0",
|
||||
"@angular-devkit/build-angular": "~0.1102.13",
|
||||
"@angular-devkit/core": "^11.2.13",
|
||||
"@angular/cli": "^11.2.14",
|
||||
"@angular/common": "^11.2.14",
|
||||
"@angular/compiler": "^11.2.14",
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
@ -98,8 +99,9 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/architect": ">=0.8.9",
|
||||
"@angular-devkit/build-angular": ">=0.8.9",
|
||||
"@angular-devkit/build-angular": ">=0.8.9 || >= 12.0.0",
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/cli": ">=6.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
"@angular/compiler": ">=6.0.0",
|
||||
"@angular/compiler-cli": ">=6.0.0",
|
||||
@ -111,11 +113,14 @@
|
||||
"@babel/core": "*",
|
||||
"@nrwl/workspace": ">=11.1.0",
|
||||
"@webcomponents/custom-elements": ">=1.4.3",
|
||||
"rxjs": "^6.0.0",
|
||||
"rxjs": "^6.0.0 || ^7.4.0",
|
||||
"typescript": "^3.4.0 || >=4.0.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/cli": {
|
||||
"optional": true
|
||||
},
|
||||
"@angular/elements": {
|
||||
"optional": true
|
||||
},
|
||||
@ -133,5 +138,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4"
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40"
|
||||
}
|
||||
|
||||
@ -17,8 +17,7 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
const packageJson = await import(findUpSync('package.json', { cwd: options.configDir }));
|
||||
const angularCliVersion = semver.coerce(packageJson.devDependencies['@angular/cli'])?.version;
|
||||
const angularCliVersion = await import('@angular/cli').then((m) => semver.coerce(m.VERSION.full));
|
||||
|
||||
/**
|
||||
* Ordered array to use the specific getWebpackConfig according to some condition like angular-cli version
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -43,9 +43,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^2.1.4",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -66,6 +66,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/client-api": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -71,6 +71,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -74,6 +74,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,14 +49,14 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
@ -73,7 +73,7 @@
|
||||
"webpack": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.7",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/prompts": "^2.0.9"
|
||||
},
|
||||
@ -96,6 +96,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/api": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/api": "6.4.0-rc.7",
|
||||
"@storybook/client-api": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/node-logger": "6.4.0-rc.7",
|
||||
"@storybook/preview-web": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.4.0-rc.1",
|
||||
"version": "6.4.0-rc.7",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,13 +50,13 @@
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@storybook/addons": "6.4.0-rc.1",
|
||||
"@storybook/client-api": "6.4.0-rc.1",
|
||||
"@storybook/core": "6.4.0-rc.1",
|
||||
"@storybook/core-common": "6.4.0-rc.1",
|
||||
"@storybook/addons": "6.4.0-rc.7",
|
||||
"@storybook/client-api": "6.4.0-rc.7",
|
||||
"@storybook/core": "6.4.0-rc.7",
|
||||
"@storybook/core-common": "6.4.0-rc.7",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.4.0-rc.1",
|
||||
"@storybook/store": "6.4.0-rc.1",
|
||||
"@storybook/preview-web": "6.4.0-rc.7",
|
||||
"@storybook/store": "6.4.0-rc.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.8.2",
|
||||
@ -68,10 +68,10 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "^2.0.0-rc.3"
|
||||
"lit-html": "2.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3"
|
||||
"lit-html": "^1.4.1 || ^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
@ -79,6 +79,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "0d79fcc7dd9f8d949c2644aefb54e77a3f932db4",
|
||||
"gitHead": "7162286c0d8d122c7206265fab41c4c191c86d40",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -187,6 +187,7 @@ When Storybook was initialized, it provided a small set of example stories. Chan
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story-with-addon-example.js.mdx',
|
||||
'react/button-story-with-addon-example.ts.mdx',
|
||||
'vue/button-story-with-addon-example.js.mdx',
|
||||
'angular/button-story-with-addon-example.ts.mdx',
|
||||
'svelte/button-story-with-addon-example.js.mdx',
|
||||
|
||||
@ -68,17 +68,16 @@ For example, here is how Storybook automatically adopts `create-react-app`'s con
|
||||
|
||||
As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` builder. If your addon needs to know which version of Webpack it's running inside, the version and the actual webpack instance itself are both available inside your preset:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
export function webpackFinal(config, { presets }) {
|
||||
const version = await presets.apply('webpackVersion');
|
||||
const instance = (await presets.apply('webpackInstance'))?.default;
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-versioned-webpack.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
logger.info(`=> Running in webpack ${version}: ${instance}`);
|
||||
return config;
|
||||
}
|
||||
```
|
||||
|
||||
### Manager entries
|
||||
|
||||
@ -110,30 +109,32 @@ This is equivalent to [registering the addon manually](../get-started/browse-sto
|
||||
|
||||
### Preview entries
|
||||
|
||||
The addon config `config` allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon.
|
||||
The addon `config` function allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon.
|
||||
|
||||
For example, the Backgrounds preset contains the following code:
|
||||
|
||||
```js
|
||||
// preset.js
|
||||
export function config(entry = []) {
|
||||
return [...entry, require.resolve('./defaultParameters')];
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-backgrounds-preset-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
Which in turn invokes:
|
||||
|
||||
```js
|
||||
// defaultParameters.js
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: 'light', value: '#F8F8F8' },
|
||||
{ name: 'dark', value: '#333333' },
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-backgrounds-addon-default-params.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This is equivalent to exporting the `backgrounds` parameter manually in `main.js`.
|
||||
|
||||
|
||||
@ -4,15 +4,15 @@ title: 'ArgTypes'
|
||||
|
||||
<div class="aside">
|
||||
|
||||
NOTE: This API is experimental and may change outside of the typical semver release cycle
|
||||
<strong>NOTE</strong>: This API is experimental and may change outside of the typical semver release cycle
|
||||
|
||||
</div>
|
||||
|
||||
ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg you constrain the values that it can take and can also provide information about args that are not explicitly set (i.e. not required).
|
||||
ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required).
|
||||
|
||||
You can also use argTypes to “annotate” args with information that is used by addons that make use of those args, for instance to instruct the controls addons to render a color choose for a string-valued arg.
|
||||
You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg.
|
||||
|
||||
The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType, as well as the current value of that arg.
|
||||
The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-blocks.md#argstable) doc block. Each row in the table corresponds to a single argType and the current value of that arg.
|
||||
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ To do so, Storybook uses various static analysis tools depending on your framewo
|
||||
- Ember
|
||||
- [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components)
|
||||
|
||||
The format of the generated argType will look something like:
|
||||
The format of the generated argType will look something like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -46,11 +46,11 @@ The format of the generated argType will look something like:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In this ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how label gets rendered, and the control annotation provides extra information for the control for editing the property.
|
||||
This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
`@storybook/addon-docs` provide shorthand for common tasks:
|
||||
💡 The `@storybook/addon-docs` provide a shorthand for common tasks:
|
||||
|
||||
- `type: 'number'` is shorthand for type: { name: 'number' }
|
||||
- `control: 'radio'` is shorthand for control: { type: 'radio' }
|
||||
@ -59,7 +59,7 @@ In this ArgTypes data structure, name, type, defaultValue, and description are s
|
||||
|
||||
#### Manual specification
|
||||
|
||||
If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above inferred argTypes and the following default export:
|
||||
If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -71,7 +71,7 @@ If you want more control over the args table or any other aspect of using argTyp
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
These values--description, table.type, and controls.type--get merged over the defaults that are extracted by Storybook. The final merged values would be:
|
||||
The `values.description`, `table.type`, and `controls.type` are merged into the defaults extracted by Storybook. The final merged values would be:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -86,9 +86,7 @@ These values--description, table.type, and controls.type--get merged over the de
|
||||
In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
As it happens with other properties such as `args`, `argTypes` can be overridden in a single story.
|
||||
|
||||
💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.
|
||||
</div>
|
||||
|
||||
#### Using argTypes in addons
|
||||
@ -103,4 +101,4 @@ If you want to access the argTypes of the current component inside an addon, you
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -12,52 +12,58 @@ Pass these commands the following options to alter Storybook's behavior.
|
||||
Usage: start-storybook [options]
|
||||
```
|
||||
|
||||
| Options | Description | Example |
|
||||
| ---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
|
||||
| --help | Output usage information | `start-storybook --help` |
|
||||
| -V, --version | Output the version number | `start-storybook -V` |
|
||||
| -p, --port [number] | Port to run Storybook | `start-storybook -p 9009` |
|
||||
| -h, --host [string] | Host to run Storybook | `start-storybook -h my-host.com` |
|
||||
| -s, --static-dir `<dir-names>` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `start-storybook -s public` |
|
||||
| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `start-storybook -c .storybook` |
|
||||
| --https | Serve Storybook over HTTPS. Note: You must provide your own certificate information. | `start-storybook --https` |
|
||||
| --ssl-ca `<ca>` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) | `start-storybook --ssl-ca my-certificate` |
|
||||
| --ssl-cert `<cert>` | Provide an SSL certificate. (Required with --https) | `start-storybook --ssl-cert my-ssl-certificate` |
|
||||
| --ssl-key `<key>` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` |
|
||||
| --smoke-test | Exit after successful start | `start-storybook --smoke-test` |
|
||||
| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` |
|
||||
| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` |
|
||||
| --quiet | Suppress verbose build output | `start-storybook --quiet` |
|
||||
| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` |
|
||||
| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` |
|
||||
| `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
|
||||
| --docs | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs` |
|
||||
| --no-manager-cache | Disables Storybook's manager caching mechanism. See note below. | `start-storybook --no-manager-cache` |
|
||||
| Options | Description |
|
||||
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--help` | Output usage information <br/>`start-storybook --help` |
|
||||
| `-V`, `--version` | Output the version number <br/>`start-storybook -V` |
|
||||
| `-p`, `--port [number]` | Port to run Storybook <br/>`start-storybook -p 9009` |
|
||||
| `-h`, `--host [string]` | Host to run Storybook <br/>`start-storybook -h my-host.com` |
|
||||
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list <br/>`start-storybook -s public` |
|
||||
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`start-storybook -c .storybook` |
|
||||
| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information. <br/>`start-storybook --https` |
|
||||
| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) <br/>`start-storybook --ssl-ca my-certificate` |
|
||||
| `--ssl-cert` | Provide an SSL certificate. (Required with --https)<br/>`start-storybook --ssl-cert my-ssl-certificate` |
|
||||
| `--ssl-key` | Provide an SSL key. (Required with --https)<br/>`start-storybook --ssl-key my-ssl-key` |
|
||||
| `--smoke-test` | Exit after successful start<br/>`start-storybook --smoke-test` |
|
||||
| `--ci` | CI mode (skip interactive prompts, don't open browser)<br/>`start-storybook --ci` |
|
||||
| `--no-open` | Do not open Storybook automatically in the browser<br/>`start-storybook --no-open` |
|
||||
| `--quiet` | Suppress verbose build output<br/>`start-storybook --quiet` |
|
||||
| `--no-dll` | Do not use dll reference (no-op)<br/>`start-storybook --no-dll` |
|
||||
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`start-storybook --debug-webpack` |
|
||||
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`start-storybook --webpack-stats-json /tmp/webpack-stats` |
|
||||
| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`start-storybook --docs` |
|
||||
| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below.<br/>`start-storybook --no-manager-cache` |
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>NOTE</strong>: The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
|
||||
</div>
|
||||
|
||||
<div class="aside" id="static-dir-deprecation">
|
||||
|
||||
💡 <strong>NOTE</strong>: Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
|
||||
|
||||
</div>
|
||||
|
||||
## build-storybook
|
||||
|
||||
```plaintext
|
||||
Usage: build-storybook [options]
|
||||
```
|
||||
|
||||
| Options | Description | Example |
|
||||
| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- |
|
||||
| -h, --help | Output usage information | `build-storybook --help` |
|
||||
| -V, --version | Output the version number | `build-storybook -V` |
|
||||
| -s, --static-dir `<dir-names>` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `build-storybook -s public` |
|
||||
| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` |
|
||||
| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -c .storybook` |
|
||||
| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` |
|
||||
| --quiet | Suppress verbose build output | `build-storybook --quiet` |
|
||||
| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` |
|
||||
| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` |
|
||||
| `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk | `build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
|
||||
| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` |
|
||||
| Options | Description |
|
||||
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `-h`, `--help` | Output usage information<br/>`build-storybook --help` |
|
||||
| `-V`, `--version` | Output the version number<br/>`build-storybook -V` |
|
||||
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list<br/>`build-storybook -s public` |
|
||||
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`build-storybook -o /my-deployed-storybook` |
|
||||
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`build-storybook -c .storybook` |
|
||||
| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]<br/>`build-storybook --loglevel warn` |
|
||||
| `--quiet` | Suppress verbose build output<br/>`build-storybook --quiet` |
|
||||
| `--no-dll` | Do not use dll reference (no-op)<br/>`build-storybook --no-dll` |
|
||||
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`build-storybook --debug-webpack` |
|
||||
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
|
||||
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`build-storybook --docs` |
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
|
||||
</div>
|
||||
</div>
|
||||
@ -6,7 +6,7 @@ Component Story Format (CSF) is the recommended way to [write stories](../writin
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md).
|
||||
💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/docs/storiesOf.md).
|
||||
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@ CSF is supported in all frameworks except React Native, where you should use the
|
||||
|
||||
The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md).
|
||||
|
||||
The `component` field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. `title` should be unique, i.e. not re-used across files.
|
||||
The `component` field is required and used by addons for automatic prop table generation and display of other component metadata. The `title` field is optional and should be unique (i.e., not re-used across files).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -34,16 +34,18 @@ For more examples, see [writing stories](../writing-stories/introduction.md).
|
||||
|
||||
## Named story exports
|
||||
|
||||
With CSF, every named export in the file represents a story function by default.
|
||||
With CSF, every named export in the file represents a story object by default.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/my-component-story-basic-and-props.js.mdx',
|
||||
'react/my-component-story-basic-and-props.ts.mdx',
|
||||
'vue/my-component-story-basic-and-props.js.mdx',
|
||||
'svelte/my-component-story-basic-and-props.js.mdx',
|
||||
'svelte/my-component-story-basic-and-props.native-format.mdx',
|
||||
'angular/my-component-story-basic-and-props.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -59,11 +61,11 @@ The exported identifiers will be converted to "start case" using Lodash's [start
|
||||
| some_custom_NAME | Some Custom NAME |
|
||||
| someName1234 | Some Name 1 2 3 4 |
|
||||
|
||||
It's recommended to start export names with a capital letter.
|
||||
We recommend that all export names to start with a capital letter.
|
||||
|
||||
Story functions can be annotated with a few different fields to define story-level [decorators](../writing-stories/decorators.md) and [parameters](../writing-stories/parameters.md), and also to define the `storyName` of the story.
|
||||
Story objects can be annotated with a few different fields to define story-level [decorators](../writing-stories/decorators.md) and [parameters](../writing-stories/parameters.md), and also to define the `name` of the story.
|
||||
|
||||
The `storyName` is useful if you want to use names with special characters, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead.
|
||||
Storybook's `name` configuration element is helpful in specific circumstances. Common use cases are names with special characters or Javascript restricted words. If not specified, Storybook defaults to the named export.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -86,10 +88,12 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story-click-handler.js.mdx',
|
||||
'react/button-story-click-handler.ts.mdx',
|
||||
'vue/button-story-click-handler.2.js.mdx',
|
||||
'vue/button-story-click-handler.3.js.mdx',
|
||||
'svelte/button-story-click-handler.js.mdx',
|
||||
'svelte/button-story-click-handler.native-format.mdx',
|
||||
'angular/button-story-click-handler.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -104,13 +108,13 @@ Now consider the same example, re-written with args:
|
||||
'react/button-story-click-handler-args.js.mdx',
|
||||
'vue/button-story-click-handler-args.2.js.mdx',
|
||||
'vue/button-story-click-handler-args.3.js.mdx',
|
||||
'angular/button-story-click-handler-args.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
At first blush this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
|
||||
At first blush, this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -131,24 +135,46 @@ Or even more simply:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story-click-handler-simplificated.js.mdx',
|
||||
'angular/button-story-click-handler-simplificated.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Not only are these versions shorter and easier to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
|
||||
Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
|
||||
|
||||
For more information on setting up [Docs](../writing-docs/introduction.md) and [Actions](../essentials/actions.md), see their respective documentation.
|
||||
|
||||
## Storybook export vs name handling
|
||||
## Play function
|
||||
|
||||
Storybook handles named exports and `story.name` slightly differently. When should you use one vs. the other?
|
||||
Storybook's `play` functions are small snippets of code executed when the story renders in the UI. They are convenient helper methods to help you test use cases that otherwise weren't possible or required user intervention.
|
||||
|
||||
The named export is always used to determine the story ID / URL.
|
||||
A good use case for the `play` function is a form component. With previous Storybook versions, you'd write your set of stories and had to interact with the component to validate it. With Storybook's play functions, you could write the following story:
|
||||
|
||||
If you specify `story.name`, it will be used as the story display name in the UI.
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
If you don't specify `story.name`, the named export will be used to generate the display name. Storybook passes the named export through a `storyNameFromExport` function, which is implemented with `lodash.startCase`:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/login-form-with-play-function.js.mdx',
|
||||
'react/login-form-with-play-function.ts.mdx',
|
||||
'angular/login-form-with-play-function.ts.mdx',
|
||||
'vue/login-form-with-play-function.2.js.mdx',
|
||||
'vue/login-form-with-play-function.3.js.mdx',
|
||||
'svelte/login-form-with-play-function.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
|
||||
|
||||
## Storybook export vs. name handling
|
||||
|
||||
Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?
|
||||
|
||||
Storybook will always use the named export to determine the story ID and URL.
|
||||
|
||||
If you specify the `name` option, it will be used as the story display name in the UI. Otherwise, it defaults to the named export, processed through Storybook's `storyNameFromExport` and `lodash.startCase` functions.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -160,18 +186,18 @@ If you don't specify `story.name`, the named export will be used to generate the
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the story's ID and URL.
|
||||
When you want to change the name of your story, rename the CSF export. It will change the name of the story and also change the story's ID and URL.
|
||||
|
||||
You should use the `story.name` option in the following cases:
|
||||
It would be best if you used the `name` configuration element in the following cases:
|
||||
|
||||
1. You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g. reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`.
|
||||
2. You want to preserve the Story ID independently from changing how it's displayed. Having stable Story ID's is useful for integration with third party tools.
|
||||
1. You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g., reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by `storyNameFromExport`.
|
||||
2. You want to preserve the Story ID independently from changing how it's displayed. Having stable Story IDs is helpful for integration with third-party tools.
|
||||
|
||||
## Non-story exports
|
||||
|
||||
In some cases, you may want to export a mixture of story and non-stories. For example, it can be useful to export data that's used in your stories.
|
||||
In some cases, you may want to export a mixture of stories and non-stories (e.g., mocked data).
|
||||
|
||||
To make this possible, you can use optional `includeStories` and `excludeStories` configuration fields in the default export, which can be set to either an array of strings, or a regular expression.
|
||||
You can use the optional configuration fields `includeStories` and `excludeStories` in the default export to make this possible. You can define them as an array of strings or regular expressions.
|
||||
|
||||
Consider the following story file:
|
||||
|
||||
@ -180,16 +206,19 @@ Consider the following story file:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/my-component-story-with-nonstory.js.mdx',
|
||||
'vue/my-component-story-with-nonstory.js.mdx',
|
||||
'react/my-component-story-with-nonstory.ts.mdx',
|
||||
'vue/my-component-story-with-nonstory.2.js.mdx',
|
||||
'vue/my-component-story-with-nonstory.3.js.mdx',
|
||||
'svelte/my-component-story-with-nonstory.js.mdx',
|
||||
'angular/my-component-story-with-nonstory.ts.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When Storybook loads this file, it will see all the exports, but it will ignore the data exports and only treat `SimpleStory` and `ComplexStory` as stories.
|
||||
When this file renders in Storybook, it treats `ComplexStory` and `SimpleStory` as stories and ignores the `data` named exports.
|
||||
|
||||
For this specific example the equivalent result can be achieved in a few ways depending on what's convenient:
|
||||
For this particular example, you could achieve the same result in different ways, depending on what's convenient:
|
||||
|
||||
- `includeStories: /^[A-Z]/`
|
||||
- `includeStories: /.*Story$/`
|
||||
@ -198,4 +227,4 @@ For this specific example the equivalent result can be achieved in a few ways de
|
||||
- `excludeStories: /.*Data$/`
|
||||
- `excludeStories: ['simpleData', 'complexData']`
|
||||
|
||||
If you follow the best practice of starting story exports with an uppercase letter (i.e. use UpperCamelCase), the first option is the recommended solution.
|
||||
The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase).
|
||||
@ -16,4 +16,4 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
|
||||
|
||||
Community frameworks have fewer contributors which means they may not be as up to date as core frameworks. If you use one of these frameworks for your job, please consider contributing to its integration with Storybook.
|
||||
|
||||
<FrameworkSupportTable core={false} />
|
||||
<FrameworkSupportTable core={false} />
|
||||
@ -20,27 +20,28 @@ Let's get started with an example that combines Markdown with a single story:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
And here's how that's rendered in Storybook:
|
||||
And here's how it renders in Storybook:
|
||||
|
||||
|
||||
|
||||
As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
|
||||
As you can see, a lot is going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
|
||||
|
||||
Let's break it down.
|
||||
|
||||
## MDX-Flavored CSF
|
||||
|
||||
[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as `# heading`) for your documentation, and freely embed JSX component blocks at any point in the file.
|
||||
[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. It means you can use Markdown’s terse syntax (such as `# heading`) for your documentation and freely embed JSX component blocks at any point in the file.
|
||||
|
||||
MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers.
|
||||
MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into Storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers.
|
||||
|
||||
For example, here's the story from `Checkbox` example above, rewritten in CSF:
|
||||
For example, here's the story from the `Checkbox` example above, rewritten in CSF:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/checkbox-story-csf.js.mdx',
|
||||
'react/checkbox-story-csf.ts.mdx',
|
||||
'vue/checkbox-story-csf.js.mdx',
|
||||
'angular/checkbox-story-csf.ts.mdx',
|
||||
'svelte/checkbox-story-csf.native-format.mdx',
|
||||
@ -49,7 +50,7 @@ For example, here's the story from `Checkbox` example above, rewritten in CSF:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
|
||||
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user, this means your existing Storybook knowledge should translate between the three constructs. And technically, this means that the transformations that happen under the hood are predictable and straightforward.
|
||||
|
||||
## Writing stories
|
||||
|
||||
@ -101,7 +102,7 @@ To add [decorators](../writing-docs/mdx.md#decorators-and-parameters) and [param
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In addition, global decorators work just like before, e.g. adding the following to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
In addition, global decorators work just like before, e.g., adding the following to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -113,20 +114,38 @@ In addition, global decorators work just like before, e.g. adding the following
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Play function
|
||||
|
||||
Storybook's `play` functions are small snippets of code that run after the story loads. They're helpful methods to help test scenarios that otherwise would require user intervention. For example, if you're working on a login component and want to interact with it and verify the component's workflow, you could write the following story:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/login-form-with-play-function.mdx.mdx',
|
||||
'angular/login-form-with-play-function.mdx.mdx',
|
||||
'vue/login-form-with-play-function.mdx-2.mdx',
|
||||
'vue/login-form-with-play-function.mdx-3.mdx',
|
||||
'svelte/login-form-with-play-function.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Documentation-only MDX
|
||||
|
||||
Typically, when you use Storybook MDX, you define stories in the MDX and the documentation is automatically associated with those stories. But what if you want to write Markdown-style documentation and have it show up in your Storybook?
|
||||
Typically, when you use the MDX format, you define your stories and are automatically generated by Storybook. But what if you want to write Markdown-style documentation and have it show up in your Storybook?
|
||||
|
||||
If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation.
|
||||
Suppose you don't define stories in your MDX. In that case, you can write MDX documentation and associate it with an existing story or embed that MDX as its documentation node in your Storybook's navigation.
|
||||
|
||||
If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](../writing-docs/mdx.md).
|
||||
If you don't define a `Meta`, you can write Markdown and associate it with an existing story. See ["CSF Stories with MDX Docs"](../writing-docs/mdx.md).
|
||||
|
||||
To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
To get a "documentation-only story" in your UI, define a `<Meta>` as you usually would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
|
||||
|
||||
|
||||
## MDX file names
|
||||
|
||||
Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. It tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
|
||||
Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation).
|
||||
Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](https://github.com/storybookjs/storybook/tree/master/addons/docs#installation).
|
||||
@ -2,33 +2,33 @@
|
||||
title: 'Frameworks'
|
||||
---
|
||||
|
||||
Storybook is architected to support diverse web frameworks including React, Vue, Angular, Web Components, Svelte and over a dozen others. This guide helps you get started on adding new framework support for Storybook.
|
||||
Storybook is architected to support diverse web frameworks, including React, Vue, Angular, Web Components, Svelte, and over a dozen others. This guide helps you get started on adding new framework support for Storybook.
|
||||
|
||||
## Scaffolding a new framework
|
||||
|
||||
The first thing to do is scaffold your framework support in its own repo.
|
||||
The first thing to do is to scaffold your framework support in its own repo.
|
||||
|
||||
We recommend adopting the same project structure as the Storybook monorepo. That structure contains the framework package (`app/<framework>`) and an example app (`examples/<framework>-kitchen-sink`) as well as other associated documentation and configuration as needed.
|
||||
|
||||
This may seem like a little more hierarchy than what’s necessary. But because the structure mirrors the way Storybook’s own monorepo is structured, you can reuse Storybook’s tooling and it also makes it easier to move the framework into the Storybook into the monorepo at a later point if that is desirable.
|
||||
It may seem like a little more hierarchy than what’s necessary. But because the structure mirrors the way Storybook’s monorepo is structured, you can reuse Storybook’s tooling. It also makes it easier to move the framework into the Storybook monorepo later if that is desirable.
|
||||
|
||||
We recommend using `@storybook/html` as a starter framework since it’s the simplest one and doesn’t contain any framework-specific oddities. There is a boilerplate to get you started [here](https://github.com/CodeByAlex/storybook-framework-boilerplate).
|
||||
We recommend using `@storybook/html` as a starter framework since it’s the simplest and contains no framework-specific peculiarities. There is a boilerplate to get you started [here](https://github.com/CodeByAlex/storybook-framework-boilerplate).
|
||||
|
||||
## Framework architecture
|
||||
|
||||
Supporting a new framework in Storybook typically consists of two main aspects:
|
||||
|
||||
1. Configuring the server. In Storybook, the server is the node process that runs when you `start-storybook` or `build-storybook`. Configuring the server typically means configuring babel and webpack in framework-specific ways.
|
||||
1. Configuring the server. In Storybook, the server is the node process that runs when you run `start-storybook` or `build-storybook`. Configuring the server typically means configuring babel and webpack in framework-specific ways.
|
||||
|
||||
2. Configuring the client. The client is the code that runs in the browser. Configuring the client means providing a framework-specific story rendering function.
|
||||
2. Configuring the client. The client is the code that runs in the browser, and configuring it, means providing a framework-specific story rendering function.
|
||||
|
||||
## Configuring the server
|
||||
|
||||
Storybook has the concept of [presets](../addons/writing-presets.md#presets-api), which are typically babel/webpack configurations for file loading. If your framework has its own file format, e.g. “.vue,” you might need to transform these files into JS files at load time. If you expect every user of your framework to need this, you should add it to the framework. So far every framework added to Storybook has done this, because Storybook’s core configuration is very minimal.
|
||||
Storybook has the concept of [presets](../addons/writing-presets.md), which are typically babel/webpack configurations for file loading. If your framework has its own file format (e.g., “.vue”), you might need to transform them into JavaScript files at load time. If you assume every user of your framework needs this, you should add it to the framework. So far, every framework added to Storybook has done it because Storybook’s core configuration is extremely minimal.
|
||||
|
||||
### Package structure
|
||||
|
||||
To add a framework preset, it’s useful to understand the package structure. Each framework typically exposes two executables in its `package.json`:
|
||||
It's helpful to understand Storybook's package structure before adding a framework preset. Each framework typically exposes two executables in its `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -53,8 +53,7 @@ For example, here’s the boilerplate to start the dev server in `start-storyboo
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
Thus the meat of adding framework presets is filling in that options object.
|
||||
Thus the essence of adding framework presets is just filling in that options object.
|
||||
|
||||
### Server options
|
||||
|
||||
@ -72,36 +71,33 @@ Let’s look at the `@storybook/vue`’s options definition:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The value of the `framework` option (in this case ‘vue’) is something that gets passed to addons and allows them to do special case things for your framework.
|
||||
The value of the `framework` option (i.e., ‘vue’) is something that gets passed to addons and allows them to do specific tasks related to your framework.
|
||||
|
||||
The real meat of this file is the framework presets, and these are standard [Storybook presets](./addons.md#addon-presets) -- you can look at framework packages in the Storybook monorepo (e.g. [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/server/options.ts), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/server/options.ts), [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/server/options.ts)) to see examples of framework-specific customizations.
|
||||
The essence of this file is the framework presets, and these are standard [Storybook presets](../addons/writing-presets.md) -- you can look at framework packages in the Storybook monorepo (e.g. [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/server/options.ts), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/server/options.ts), [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/server/options.ts)) to see examples of framework-specific customizations.
|
||||
|
||||
When developing your own framework that is not published by storybook, you can pass the path to the framework location with the `frameworkPath` key:
|
||||
While developing your custom framework, not maintained by Storybook, you can specify the path to the location file with the `frameworkPath` key:
|
||||
|
||||
```ts
|
||||
// my-framework/src/server/options.ts
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
import { sync } from 'read-pkg-up';
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-server-framework-options.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
export default {
|
||||
packageJson: sync({ cwd: __dirname }).packageJson,
|
||||
framework: 'my-framework',
|
||||
frameworkPath: '@my-framework/storybook',
|
||||
frameworkPresets: [require.resolve('./framework-preset-my-framework.js')],
|
||||
};
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Passing a relative path to `frameworkPath` is also possible, just keep in mind that these are resolved from the storybook config directory (`.storybook` by default).
|
||||
You can add a relative path to `frameworkPath`. Don't forget that they resolve from the Storybook configuration directory (i.e., `.storybook`) by default.
|
||||
|
||||
Make sure the `frameworkPath` ends up at the `dist/client/index.js` file within your framework app.
|
||||
|
||||
## Configuring the client
|
||||
|
||||
To configure the client, you must provide a framework specific render function. Before diving into the details, it’s important to understand how user-written stories relate to what is finally rendered on the screen.
|
||||
To configure the client, you must provide a framework-specific render function. Before diving into the details, it’s essential to understand how user-written stories relate to what renders on the screen.
|
||||
|
||||
### Renderable objects
|
||||
|
||||
Storybook stories are ES6 functions that return a “renderable object.”
|
||||
Storybook stories are ES6 objects that return a “renderable object.”
|
||||
|
||||
Consider the following React story:
|
||||
|
||||
@ -117,7 +113,7 @@ Consider the following React story:
|
||||
|
||||
In this case, the renderable object is the React element, `<Button .../>`.
|
||||
|
||||
In most other frameworks, the renderable object is actually a plain javascript object.
|
||||
In most other frameworks, the renderable object is actually a plain JavaScript object.
|
||||
|
||||
Consider the following hypothetical example:
|
||||
|
||||
@ -131,11 +127,11 @@ Consider the following hypothetical example:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The design of this “renderable object” is framework-specific, and should ideally match the idioms of that framework.
|
||||
The design of this “renderable object” is framework-specific and should ideally match the idioms of that framework.
|
||||
|
||||
### Render function
|
||||
|
||||
The frameworks render function is the thing responsible for converting the renderable object into DOM nodes. This is typically of the form:
|
||||
The framework's render function is the entity responsible for converting the renderable object into DOM nodes. It is typically of the form:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -161,7 +157,7 @@ On the client side, the key file is [`src/client/preview.js`](../configure/overv
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The globals file typically sets up a single global variable that client-side code (such as addon-provided decorators) can refer to if needed to understand which framework its running in:
|
||||
The globals file typically sets up a single global variable that client-side code (such as addon-provided decorators) can refer to if needed to understand which framework it's running in:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -173,4 +169,4 @@ The globals file typically sets up a single global variable that client-side cod
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The `start` function abstracts all of Storybook’s framework-independent client-side (browser) code, and it takes the render function we defined above. For examples of render functions, see [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/client/preview/render.tsx), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/client/preview/render.ts), [Angular](https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/render.ts), and [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/client/preview/render.ts) in the Storybook monorepo.
|
||||
The `start` function abstracts all of Storybook’s framework-independent client-side (browser) code, and it takes the render function we defined above. For examples of render functions, see [React](https://github.com/storybookjs/storybook/blob/next/app/react/src/client/preview/render.tsx), [Vue](https://github.com/storybookjs/storybook/blob/next/app/vue/src/client/preview/render.ts), [Angular](https://github.com/storybookjs/storybook/blob/next/app/angular/src/client/preview/render.ts), and [Web Components](https://github.com/storybookjs/storybook/blob/next/app/web-components/src/client/preview/render.ts) in the Storybook monorepo.
|
||||
@ -6,13 +6,13 @@ Storybook’s webpack config by [default](#default-configuration) sets up [Babel
|
||||
|
||||
It has three different modes:
|
||||
|
||||
- **CRA** - the mode for Create React App apps specifically
|
||||
- **V6** - the default mode for version 6.x and below
|
||||
- **V7** - a new mode slated to become the default in SB7.x
|
||||
- [**CRA**](#cra-mode) - the mode for Create React App apps specifically
|
||||
- [**V6**](#v6-mode) - the default mode for version 6.x and below
|
||||
- [**V7**](#v7-mode) - a new mode slated to become the default in SB7.x
|
||||
|
||||
## CRA mode
|
||||
|
||||
CRA apps configured with `@storybook/preset-create-react-app` use CRA's babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies.
|
||||
[CRA](https://create-react-app.dev/) apps configured with `@storybook/preset-create-react-app` use CRA's babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies.
|
||||
|
||||
## V6 mode
|
||||
|
||||
@ -26,7 +26,7 @@ Here are some key features of Storybook's Babel configurations.
|
||||
|
||||
We have added ES2016 support with Babel for transpiling your JS code.
|
||||
|
||||
In addition to that, we've added a few additional features, like object spreading and async await.
|
||||
In addition to that, we've added a few additional features, like [object spreading](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and [`async` `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
|
||||
|
||||
Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/utils/babel.ts) to learn more about these plugins.
|
||||
|
||||
@ -34,71 +34,134 @@ Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/co
|
||||
|
||||
If your project has a `.babelrc` file, we'll use that instead of the default config file.
|
||||
|
||||
You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only.
|
||||
You can also place a `.storybook/.babelrc` file to use a unique configuration for Storybook only.
|
||||
|
||||
### Custom configuration
|
||||
|
||||
If you need to further configure/extend the babel config Storybook uses, you can use the `babel` field of [`.storybook/main.js`](./overview#configure-your-storybook-project):
|
||||
If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview#configure-your-storybook-project) and add the `babel` field with the options you want to use:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
//...
|
||||
babel: async (options) => ({
|
||||
...options,
|
||||
// any extra options you want to set
|
||||
}),
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-custom-babel-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## V7 Mode
|
||||
|
||||
V7 mode is a new option available in Storybook 6.4+ behind a feature flag.
|
||||
|
||||
Its goal is to make Babel configuration simpler, less buggy, easier to troubleshoot, and more consistent with the rest of the JS ecosystem.
|
||||
Its goal is to make the Babel configuration simpler, less buggy, easier to troubleshoot, and more consistent with the rest of the JS ecosystem.
|
||||
|
||||
In V7 mode, you are responsible for configuring Babel using your `.babelrc` file and Storybook does not provide any default. Storybook's frameworks and addons may provide small programmatic modifications to the babel configuration.
|
||||
In V7 mode, you are responsible for configuring Babel using your `.babelrc` file, and Storybook does not provide any default. Storybook's frameworks and addons may provide minor programmatic modifications to the babel configuration.
|
||||
|
||||
### Activating
|
||||
### How it works
|
||||
|
||||
To activate V7 mode, set the feature flag in your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// ... your existing config
|
||||
features: {
|
||||
babelModeV7: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-babel-mode-v7.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Migrating from V6
|
||||
|
||||
For detailed instructions on how to migrate from `V6` mode please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7).
|
||||
For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7).
|
||||
|
||||
### Generate a babelrc
|
||||
|
||||
If your app does not use a babelrc and you need one, you can generate a babelrc file by running the following command in your project directory:
|
||||
If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
|
||||
|
||||
```sh
|
||||
npx sb@next babelrc
|
||||
```
|
||||
|
||||
This will create a `.babelrc.json` file. You may need to add package dependencies.
|
||||
Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:
|
||||
|
||||
```json
|
||||
{
|
||||
"sourceType": "unambiguous",
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"shippedProposals": true,
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
"@babel/preset-typescript"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-shorthand-properties",
|
||||
"@babel/plugin-transform-block-scoping",
|
||||
[
|
||||
"@babel/plugin-proposal-decorators",
|
||||
{
|
||||
"legacy": true
|
||||
}
|
||||
],
|
||||
[
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
{
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
[
|
||||
"@babel/plugin-proposal-private-methods",
|
||||
{
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
"@babel/plugin-proposal-export-default-from",
|
||||
"@babel/plugin-syntax-dynamic-import",
|
||||
[
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
{
|
||||
"loose": true,
|
||||
"useBuiltIns": true
|
||||
}
|
||||
],
|
||||
"@babel/plugin-transform-classes",
|
||||
"@babel/plugin-transform-arrow-functions",
|
||||
"@babel/plugin-transform-parameters",
|
||||
"@babel/plugin-transform-destructuring",
|
||||
"@babel/plugin-transform-spread",
|
||||
"@babel/plugin-transform-for-of",
|
||||
"babel-plugin-macros",
|
||||
"@babel/plugin-proposal-optional-chaining",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator",
|
||||
[
|
||||
"babel-plugin-polyfill-corejs3",
|
||||
{
|
||||
"method": "usage-global",
|
||||
"absoluteImports": "core-js",
|
||||
"version": "3.18.3"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Depending on your environment, you may need to install additional package dependencies.
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
To troubleshoot your babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable.
|
||||
|
||||
For example, to see how Storybook is transpiling your `.storybook/preview.js` config:
|
||||
To troubleshoot your babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable. For example, to see how Storybook is transpiling your `.storybook/preview.js` file, add the following environment variable:
|
||||
|
||||
```sh
|
||||
BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook
|
||||
```
|
||||
|
||||
This will print out the babel configuration for `.storybook/preview.js`, which can be used to debug when files fail to transpile or transpile incorrectly.
|
||||
When the command finishes running, it will display the available babel configuration for the `.storybook/preview.js` file. You can use this information to debug issues with transpilation.
|
||||
|
||||
> NOTE: Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually _RUN_ storybook using this command. However, it will print out the configuration information as advertised and thus you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook.
|
||||
> NOTE: Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually _RUN_ Storybook using this command. However, it will print out the configuration information as advertised, and therefore you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook.
|
||||
|
||||
For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs).
|
||||
For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs).
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Environment variables'
|
||||
---
|
||||
|
||||
You can use environment variables in Storybook to change its behaviour in different “modes”.
|
||||
You can use environment variables in Storybook to change its behavior in different “modes”.
|
||||
If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`:
|
||||
|
||||
```shell
|
||||
@ -25,7 +25,7 @@ You can also access these variables in your custom `<head>`/`<body>` using the s
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`
|
||||
💡 If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`
|
||||
|
||||
</div>
|
||||
|
||||
@ -67,20 +67,20 @@ You can also use specific files for specific modes. Add a <code>.env.development
|
||||
|
||||
You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`.
|
||||
|
||||
Then they'll be hard coded to the static version of your Storybook.
|
||||
Then they'll be hardcoded to the static version of your Storybook.
|
||||
|
||||
### Using environment variables to choose the browser
|
||||
|
||||
Storybook allows you to choose the browser you want to preview your stories. Either through an `.env` file entry or directly in your `storybook` script.
|
||||
Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
|
||||
|
||||
The table below lists the available options:
|
||||
|
||||
| Browser | Example |
|
||||
|----------|----------------------|
|
||||
| -------- | -------------------- |
|
||||
| Safari | `BROWSER="safari"` |
|
||||
| Firefox | `BROWSER="firefox"` |
|
||||
| Chromium | `BROWSER="chromium"` |
|
||||
|
||||
<div class="aside">
|
||||
Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
|
||||
</div>
|
||||
💡 <strong>Note</strong>: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
|
||||
</div>
|
||||
@ -16,42 +16,42 @@ To control the layout of Storybook’s UI you can use `addons.setConfig` in your
|
||||
|
||||
The following table details how to use the API values:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **isFullscreen** | Boolean |Show story component as full screen |`false` |
|
||||
| **showNav** | Boolean |Display panel that shows a list of stories |`true` |
|
||||
| **showPanel** | Boolean |Display panel that shows addon configurations |`true` |
|
||||
| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` |
|
||||
| **isToolshown** | Boolean |Show/hide tool bar |`true` |
|
||||
| **theme** | Object |Storybook Theme, see next section |`undefined` |
|
||||
| **selectedPanel** | String |Id to select an addon panel |`storybook/actions/panel` |
|
||||
| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
|
||||
| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` |
|
||||
| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` |
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------------------- | :-----------: | :------------------------------------------------: | :-----------------------------------: |
|
||||
| **isFullscreen** | Boolean | Show story component as full screen | `false` |
|
||||
| **showNav** | Boolean | Display panel that shows a list of stories | `true` |
|
||||
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
|
||||
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
|
||||
| **isToolshown** | Boolean | Show/hide tool bar | `true` |
|
||||
| **theme** | Object | Storybook Theme, see next section | `undefined` |
|
||||
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
|
||||
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
|
||||
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
|
||||
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |
|
||||
|
||||
The following options are configurable under the `sidebar` namespace:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` |
|
||||
| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` |
|
||||
| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => <abbr title="...">{item.name}</abbr>`|
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: |
|
||||
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
|
||||
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
|
||||
| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |
|
||||
|
||||
The following options are configurable under the `toolbar` namespace:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------ | :----: | :--------------------------------: | :-----------------: |
|
||||
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |
|
||||
|
||||
## Configuring through URL parameters
|
||||
|
||||
Some features can be controlled through URL parameters:
|
||||
You can use URL parameters to configure some of the available features:
|
||||
|
||||
| Config option | Query param | Supported values |
|
||||
| ----------------------|:-------------:|:--------------------------:|
|
||||
| **enableShortcuts** | `shortcuts` | `false` |
|
||||
| **isFullscreen** | `full` | `true` |
|
||||
| **showNav** | `nav` | `false` |
|
||||
| **showPanel** | `panel` | `false`, `right`, `bottom` |
|
||||
| **selectedPanel** | `addonPanel` | Any panel ID |
|
||||
| Config option | Query param | Supported values |
|
||||
| ------------------- | :----------: | :------------------------: |
|
||||
| **enableShortcuts** | `shortcuts` | `false` |
|
||||
| **isFullscreen** | `full` | `true` |
|
||||
| **showNav** | `nav` | `false` |
|
||||
| **showPanel** | `panel` | `false`, `right`, `bottom` |
|
||||
| **selectedPanel** | `addonPanel` | Any panel ID |
|
||||
@ -6,15 +6,16 @@ Components often rely on images, videos, fonts, and other assets to render as th
|
||||
|
||||
### Import assets into stories
|
||||
|
||||
You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files.
|
||||
You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://v4.webpack.js.org/loaders/) to handle the required files.
|
||||
|
||||
Afterwards you can use any asset in your stories:
|
||||
Afterward, you can use any asset in your stories:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-with-import.js.mdx',
|
||||
'react/component-story-static-asset-with-import.ts.mdx',
|
||||
'react/component-story-static-asset-with-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-with-import.2.js.mdx',
|
||||
'vue/component-story-static-asset-with-import.mdx-2.mdx.mdx',
|
||||
@ -32,35 +33,28 @@ Afterwards you can use any asset in your stories:
|
||||
|
||||
### Serving static files via Storybook Configuration
|
||||
|
||||
We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. This technique is recommended for assets that your components often use like logos, fonts, and icons.
|
||||
We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.
|
||||
|
||||
Configure a directory (or a list of directories) where your assets live in your Storybook configuration. Use the `staticDirs` property in your `main.js` or `main.ts` configuration file like so:
|
||||
Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`staticDirs` configuration element in your main Storybook configuration file (i.e., `.storybook/main.js`) to specify the directories:
|
||||
|
||||
```js
|
||||
{
|
||||
...
|
||||
staticDirs: ['./public'];
|
||||
...
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
You can map your local static directories to a different path like this:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-single-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
```js
|
||||
{
|
||||
...
|
||||
staticDirs: [{ from: './public', to: '/assets' }];
|
||||
...
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Here `./public` is your static directory. Now use it in a component or story like this.
|
||||
Here `../public` is your static directory. Now use it in a component or story like this.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-without-import.js.mdx',
|
||||
'react/component-story-static-asset-without-import.ts.mdx',
|
||||
'react/component-story-static-asset-without-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-without-import.js.mdx',
|
||||
'vue/component-story-static-asset-without-import.mdx.mdx',
|
||||
@ -76,28 +70,27 @@ Here `./public` is your static directory. Now use it in a component or story lik
|
||||
|
||||
You can also pass a list of directories separated by commas without spaces instead of a single directory.
|
||||
|
||||
```js
|
||||
{
|
||||
...
|
||||
staticDirs: ['./public', './statics'];
|
||||
...
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Or you can map each of them to different paths:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-multiple-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
You can map your local static directories to a different path like this:
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
```js
|
||||
{
|
||||
...
|
||||
staticDirs: [
|
||||
{ from: './public', to: '/assets' },
|
||||
{ from: './statics', to: '/resources' }
|
||||
];
|
||||
...
|
||||
}
|
||||
```
|
||||
Or even use a configuration object to define the directories:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-object-configuration-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### **[⚠️ Deprecated]** Serving static files via Storybook CLI
|
||||
|
||||
@ -105,13 +98,14 @@ Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is reco
|
||||
|
||||
### Reference assets from a CDN
|
||||
|
||||
Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service.
|
||||
Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-cdn.js.mdx',
|
||||
'react/component-story-static-asset-cdn.ts.mdx',
|
||||
'react/component-story-static-asset-cdn.mdx.mdx',
|
||||
'vue/component-story-static-asset-cdn.js.mdx',
|
||||
'vue/component-story-static-asset-cdn.mdx.mdx',
|
||||
@ -127,10 +121,10 @@ Upload your files to an online CDN and reference them. In this example we’re u
|
||||
|
||||
### Absolute versus relative paths
|
||||
|
||||
Sometimes, you may want to deploy your storybook into a subpath, like `https://example.com/storybook`.
|
||||
Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`.
|
||||
|
||||
In this case, you need to have all your images and media files with relative paths. Otherwise, the browser cannot locate those files.
|
||||
|
||||
If you load static content via importing, this is automatic and you do not have to do anything.
|
||||
If you load static content via importing, this is automatic, and you do not have to do anything.
|
||||
|
||||
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
|
||||
Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
title: 'Configure Storybook'
|
||||
---
|
||||
|
||||
Storybook is configured via a folder, called `.storybook` which contains various configuration files.
|
||||
Storybook is configured via a folder called `.storybook`, which contains various configuration files.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Note you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
|
||||
Note that you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
|
||||
|
||||
</div>
|
||||
|
||||
## Configure your Storybook project
|
||||
|
||||
The main configuration file is `main.js`. This file controls the behavior of the Storybook server, and so you must restart Storybook’s process when you change it. It contains the following:
|
||||
The main configuration file is `main.js`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -24,7 +24,7 @@ The main configuration file is `main.js`. This file controls the behavior of the
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The `main.js` configuration file is a [preset](../addons/addon-types.md) and as such has a powerful interface, but the key fields within it are:
|
||||
The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
|
||||
|
||||
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
|
||||
- `addons` - a list of the [addons](/addons) you are using.
|
||||
@ -32,23 +32,23 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and as
|
||||
- `babel` - custom [babel configuration](./babel.md).
|
||||
|
||||
<div class="aside">
|
||||
Tip: Customize your default story by referencing it first in the `stories` array.
|
||||
💡 Tip: Customize your default story by referencing it first in the `stories` array.
|
||||
</div>
|
||||
|
||||
## Configure story loading
|
||||
|
||||
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.js`. The intention is you colocate a story file with the component it documents.
|
||||
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.*`. The intention is you colocate a story file with the component it documents.
|
||||
|
||||
```
|
||||
•
|
||||
└── components
|
||||
├── Button.js
|
||||
└── Button.stories.js
|
||||
├── Button.js
|
||||
└── Button.stories.js
|
||||
```
|
||||
|
||||
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).
|
||||
|
||||
For example if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
|
||||
For example, if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -60,20 +60,77 @@ For example if you wanted to pull both `.md` and `.js` files from the `my-projec
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you want to use a custom logic for loading stories which is not supported by a glob pattern, you can supply the final list of stories files:
|
||||
### With a configuration object
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following:
|
||||
|
||||
function findStories() {
|
||||
// your custom logic returns a list of files
|
||||
}
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
stories: async (list) => [...list, ...findStories()],
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-with-custom-object.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>Note:</strong> If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
|
||||
</div>
|
||||
|
||||
When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories.
|
||||
|
||||
### With a directory
|
||||
|
||||
You can also simplify your Storybook configuration and load the stories based on a directory. For example, if you want to load all the stories inside a `packages/MyStories`, you can adjust the configuration as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-with-directory.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### With a custom implementation
|
||||
|
||||
You can also adjust your Storybook configuration and implement your own custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-custom-logic.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### On-demand story loading
|
||||
|
||||
As your Storybook grows in size, it gets challenging to load all of your stories in a performant way, slowing down the loading times and yielding a large bundle. Starting with Storybook 6.4, you can optimize your story loading by enabling the `storyStoreV7` feature flag in your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-on-demand-story-loading.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Once you've restarted your Storybook, you'll see an almost immediate performance gain in your loading times and also a decrease in the generated bundle.
|
||||
|
||||
#### Known limitations
|
||||
|
||||
This feature is experimental, and it has some limitations on what you can and cannot do in your stories files. If you plan to use it, you'll need to take into consideration the following limitations:
|
||||
|
||||
- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not.
|
||||
- You must manually set the story's titles and names (e.g., `title: 'MyComponent`).
|
||||
- Custom`storySort` functions are allowed based on a restricted API.
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
@ -85,10 +142,10 @@ The `preview.js` file can be an ES module and export the following keys:
|
||||
- `parameters` - an object of global [parameters](../writing-stories/parameters.md#global-parameters)
|
||||
- `globalTypes` - definition of [globalTypes](../essentials/toolbars-and-globals.md#global-types-and-the-toolbar-annotation)
|
||||
|
||||
If you’re looking to change how your stories are ordered, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories).
|
||||
If you’re looking to change how to order your stories, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories).
|
||||
|
||||
## Configure Storybook’s UI
|
||||
|
||||
To control the behaviour of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file.
|
||||
To control the behavior of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file.
|
||||
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Sidebar & URLS'
|
||||
---
|
||||
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ We recommend using a nesting scheme that mirrors the filesystem path of the comp
|
||||
|
||||
## Roots
|
||||
|
||||
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups are displayed as folders:
|
||||
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups will show up as folders:
|
||||
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
|
||||
|
||||
## Generating titles based on `__dirname`
|
||||
|
||||
As a CSF file is a JavaScript file, the exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to generate the title based on the path name (this example uses the paths.macro):
|
||||
As a CSF file is a JavaScript file, all exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to create the title based on the path name (this example uses the paths.macro):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -40,9 +40,11 @@ As a CSF file is a JavaScript file, the exports (including the default export) c
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you need, you can also generate automatic titles for all your stories using a configuration object. See the [story loading](./overview.md#with-a-configuration-object) documentation to learn how you can use this feature.
|
||||
|
||||
## Permalinking to stories
|
||||
|
||||
By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story and that URL can serve as a permalink (especially when you [publish](../workflows/publish-storybook.md) your Storybook).
|
||||
By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../workflows/publish-storybook.md) your Storybook).
|
||||
|
||||
Consider the following story:
|
||||
|
||||
@ -58,7 +60,7 @@ Consider the following story:
|
||||
|
||||
Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
|
||||
|
||||
It is possible to manually set the id of a story, which in particular is useful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -70,4 +72,4 @@ It is possible to manually set the id of a story, which in particular is useful
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Storybook will prioritize the `id` over the title for ID generation, if provided, and will prioritize the `story.name` over the export key for display.
|
||||
Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
|
||||
@ -54,4 +54,4 @@ Or even apply it to specific stories like so:
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Story rendering'
|
||||
---
|
||||
|
||||
In Storybook, your stories render in a special “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the HTML that is rendered to help your stories render correctly.
|
||||
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
|
||||
|
||||
## Adding to <head>
|
||||
|
||||
If you need to add extra elements to the `head` of the preview iframe, for instance to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this:
|
||||
If you need to add extra elements to the `head` of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -18,21 +18,19 @@ If you need to add extra elements to the `head` of the preview iframe, for insta
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
|
||||
Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
|
||||
|
||||
</div>
|
||||
|
||||
It's also possible to programmatically modify the preview head HTML using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
|
||||
|
||||
It's also possible to modify the preview head HTML programmatically using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
|
||||
|
||||
## Adding to <body>
|
||||
|
||||
Sometimes, you may need to add different tags to the `<body>`. This is useful for adding some custom content roots.
|
||||
Sometimes, you may need to add different tags to the `<body>`. Helpful for adding some custom content roots.
|
||||
|
||||
You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and add tags like this:
|
||||
You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and adding tags like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -58,8 +56,8 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
|
||||
Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
|
||||
|
||||
</div>
|
||||
|
||||
Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
|
||||
Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
|
||||
@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into
|
||||
|
||||
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
|
||||
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
@ -2,18 +2,18 @@
|
||||
title: 'Styling and CSS'
|
||||
---
|
||||
|
||||
There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually it is best to try and replicate what your application does with styling in Storybook’s configuration.
|
||||
There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
|
||||
|
||||
### CSS-in-JS
|
||||
|
||||
CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it.
|
||||
CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it.
|
||||
|
||||
### Importing CSS files
|
||||
|
||||
If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions:
|
||||
If your component files import their CSS, Storybook’s webpack config will work unmodified with some exceptions:
|
||||
|
||||
- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config).
|
||||
- In Angular, you'll need to take special care how you handle CSS:
|
||||
- In Angular, you'll need to take special care of how you handle CSS:
|
||||
|
||||
- Either [customize your webpack config](./webpack#extending-storybooks-webpack-config)
|
||||
- Or use syntax to use a inline loader:
|
||||
@ -28,8 +28,8 @@ If your component files import their own CSS, Storybook’s webpack config will
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
To use your CSS in all stories, you simply import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering)
|
||||
To use your CSS in all stories, you import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering)
|
||||
|
||||
### Adding webfonts
|
||||
|
||||
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
|
||||
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
|
||||
@ -82,9 +82,9 @@ Inside your `.storybook` directory, create a new file called `YourTheme.js` and
|
||||
|
||||
Above, we're creating a new theme that will:
|
||||
|
||||
- Use Storybook's `light` theme as a baseline.
|
||||
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
|
||||
- Add custom branding information.
|
||||
- Use Storybook's `light` theme as a baseline.
|
||||
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
|
||||
- Add custom branding information.
|
||||
|
||||
Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
|
||||
|
||||
@ -116,8 +116,8 @@ Let's take a look at a more complex example. Copy the code below and paste it in
|
||||
|
||||
Above, we're updating the theme with the following changes:
|
||||
|
||||
- A custom color palette (defined in the `app` and `color` variables).
|
||||
- Custom fonts (defined in the `font` and `text` variables).
|
||||
- A custom color palette (defined in the `app` and `color` variables).
|
||||
- Custom fonts (defined in the `font` and `text` variables).
|
||||
|
||||
With the new changes introduced, the custom theme should yield a similar result.
|
||||
|
||||
@ -131,7 +131,7 @@ The `@storybook/theming` package is built using TypeScript, which should help cr
|
||||
|
||||
## CSS escape hatches
|
||||
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. This is advanced usage: **use at your own risk**.
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. **Use at your own risk** as this is an advanced feature.
|
||||
|
||||
To style these elements, insert style tags into:
|
||||
|
||||
@ -146,7 +146,7 @@ To style these elements, insert style tags into:
|
||||
|
||||
## MDX component overrides
|
||||
|
||||
If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the components that are rendered from Markdown using a components parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
|
||||
If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the rendered components from Markdown using a `components` parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful construct if you need it.
|
||||
|
||||
Here's how you might insert a custom code renderer for `code` blocks on the page, in [`.storybook/preview.js`](./overview.md#configure-story-rendering):
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'TypeScript'
|
||||
---
|
||||
|
||||
Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed [unless you use the `paths` option in your TSConfig.](./webpack#typescript-module-resolution)
|
||||
Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.
|
||||
|
||||
### Default configuration
|
||||
|
||||
@ -18,7 +18,7 @@ Each framework uses the base configuration unless otherwise specified:
|
||||
|
||||
To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering).
|
||||
|
||||
The following code snippets shows the fields for you to use with TypeScript:
|
||||
The following code snippets show the fields for you to use with TypeScript:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -37,15 +37,13 @@ The following code snippets shows the fields for you to use with TypeScript:
|
||||
| **reactDocgen** | React | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false |
|
||||
| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) |
|
||||
|
||||
See default values [here](https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/presets/common-preset.ts#L51)
|
||||
|
||||
### Overriding the configuration to infer additional props
|
||||
|
||||
The configuration provided above will remove any props from any third party libraries.
|
||||
The configuration provided above will remove any props from any third-party libraries.
|
||||
|
||||
If it's required you can adjust the configuration and include the extra props.
|
||||
If required, you can adjust the configuration and include the extra props.
|
||||
|
||||
Adjust the configuration as shown below and any third party props will be displayed as soon as you restart your Storybook.
|
||||
Adjust the configuration as demonstrated below. And the next time you restart your Storybook, the extra props will also be in the UI.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -57,8 +55,6 @@ Adjust the configuration as shown below and any third party props will be displa
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Next time you restart your Storybook the extra props will also be in the UI.
|
||||
|
||||
<div class="aside">
|
||||
If you run into an issue where the extra props aren't included, check how your component is being exported. If it's using a default export, change it to a named export and the extra props will be included as well.
|
||||
</div>
|
||||
If you run into an issue where any additional props don't show up, check your component's code. If you're using a default export, change it to a named export, and doing that will ensure that the additional props are included.
|
||||
</div>
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Upgrading Storybook'
|
||||
---
|
||||
|
||||
The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether it's upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading.
|
||||
The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading.
|
||||
|
||||
## Upgrade script
|
||||
|
||||
The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bugfixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
|
||||
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
|
||||
|
||||
@ -14,23 +14,23 @@ To help ease the pain of keeping Storybook up-to-date, we provide a command-line
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
This upgrades all of the Storybook packages in your project to the latest stable version, performs confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to automatically update your configuration.
|
||||
This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
In addition to running the command, we also recommend skimming [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), an exhaustive log of relevant changes and deprecations that might affect your upgrade.
|
||||
In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
|
||||
|
||||
</div>
|
||||
|
||||
## Automigrate script
|
||||
|
||||
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [webpack 4 to webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
|
||||
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
|
||||
|
||||
```
|
||||
npx sb@next automigrate
|
||||
```
|
||||
|
||||
This runs a set of common configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. This gets run automatically as part of [`sb upgrade`](#upgrade-script), but it's also available on its own in case you don't want to upgrade Storybook.
|
||||
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
|
||||
|
||||
## Prereleases
|
||||
|
||||
@ -42,4 +42,4 @@ To upgrade to the latest pre-release:
|
||||
npx sb@next upgrade --prerelease
|
||||
```
|
||||
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Webpack'
|
||||
---
|
||||
|
||||
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other common use cases.
|
||||
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other everyday use cases.
|
||||
|
||||
You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file.
|
||||
|
||||
@ -43,10 +43,11 @@ You can import `.json` files and have them expanded to a JavaScript object:
|
||||
If you want to know the exact details of the webpack config, the best way is to run either of the following:
|
||||
|
||||
```shell
|
||||
yarn start-storybook --debug-webpack
|
||||
```
|
||||
|
||||
```shell
|
||||
## Development mode
|
||||
yarn start-storybook --debug-webpack
|
||||
|
||||
## Production mode
|
||||
yarn build-storybook --debug-webpack
|
||||
```
|
||||
|
||||
@ -56,7 +57,7 @@ To extend the above configuration, use the `webpackFinal` field of [`.storybook/
|
||||
|
||||
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc.
|
||||
|
||||
For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support:
|
||||
For example, if you wanted to add [Sass](https://sass-lang.com/) support, you can adjust your configuration as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -111,9 +112,25 @@ The following code snippet shows how you can replace the loaders from Storybook
|
||||
💡 <strong>Note:</strong> Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
|
||||
</div>
|
||||
|
||||
### Bundle splitting
|
||||
|
||||
Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-on-demand-story-loading.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading).
|
||||
|
||||
### TypeScript Module Resolution
|
||||
|
||||
When working with TypeScript projects the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
|
||||
When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -127,4 +144,4 @@ When working with TypeScript projects the default Webpack configuration may fail
|
||||
|
||||
<div class="aside">
|
||||
💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
|
||||
</div>
|
||||
</div>
|
||||
@ -17,7 +17,7 @@ Actions work via supplying special Storybook-generated “action” arguments (r
|
||||
|
||||
### Action argType annotation
|
||||
|
||||
You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your story should be an action. Usually it makes sense to do this at the component level (although it can be done per story):
|
||||
You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your story should be an action. Usually, it makes sense to do this at the component level (although you can apply it per individual story):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -30,13 +30,25 @@ You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When Storybook sees this argType it will create an arg that is set to a special “action” callback. If your component calls this arg (based on user interaction) the event will show up in the action panel:
|
||||
When Storybook sees this argType, it will create an arg set to a special “action” callback. If your component calls this arg (based on the user's interaction or through the `play` function), the event will show up in the action panel:
|
||||
|
||||
|
||||
|
||||
### Automatically matching args
|
||||
|
||||
Another option is to use a parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)).
|
||||
Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-preview-matching-argtypes.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you need more granular control over which `argTypes` are matched, you can adjust your stories and include the `argTypes` parameter. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -51,7 +63,7 @@ Another option is to use a parameter to match all [argTypes](../api/argtypes.md)
|
||||
|
||||
<div class="aside">
|
||||
|
||||
NOTE: If you're generating argTypes in using another addon (like [docs](../writing-docs/introduction.md), which is the common behavior) you'll need to make sure that the actions addon loads **AFTER** the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
|
||||
💡 <strong>NOTE</strong>: If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon <strong>AFTER</strong> the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
|
||||
|
||||
</div>
|
||||
|
||||
@ -70,8 +82,8 @@ It is also possible to detect if your component is emitting the correct HTML eve
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is `<eventname> <selector>`. Selector is optional; it defaults to all elements.
|
||||
This will bind a standard HTML event handler to the outermost HTML element rendered by your component and trigger an action when the event is called for a given selector. The format is `<eventname> <selector>`. The selector is optional; it defaults to all elements.
|
||||
|
||||
## Advanced / legacy usage
|
||||
|
||||
There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
|
||||
There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
|
||||
@ -1,7 +1,7 @@
|
||||
To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
|
||||
|
||||
```ts
|
||||
// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
|
||||
// Button.stories.js|jsx|ts|tsx
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Backgrounds'
|
||||
---
|
||||
|
||||
The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI:
|
||||
The backgrounds toolbar addon allows you to set the background color in which the story renders in the UI:
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -13,9 +13,9 @@ The backgrounds toolbar item allows you to adjust the background that your story
|
||||
|
||||
## Configuration
|
||||
|
||||
By default, the backgrounds toolbar presents you with a light and dark background.
|
||||
By default, the backgrounds toolbar includes a light and dark background.
|
||||
|
||||
But you're not restricted to these two backgrounds, you can configure your own set of colors with the `parameters.backgrounds` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
But you're not restricted to these backgrounds, you can configure your own set of colors with the `parameters.backgrounds` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -27,9 +27,11 @@ But you're not restricted to these two backgrounds, you can configure your own s
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you define the `default` property, the backgrounds toolbar will set that color for every story where the parameter is applied to. If you don't set it, the colors will be available but not automatically set when a story is rendered.
|
||||
If you define the `default` property, the addon will apply it to all stories. Otherwise, it's only listed as an available color.
|
||||
|
||||
You can also set backgrounds on per-story or per-component basis by using [parameter inheritance](../writing-stories/parameters.md#component-parameters):
|
||||
### Extending the configuration
|
||||
|
||||
You can also define backgrounds per-component or per-story basis through [parameter inheritance](../writing-stories/parameters.md#component-parameters):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -42,7 +44,7 @@ You can also set backgrounds on per-story or per-component basis by using [param
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
You can also only override a single key on the backgrounds parameter, for instance to set a different default value for a single story:
|
||||
You can also override a single key on the `backgrounds` parameter, for instance, to set a different default value for a particular story:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -55,6 +57,8 @@ You can also only override a single key on the backgrounds parameter, for instan
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Disable backgrounds
|
||||
|
||||
If you want to disable backgrounds in a story, you can do so by setting the `backgrounds` parameter like so:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
@ -70,11 +74,9 @@ If you want to disable backgrounds in a story, you can do so by setting the `bac
|
||||
|
||||
## Grid
|
||||
|
||||
Backgrounds toolbar also comes with a Grid selector. This way you can easily see if your components are aligned.
|
||||
Backgrounds toolbar also includes a Grid selector. This way, you can quickly see if your components are aligned.
|
||||
|
||||
By default you don't need to configure anything in order to use it, but the properties of the grid are fully configurable.
|
||||
|
||||
Each of these properties have the following default values in case they are not passed:
|
||||
You don't need additional configuration to get started. But its properties are fully customizable, if you don't supply any value to any of its properties, they'll default to the following values:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -87,7 +89,9 @@ Each of these properties have the following default values in case they are not
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you wish to disable the grid in a story, you can do so by setting the `backgrounds` parameter like so:
|
||||
### Disable the grid
|
||||
|
||||
If you need to disable the grid for a specific story, set the `backgrounds` parameter to the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Controls'
|
||||
---
|
||||
|
||||
Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
|
||||
Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -17,17 +17,17 @@ Controls does not require any modification to your components. Stories for contr
|
||||
- Portable. Reuse your interactive stories in documentation, tests, and even in designs.
|
||||
- Rich. Customize the controls and interactive data to suit your exact needs.
|
||||
|
||||
To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component; but you can configure the controls further using [argTypes](../api/argtypes.md), see below.
|
||||
To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using [argTypes](../api/argtypes.md), see below.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If you have written stories in the older pre-Storybook 6 style, you may want to read the [args & controls migration guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to help understand how to convert your stories for args.
|
||||
💡 If you have stories in the older pre-Storybook 6 style, check the <a href="https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5">args & controls migration guide</a> to learn how to convert your existing stories for args.
|
||||
|
||||
</div>
|
||||
|
||||
## Choosing the control type
|
||||
|
||||
By default, Storybook will choose a control for each arg based on the initial value of the arg. This works well with some kind of args, such as boolean values or free-text strings, but in other cases you want a more restricted control.
|
||||
By default, Storybook will choose a control for each arg based on the initial value of the arg. It works well with certain types of args, such as boolean values or free-text strings, but in other cases, you want a more restricted control.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -61,11 +61,11 @@ By default, Storybook will render a free text input for the `variant` arg:
|
||||
|
||||
|
||||
|
||||
This works as long as you type a valid string into the auto-generated text control, but it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component.
|
||||
It works as long as you type a valid string into the auto-generated text control. Still, it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component.
|
||||
|
||||
We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs.
|
||||
|
||||
ArgTypes can also contain arbitrary annotations which can be overridden by the user. Since `variant` is a property of the component, let's put that annotation on the default export.
|
||||
ArgTypes can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -91,7 +91,7 @@ For a few types, Controls will automatically infer them by using [regex](https:/
|
||||
| **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it |
|
||||
| **date** | `/Date$/` | Will display a date picker UI for the args that match it |
|
||||
|
||||
To do so, use the `matchers` property in `controls` parameter:
|
||||
To do so, use the `matchers` property in the `controls` parameter:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -105,7 +105,7 @@ To do so, use the `matchers` property in `controls` parameter:
|
||||
|
||||
## Fully custom args
|
||||
|
||||
Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../workflows/stories-for-multiple-components.md) we may want to add controls for args that aren’t part of the component.
|
||||
Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../workflows/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -135,9 +135,9 @@ Using `argTypes`, you can change the display and behavior of each control.
|
||||
|
||||
### Dealing with complex values
|
||||
|
||||
You'll notice when dealing with non-primitive values, you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g. Controls addon) and the preview (your story).
|
||||
You'll notice that when dealing with non-primitive values, you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story).
|
||||
|
||||
One way to deal with this is to use primitive values (e.g. strings) as arg values, and using a story template to convert these values to their complex counterpart before rendering. This isn't the nicest way to do it (see below), but certainly the most flexible.
|
||||
One way to deal with this is to use primitive values (e.g., strings) as arg values and add a custom `render` function to convert these values to their complex counterpart before rendering. It isn't the nicest way to do it (see below), but certainly the most flexible.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -157,7 +157,7 @@ One way to deal with this is to use primitive values (e.g. strings) as arg value
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Unless you need the flexibility of a function, an easier way to map primitives to complex values before rendering is to define a `mapping`. Additionally, you can specify `control.labels` to configure custom labels for your checkbox, radio or select input.
|
||||
Unless you need the flexibility of a function, an easier way to map primitives to complex values before rendering is to define a `mapping`. Additionally, you can specify `control.labels` to configure custom labels for your checkbox, radio, or select input.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -169,7 +169,7 @@ Unless you need the flexibility of a function, an easier way to map primitives t
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Note that both `mapping` and `control.labels` don't have to be exhaustive. If the currently selected option is not listed, it will be used verbatim.
|
||||
Note that both `mapping` and `control.labels` don't have to be exhaustive. If the currently selected option is not listed, it's used verbatim.
|
||||
|
||||
## Configuration
|
||||
|
||||
@ -216,7 +216,7 @@ If you need to customize a control for a number data type in your story, you can
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
If you don't provide a specific one, it defaults to the number control type.
|
||||
💡 If you don't provide a specific one, it defaults to the number control type.
|
||||
</div>
|
||||
|
||||
### Parameters
|
||||
@ -225,7 +225,7 @@ Controls supports the following configuration [parameters](../writing-stories/pa
|
||||
|
||||
## Show full documentation for each property
|
||||
|
||||
Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the expanded parameter (defaults to false). This means you embed a complete [ArgsTable](../writing-docs/doc-blocks.md#argstable) doc block in the controls pane. The description and default value rendering can be [customized](#fully-custom-args) in the same way as the doc block.
|
||||
Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the expanded parameter (defaults to false). This means you embed a complete [ArgsTable](../writing-docs/doc-blocks.md#argstable) doc block in the controls panel. The description and default value rendering can be [customized](#fully-custom-args) in the same way as the doc block.
|
||||
|
||||
To enable expanded mode globally, add the following to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
|
||||
@ -247,21 +247,17 @@ And here's what the resulting UI looks like:
|
||||
|
||||
For `color` controls, you can specify an array of `presetColors`, either on the `control` in `argTypes`, or as a parameter under the `controls` namespace:
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
export const parameters = {
|
||||
controls: {
|
||||
presetColors: [
|
||||
{ color: '#ff4785', title: 'Coral' },
|
||||
'rgba(0, 159, 183, 1)',
|
||||
'#fe4a49',
|
||||
]
|
||||
},
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-preview-parameters-color-swatches.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
These will then be available as swatches in the color picker. Color presets can be defined as an object with `color` and `title`, or as a simple CSS color string. The `title` will be shown when you hover over the color swatch. In case no title is specified, the nearest CSS color name will be used instead.
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Color presets can be defined as an object with `color` and `title` or a simple CSS color string. These will then be available as swatches in the color picker. When you hover over the color swatch, you'll be able to see its title. If none is specified, it will default to the nearest CSS color name instead.
|
||||
|
||||
### Disable controls for specific properties
|
||||
|
||||
@ -289,7 +285,7 @@ Resulting in the following change in Storybook UI:
|
||||
/>
|
||||
</video>
|
||||
|
||||
The previous example also removed the prop documentation from the table. In some cases this is fine, however sometimes you might want to still render the prop documentation but without a control. The following example illustrates how:
|
||||
The previous example also removed the prop documentation from the table. In some cases, this is fine. However, sometimes you might want to render the prop documentation, but without a control. The following example illustrates how:
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
@ -300,7 +296,7 @@ paths={[
|
||||
|
||||
<div class="aside">
|
||||
|
||||
As with other Storybook properties, such as [decorators](../writing-stories/decorators.md) the same principle can also be applied at a story-level for more granular cases.
|
||||
💡 As with other Storybook properties, such as [decorators](../writing-stories/decorators.md), you can apply the same pattern at a story level for more granular cases.
|
||||
|
||||
</div>
|
||||
|
||||
@ -320,9 +316,9 @@ If you don't plan to handle the control args inside your Story, you can remove t
|
||||
|
||||
## Filtering controls
|
||||
|
||||
In some cases, you may want to either only present a few controls in the controls panel, or present all controls except a small set.
|
||||
In specific cases, you may require to display only a limited number of controls in the controls panel, or all of them except a particular set.
|
||||
|
||||
To make this possible, you can use optional `include` and `exclude` configuration fields in the `controls` parameter, which can be set to either an array of strings, or a regular expression.
|
||||
To make this possible, you can use optional `include` and `exclude` configuration fields in the `controls` parameter, which you can define as an array of strings, or as a regular expression.
|
||||
|
||||
Consider the following story snippets:
|
||||
|
||||
@ -339,7 +335,7 @@ Consider the following story snippets:
|
||||
|
||||
## Sorting controls
|
||||
|
||||
By default, controls are unsorted and use whatever order the args data is processed in (`none`). It can also be configured to sort alphabetically by arg name (`alpha`) or alphabetically required args first (`requiredFirst`).
|
||||
By default, controls are unsorted and use whatever order the args data is processed in (`none`). Additionally, you can sort them alphabetically by the arg's name (`alpha`) or with the required args first (`requiredFirst`).
|
||||
|
||||
Consider the following snippet to force required args first:
|
||||
|
||||
@ -352,4 +348,4 @@ Consider the following snippet to force required args first:
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -20,12 +20,12 @@ If you ran `sb init` to include Storybook in your project, the Essentials addon
|
||||
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
|
||||
|
||||
```shell
|
||||
npm install --save-dev @storybook/addon-essentials
|
||||
```
|
||||
#With npm
|
||||
npm install -D @storybook/addon-essentials
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>Note</strong>: If you're using <a href="https://yarnpkg.com/">yarn</a> as a package manager, you'll need to adjust the command accordingly.
|
||||
</div>
|
||||
#With yarn
|
||||
yarn add -D @storybook/addon-essentials
|
||||
```
|
||||
|
||||
Update your Storybook configuration (in `.storybook/main.js`) to include the Essentials addon.
|
||||
|
||||
|
||||
@ -26,4 +26,4 @@ With Storybook's Outline addon, you can toggle the outlines associated with all
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source src="addon-outline-optimized.mp4" type="video/mp4"/>
|
||||
</video>
|
||||
</video>
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Toolbars & globals'
|
||||
---
|
||||
|
||||
Storybook ships with toolbar items to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering.
|
||||
Storybook ships with toolbar addons to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering.
|
||||
|
||||
## Globals
|
||||
|
||||
Globals in Storybook represent “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories.
|
||||
Globals in Storybook represents “global” (as in not story-specific) inputs to the rendering of the story. As they aren’t specific to the story, they aren’t passed in the `args` argument to the story function (although they are accessible as `context.globals`), but typically you use them in decorators, which apply to all stories.
|
||||
|
||||
When the globals change, the story re-renders, and the decorators rerun with the new values. The easiest way to change globals is to create a toolbar item for them.
|
||||
|
||||
@ -26,11 +26,11 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
|
||||
|
||||
<div class="aside">
|
||||
|
||||
As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
|
||||
💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
|
||||
|
||||
</div>
|
||||
|
||||
When you start your Storybook, you should see a new dropdown in your toolbar with options `light` and `dark`.
|
||||
When you start your Storybook, you should see a new dropdown with the `light` and `dark` options in your toolbar.
|
||||
|
||||
## Create a decorator
|
||||
|
||||
@ -50,7 +50,7 @@ For example, suppose you are using `styled-components`. You can add a theme prov
|
||||
|
||||
## Advanced usage
|
||||
|
||||
So far we've managed to create and consume a global inside Storybook.
|
||||
So far, we've managed to create and consume a global inside Storybook.
|
||||
|
||||
Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar.
|
||||
|
||||
@ -68,12 +68,12 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
|
||||
|
||||
<div class="aside">
|
||||
|
||||
The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
|
||||
💡 The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../workflows/faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="aside">
|
||||
The <code>@storybook/addon-toolbars</code> addon is required to use toolbars. The toolbars addon is included by default in <code>@storybook/addon-essentials</code>.
|
||||
💡The <code>@storybook/addon-toolbars</code> addon is required to use toolbars. The toolbars addon is included by default in <code>@storybook/addon-essentials</code>.
|
||||
</div>
|
||||
|
||||
By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator.
|
||||
@ -116,7 +116,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
|
||||
|
||||
<div class="aside">
|
||||
|
||||
In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwards compatibility, the story context is passed as the first argument:
|
||||
💡 In Storybook 6.0, if you set the global option `passArgsFirst: false` for backward compatibility, the story context is passed as the first argument:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -136,9 +136,9 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
|
||||
|
||||
## Consuming globals from within an addon
|
||||
|
||||
If you're working on a Storybook addon and you need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
|
||||
If you're working on a Storybook addon and need to retrieve globals, you can do so. The `@storybook/api` package provides a hook for this scenario. You can use the [`useGlobals()`](../addons/addons-api.md#useglobals) hook to retrieve any globals you want.
|
||||
|
||||
Using the ThemeProvider example above, you could expand it to display which current theme is being shown inside a panel like so:
|
||||
Using the ThemeProvider example above, you could expand it to display which theme is active inside a panel as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -152,11 +152,11 @@ Using the ThemeProvider example above, you could expand it to display which curr
|
||||
|
||||
## Updating globals from within an addon
|
||||
|
||||
If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you want.
|
||||
If you're working on a Storybook addon that needs to update the global and refreshes the UI, you can do so. As mentioned previously, the `@storybook/api` package provides the necessary hook for this scenario. You can use the `updateGlobals` function to update any global values you need.
|
||||
|
||||
Also, you can use the `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh.
|
||||
Also, you can use both `@storybook/addons` and `@storybook/core-events` packages together to trigger the refresh.
|
||||
|
||||
For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button, like so:
|
||||
For example, if you were working on a [toolbar addon](../addons/addon-types.md#toolbars), and you want to refresh the UI and update the global once the user clicks on a button:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Viewport'
|
||||
---
|
||||
|
||||
The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. This makes it easy to develop responsive UIs.
|
||||
The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -13,7 +13,7 @@ The Viewport toolbar item allows you to adjust the dimensions of the iframe your
|
||||
|
||||
### Configuration
|
||||
|
||||
By default, you are presented with a set of common viewports.
|
||||
Out of the box, the Viewport addon offers you a standard set of viewports that you can use.
|
||||
|
||||
If you want to change the default set of viewports, you can set the global `parameters.viewport` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
|
||||
|
||||
@ -27,7 +27,7 @@ If you want to change the default set of viewports, you can set the global `para
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The viewport global can take a object with the following keys:
|
||||
The viewport global can take an object with the following keys:
|
||||
|
||||
| Field | Type | Description | Default Value |
|
||||
| ------------------- | :-----: | :---------------------------------------: | :------------: |
|
||||
@ -43,9 +43,9 @@ The viewports object needs the following keys:
|
||||
| **styles** | Object | Sets Inline styles to be applied to the story | `{width:0,height:0}` |
|
||||
| **type** | String | Type of the device (e.g. desktop, mobile, or tablet) | `desktop` |
|
||||
|
||||
### Use detailed set of devices
|
||||
### Use a detailed set of devices
|
||||
|
||||
By default Storybook uses a [minimal set of viewports](https://github.com/storybookjs/storybook/blob/master/addons/viewport/src/defaults.ts#L135) to get you started. But you're not restricted to these, the addon offers a more granular list of devices that you can use.
|
||||
By default, Storybook uses a [minimal set of viewports](https://github.com/storybookjs/storybook/blob/master/addons/viewport/src/defaults.ts#L135) to get you started. But you're not restricted to these. The addon offers a more granular list of devices that you can use.
|
||||
|
||||
Change your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to the following:
|
||||
|
||||
@ -59,13 +59,13 @@ Change your [`.storybook/preview.js`](../configure/overview.md#configure-story-r
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Once you start your Storybook, you'll see that now you have a whole different set of devices to use.
|
||||
Start your Storybook, and you'll see the new devices that you can use.
|
||||
|
||||
See [here](https://github.com/storybookjs/storybook/blob/master/addons/viewport/src/defaults.ts#L3) the complete list of devices and their configurations.
|
||||
|
||||
### Add new devices
|
||||
|
||||
If you have either a specific viewport, or a list of viewports that you need to use. You can modify your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file to include them like so:
|
||||
If you have either a specific viewport or a list of viewports that you need to use, you can modify your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file and include them:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -77,7 +77,7 @@ If you have either a specific viewport, or a list of viewports that you need to
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
To use them in your Storybook you'll need to make the following change:
|
||||
Make the following change to use them in your Storybook:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -93,7 +93,7 @@ Once you start Storybook, you'll see your new viewports and devices.
|
||||
|
||||
If you need, you can also add these two to another list of viewports.
|
||||
|
||||
For instance, if you wanted to use these two with the minimal set of viewports, you can do it like so:
|
||||
For instance, if you want to use these two with the minimal set of viewports, you can do it like so:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -105,21 +105,20 @@ For instance, if you wanted to use these two with the minimal set of viewports,
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is achieved by making use of the exported [`MINIMAL_VIEWPORTS`](https://github.com/storybookjs/storybook/blob/master/addons/viewport/src/defaults.ts#L135) property, by merging it with the new ones.
|
||||
Both viewports (`Kindle Fire 2` and `Kindle Fire HD`) will feature in the list of devices by merging them into the [`MINIMAL_VIEWPORTS`](https://github.com/storybookjs/storybook/blob/master/addons/viewport/src/defaults.ts#L135).
|
||||
|
||||
### Configuring per component or story
|
||||
|
||||
There are cases where it's not effective for you to use a certain visual viewport on a global scale and you need it to adjust it to a individual story.
|
||||
There are cases where it's not practical for you to use a specific visual viewport on a global scale, and you need it to adjust it to an individual story.
|
||||
|
||||
You can change your story through [parameters](../writing-stories/parameters.md) to include the viewports you need to use for your component.
|
||||
|
||||
[Parameters](../writing-stories/parameters.md) can be configured for a whole set of stories or a single story via the standard parameter API:
|
||||
Update your story through [parameters](../writing-stories/parameters.md) to include your viewports at a component level or for a specific story:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/my-component-story-configure-viewports.js.mdx',
|
||||
'react/my-component-story-configure-viewports.ts.mdx',
|
||||
'react/my-component-story-configure-viewports.mdx.mdx',
|
||||
'vue/my-component-story-configure-viewports.js.mdx',
|
||||
'vue/my-component-story-configure-viewports.mdx.mdx',
|
||||
@ -136,9 +135,8 @@ You can change your story through [parameters](../writing-stories/parameters.md)
|
||||
|
||||
### Keyboard shortcuts
|
||||
|
||||
* Previous viewport: <kbd>shift</kbd> + <kbd>v</kbd>
|
||||
* Next viewport: <kbd>v</kbd>
|
||||
* Reset viewport: <kbd>alt</kbd> + <kbd>v</kbd>
|
||||
- Previous viewport: <kbd>shift</kbd> + <kbd>v</kbd>
|
||||
- Next viewport: <kbd>v</kbd>
|
||||
- Reset viewport: <kbd>alt</kbd> + <kbd>v</kbd>
|
||||
|
||||
|
||||
These shortcuts can be edited in Storybook's Keyboard shortcuts page.
|
||||
If you need, you can edit them on the shortcuts page.
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Browse Stories'
|
||||
---
|
||||
|
||||
Last chapter we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components.
|
||||
Last chapter, we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components.
|
||||
|
||||
## Sidebar and Canvas
|
||||
|
||||
A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story it renders in the Canvas, an isolated preview iframe.
|
||||
A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -15,8 +15,7 @@ A `*.stories.js` file defines all the stories for a component. Each story has a
|
||||
/>
|
||||
</video>
|
||||
|
||||
|
||||
Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name.
|
||||
Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name.
|
||||
|
||||
Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shortcuts available.
|
||||
|
||||
@ -29,7 +28,7 @@ Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shor
|
||||
|
||||
## Toolbar
|
||||
|
||||
Storybook ships with time-saving tools built in. The toolbar contains tools that allow you to adjust how the story renders in the Canvas:
|
||||
Storybook ships with time-saving tools built-in. The toolbar contains tools that allow you to adjust how the story renders in the Canvas:
|
||||
|
||||
|
||||
|
||||
@ -44,7 +43,7 @@ Storybook ships with time-saving tools built in. The toolbar contains tools that
|
||||
/>
|
||||
</video>
|
||||
|
||||
The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team. For example, in a design system or component library.
|
||||
The [“Docs”](../writing-docs/introduction.md) tab shows auto-generated documentation about components (inferred from the source code). Usage docs are helpful when sharing reusable components with your team, for example, in a design system or component library.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -61,8 +60,8 @@ Addons are plugins that extend Storybook's core functionality. You can find them
|
||||
|
||||
|
||||
|
||||
- **Controls** allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases.
|
||||
- **Actions** help you verify interactions produce the correct outputs via callbacks. For instance if you view the “Logged In” story of the Header component, we can verify that clicking the “Log out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
|
||||
- **Controls** allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases.
|
||||
- **Actions** help you verify interactions produce the correct outputs via callbacks. For instance, if you view the “Logged In” story of the Header component, we can verify that clicking the “Log out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
|
||||
Binary file not shown.
@ -27,7 +27,7 @@ title: 'Install Storybook'
|
||||
|
||||
<summary><code>sb init</code> is not made for empty projects</summary>
|
||||
|
||||
Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework including:
|
||||
Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project. There are many ways to bootstrap an app in a given framework, including:
|
||||
|
||||
- 📦 [Create an Angular Workspace](https://angular.io/cli/new)
|
||||
- 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
|
||||
@ -37,16 +37,16 @@ Storybook needs to be installed into a project that is already set up with a fra
|
||||
|
||||
</details>
|
||||
|
||||
During its install process, Storybook will look into your project's dependencies and provide you with the best configuration available.
|
||||
Storybook will look into your project's dependencies during its install process and provide you with the best configuration available.
|
||||
|
||||
The command above will make the following changes to your local environment:
|
||||
|
||||
- 📦 Install the required dependencies.
|
||||
- 🛠 Set up the necessary scripts to run and build Storybook.
|
||||
- 🛠 Setup the necessary scripts to run and build Storybook.
|
||||
- 🛠 Add the default Storybook configuration.
|
||||
- 📝 Add some boilerplate stories to get you started.
|
||||
|
||||
Depending on your framework, first build your app and then check that everything worked by running:
|
||||
Depending on your framework, first, build your app and then check that everything worked by running:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -59,14 +59,14 @@ Depending on your framework, first build your app and then check that everything
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you'll be greeted by a welcome screen.
|
||||
It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab, and you'll be greeted by a welcome screen.
|
||||
|
||||
|
||||
|
||||
There are some noteworthy items here:
|
||||
|
||||
- A collection of useful links for more in depth configuration and customization options you have at your disposal.
|
||||
- A second set of links for you to expand your Storybook knowledge and get involved with the ever growing Storybook community.
|
||||
- A collection of useful links for more in-depth configuration and customization options you have at your disposal.
|
||||
- A second set of links for you to expand your Storybook knowledge and get involved with the ever-growing Storybook community.
|
||||
- A few example stories to get you started.
|
||||
|
||||
<details>
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
- You can also setup Storybook manually through the Storybook CLI. Add the `--type angular` flag when you initialize Storybook in your project.
|
||||
- If there's an installation problem, check the [README for the Angular framework](../../app/angular/README.md).
|
||||
- Check if you're running the install command in the root directory of your project, or if you're working with a monorepo from the directory where the `angular.json` is located.
|
||||
|
||||
@ -41,9 +41,9 @@ Your project may have additional requirements before components can be rendered
|
||||
<details>
|
||||
<summary>Build configuration like webpack and Babel</summary>
|
||||
|
||||
If you see errors on the CLI when you run the `yarn storybook` command. It’s likely you need to make changes to Storybook’s build configuration. Here are some things to try:
|
||||
If you see errors on the CLI when you run the `yarn storybook` command, you likely need to make changes to Storybook’s build configuration. Here are some things to try:
|
||||
|
||||
- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular presets exist for Create React App, SCSS and Ant Design.
|
||||
- [Presets](../addons/addon-types.md) bundle common configurations for various technologies into Storybook. In particular, presets exist for Create React App, SCSS and Ant Design.
|
||||
- Specify a custom [Babel configuration](../configure/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
- Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
|
||||
|
||||
@ -52,25 +52,31 @@ If you see errors on the CLI when you run the `yarn storybook` command. It’s l
|
||||
<details>
|
||||
<summary>Runtime configuration</summary>
|
||||
|
||||
If Storybook builds but you see an error immediately when connecting to it in the browser, then chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
|
||||
If Storybook builds but you see an error immediately when connecting to it in the browser, in that case, chances are one of your input files is not compiling/transpiling correctly to be interpreted by the browser. Storybook supports modern browsers and IE11, but you may need to check the Babel and webpack settings (see above) to ensure your component code works correctly.
|
||||
|
||||
</details>
|
||||
|
||||
<details id="component-context" name="component-context">
|
||||
<summary>Component context</summary>
|
||||
|
||||
If a particular story has a problem rendering, often it means your component expects a certain environment is available to the component.
|
||||
If a particular story has a problem rendering, often it means your component expects a specific environment is available to the component.
|
||||
|
||||
A common frontend pattern is for components to assume that they render in a certain “context” with parent components higher up the rendering hierarchy (for instance theme providers)
|
||||
A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
|
||||
|
||||
Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) allows you to customize how components render in Canvas, the preview iframe. In this decorator example, we wrap every component rendered in Storybook with `ThemeProvider`.
|
||||
Use [decorators](../writing-stories/decorators.md) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fortawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/storybook-preview-with-styled-components-decorator.js.mdx',
|
||||
'vue/storybook-preview-with-styled-components-decorator.js.mdx',
|
||||
'react/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
|
||||
'vue/storybook-preview-with-library-decorator.2-library.js.mdx',
|
||||
'vue/storybook-preview-with-library-decorator.3-library.js.mdx',
|
||||
'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
|
||||
'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
|
||||
'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
|
||||
'vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx',
|
||||
'angular/storybook-preview-with-styled-components-decorator.ts.mdx'
|
||||
]}
|
||||
/>
|
||||
@ -81,30 +87,28 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
|
||||
|
||||
## Render component styles
|
||||
|
||||
Storybook isn’t opinionated about how you generate or load CSS. It renders whatever DOM elements you provide. But sometimes things won’t “look right” out of the box.
|
||||
Storybook isn’t opinionated about how you generate or load CSS. It renders whatever DOM elements you provide. But sometimes, things won’t “look right” out of the box.
|
||||
|
||||
You may have to configure your CSS tooling for Storybook’s rendering environment. Here are some tips on what could help:
|
||||
|
||||
<details>
|
||||
<summary>CSS-in-JS like styled-components and Emotion</summary>
|
||||
|
||||
If you are using CSS-in-JS, chances are your styles are working because they’re generated in JavaScript and served alongside each component.
|
||||
|
||||
Theme users may need to add a decorator to `.storybook/preview.js`, [see above](#component-context).
|
||||
If you are using CSS-in-JS, chances are your styles are working because they’re generated in JavaScript and served alongside each component. Theme users may need to add a decorator to `.storybook/preview.js`, [see above](#component-context).
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>@import CSS into components</summary>
|
||||
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak the webpack config](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak its webpack configuration](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Global imported styles</summary>
|
||||
|
||||
If you have global imported styles, create a file called [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) and import the styles there. The styles will be added by Storybook automatically for all stories.
|
||||
If you have global imported styles, create a file called [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) and import the styles there. They will be added by Storybook automatically for all stories.
|
||||
|
||||
</details>
|
||||
|
||||
@ -124,6 +128,6 @@ If you're referencing fonts or images from a local directory, you'll need to con
|
||||
|
||||
## Load assets and resources
|
||||
|
||||
If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g. `/fonts/XYZ.woff`), use the `-s path/to/folder` to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`.
|
||||
If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g., `/fonts/XYZ.woff`), use the `-s path/to/folder` flag to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`.
|
||||
|
||||
We recommend serving external resources and assets requested in your components statically with Storybook. This ensures that assets are always available to your stories.
|
||||
We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories.
|
||||
|
||||
@ -6,7 +6,7 @@ A story captures the rendered state of a UI component. Developers write multiple
|
||||
|
||||
The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.
|
||||
|
||||
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)―an ES6 modules-based standard―for writing component examples.
|
||||
Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples.
|
||||
|
||||
Let’s start with the `Button` component. A story is a function that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
|
||||
|
||||
@ -34,7 +34,7 @@ Let’s start with the `Button` component. A story is a function that describes
|
||||
|
||||
View the rendered `Button` by clicking on it in the Storybook sidebar.
|
||||
|
||||
The above story definition can be further improved to take advantage of [Storybook’s “args”](../writing-stories/args.md) concept. Args describes the arguments to Button in a machine readable way. This unlocks Storybook’s superpower of altering and composing arguments dynamically.
|
||||
The above story definition can be further improved to take advantage of [Storybook’s “args”](../writing-stories/args.md) concept. Args describes the arguments to Button in a machine-readable way. It unlocks Storybook’s superpower of altering and composing arguments dynamically.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -65,17 +65,11 @@ Both story examples render the same thing because Storybook feeds the given `arg
|
||||
- `Button`s callbacks are logged into the Actions tab. Click to try it.
|
||||
- `Button`s arguments are dynamically editable in the Controls tab. Adjust the controls
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Note that `Template.bind({})` is a [standard JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) technique for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
|
||||
|
||||
</div>
|
||||
|
||||
### Edit a story
|
||||
|
||||
Storybook makes it easy to work on one component in one state (aka a story) at a time. When you edit the Button code or stories, Storybook will instantly re-render in the browser. No need to manually refresh.
|
||||
Storybook makes it easy to work on one component in one state (aka a story) at a time. When you edit the Button code or stories, Storybook will instantly re-render in the browser. No need to refresh manually.
|
||||
|
||||
Update the `label` of the `Primary` story then see your change in Storybook.
|
||||
Update the `label` of the `Primary` story, then see your change in Storybook.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -84,7 +78,7 @@ Update the `label` of the `Primary` story then see your change in Storybook.
|
||||
/>
|
||||
</video>
|
||||
|
||||
Stories are also useful for checking that UI continues to look correct as you make changes. The `Button` component has four stories that show it in different use cases. View those stories now to confirm that your change to `Primary` didn’t introduce unintentional bugs in the other stories.
|
||||
Stories are also helpful for checking that UI continues to look correct as you make changes. The `Button` component has four stories that show it in different use cases. View those stories now to confirm that your change to `Primary` didn’t introduce unintentional bugs in the other stories.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -93,6 +87,6 @@ Stories are also useful for checking that UI continues to look correct as you ma
|
||||
/>
|
||||
</video>
|
||||
|
||||
Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../workflows/testing-with-storybook.md) this for you.
|
||||
Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
|
||||
|
||||
Now we’ve seen the basic anatomy of a story, let’s see how we use Storybook’s UI to develop stories.
|
||||
Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.
|
||||
|
||||
@ -36,4 +36,4 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
|
||||
],
|
||||
})
|
||||
export class MockGraphQLModule {}
|
||||
```
|
||||
```
|
||||
@ -1,16 +1,21 @@
|
||||
```ts
|
||||
// App.stories.ts
|
||||
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
export default {
|
||||
component: AppComponent,
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'App',
|
||||
component: AppComponent,
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<AppComponent> = (args) => ({
|
||||
props: args,
|
||||
const Template: Story = () => ({
|
||||
props: {},
|
||||
});
|
||||
|
||||
export const Success = Template.bind({});
|
||||
@ -30,4 +35,4 @@ Success.parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,13 +1,14 @@
|
||||
```md
|
||||
<!--- Badge.stories.mdx --->
|
||||
<!-- Badge.stories.mdx -->
|
||||
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import Badge from './badge.component';
|
||||
import Icon from './icon.component';
|
||||
import { Badge } from './badge.component';
|
||||
import { Icon } from './icon.component';
|
||||
|
||||
<Meta title="MDX/Badge" component={Badge} />
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
```md
|
||||
<!---Badge.stories.mdx --->
|
||||
<!-- Badge.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Badge from './badge.component';
|
||||
import { Badge } from './badge.component';
|
||||
|
||||
<Meta title="MDX/Badge" component={Badge} />
|
||||
|
||||
@ -13,12 +13,12 @@ export const Template = (args) => ({ props: args });
|
||||
|
||||
Let's define a story for our `Badge` component:
|
||||
|
||||
<Story
|
||||
<Story
|
||||
name="positive"
|
||||
args={{
|
||||
status: 'positive',
|
||||
label: 'Positive',
|
||||
}}>
|
||||
label: 'Positive'
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
@ -28,9 +28,9 @@ We can drop it in a `Canvas` to get a code snippet:
|
||||
<Story
|
||||
name="negative"
|
||||
args={{
|
||||
status: 'negative',
|
||||
label: 'Negative',
|
||||
}}>
|
||||
status: 'negative',
|
||||
label: 'Negative'
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
@ -41,29 +41,38 @@ with unique URLs, which is great for review and testing.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="warning"
|
||||
name="warning"
|
||||
args={{
|
||||
status: 'warning',
|
||||
label: 'Warning',
|
||||
}}>
|
||||
label: 'Warning'
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="neutral"
|
||||
name="neutral"
|
||||
args={{
|
||||
status: 'neutral',
|
||||
label: 'Neutral',
|
||||
}}>
|
||||
label: 'Neutral'
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
|
||||
<Story
|
||||
name="error"
|
||||
args={{
|
||||
status: 'error',
|
||||
label: 'Error',
|
||||
}}>
|
||||
label: 'Error'
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="with icon"
|
||||
args={{
|
||||
status: 'warning',
|
||||
label: (<Icon icon="check" inline /> with icon)
|
||||
)}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
@ -5,12 +5,13 @@ import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-button',
|
||||
template: ` <button type="button" [disabled]="isDisabled">
|
||||
{{ content }}
|
||||
</button>`,
|
||||
template: `
|
||||
<button type="button" [disabled]="isDisabled">
|
||||
{{ content }}
|
||||
</button>`,
|
||||
styleUrls: ['./button.css'],
|
||||
})
|
||||
export default class ButtonComponent {
|
||||
export class ButtonComponent {
|
||||
/**
|
||||
* Checks if the button should be disabled
|
||||
*/
|
||||
@ -23,4 +24,4 @@ export default class ButtonComponent {
|
||||
@Input()
|
||||
content: string;
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -1,18 +1,21 @@
|
||||
```ts
|
||||
// ButtonGroup.stories.ts
|
||||
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import ButtonGroup from './ButtonGroup.component';
|
||||
import Button from './button.component';
|
||||
import { ButtonGroup } from './ButtonGroup.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
//👇 Imports the Button stories
|
||||
import * as ButtonStories from './Button.stories';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'ButtonGroup',
|
||||
component: ButtonGroup,
|
||||
decorators: [
|
||||
@ -23,7 +26,7 @@ export default {
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<ButtonGroup> = (args) => ({
|
||||
const Template: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
@ -35,4 +38,4 @@ Pair.args = {
|
||||
],
|
||||
orientation: 'horizontal',
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -7,7 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
selector: 'button',
|
||||
template: `the component implementation markup`,
|
||||
})
|
||||
export default class ButtonComponent {
|
||||
export class ButtonComponent {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
@ -40,4 +40,4 @@ export default class ButtonComponent {
|
||||
@Output()
|
||||
onClick = new EventEmitter<Event>();
|
||||
}
|
||||
```
|
||||
```
|
||||
28
docs/snippets/angular/button-story-click-handler-args.ts.mdx
Normal file
28
docs/snippets/angular/button-story-click-handler-args.ts.mdx
Normal file
@ -0,0 +1,28 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Text: Story = (args) => ({
|
||||
props: args,
|
||||
template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
|
||||
});
|
||||
|
||||
Text.args = {
|
||||
label: 'Hello',
|
||||
onClick: action('clicked'),
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,20 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Text: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
```
|
||||
25
docs/snippets/angular/button-story-click-handler.ts.mdx
Normal file
25
docs/snippets/angular/button-story-click-handler.ts.mdx
Normal file
@ -0,0 +1,25 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { Button } from './button.component';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Text: Story = () => ({
|
||||
props: {
|
||||
text: 'Hello Button',
|
||||
onClick: action('clicked'),
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -3,9 +3,10 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific argTypes for args and turns every Button story into primary -->
|
||||
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
@ -14,7 +15,7 @@ import Button from './button.component';
|
||||
}},
|
||||
args={{
|
||||
primary: true,
|
||||
}}/>
|
||||
}} />
|
||||
|
||||
<!-- Remainder story implementation -->
|
||||
```
|
||||
@ -1,11 +1,15 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
//👇 Creates specific argTypes
|
||||
@ -17,4 +21,4 @@ export default {
|
||||
primary: true,
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -1,17 +1,17 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
import ParentComponent from './parent.component';
|
||||
import { ParentComponent } from './parent.component';
|
||||
|
||||
<!-- With a template -->
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
title="Button"
|
||||
component={Button}
|
||||
decorators={[
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import { ButtonComponent } from './button.component';
|
||||
import { ParentComponent } from './parent.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
import { Parent } from './parent.component'; // Parent contains ng-content
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: ButtonComponent,
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
declarations: [ParentComponent],
|
||||
@ -16,16 +21,7 @@ export default {
|
||||
// With template
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
|
||||
// With component which contains ng-content
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
componentWrapperDecorator(Parent),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<ButtonComponent> = (args) => ({
|
||||
props: args,
|
||||
template: '<app-button label="Submit"></app-button>',
|
||||
});
|
||||
|
||||
const Component: Story<ButtonComponent> = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -1,36 +1,42 @@
|
||||
```md
|
||||
<!-- button.stories.mdx -->
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { componentWrapperDecorator,moduleMetadata } from '@storybook/angular';
|
||||
import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { ParentComponent } from './parent.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button}/>
|
||||
<!-- Parent contains ng-content -->
|
||||
import { Parent } from './parent.component';
|
||||
|
||||
<Meta title="Button" component={Button}/>
|
||||
|
||||
|
||||
export const Template = () => ({
|
||||
template: `<app-button label="Submit"></app-button>`,
|
||||
});
|
||||
|
||||
<!-- With a template -->
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
decorators={[
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
|
||||
]}>
|
||||
{{
|
||||
template: `<app-button label="Submit"></app-button>`,
|
||||
}}
|
||||
]} >
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<!-- With a component -->
|
||||
|
||||
<Story
|
||||
name="InsideParent"
|
||||
decorators={[
|
||||
moduleMetadata({
|
||||
declarations: [ParentComponent],
|
||||
}),
|
||||
componentWrapperDecorator(ParentComponent)]}>
|
||||
{{
|
||||
template: `<app-button label="Submit"></app-button>`,
|
||||
}}
|
||||
componentWrapperDecorator(ParentComponent)
|
||||
]} >
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -1,30 +1,38 @@
|
||||
```ts
|
||||
// button.stories.ts
|
||||
// Button.stories.mdx
|
||||
|
||||
import { Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
|
||||
import { ButtonComponent } from './button.component';
|
||||
import { ParentComponent } from './parent.component'; // ParentComponent contains ng-content
|
||||
import { Button } from './button.component';
|
||||
import { Parent } from './parent.component'; // Parent contains ng-content
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: ButtonComponent,
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Primary: Story<ButtonComponent> = () => ({
|
||||
const Template: Story = (args) => ({
|
||||
template: '<app-button label="Submit"></app-button>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.decorators = [
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
|
||||
];
|
||||
|
||||
export const InsideParent: Story<ButtonComponent> = () => ({
|
||||
template: '<app-button label="Submit"></app-button>',
|
||||
});
|
||||
export const Primary = {
|
||||
decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
|
||||
};
|
||||
|
||||
export const InsideParent= Template.bind({});
|
||||
InsideParent.decorators = [
|
||||
moduleMetadata({
|
||||
declarations: [ParentComponent],
|
||||
declarations: [Parent],
|
||||
}),
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
componentWrapperDecorator(Parent),
|
||||
];
|
||||
```
|
||||
```
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific argTypes -->
|
||||
<Meta
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
//👇 Creates specific argTypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' }
|
||||
}
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
//👇 Some function to demonstrate the behavior
|
||||
@ -19,7 +23,8 @@ const someFunction = (someValue: string) => {
|
||||
return `i am a ${someValue}`;
|
||||
};
|
||||
|
||||
export const ExampleStory: Story<Button> = (args) => {
|
||||
|
||||
export const ExampleStory: Story = (args) => {
|
||||
//👇 Destructure the label from the args object
|
||||
const { label } = args;
|
||||
|
||||
@ -37,4 +42,4 @@ ExampleStory.args = {
|
||||
size: 'small',
|
||||
label: 'button',
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,12 +1,16 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -1,20 +1,26 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Primary = () => ({
|
||||
|
||||
export const Primary: Story = () => ({
|
||||
props: {
|
||||
label: 'Button',
|
||||
primary: true,
|
||||
},
|
||||
});
|
||||
|
||||
Primary.storyName = 'I am the primary';
|
||||
```
|
||||
```
|
||||
@ -1,20 +1,45 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Story } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: Story<Button> = (args) => ({
|
||||
const Template: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
//👇 Each story then reuses that template
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = { background: '#ff0', label: 'Button' };
|
||||
// 👇 Each story then reuses that template
|
||||
export const Primary= Template.bind({});
|
||||
Primary.args = {
|
||||
label: 'Button',
|
||||
backgroundColor: '#ff0',
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
|
||||
|
||||
export const Tertiary = Template.bind({});
|
||||
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
|
||||
```
|
||||
export const Secondary= Template.bind({});
|
||||
Secondary.args = {
|
||||
args: {
|
||||
...Primary.args,
|
||||
label: '😄👍😍💯',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export const Tertiary= Template.bind({});
|
||||
Tertiary.args={
|
||||
...Primary.args,
|
||||
label: '📚📕📈🤓',
|
||||
};
|
||||
```
|
||||
@ -1,11 +1,15 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
//👇 Creates specific parameters for the story
|
||||
@ -15,4 +19,8 @@ export default {
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
|
||||
export const Basic: Story = () => ({
|
||||
template: `<app-button>hello</<app-button>`,
|
||||
});
|
||||
```
|
||||
@ -3,18 +3,20 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button} />
|
||||
<Meta title="Button" component={Button} />
|
||||
|
||||
<!-- 👇 We create a “template” of how args map to rendering -->
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<!-- 👇 Each story then reuses that template -->
|
||||
<Story
|
||||
name="Primary"
|
||||
args={{
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
}}>
|
||||
}} >
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -1,17 +1,21 @@
|
||||
```ts
|
||||
//Button.stories.ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular/';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: Story<Button> = (args) => ({
|
||||
const Template: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
@ -22,4 +26,4 @@ Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,13 +1,13 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific parameters for the story -->
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
title="Button"
|
||||
component={Button}
|
||||
parameters={{
|
||||
backgrounds: {
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
//👇 Creates specific parameters for the story
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
@ -18,4 +23,4 @@ export default {
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -3,9 +3,9 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button}/>
|
||||
<Meta title="Button" component={Button}/>
|
||||
|
||||
<Story name="Primary">
|
||||
{{
|
||||
|
||||
@ -1,33 +1,38 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
};
|
||||
|
||||
export const Primary = () => ({
|
||||
export const Primary: Story = () => ({
|
||||
props: {
|
||||
label: 'Button',
|
||||
background: '#ff0',
|
||||
backgroundColor: '#ff0',
|
||||
},
|
||||
});
|
||||
|
||||
export const Secondary = () => ({
|
||||
|
||||
export const Secondary: Story = () => ({
|
||||
props: {
|
||||
label: '😄👍😍💯',
|
||||
background: '#ff0',
|
||||
backgroundColor: '#ff0',
|
||||
},
|
||||
});
|
||||
|
||||
export const Tertiary = () => ({
|
||||
export const Tertiary: Story = () => ({
|
||||
props: {
|
||||
label: '📚📕📈🤓',
|
||||
background: '#ff0',
|
||||
backgroundColor: '#ff0',
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -1,11 +1,15 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
import { Meta } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { Button } from './button.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
@ -17,4 +21,4 @@ export default {
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -3,9 +3,9 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component.ts';
|
||||
import { Button } from './button.component.ts';
|
||||
|
||||
<Meta title="Components/Button" component={Button} />
|
||||
<Meta title="Button" component={Button} />
|
||||
|
||||
# Button
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user