mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
Merge branch 'next' into 11984-conditional-controls
This commit is contained in:
Michael Shilman
commit
24f340c054
21
CHANGELOG.md
21
CHANGELOG.md
@ -1,25 +1,32 @@
|
||||
## 6.5.0-alpha.42 (February 25, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls/Essentials/Interactions: Add support for main.cjs/mjs/tsx files ([#17524](https://github.com/storybookjs/storybook/pull/17524))
|
||||
- Addon-docs: Fix preset handling for builder with options ([#17544](https://github.com/storybookjs/storybook/pull/17544))
|
||||
|
||||
## 6.5.0-alpha.41 (February 22, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-Outline: add 'o' keyboard shortcut to toggle the outline addon ([#17530](https://github.com/storybookjs/storybook/pull/17530))
|
||||
- Addon-Outline: add 'o' keyboard shortcut to toggle the outline addon ([#17530](https://github.com/storybookjs/storybook/pull/17530))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Ensure that __DOCS_CONTEXT__ cannot be undefined ([#17251](https://github.com/storybookjs/storybook/pull/17251))
|
||||
* Addon-docs: Account for non-string types when converting enums ([#15822](https://github.com/storybookjs/storybook/pull/15822))
|
||||
* Addon-actions: Don't override undefined args ([#17505](https://github.com/storybookjs/storybook/pull/17505))
|
||||
- Addon-docs: Ensure that **DOCS_CONTEXT** cannot be undefined ([#17251](https://github.com/storybookjs/storybook/pull/17251))
|
||||
- Addon-docs: Account for non-string types when converting enums ([#15822](https://github.com/storybookjs/storybook/pull/15822))
|
||||
- Addon-actions: Don't override undefined args ([#17505](https://github.com/storybookjs/storybook/pull/17505))
|
||||
|
||||
## 6.5.0-alpha.40 (February 19, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
* Webpack5: Add lazy compilation ([#17501](https://github.com/storybookjs/storybook/pull/17501))
|
||||
- Webpack5: Add lazy compilation ([#17501](https://github.com/storybookjs/storybook/pull/17501))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375))
|
||||
* UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487))
|
||||
- Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375))
|
||||
- UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487))
|
||||
|
||||
## 6.5.0-alpha.39 (February 11, 2022)
|
||||
|
||||
|
||||
30
README.md
30
README.md
@ -92,23 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](https://github.com/storybookjs/mithril) | [v6.4.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](https://github.com/storybookjs/marko) | [v6.4.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](https://github.com/storybookjs/riot) | [v6.4.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](https://github.com/storybookjs/rax) | [v6.4.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](app/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/channels": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/channels": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -79,7 +79,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -64,21 +64,21 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/csf-tools": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/postinstall": "6.5.0-alpha.41",
|
||||
"@storybook/preview-web": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/csf-tools": "6.5.0-alpha.42",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/postinstall": "6.5.0-alpha.42",
|
||||
"@storybook/preview-web": "6.5.0-alpha.42",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -107,11 +107,11 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.3.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.5.0-alpha.41",
|
||||
"@storybook/html": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/vue": "6.5.0-alpha.41",
|
||||
"@storybook/web-components": "6.5.0-alpha.41",
|
||||
"@storybook/angular": "6.5.0-alpha.42",
|
||||
"@storybook/html": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/vue": "6.5.0-alpha.42",
|
||||
"@storybook/web-components": "6.5.0-alpha.42",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -199,7 +199,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,25 +39,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.41",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.41",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.42",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.42",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.5.0-alpha.41",
|
||||
"@storybook/vue": "6.5.0-alpha.42",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
@ -120,6 +120,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -41,14 +41,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -2,7 +2,10 @@ import { Args, addons } from '@storybook/addons';
|
||||
import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
|
||||
import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
|
||||
import { instrument } from '@storybook/instrumenter';
|
||||
import { fn } from 'jest-mock';
|
||||
import { ModuleMocker } from 'jest-mock';
|
||||
|
||||
const JestMock = new ModuleMocker(global);
|
||||
const fn = JestMock.fn.bind(JestMock);
|
||||
|
||||
// Aliasing `fn` to `action` here, so we get a more descriptive label in the UI.
|
||||
const { action } = instrument({ action: fn }, { retain: true });
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/router": "6.5.0-alpha.41",
|
||||
"@storybook/router": "6.5.0-alpha.42",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-client": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-client": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.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.5.0-alpha.41",
|
||||
"@storybook/angular": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/vue": "6.5.0-alpha.41",
|
||||
"@storybook/vue3": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/angular": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/vue": "6.5.0-alpha.42",
|
||||
"@storybook/vue3": "6.5.0-alpha.42",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -151,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"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.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@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.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2"
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/router": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/router": "6.5.0-alpha.42",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -67,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -131,5 +131,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2"
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -66,6 +66,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/preview-web": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/preview-web": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.3",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
@ -73,7 +73,7 @@
|
||||
"webpack": ">=4.43.0 <6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@types/prompts": "^2.0.9",
|
||||
"webpack": "4"
|
||||
},
|
||||
@ -108,6 +108,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/api": "6.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/api": "6.5.0-alpha.42",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/preview-web": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/preview-web": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"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.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-common": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-common": "6.5.0-alpha.42",
|
||||
"@storybook/csf": "0.0.2--canary.507502b.0",
|
||||
"@storybook/preview-web": "6.5.0-alpha.41",
|
||||
"@storybook/store": "6.5.0-alpha.41",
|
||||
"@storybook/preview-web": "6.5.0-alpha.42",
|
||||
"@storybook/store": "6.5.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
@ -80,6 +80,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "10663a4c9ea6c04a04047b5bb22254d6b64201c2",
|
||||
"gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -46,12 +46,8 @@ Use the list below as a reference when filling in the values for both the `suppo
|
||||
- web-components
|
||||
- ember
|
||||
- html
|
||||
- mithril
|
||||
- marko
|
||||
- svelte
|
||||
- riot
|
||||
- preact
|
||||
- rax
|
||||
- aurelia
|
||||
- marionette
|
||||
- react-native
|
||||
@ -88,4 +84,4 @@ The `package.json` above appears like below in the catalog. See an example of a
|
||||
|
||||
#### How long does it take for my addon to show up in the catalog?
|
||||
|
||||
Once you publish the addon, it will appear in the catalog. There may be a delay between the time you publish your addon and when it's listed in the catalog. If your addon doesn't show up within 24 hours, [open an issue](https://github.com/storybookjs/frontpage/issues).
|
||||
Once you publish the addon, it will appear in the catalog. There may be a delay between the time you publish your addon and when it's listed in the catalog. If your addon doesn't show up within 24 hours, [open an issue](https://github.com/storybookjs/frontpage/issues).
|
||||
|
||||
@ -12,7 +12,7 @@ ArgTypes are a first-class feature in Storybook for specifying the behaviour of
|
||||
|
||||
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 and the current value of that arg.
|
||||
The most concrete realization of argTypes is the [Args Table](../writing-docs/doc-block-argstable.md) doc block. Each row in the table corresponds to a single argType and the current value of that arg.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ Storybook maintains code snippets for a [variety of frameworks](./../api/framewo
|
||||
|
||||
We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
|
||||
|
||||
| React | Vue | Angular | Web Components | Svelte | Ember | HTML | Mithril | Marko | Riot | Preact | Rax |
|
||||
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------- | ----- | ---- | ------ | --- |
|
||||
| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) (See below) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
|
||||
| React | Vue | Angular | Web Components | Svelte | Ember | HTML | Preact |
|
||||
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
|
||||
| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) (See below) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | ❌ | ❌ | ❌ |
|
||||
|
||||
<div class="aside">
|
||||
💡 The <code>Web Components</code> snippets are present but not fully documented. If you're willing to help, submit a pull request.
|
||||
@ -121,4 +121,4 @@ Go through the documentation and check your work.
|
||||
|
||||
## Submit your contribution
|
||||
|
||||
Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
|
||||
Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
|
||||
|
||||
@ -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 panel. 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-block-argstable.md) 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):
|
||||
|
||||
|
||||
44
docs/faq.md
44
docs/faq.md
@ -97,31 +97,6 @@ A common error is that an addon tries to access the "channel", but the channel i
|
||||
|
||||
2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
|
||||
|
||||
### Can I modify React component state in stories?
|
||||
|
||||
Not directly. If you control the component source, you can do something like this:
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default {
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
class MyComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
someVar: 'defaultValue',
|
||||
...props.initialState,
|
||||
};
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
export const defaultView = () => <MyComponent initialState={} />;
|
||||
```
|
||||
|
||||
### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
|
||||
|
||||
@ -158,7 +133,7 @@ With the release of version 6.0, we updated our documentation as well. That does
|
||||
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
|
||||
|
||||
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|
||||
| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| Get started | Install | [See current documentation](../get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
|
||||
| | What's a story | [See current documentation](../get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
| | Browse Stories | [See current documentation](../get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
@ -171,7 +146,14 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| | Stories for multiple components | [See current documentation](../writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| Write docs | DocsPage | [See current documentation](../writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
|
||||
| | MDX | [See current documentation](../writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
|
||||
| | Doc Blocks | [See current documentation](../writing-docs/doc-blocks.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Argstable | [See current documentation](../writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Canvas | [See current documentation](../writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Color Palette | [See current documentation](../doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Description | [See current documentation](../writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Icon Gallery | [See current documentation](../writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Source | [See current documentation](../writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Story | [See current documentation](../writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Doc Blocks/Typeset | [See current documentation](../writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
|
||||
| | Preview and build docs | [See current documentation](../writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| Testing | Visual tests | [See current documentation](../writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
|
||||
| | Accessibility tests | [See current documentation](../writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
@ -211,7 +193,6 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| | Stories/StoriesOF format (see note below) | [See current documentation](../../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
|
||||
| | Frameworks | [See current documentation](../api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| | CLI options | [See current documentation](../api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
|
||||
|
||||
<div class="aside">
|
||||
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
|
||||
</div>
|
||||
@ -377,4 +358,9 @@ const StoryMeta: ComponentMeta<typeof Button> = {
|
||||
export default meta;
|
||||
```
|
||||
|
||||
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
|
||||
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
|
||||
|
||||
|
||||
## Why is Storybook's source loader returning undefined with curried functions?
|
||||
|
||||
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
|
||||
@ -79,7 +79,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'links',
|
||||
unsupported: ['marko'],
|
||||
unsupported: [],
|
||||
},
|
||||
{
|
||||
name: 'queryparams',
|
||||
@ -87,7 +87,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'Storyshots',
|
||||
unsupported: ['ember', 'mithril', 'marko'],
|
||||
unsupported: ['ember'],
|
||||
path: 'workflows/unit-testing',
|
||||
},
|
||||
{
|
||||
|
||||
@ -9,12 +9,8 @@ title: 'Install Storybook'
|
||||
'get-started/installation-command-section/angular.mdx',
|
||||
'get-started/installation-command-section/ember.mdx',
|
||||
'get-started/installation-command-section/html.mdx',
|
||||
'get-started/installation-command-section/marko.mdx',
|
||||
'get-started/installation-command-section/mithril.mdx',
|
||||
'get-started/installation-command-section/preact.mdx',
|
||||
'get-started/installation-command-section/rax.mdx',
|
||||
'get-started/installation-command-section/react.mdx',
|
||||
'get-started/installation-command-section/riot.mdx',
|
||||
'get-started/installation-command-section/svelte.mdx',
|
||||
'get-started/installation-command-section/vue.mdx',
|
||||
'get-started/installation-command-section/web-components.mdx',
|
||||
@ -82,12 +78,8 @@ Below are some of the most common installation issues and instructions on how to
|
||||
'get-started/installation-problems/angular.mdx',
|
||||
'get-started/installation-problems/ember.mdx',
|
||||
'get-started/installation-problems/html.mdx',
|
||||
'get-started/installation-problems/marko.mdx',
|
||||
'get-started/installation-problems/mithril.mdx',
|
||||
'get-started/installation-problems/preact.mdx',
|
||||
'get-started/installation-problems/rax.mdx',
|
||||
'get-started/installation-problems/react.mdx',
|
||||
'get-started/installation-problems/riot.mdx',
|
||||
'get-started/installation-problems/svelte.mdx',
|
||||
'get-started/installation-problems/vue.mdx',
|
||||
'get-started/installation-problems/web-components.mdx',
|
||||
@ -100,4 +92,4 @@ If all else fails, try asking for [help](https://storybook.js.org/support)
|
||||
|
||||
</details>
|
||||
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -1,8 +0,0 @@
|
||||
Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -1,8 +0,0 @@
|
||||
Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -1,8 +0,0 @@
|
||||
Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -1,7 +0,0 @@
|
||||
- Add the `--type marko` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type marko
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Marko repository](https://github.com/storybookjs/marko) for additional instructions.
|
||||
@ -1,7 +0,0 @@
|
||||
- Add the `--type mithril` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type mithril
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Mithril repository](https://github.com/storybookjs/mithril) for additional instructions.
|
||||
@ -1,7 +0,0 @@
|
||||
- Add the `--type rax` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type rax
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Rax repository](https://github.com/storybookjs/rax) for additional instructions.
|
||||
@ -1,7 +0,0 @@
|
||||
- Add the `--type riot` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type riot
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Riot repository](https://github.com/storybookjs/riot/) for additional instructions.
|
||||
@ -45,7 +45,7 @@ https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/
|
||||
src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true"
|
||||
width="800"
|
||||
height="200"
|
||||
></iframe>;
|
||||
></iframe>
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { ArgsTable, Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
category: 'Colors',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
table: {
|
||||
category: 'Colors',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
table: {
|
||||
category: 'Text',
|
||||
},
|
||||
},
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
@ -0,0 +1,45 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { ArgsTable, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
category: 'Colors',
|
||||
// Assigns the argTypes to a specific subcategory
|
||||
subcategory: 'Button colors',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
table: {
|
||||
category: 'Colors',
|
||||
subcategory: 'Button style',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
table: {
|
||||
category: 'Text',
|
||||
subcategory: 'Button contents',
|
||||
},
|
||||
},
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events',
|
||||
subcategory: 'Button Events',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
```md
|
||||
<!-- Colors.stories.mdx -->
|
||||
|
||||
import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
|
||||
import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
|
||||
|
||||
<Meta title="Complex Colors" />
|
||||
|
||||
# Dark color scheme
|
||||
|
||||
<div style={{ background: '#202020' }}>
|
||||
<ThemeProvider theme={ensure(themes.dark)}>
|
||||
<ColorPalette>
|
||||
{Object.entries(convert(themes.dark).color).map(([k, v]) => {
|
||||
if (
|
||||
typeof v === 'string' &&
|
||||
(v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))
|
||||
) {
|
||||
return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
|
||||
} else if (typeof v === 'object') {
|
||||
return (
|
||||
<ColorItem
|
||||
key={k}
|
||||
title={k}
|
||||
colors={Object.entries(v).reduce(
|
||||
(acc, [key, value]) =>
|
||||
typeof value === 'string' &&
|
||||
(value.match(/^#/) ||
|
||||
value.match(/^rgb/) ||
|
||||
key.match(/color/i))
|
||||
? { ...acc, [key]: value }
|
||||
: acc,
|
||||
{}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</ColorPalette>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
|
||||
# Light color scheme
|
||||
|
||||
<div styles={{ background: '#eeeeee' }}>
|
||||
<ColorPalette>
|
||||
{Object.entries(convert(themes.light).color).map(([k, v]) => {
|
||||
if (
|
||||
typeof v === 'string' &&
|
||||
(v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))
|
||||
) {
|
||||
return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
|
||||
} else if (typeof v === 'object') {
|
||||
return (
|
||||
<ColorItem
|
||||
key={k}
|
||||
title={k}
|
||||
colors={Object.entries(v).reduce(
|
||||
(acc, [key, value]) =>
|
||||
typeof value === 'string' &&
|
||||
(value.match(/^#/) ||
|
||||
value.match(/^rgb/) ||
|
||||
key.match(/color/i))
|
||||
? { ...acc, [key]: value }
|
||||
: acc,
|
||||
{}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</ColorPalette>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,35 @@
|
||||
```md
|
||||
<!-- Colors.stories.mdx -->
|
||||
|
||||
import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Colors" />
|
||||
|
||||
<ColorPalette>
|
||||
<ColorItem
|
||||
title="theme.color.greyscale"
|
||||
subtitle="Some of the greys"
|
||||
colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
|
||||
/>
|
||||
<ColorItem
|
||||
title="theme.color.primary"
|
||||
subtitle="Coral"
|
||||
colors={{ WildWatermelon: '#FF4785' }}
|
||||
/>
|
||||
<ColorItem
|
||||
title="theme.color.secondary"
|
||||
subtitle="Ocean"
|
||||
colors={{ DodgerBlue: '#1EA7FD' }}
|
||||
/>
|
||||
<ColorItem
|
||||
title="theme.color.positive"
|
||||
subtitle="Green"
|
||||
colors={{
|
||||
Apple: 'rgba(102,191,60,1)',
|
||||
Apple80: 'rgba(102,191,60,.8)',
|
||||
Apple60: 'rgba(102,191,60,.6)',
|
||||
Apple30: 'rgba(102,191,60,.3)',
|
||||
}}
|
||||
/>
|
||||
</ColorPalette>
|
||||
```
|
||||
@ -20,7 +20,9 @@ export const CustomSource = Template.bind({});
|
||||
CustomSource.parameters = {
|
||||
docs: {
|
||||
source: {
|
||||
code: 'Some custom string here',
|
||||
code: 'Your code snippet goes here.',
|
||||
language: "yml",
|
||||
type: "auto",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
<!-- Add new argTypes to your component or further adjust them -->
|
||||
|
||||
<Meta
|
||||
title="MyComponent"
|
||||
component={MyComponent}
|
||||
argTypes={{
|
||||
label: {
|
||||
name: 'label',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
import { Button } from './Button';
|
||||
|
||||
<!-- Add new argTypes to your Story or further adjust them -->
|
||||
|
||||
<Story
|
||||
name="some story"
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
label: {
|
||||
name: 'different label',
|
||||
}
|
||||
}}>
|
||||
<!-- Story Contents -->
|
||||
</Story>
|
||||
label: {
|
||||
description: 'Overwritten description',
|
||||
table: {
|
||||
type: {
|
||||
summary: 'Something short',
|
||||
detail: 'Something really really long',
|
||||
},
|
||||
},
|
||||
control: {
|
||||
type: null,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
@ -5,12 +5,20 @@ import { Source } from '@storybook/addon-docs';
|
||||
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
## With code snippet
|
||||
|
||||
<Source
|
||||
language='css'
|
||||
dark
|
||||
format={false},
|
||||
code={dedent`
|
||||
.container {
|
||||
display: grid | inline-grid;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
## With Story Id
|
||||
|
||||
<Source id="example-mycomponent--starter" />
|
||||
```
|
||||
@ -10,9 +10,10 @@ import { Button } from './Button';
|
||||
<Description of={Button} />
|
||||
|
||||
<Description markdown={dedent`
|
||||
|
||||
## Custom description
|
||||
|
||||
## Custom description
|
||||
Insert fancy markdown here.
|
||||
|
||||
Insert fancy markdown here.
|
||||
`}/>
|
||||
```
|
||||
46
docs/snippets/common/icongallery-doc-block.mdx.mdx
Normal file
46
docs/snippets/common/icongallery-doc-block.mdx.mdx
Normal file
@ -0,0 +1,46 @@
|
||||
```md
|
||||
<!-- Iconography.stories.mdx -->
|
||||
|
||||
import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
|
||||
|
||||
import { Icon as IconExample } from './Icon';
|
||||
|
||||
<Meta title="Iconography" />
|
||||
|
||||
# Iconography
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="mobile">
|
||||
<IconExample name="mobile" />
|
||||
</IconItem>
|
||||
<IconItem name="user">
|
||||
<IconExample name="user" />
|
||||
</IconItem>
|
||||
<IconItem name="browser">
|
||||
<IconExample name="browser" />
|
||||
</IconItem>
|
||||
<IconItem name="component">
|
||||
<IconExample name="component" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="calendar">
|
||||
<IconExample name="calendar" />
|
||||
</IconItem>
|
||||
<IconItem name="paintbrush">
|
||||
<IconExample name="paintbrush" />
|
||||
</IconItem>
|
||||
<IconItem name="add">
|
||||
<IconExample name="add" />
|
||||
</IconItem>
|
||||
<IconItem name="subtract">
|
||||
<IconExample name="subtract" />
|
||||
</IconItem>
|
||||
<IconItem name="document">
|
||||
<IconExample name="document" />
|
||||
</IconItem>
|
||||
<IconItem name="graphline">
|
||||
<IconExample name="graphline" />
|
||||
</IconItem>
|
||||
|
||||
</IconGallery>
|
||||
```
|
||||
21
docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
Normal file
21
docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
Normal file
@ -0,0 +1,21 @@
|
||||
```md
|
||||
<!-- ExampleStory.stories.mdx -->
|
||||
|
||||
import { Canvas, Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { ExampleComponent} from './ExampleComponent';
|
||||
|
||||
export const Template = (args) => (
|
||||
/*
|
||||
* Your template implementation goes here.
|
||||
* Read more about Storybook templates at:
|
||||
* https://storybook.js.org/docs/react/get-started/whats-a-story
|
||||
*/
|
||||
);
|
||||
|
||||
<Meta title="SampleComponent" component={ ExampleComponent } />
|
||||
|
||||
<Canvas columns={2} withSource="open" withToolbar>
|
||||
<!-- Your stories go here -->
|
||||
</Canvas>
|
||||
```
|
||||
55
docs/snippets/common/typeset-doc.block.mdx.mdx
Normal file
55
docs/snippets/common/typeset-doc.block.mdx.mdx
Normal file
@ -0,0 +1,55 @@
|
||||
```md
|
||||
<!-- Typography.stories.mdx -->
|
||||
|
||||
import { Meta, Typeset } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta title="Typography" />
|
||||
|
||||
export const typography = {
|
||||
type: {
|
||||
primary: '"Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
|
||||
},
|
||||
weight: {
|
||||
regular: '400',
|
||||
bold: '700',
|
||||
extrabold: '800',
|
||||
black: '900',
|
||||
},
|
||||
size: {
|
||||
s1: 12,
|
||||
s2: 14,
|
||||
s3: 16,
|
||||
m1: 20,
|
||||
m2: 24,
|
||||
m3: 28,
|
||||
l1: 32,
|
||||
l2: 40,
|
||||
l3: 48,
|
||||
},
|
||||
};
|
||||
|
||||
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
|
||||
|
||||
# Typography
|
||||
|
||||
**Font:** Nunito Sans
|
||||
|
||||
**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
|
||||
|
||||
<Typeset
|
||||
fontSizes={[
|
||||
Number(typography.size.s1),
|
||||
Number(typography.size.s2),
|
||||
Number(typography.size.s3),
|
||||
Number(typography.size.m1),
|
||||
Number(typography.size.m2),
|
||||
Number(typography.size.m3),
|
||||
Number(typography.size.l1),
|
||||
Number(typography.size.l2),
|
||||
Number(typography.size.l3),
|
||||
]}
|
||||
fontWeight={typography.weight.black}
|
||||
sampleText={SampleText}
|
||||
fontFamily={typography.type.primary}
|
||||
/>
|
||||
```
|
||||
46
docs/toc.js
46
docs/toc.js
@ -116,9 +116,51 @@ module.exports = {
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-blocks',
|
||||
pathSegment: '',
|
||||
title: 'Doc Blocks',
|
||||
type: 'link',
|
||||
type: 'menu',
|
||||
children: [
|
||||
{
|
||||
pathSegment: 'doc-block-argstable',
|
||||
title: 'ArgsTable',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-canvas',
|
||||
title: 'Canvas',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-colorpalette',
|
||||
title: 'ColorPalette',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-description',
|
||||
title: 'Description',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-icongallery',
|
||||
title: 'IconGallery',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-source',
|
||||
title: 'Source',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-story',
|
||||
title: 'Story',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'doc-block-typeset',
|
||||
title: 'Typeset',
|
||||
type: 'link',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
pathSegment: 'build-documentation',
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":"6.5.0-alpha.41","info":{"plain":"### Features\n\n* Addon-Outline: add 'o' keyboard shortcut to toggle the outline addon ([#17530](https://github.com/storybookjs/storybook/pull/17530))\n\n### Bug Fixes\n\n* Addon-docs: Ensure that __DOCS_CONTEXT__ cannot be undefined ([#17251](https://github.com/storybookjs/storybook/pull/17251))\n* Addon-docs: Account for non-string types when converting enums ([#15822](https://github.com/storybookjs/storybook/pull/15822))\n* Addon-actions: Don't override undefined args ([#17505](https://github.com/storybookjs/storybook/pull/17505))"}}
|
||||
{"version":"6.5.0-alpha.42","info":{"plain":"### Bug Fixes\n\n- Controls/Essentials/Interactions: Add support for main.cjs/mjs/tsx files ([#17524](https://github.com/storybookjs/storybook/pull/17524))\n- Addon-docs: Fix preset handling for builder with options ([#17544](https://github.com/storybookjs/storybook/pull/17544))"}}
|
||||
@ -2,12 +2,6 @@
|
||||
title: 'Preview and build docs'
|
||||
---
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
</div>
|
||||
|
||||
Storybook allows you to create rich and extensive [documentation](./introduction.md) that will help you and any other stakeholder involved in the development process. Out of the box you have the tooling required to not only write it but also to preview it and build it.
|
||||
|
||||
## Preview Storybook's documentation
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
182
docs/writing-docs/doc-block-argstable.md
Normal file
182
docs/writing-docs/doc-block-argstable.md
Normal file
@ -0,0 +1,182 @@
|
||||
---
|
||||
title: 'ArgsTable'
|
||||
---
|
||||
|
||||
Storybook Docs automatically generates component args tables for components in supported frameworks. These tables list the arguments ([args for short](../writing-stories/args.md)) of the component, and even integrate with [controls](../essentials/controls.md) to allow you to change the args of the currently rendered story.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
src="addon-controls-docs-optimized.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
|
||||
This is extremely useful, but it can be further expanded. Additional information can be added to the component to better document it:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-component-with-proptypes.js.mdx',
|
||||
'react/button-component-with-proptypes.ts.mdx',
|
||||
'angular/button-component-with-proptypes.ts.mdx',
|
||||
'vue/button-component-with-proptypes.2.mdx',
|
||||
'vue/button-component-with-proptypes.3.mdx',
|
||||
'svelte/button-component-with-proptypes.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The args tables will be updated accordingly by including the additional information (e.g., JSDocs comments), offering a richer experience for any stakeholders involved.
|
||||
|
||||
## Working with the DocsPage
|
||||
|
||||
To use the `ArgsTable` in [DocsPage](./docs-page.md#component-parameter), export a component property on your stories metadata:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-story.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Working with MDX
|
||||
|
||||
If you need, you can also include the `ArgsTable` block in your MDX stories. Below is a condensed table of available options and examples:
|
||||
|
||||
| Option | Description |
|
||||
| ------- | --------------------------------------------------------------------------------------------------- |
|
||||
| `of` | Infers the args table from the component. <br/> `<ArgsTable of={MyComponent} />` |
|
||||
| `story` | Infers the args table based on a story. <br/> `<ArgsTable story="example-mycomponent--my-story" />` |
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-argstable-block-for-component.with-component.mdx.mdx',
|
||||
'common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
### Customizing
|
||||
|
||||
`ArgsTables` are generated based on an internal data structure called [ArgTypes](../api/argtypes.md). When you define the component's metadata element in your story, Storybook's Docs will automatically extract the ArgTypes based on available properties.
|
||||
|
||||
If you need, you can customize what is displayed in the `ArgsTable` by extending the `ArgTypes` data, unless you're using the `ArgsTable of={component} />`. In this case, Storybook will infer the data automatically from the component.
|
||||
|
||||
Below is an abridged table and example featuring the available options.
|
||||
|
||||
|
||||
| Field | Description |
|
||||
|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `name` | The name of the property. <br/> `argTypes: { label: {} }` |
|
||||
| `type.name` | Sets a type for the property. <br/> `argTypes: { label: { name: 'number' } }` |
|
||||
| `type.required` | Sets the property as optional or required. <br/> `argTypes: { label: { type: { required: true } }` |
|
||||
| `description` | Sets a Markdown description for the property. <br/> `argTypes: { label: { description: 'Something' } }` |
|
||||
| `table.type.summary` | Provide a short version of the type. <br/> `argTypes: { label: { table: { type: { summary: 'a short summary' } }}}` |
|
||||
| `table.type.detail` | Provides an extended version of the type. <br/> `argTypes: { label: { table: { type: { detail: 'something' } }}}` |
|
||||
| `table.defaultValue.summary` | Provide a short version of the default value. <br/> `argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}` |
|
||||
| `table.defaultValue.detail` | Provides a longer version of the default value. <br/> `argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}` |
|
||||
| `control` | Associates a control for the property. <br/> `argTypes: { label: { control: { type: 'text'} } }` <br/>Read the [Essentials documentation](../essentials/controls.md) to learn more about controls. |
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-csf-argstable-customization.js.mdx',
|
||||
'common/component-story-mdx-argtypes.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 This API is experimental and may change outside the typical semver release cycle. Read the documentation to learn more about [ArgTypes](../api/argtypes.md).
|
||||
|
||||
</div>
|
||||
|
||||
This would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
|
||||
|
||||
#### Shorthands
|
||||
|
||||
To reduce the boilerplate code you have to write, Storybook provides some convenient shorthands to help you streamline your work. Below are some of the available shorthands.
|
||||
|
||||
| Type | Shorthand |
|
||||
| -------------- | ------------------------------------------------------------------------------------------ |
|
||||
| `type.name` | Assigns the type to a number property. <br/> `argTypes: { label: { type: number }` |
|
||||
| `control.type` | Assigns a radio control for the property. <br/> `argTypes: { size: { control: 'radio' } }` |
|
||||
|
||||
### Grouping
|
||||
|
||||
You can also extend the ArgsTable's customization by grouping related `argTypes` into categories or even subcategories. Based on the following component implementation:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-implementation.js.mdx',
|
||||
'react/button-implementation.ts.mdx',
|
||||
'angular/button-implementation.ts.mdx',
|
||||
'vue/button-implementation.2.mdx',
|
||||
'vue/button-implementation.3.mdx',
|
||||
'svelte/button-implementation.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
You could group similar properties for better organization and structure. Using the table below as a reference:
|
||||
|
||||
| Field | Category |
|
||||
| :------------------ | :------: |
|
||||
| **backgroundColor** | Colors |
|
||||
| **primary** | Colors |
|
||||
| **label** | Text |
|
||||
| **onClick** | Events |
|
||||
| **size** | Sizes |
|
||||
|
||||
Results in the following change into your story and UI.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/button-story-argtypes-with-categories.js.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
|
||||
You can also extend the formula above and introduce subcategories, allowing better structuring and organization. Using the table below as a reference leads to the following change to your story and UI:
|
||||
|
||||
| Field | Category | Subcategory |
|
||||
| :------------------ | :------: | :-------------: |
|
||||
| **backgroundColor** | Colors | Button colors |
|
||||
| **primary** | Colors | Button style |
|
||||
| **label** | Text | Button contents |
|
||||
| **onClick** | Events | Button Events |
|
||||
| **size** | Sizes | |
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/button-story-argtypes-with-subcategories.js.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
|
||||
### Controls
|
||||
|
||||
The controls inside an `ArgsTable` are configured in exactly the same way as the [controls](../essentials/controls.md) addon pane. You’ll probably notice the table is very similar! It uses the same component and mechanism behind the scenes.
|
||||
66
docs/writing-docs/doc-block-canvas.md
Normal file
66
docs/writing-docs/doc-block-canvas.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: 'Canvas'
|
||||
---
|
||||
|
||||
Storybook's `Canvas` Doc Block is a wrapper featuring a toolbar that allows you to interact with its content while automatically providing the required [Source](./doc-block-source.md) snippets.
|
||||
|
||||
|
||||
|
||||
## Working with the DocsPage
|
||||
|
||||
Storybook's [DocsPage](./docs-page.md) wraps each story inside a `Canvas` Doc Block. The first story rendered in the DocsPage is automatically configured with a toolbar and set as _primary_. All other existing stories will not feature the toolbar. It also includes a [Source](./doc-block-source.md) Doc Block to visualize the story code snippet.
|
||||
|
||||
## Working with MDX
|
||||
|
||||
The `Canvas` Doc Block includes additional customization options if you're writing MDX stories. Below is a condensed example and table featuring all the available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/mdx-canvas-doc-block.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| `columns` | Splits the stories based on the number of defined columns. <br/> `<Canvas columns={2}></Canvas>` |
|
||||
| `isColumn` | Displays the stories one above the other. <br/> `<Canvas isColumn></Canvas>` |
|
||||
| `withSource` | Controls the source code block visibility. <br/> `Canvas withSource="open"></Canvas>` |
|
||||
| `withToolbar` | Sets the `Canvas` toolbar visibility. <br/> `<Canvas withToolbar></Canvas>` |
|
||||
|
||||
### Rendering multiple stories
|
||||
|
||||
If you want, you can also group multiple stories and render them inside a single `Canvas` Doc Block. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
'angular/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
'vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx',
|
||||
'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx',
|
||||
'svelte/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Non-story content
|
||||
|
||||
Additionally, you can also place non-story related content inside `Canvas` Doc Block allowing you to render the JSX content precisely as it would if you placed it inside an MDX file, for example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-with-story-content.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When rendered, Storybook will automatically generate the code snippet for this inside the [Source](./doc-block-source.md) block beneath the block.
|
||||
BIN
docs/writing-docs/doc-block-colorpalette-optimized.png
Normal file
BIN
docs/writing-docs/doc-block-colorpalette-optimized.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
28
docs/writing-docs/doc-block-colorpalette.md
Normal file
28
docs/writing-docs/doc-block-colorpalette.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 'ColorPalette'
|
||||
---
|
||||
|
||||
Storybook's `ColorPalette` Doc block allows you to document all color-related items (e.g., swatches) used throughout your project.
|
||||
|
||||
|
||||
|
||||
## Working with MDX
|
||||
|
||||
Similar to [`Typeset`](./doc-block-typeset.md), the `ColorPalette` Doc Block is also typically used with MDX. It supports additional customization via options. Below are some examples and a table with all the available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/colorpalette-doc-block.starter-example.mdx.mdx',
|
||||
'common/colopalette-doc-block.advanced-example.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||
| `title` | Sets the name of the color to be displayed. <br/> `<ColorItem title='tomato' />` |
|
||||
| `subtitle` | Provides an additional description to the color. <br/> `<ColorItem subtitle='This is a bright red color' />` |
|
||||
| `colors` | Provides the list of colors to be displayed. <br/> `<ColorItem colors={{ White: '#FFFFFF', Concrete: '#F3F3F3' } />` |
|
||||
42
docs/writing-docs/doc-block-description.md
Normal file
42
docs/writing-docs/doc-block-description.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 'Description'
|
||||
---
|
||||
|
||||
Storybook's `Description` Doc Block displays the component's description obtained from its source code or user-generated content.
|
||||
|
||||
|
||||
|
||||
## Working with the DocsPage
|
||||
|
||||
Storybook extracts the component's description and renders it at the top of the page. It is automatically generated from the docgen component for the [supported frameworks](../api/frameworks-feature-support.md) based on the component's source code. Below is an abridged example and available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-csf-description.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `component` | Overrides the default component description. <br/> `description: { component:'An example component description' }` |
|
||||
| `markdown` | Provides custom Markdown for the component description. <br/> `<Description markdown={dedent'# Custom Description'} />` <br/> Only applicable to MDX. |
|
||||
| `story` | Overrides the story description. <br/> `description: { story: 'An example story description' }` |
|
||||
| `of` | Sets the description based either on a component or story. <br/> `<Description of={Commponent} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
|
||||
|
||||
## Working with MDX
|
||||
|
||||
If you need, you can also include the `Description` Doc Block in your MDX stories. It relies on the same heuristics as the one applied in the DocsPage. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-description.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
BIN
docs/writing-docs/doc-block-icon-gallery-optimized.png
Normal file
BIN
docs/writing-docs/doc-block-icon-gallery-optimized.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
25
docs/writing-docs/doc-block-icongallery.md
Normal file
25
docs/writing-docs/doc-block-icongallery.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: 'IconGallery'
|
||||
---
|
||||
|
||||
Storybook's `IconGallery` Doc Block enables you easily document all icons associated with your project.
|
||||
|
||||
|
||||
|
||||
## Working with MDX
|
||||
|
||||
Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-block-typeset.md), or [`ColorPallete`](./doc-block-colorpalette.md), the `IconGallery` is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/icongallery-doc-block.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | --------------------------------------------------------- |
|
||||
| `name` | Sets the name of the icon. <br/> `<IconItem name="add"/>` |
|
||||
57
docs/writing-docs/doc-block-source.md
Normal file
57
docs/writing-docs/doc-block-source.md
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
title: 'Source'
|
||||
---
|
||||
|
||||
Storybook's `Source` Doc Block displays the story's source code. It supports syntax highlighting for most languages (e.g., `javascript`, `jsx`, `json`, `yml`, `md`, `bash`, `css`, `html`) and can be copied with the click of a button.
|
||||
|
||||
|
||||
|
||||
## Working with the DocsPage
|
||||
|
||||
Storybook automatically generates a `Source` Doc Block within the [Canvas](./doc-block-canvas.md) to display the story's code snippet.
|
||||
It includes additional customization via parameters. Below is a condensed example and tables featuring all the available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-custom-source.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 The pattern demonstrated here applies only to the story. If you need, you can it this to all the component stories, introducing a [component parameter](../writing-stories/parameters.md#component-parameters).
|
||||
|
||||
</div>
|
||||
|
||||
| Option | Description |
|
||||
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `code` | Customizes the code snippet to be displayed. <br/> `docs: { source: { code: '<h1>Hello world</h1>' } }`. <br/> Requires `language` for proper syntax highlighting. |
|
||||
| `dark` | Sets the background to dark mode. <br/> `<Source dark/>` <br/> Applies only to `MDX`. |
|
||||
| `id` | Supplies a unique story identifier. <br/> `<Source id="example-mycomponent--starter" />` <br/> Applies only to `MDX`. |
|
||||
| `language` | Sets the language for syntax highlighting. <br/> `docs: { source: { language: 'html'} }` |
|
||||
| `format` | Formats the code snippet. <br/> `docs: { source: { format:false } }` |
|
||||
| `type` | Sets how the story source snippet is auto-generated. See table below for available values. |
|
||||
|
||||
| Value | Description | Support |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
||||
| **auto** (default) | Use `dynamic` snippets if the story is written using [Args](../writing-stories/args) and the framework supports it.<br/> `docs: { source: { type: 'auto' } }` | All |
|
||||
| **dynamic** | Dynamically generated code snippet based on the output of the story function (e.g, JSX code for React). <br/> `docs: { source: { type: 'dynamic' } }` | [Limited](../api/frameworks-feature-support) |
|
||||
| **code** | Use the raw story source as written in the story file. <br/> `docs: { source: { type: 'code' } }` | All |
|
||||
|
||||
## Working with MDX
|
||||
|
||||
If you need, you can also include the `Source` Doc Block in your MDX stories. It accepts either a story ID or a code snippet. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-dedent.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
50
docs/writing-docs/doc-block-story.md
Normal file
50
docs/writing-docs/doc-block-story.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: 'Story'
|
||||
---
|
||||
|
||||
Stories (component tests) are Storybook's fundamental building blocks.
|
||||
In Storybook Docs, stories are rendered in the `Story` block.
|
||||
|
||||
|
||||
|
||||
## Working with the DocsPage
|
||||
|
||||
With each story you write, Storybook will automatically generate a new `Story` Doc Block, wrapped inside a [`Canvas`](./doc-block-canvas.md)(with a toolbar if it's the first "primary" story) alongside a [source code ](./doc-block-source.md) preview underneath it. Below is a condensed table of the available configuration options.
|
||||
|
||||
| Option | Description |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `inlineStories` | Configures Storybook to render stories inline. <br/> `docs: { inlineStories: false }` <br/> Read the [documentation](./docs-page.md#inline-stories-vs-iframe-stories) for inline rendering framework support. |
|
||||
|
||||
## Working with MDX
|
||||
|
||||
With MDX, the `Story` block is not only a way of rendering stories, but how you define them. Internally, Storybook looks for named `Story` instances located at the top of your document, or inside a [Canvas](./doc-block-canvas.md). Below is an abridged example and table featuring all the available options.
|
||||
|
||||
| Option | Description |
|
||||
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `args` | Provide the required component inputs (e.g., props). <br/> `<Story args={{ text: 'Button' }}/>` <br/> Read the [documentation](../writing-stories/args.md) to learn more. |
|
||||
| `decorators` | Provide additional markup or mock a data provider to allow proper story rendering. <br/> `<Story decorators={[(Story) => ( div style={{ margin: '3em' }}><Story/></div>)]}/>` <br/> Read the [documentation](../writing-stories/decorators.md) to learn more. |
|
||||
| `id` | Storybook's internal story identifier. Used for embedding Storybook stories inside Docs. <br/> `<Story id="example-mycomponent--starter"/>` <br/> Read the [documentation](../api/mdx.md#embedding-stories) to learn more. |
|
||||
| `inline` | Enables Storybook's inline renderer. <br/> `<Story inline={false}/>` <br/> Read the [documentation](./docs-page.md#inline-stories-vs-iframe-stories) to learn more. |
|
||||
| `loaders` | (Experimental) Asynchronous function for data fetching with stories. <br/> `<Story loaders={[async () => ({ data: await (await fetch('your-endpoint'))}) ]}/>` <br/> Read the [documentation](../writing-stories/loaders.md) to learn more. |
|
||||
| `name` | Adds a name to the component story. <br/> `<Story name="Example"/>` . |
|
||||
| `parameters` | Provides the necessary static named metadata related to the story. <br/> `Story parameters={{ backgrounds: { values: [{ name:'red', value:'#f00' }] } }} />` <br/> Read the [documentation](../writing-stories/parameters.md) to learn more. |
|
||||
| `play` | Generate component interactions. <br/> `<Story play={async () => { await userEvent.click(screen.getByRole('button')) }}/>` <br/> Read the [documentation](../writing-stories/play.md) to learn more. |
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-mdx-story-by-name.mdx.mdx',
|
||||
'angular/component-story-mdx-story-by-name.mdx.mdx',
|
||||
'vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx',
|
||||
'vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx',
|
||||
'svelte/component-story-mdx-story-by-name.mdx.mdx',
|
||||
'common/component-story-mdx-reference-storyid.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Inline rendering
|
||||
|
||||
All stories are rendered in the Preview iframe for isolated development in Storybook's Canvas. With Docs, if your framework supports [inline rendering](./docs-page.md#inline-stories-vs-iframe-stories), it will be used by default for both performance and convenience. However, you can force this feature by providing the required configuration option (see tables above).
|
||||
BIN
docs/writing-docs/doc-block-typeset-optimized.png
Normal file
BIN
docs/writing-docs/doc-block-typeset-optimized.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
28
docs/writing-docs/doc-block-typeset.md
Normal file
28
docs/writing-docs/doc-block-typeset.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 'Typeset'
|
||||
---
|
||||
|
||||
Storybook's `Typeset` Doc Block helps document the fonts used throughout your project.
|
||||
|
||||
|
||||
|
||||
## Working with MDX
|
||||
|
||||
Similar to other documentation related Doc Blocks (e.g., `ColorPalette`, `IconGallery`), the `TypeSet` Doc Block is also commonly used with MDX. It allows additional customization via options. Below is a condensed example and table featuring all the available options.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/typeset-doc.block.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Option | Description |
|
||||
| ------------ | --------------------------------------------------------------------------------------- |
|
||||
| `fontFamily` | Provides a font family to be displayed . <br/> `<Typeset fontFamily={"Nunito Sans"} />` |
|
||||
| `fontSizes` | Provides a list of available font sizes. <br/> `<Typeset fontSizes={[ 12, 14, 20 ]} />` |
|
||||
| `fontWeight` | Defines the weight of the font to be displayed. <br/> `<Typeset fontWeight={800} />` |
|
||||
| `sampleText` | Defines the text to be displayed. <br/> `<Typeset sampleText='Example Text' />` |
|
||||
@ -1,446 +0,0 @@
|
||||
---
|
||||
title: 'Doc Blocks'
|
||||
---
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
</div>
|
||||
|
||||
Doc Blocks are the building blocks of Storybook documentation pages. By default, [DocsPage](./docs-page.md) uses a combination of the blocks below to build a page for each of your components automatically.
|
||||
|
||||
## ArgsTable
|
||||
|
||||
Storybook Docs automatically generates component args tables for components in supported frameworks. These tables list the arguments ([args for short](../writing-stories/args.md)) of the component, and even integrate with [controls](../essentials/controls.md) to allow you to change the args of the currently rendered story.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
src="addon-controls-docs-optimized.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
|
||||
This is extremely useful, but it can be further expanded. Additional information can be added to the component to better document it:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-component-with-proptypes.js.mdx',
|
||||
'react/button-component-with-proptypes.ts.mdx',
|
||||
'angular/button-component-with-proptypes.ts.mdx',
|
||||
'vue/button-component-with-proptypes.2.mdx',
|
||||
'vue/button-component-with-proptypes.3.mdx',
|
||||
'svelte/button-component-with-proptypes.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
By including the additional information, the args table will be updated. Offering a richer experience for any stakeholders involved.
|
||||
|
||||
### DocsPage
|
||||
|
||||
To use the `ArgsTable` in [DocsPage](./docs-page.md#component-parameter), export a component property on your stories metadata:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-story.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### MDX
|
||||
|
||||
To use the `ArgsTable` block in MDX, add the following:
|
||||
|
||||
#### For components
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-argstable-block-for-component.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### For Stories
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-argstable-block-for-story.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Customizing
|
||||
|
||||
`ArgsTables` are automatically inferred from your components and stories, but sometimes it's useful to customize the results.
|
||||
|
||||
`ArgsTables` are rendered from an internal data structure called [ArgTypes](../api/argtypes.md). When you declare a story's component metadata, Docs automatically extracts ArgTypes based on the component's properties.
|
||||
|
||||
You can customize what's shown in the `ArgsTable` by customizing the `ArgTypes` data. This is currently available for [DocsPage](./docs-page.md) and `<ArgsTable story="xxx">` construct, but not for the `<ArgsTable of={component} />` construct.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 This API is experimental and may change outside of the typical semver release cycle.
|
||||
|
||||
</div>
|
||||
|
||||
The API documentation of `ArgTypes` is detailed in a [separate section](../api/argtypes.md), but to control the description and default values, use the following fields:
|
||||
|
||||
| Field | Description |
|
||||
| :----------------------------- | :----------------------------------------------------------------------------------------------: |
|
||||
| **name** | The name of the property |
|
||||
| **type.required** | The stories to be show, ordered by supplied name |
|
||||
| **description** | A Markdown description for the property |
|
||||
| **table.type.summary** | A short version of the type |
|
||||
| **table.type.detail** | A long version of the type |
|
||||
| **table.defaultValue.summary** | A short version of the default value |
|
||||
| **table.defaultValue.detail** | A long version of the default value |
|
||||
| **control** | See [addon-controls README ](https://github.com/storybookjs/storybook/tree/next/addons/controls) |
|
||||
|
||||
For instance:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-csf-argstable-customization.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
|
||||
|
||||
If you find yourself writing the same definition over and over again, Storybook provides some convenient shorthands, that help you streamline your work.
|
||||
|
||||
For instance you can use:
|
||||
|
||||
- `number`, which is shorthand for `type: {name: 'number'}`
|
||||
- `radio`, which is a shorthand for `control: {type: 'radio' }`
|
||||
|
||||
### Grouping
|
||||
|
||||
One other relevant aspect of customization related to the ArgsTables is grouping.
|
||||
|
||||
Similar argTypes can be grouped into specific categories or even subcategories.
|
||||
|
||||
Looking at the following component:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-implementation.js.mdx',
|
||||
'react/button-implementation.ts.mdx',
|
||||
'angular/button-implementation.ts.mdx',
|
||||
'vue/button-implementation.2.mdx',
|
||||
'vue/button-implementation.3.mdx',
|
||||
'svelte/button-implementation.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Similar properties could be grouped together to allow better structuring and organization.
|
||||
|
||||
We could use the following pattern to group them:
|
||||
|
||||
| Field | Category |
|
||||
| :------------------ | :------: |
|
||||
| **backgroundColor** | Colors |
|
||||
| **primary** | Colors |
|
||||
| **label** | Text |
|
||||
| **onClick** | Events |
|
||||
| **size** | Sizes |
|
||||
|
||||
Which will result in the following story implementation:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/button-story-argtypes-with-categories.js.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
And the following change in the Storybook UI:
|
||||
|
||||
|
||||
|
||||
The formula used above can be improved even further and include subcategories.
|
||||
|
||||
Turning the table above into:
|
||||
|
||||
| Field | Category | Subcategory |
|
||||
| :------------------ | :------: | :-------------: |
|
||||
| **backgroundColor** | Colors | Button colors |
|
||||
| **primary** | Colors | Button style |
|
||||
| **label** | Text | Button contents |
|
||||
| **onClick** | Events | Button Events |
|
||||
| **size** | Sizes | |
|
||||
|
||||
Leading to the following change in the story implementation and UI:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/button-story-argtypes-with-subcategories.js.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
|
||||
#### MDX
|
||||
|
||||
To customize `argTypes` in MDX, you can set an `mdx` prop on the `Meta` or `Story` components:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-argtypes.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Controls
|
||||
|
||||
The controls inside an `ArgsTable` are configured in exactly the same way as the [controls](../essentials/controls.md) addon pane. In fact you’ll probably notice the table is very similar! It uses the same component and mechanism behind the scenes.
|
||||
|
||||
## Source
|
||||
|
||||
Storybook Docs displays a story’s source code using the `Source` block. The snippet has built-in syntax highlighting and can be copied with the click of a button.
|
||||
|
||||
|
||||
|
||||
### DocsPage
|
||||
|
||||
In DocsPage, the `Source` block appears automatically within each story’s [Canvas](#canvas) block.
|
||||
|
||||
To customize the source snippet that’s displayed for a story, set the `docs.source.code` and optionally the `docs.source.language` parameters:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-custom-source.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
There is also a `docs.source.type` parameter that controls how source is auto-generated. Valid values include:
|
||||
|
||||
| Value | Description | Support |
|
||||
| :----------------- | :------------------------------------------------------------------------------------------------------------------ | :------------------------------------------: |
|
||||
| **auto** (default) | Use `dynamic` snippets if the story is written using [Args](../writing-stories/args) and the framework supports it. | All |
|
||||
| **dynamic** | Dynamically generated snippet based on the output of the story function, e.g. JSX code for react. | [Limited](../api/frameworks-feature-support) |
|
||||
| **code** | Use the raw story source as written in the story file. | All |
|
||||
|
||||
As an example, if you had the following story:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story-default-docs-code.js.mdx',
|
||||
'react/button-story-default-docs-code.ts.mdx',
|
||||
'react/button-story-default-docs-code.mdx.mdx',
|
||||
'vue/button-story-default-docs-code.3.js.mdx',
|
||||
'vue/button-story-default-docs-code.mdx-3.mdx.mdx',
|
||||
'angular/button-story-default-docs-code.ts.mdx',
|
||||
'angular/button-story-default-docs-code.mdx.mdx',
|
||||
'svelte/button-story-default-docs-code.js.mdx',
|
||||
'svelte/button-story-default-docs-code.native-format.mdx',
|
||||
'svelte/button-story-default-docs-code.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you click the `Show code` button, you'll see the default behavior being applied:
|
||||
|
||||
|
||||
|
||||
To visualize the source as code, you'll need to include the code option in the `docs.source.type` [parameter](../writing-stories/parameters.md):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/button-story-docs-code-type.js.mdx'
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Which leads to the following change in the `code` shown in the `Docs` tab:
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
src="button-story-code-doc-type-optimized.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
|
||||
<div class="aside">
|
||||
|
||||
The pattern described will be applied to all the stories for the component. If you need, you can apply this to individual stories for more granular cases. Read more about story-level parameters [here](../writing-stories/parameters.md#story-parameters).
|
||||
|
||||
</div>
|
||||
|
||||
### MDX
|
||||
|
||||
You can also use the `Source` block in MDX. It accepts either a story ID or `code` snippet. Use the `language` for syntax highlighting. It supports the following languages: `javascript`, `jsx`, `json`, `yml`, `md`, `bash`, `css`, `html`, `tsx`, `typescript`, `graphql`.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-dedent.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Description
|
||||
|
||||
Storybook Docs shows a component’s description extracted from the source code or based on a user-provided string.
|
||||
|
||||
|
||||
|
||||
### DocsPage
|
||||
|
||||
In DocsPage, a component’s description is shown at the top of the page. For [supported frameworks](https://github.com/storybookjs/storybook/tree/next/addons/docs#framework-support), the component description is automatically extracted from a docgen component above the component in its source code. It can also be set by the `docs.description` parameter.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-csf-description.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### MDX
|
||||
|
||||
In MDX, the `Description` shows the component’s description using the same heuristics as the DocsPage. It also accepts a `markdown` parameter to show any user-provided Markdown string.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-description.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Story
|
||||
|
||||
Stories (component examples) are the basic building blocks in Storybook. In Storybook Docs, stories are rendered in the `Story` block.
|
||||
|
||||
|
||||
|
||||
### DocsPage
|
||||
|
||||
In DocsPage, a `Story` block is generated for each story in your [CSF](../api/csf.md) file, it's wrapped with a `Canvas` wrapper that gives it a toolbar on top (in the case of the first “primary” story) and a source code preview underneath.
|
||||
|
||||
### MDX
|
||||
|
||||
In MDX, the `Story` block is not only a way of displaying stories, but also the primary way to define them. Storybook looks for `Story` instances with the `name` prop, either defined at the top level of the document, or directly beneath a [Canvas](#canvas) block defined at the top level:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-mdx-story-by-name.mdx.mdx',
|
||||
'angular/component-story-mdx-story-by-name.mdx.mdx',
|
||||
'vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx',
|
||||
'vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx',
|
||||
'svelte/component-story-mdx-story-by-name.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
You can also reference existing stories in Storybook by ID:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/component-story-mdx-reference-storyid.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Inline rendering
|
||||
|
||||
In Storybook’s Canvas, all stories are rendered in the Preview iframe for isolated development. In Storybook Docs, when [inline rendering is supported by your framework](./docs-page.md#inline-stories-vs-iframe-stories), inline rendering is used by default for performance and convenience. However, you can force iframe rendering with `docs: { inlineStories: false }` parameter, or `inline={false}` in MDX.
|
||||
|
||||
## Canvas
|
||||
|
||||
Storybook Docs’ `Canvas` block is a wrapper that provides a toolbar for interacting with its contents, and also provides [Source](#source) snippets automatically.
|
||||
|
||||
|
||||
|
||||
### DocsPage
|
||||
|
||||
In DocsPage, every story is wrapped in a `Canvas` block. The first story on the page is called the _primary_, and it has a toolbar. The other stories are also wrapped with `Canvas`, but there is no toolbar by default.
|
||||
|
||||
|
||||
|
||||
### MDX
|
||||
|
||||
In MDX, `Canvas` is more flexible: in addition to the DocsPage behavior, it can show multiple stories in one:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
'angular/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
'vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx',
|
||||
'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx',
|
||||
'svelte/mdx-canvas-multiple-stories.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
By default, each story will display side by side (css block). You can display stories one above the other by adding `isColumn` property to the Canvas component.
|
||||
|
||||
You can also place non-story content inside a `Canvas` block:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/my-component-with-story-content.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This renders the JSX content exactly as it would if you’d placed it directly in the MDX, but it also inserts the source snippet in a [Source](#source) block beneath the block.
|
||||
@ -2,13 +2,7 @@
|
||||
title: 'DocsPage'
|
||||
---
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to DocsPage. If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
</div>
|
||||
|
||||
When you install [Storybook Docs](https://storybook.js.org/addons/@storybook/addon-docs), DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your [stories](../get-started/whats-a-story.md), text descriptions, docgen comments, [args tables](./doc-blocks.md#argstable), and code examples into a single page for each component.
|
||||
When you install [Storybook Docs](https://storybook.js.org/addons/@storybook/addon-docs), DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your [stories](../get-started/whats-a-story.md), text descriptions, docgen comments, [args tables](./doc-block-argstable.md), and code examples into a single page for each component.
|
||||
|
||||
The best practice for docs is for each component to have its own set of documentation and stories.
|
||||
|
||||
@ -158,7 +152,7 @@ Here's an example of rebuilding DocsPage for the Button component using doc bloc
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In addition, you can interleave your own components to customize the auto-generated contents of the page or pass in different options to the blocks to customize their appearance. Read more about [Doc Blocks](./doc-blocks.md).
|
||||
In addition, you can interleave your own components to customize the auto-generated contents of the page or pass in different options to the blocks to customize their appearance.
|
||||
|
||||
## Story file names
|
||||
|
||||
|
||||
@ -2,12 +2,6 @@
|
||||
title: 'How to document components'
|
||||
---
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
</div>
|
||||
|
||||
When you write component stories during development, you also create basic documentation to revisit later.
|
||||
|
||||
Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. That allows you to create UI library usage guidelines, design system sites, and more.
|
||||
@ -25,6 +19,6 @@ If you're already using Storybook and you're **updating** to the latest release,
|
||||
|
||||
You can also create free-form pages for each component using [MDX](./mdx.md), a format for simultaneously documenting components and writing stories.
|
||||
|
||||
In both cases, you’ll use [Doc Blocks](./doc-blocks.md) as the building blocks to create full featured documentation.
|
||||
In both cases, you’ll use Doc Blocks as the building blocks to create full featured documentation.
|
||||
|
||||
Docs is autoconfigured to work out of the box in most use cases. In some cases you may need or want to tweak the configuration. Read more about it [here](https://storybook.js.org/addons/@storybook/addon-docs).
|
||||
|
||||
@ -4,7 +4,7 @@ title: 'MDX'
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [Docs page](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
💡 Currently, there's an issue using MDX stories with IE11, which **doesn't affect** the [Docs page](./docs-page.md). It's a known MDX issue, and once it's solved, Storybook's MDX implementation will be updated accordingly.
|
||||
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ Let's break it down.
|
||||
|
||||
## MDX-flavored CSF
|
||||
|
||||
MDX-flavored [Component Story Format (CSF)](../api/csf.md) includes a collection of components called ["Doc Blocks"](./doc-blocks.md), 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)](../api/csf.md) 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 first story from the Checkbox example above, rewritten in CSF:
|
||||
|
||||
@ -247,4 +247,4 @@ Unless you use a custom [webpack configuration](../configure/webpack.md#extendin
|
||||
|
||||
Be sure to update [.storybook/main.js](../configure/overview.md#configure-story-rendering) file to load `.stories.mdx` stories, as per the addon-docs installation instructions.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -103,7 +103,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
It is useful to ensure that the story remains a “pure” rendering of the component under test, and any extra HTML or components don't pollute that. In particular the [Source](../writing-docs/doc-blocks.md#source) docblock works best when you do this.
|
||||
It is useful to ensure that the story remains a “pure” rendering of the component under test, and any extra HTML or components don't pollute that. In particular the [Source](../writing-docs/doc-block-source.md) Doc Block works best when you do this.
|
||||
|
||||
## Component decorators
|
||||
|
||||
|
||||
@ -96,7 +96,7 @@ By default, Storyshots detects your project's framework. If you run into a situa
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
These are the frameworks currently supported by Storyshots: `angular`, `html`, `preact`, `rax`, `react`, `react-native`, `riot`, `svelte`, `vue`, `vue3`, and `web-components`.
|
||||
These are the frameworks currently supported by Storyshots: `angular`, `html`, `preact`, `react`, `react-native`, `svelte`, `vue`, `vue3`, and `web-components`.
|
||||
|
||||
### Additional customization
|
||||
|
||||
|
||||
@ -7,39 +7,28 @@ Live examples of these:
|
||||
- [React Official](https://next--storybookjs.netlify.com/official-storybook/)
|
||||
- [Vue](https://next--storybookjs.netlify.com/vue-kitchen-sink/)
|
||||
- [Angular](https://next--storybookjs.netlify.com/angular-cli/)
|
||||
- [Mithril](https://next--storybookjs.netlify.com/mithril-kitchen-sink/)
|
||||
- [Marko](https://next--storybookjs.netlify.com/marko-cli/)
|
||||
- [HTML](https://next--storybookjs.netlify.com/html-kitchen-sink/)
|
||||
- [Svelte](https://next--storybookjs.netlify.com/svelte-kitchen-sink/)
|
||||
- [Riot](https://next--storybookjs.netlify.com/riot-kitchen-sink/)
|
||||
- [Ember](https://next--storybookjs.netlify.com/ember-cli/)
|
||||
- [Preact](https://next--storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
- [Rax](https://next--storybookjs.netlify.com/rax-kitchen-sink/)
|
||||
|
||||
### Current release
|
||||
|
||||
- [React Official](https://storybookjs.netlify.com/official-storybook/)
|
||||
- [Vue](https://storybookjs.netlify.com/vue-kitchen-sink/)
|
||||
- [Angular](https://storybookjs.netlify.com/angular-cli/)
|
||||
- [Mithril](https://storybookjs.netlify.com/mithril-kitchen-sink/)
|
||||
- [Marko](https://storybookjs.netlify.com/marko-cli/)
|
||||
- [HTML](https://storybookjs.netlify.com/html-kitchen-sink/)
|
||||
- [Svelte](https://storybookjs.netlify.com/svelte-kitchen-sink/)
|
||||
- [Riot](https://storybookjs.netlify.com/riot-kitchen-sink/)
|
||||
- [Ember](https://storybookjs.netlify.com/ember-cli/)
|
||||
- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
- [Rax](https://storybookjs.netlify.com/rax-kitchen-sink/)
|
||||
|
||||
### 5.0
|
||||
|
||||
- [React Official](https://release-5-0--storybooks-official.netlify.com/)
|
||||
- [Vue](https://release-5-0--storybooks-vue.netlify.com/)
|
||||
- [Angular](https://release-5-0--storybooks-angular.netlify.com/)
|
||||
- [Mithril](https://release-5-0--storybooks-mithril.netlify.com/)
|
||||
- [Marko](https://release-5-0--storybooks-marko.netlify.com/)
|
||||
- [HTML](https://release-5-0--storybooks-html.netlify.com/)
|
||||
- [Svelte](https://release-5-0--storybooks-svelte.netlify.com/)
|
||||
- [Riot](https://release-5-0--storybooks-riot.netlify.com/)
|
||||
- [Ember](https://release-5-0--storybooks-ember.netlify.com/)
|
||||
- [Preact](https://release-5-0--storybooks-preact.netlify.com/)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -39,21 +39,21 @@
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/elements": "^11.2.14",
|
||||
"@compodoc/compodoc": "^1.1.18",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/angular": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/angular": "6.5.0-alpha.42",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "6.5.0-alpha.41",
|
||||
"@storybook/client-logger": "6.5.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,19 +21,19 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-react15",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -19,14 +19,14 @@
|
||||
"react-scripts": "3.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"babel-core": "6",
|
||||
"babel-runtime": "6",
|
||||
"webpack": "4"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,12 +34,12 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.41",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.42",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,15 +34,15 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "ember build --output-path ember-output",
|
||||
@ -17,18 +17,18 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/ember": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/ember": "6.5.0-alpha.42",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"babel-loader": "^8.0.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -13,23 +13,23 @@
|
||||
"storybook": "start-storybook -p 9006 --no-manager-cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/client-api": "6.5.0-alpha.41",
|
||||
"@storybook/core": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/html": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/client-api": "6.5.0-alpha.42",
|
||||
"@storybook/core": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/html": "6.5.0-alpha.42",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"format-json": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -14,31 +14,31 @@
|
||||
"devDependencies": {
|
||||
"@packtracker/webpack-plugin": "^2.3.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/cli": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/core-events": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/cli": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/core-events": "6.5.0-alpha.42",
|
||||
"@storybook/design-system": "^5.4.7",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/router": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/router": "6.5.0-alpha.42",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"chromatic": "^6.0.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "preact-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -15,16 +15,16 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-transform-runtime": "^7.12.10",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/preact": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/preact": "6.5.0-alpha.42",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": "^17",
|
||||
"@types/react-dom": "^17",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts-webpack4",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -8,10 +8,10 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.41",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.42",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"prop-types": "15.7.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
|
||||
@ -18,13 +18,13 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/cli": "6.5.0-alpha.41",
|
||||
"@storybook/components": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/theming": "6.5.0-alpha.41",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/cli": "6.5.0-alpha.42",
|
||||
"@storybook/components": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"@storybook/theming": "6.5.0-alpha.42",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"@types/babel__preset-env": "^7",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "server-kitchen-sink",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,13 +14,13 @@
|
||||
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/node-logger": "6.5.0-alpha.41",
|
||||
"@storybook/server": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/node-logger": "6.5.0-alpha.42",
|
||||
"@storybook/server": "6.5.0-alpha.42",
|
||||
"concurrently": "^5.3.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "~4.17.1",
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "standalone-preview",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
|
||||
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/cli": "6.5.0-alpha.41",
|
||||
"@storybook/react": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/cli": "6.5.0-alpha.42",
|
||||
"@storybook/react": "6.5.0-alpha.42",
|
||||
"cross-env": "^7.0.3",
|
||||
"parcel": "2.0.1",
|
||||
"react": "16.14.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svelte-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook",
|
||||
@ -10,20 +10,20 @@
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/svelte": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/svelte": "6.5.0-alpha.42",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"svelte-jester": "1.3.0",
|
||||
"svelte-preprocess": "4.6.8"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-3-cli-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -14,14 +14,14 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.41",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.42",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/vue3": "6.5.0-alpha.41",
|
||||
"@storybook/vue3": "6.5.0-alpha.42",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-cli-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -15,11 +15,11 @@
|
||||
"vue-property-decorator": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.42",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/vue": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/vue": "6.5.0-alpha.42",
|
||||
"@vue/cli-plugin-babel": "~4.3.1",
|
||||
"@vue/cli-plugin-typescript": "~4.3.1",
|
||||
"@vue/cli-service": "~4.3.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -14,21 +14,21 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.41",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.41",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.41",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.41",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.41",
|
||||
"@storybook/addon-links": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.41",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.41",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.41",
|
||||
"@storybook/addons": "6.5.0-alpha.41",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.42",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.42",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.42",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.42",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.42",
|
||||
"@storybook/addon-links": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.42",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.42",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.42",
|
||||
"@storybook/addons": "6.5.0-alpha.42",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.41",
|
||||
"@storybook/source-loader": "6.5.0-alpha.42",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/vue": "6.5.0-alpha.41",
|
||||
"@storybook/vue": "6.5.0-alpha.42",
|
||||
"@vue/babel-preset-jsx": "^1.2.4",
|
||||
"babel-loader": "^8.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-components-kitchen-sink",
|
||||
"version": "6.5.0-alpha.41",
|
||||
"version": "6.5.0-alpha.42",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "6.5.0-alpha.41"
|
||||
"version": "6.5.0-alpha.42"
|
||||
}
|
||||
|
||||
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