mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 07:21:17 +08:00
Merge branch 'next' into pr/15729
This commit is contained in:
Michael Shilman
commit
11e3cabea6
@ -202,7 +202,7 @@ jobs:
|
||||
destination: cypress
|
||||
e2e-tests-core:
|
||||
executor:
|
||||
class: medium
|
||||
class: large
|
||||
name: sb_cypress_6_node_12
|
||||
parallelism: 2
|
||||
steps:
|
||||
|
||||
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -4,9 +4,9 @@ Issue:
|
||||
|
||||
## How to test
|
||||
|
||||
- Is this testable with Jest or Chromatic screenshots?
|
||||
- Does this need a new example in the kitchen sink apps?
|
||||
- Does this need an update to the documentation?
|
||||
- [ ] Is this testable with Jest or Chromatic screenshots?
|
||||
- [ ] Does this need a new example in the kitchen sink apps?
|
||||
- [ ] Does this need an update to the documentation?
|
||||
|
||||
If your answer is yes to any of these, please make sure to include it in your PR.
|
||||
|
||||
|
||||
74
CHANGELOG.md
74
CHANGELOG.md
@ -1,3 +1,77 @@
|
||||
## 6.4.0-alpha.30 (August 14, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: Improve typings of Angular components ([#15832](https://github.com/storybookjs/storybook/pull/15832))
|
||||
- Controls: Fix `esm is not defined` error with built Storybook ([#15812](https://github.com/storybookjs/storybook/pull/15812))
|
||||
|
||||
## 6.4.0-alpha.29 (August 10, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-docs/Angular: Render user defined template as source if it exists ([#15743](https://github.com/storybookjs/storybook/pull/15743))
|
||||
- Core: Add MDX support to built-in stories.json generation ([#15808](https://github.com/storybookjs/storybook/pull/15808))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Controls: Add better icon for reset button ([#15737](https://github.com/storybookjs/storybook/pull/15737))
|
||||
- Add checkboxes to pull request template ([#15799](https://github.com/storybookjs/storybook/pull/15799))
|
||||
|
||||
## 6.4.0-alpha.28 (August 10, 2021)
|
||||
|
||||
Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
|
||||
|
||||
## 6.3.7 (August 10, 2021)
|
||||
|
||||
Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
|
||||
|
||||
## 6.4.0-alpha.26 (August 9, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Server: Update example to use options and labels for options controls ([#15789](https://github.com/storybookjs/storybook/pull/15789))
|
||||
- Controls: Remove ArrayControl ([#15788](https://github.com/storybookjs/storybook/pull/15788))
|
||||
|
||||
## 6.4.0-alpha.25 (August 8, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Add global CSF3 renderer ([#15742](https://github.com/storybookjs/storybook/pull/15742))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs/Angular: Use compodoc rawdescription where available ([#15774](https://github.com/storybookjs/storybook/pull/15774))
|
||||
- Core: Fix main.js glob resolution for direct paths in stories ([#15775](https://github.com/storybookjs/storybook/pull/15775))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CSF: Optionally pass Args generic type from BaseAnnotations to ArgTypes ([#14356](https://github.com/storybookjs/storybook/pull/14356))
|
||||
|
||||
## 6.4.0-alpha.24 (August 4, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- HTML: Dynamic source snippets ([#15748](https://github.com/storybookjs/storybook/pull/15748))
|
||||
|
||||
## 6.4.0-alpha.23 (August 3, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add --no-open flag ([#15739](https://github.com/storybookjs/storybook/pull/15739))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix incomplete property metadata when using inheritance ([#15586](https://github.com/storybookjs/storybook/pull/15586))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Upgrade to Yarn 3 ([#15682](https://github.com/storybookjs/storybook/pull/15682))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Lower babel-loader required version ([#14811](https://github.com/storybookjs/storybook/pull/14811))
|
||||
- Relax prettier version constraint ([#15298](https://github.com/storybookjs/storybook/pull/15298))
|
||||
|
||||
## 6.4.0-alpha.22 (July 28, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/channels": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/channels": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Actions can be used to display data received by event handlers i
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 80 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
BIN
addons/backgrounds/docs/addon-backgrounds.gif
Normal file
BIN
addons/backgrounds/docs/addon-backgrounds.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -347,7 +347,7 @@ const Example = () => <Button />;
|
||||
Example.parameters = {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Individiual story description, may conatin `markdown` markup"
|
||||
story: "Individual story description, may contain `markdown` markup"
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,20 +63,20 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/postinstall": "6.4.0-alpha.22",
|
||||
"@storybook/source-loader": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@storybook/postinstall": "6.4.0-alpha.30",
|
||||
"@storybook/source-loader": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -91,7 +91,7 @@
|
||||
"lodash": "^4.17.20",
|
||||
"nanoid": "^3.1.23",
|
||||
"p-limit": "^3.1.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-element-to-jsx-string": "^14.3.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -105,10 +105,10 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/react": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"@storybook/angular": "6.4.0-alpha.30",
|
||||
"@storybook/react": "6.4.0-alpha.30",
|
||||
"@storybook/vue": "6.4.0-alpha.30",
|
||||
"@storybook/web-components": "6.4.0-alpha.30",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -118,7 +118,7 @@
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/tmp": "^0.2.0",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"fs-extra": "^9.0.1",
|
||||
@ -138,10 +138,10 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/vue3": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"@storybook/angular": "6.4.0-alpha.30",
|
||||
"@storybook/vue": "6.4.0-alpha.30",
|
||||
"@storybook/vue3": "6.4.0-alpha.30",
|
||||
"@storybook/web-components": "6.4.0-alpha.30",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -192,7 +192,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -19,8 +19,8 @@ Object {
|
||||
},
|
||||
"_value": Object {
|
||||
"defaultValue": "Private hello",
|
||||
"description": "<p>Private value. </p>
|
||||
",
|
||||
"description": "
|
||||
Private value.",
|
||||
"name": "_value",
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
@ -35,8 +35,7 @@ Object {
|
||||
},
|
||||
"accent": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Specify the accent-type of the button </p>
|
||||
",
|
||||
"description": "Specify the accent-type of the button",
|
||||
"name": "accent",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -51,8 +50,7 @@ Object {
|
||||
},
|
||||
"appearance": Object {
|
||||
"defaultValue": "secondary",
|
||||
"description": "<p>Appearance style of the button. </p>
|
||||
",
|
||||
"description": "Appearance style of the button.",
|
||||
"name": "appearance",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -86,7 +84,10 @@ Object {
|
||||
},
|
||||
"calc": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
|
||||
"description": "
|
||||
|
||||
An internal calculation method which adds \`x\` and \`y\` together.
|
||||
|
||||
",
|
||||
"name": "calc",
|
||||
"table": Object {
|
||||
@ -100,10 +101,24 @@ Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"focus": Object {
|
||||
"defaultValue": false,
|
||||
"description": "",
|
||||
"name": "focus",
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
"type": Object {
|
||||
"required": true,
|
||||
"summary": "",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
},
|
||||
},
|
||||
"inputValue": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
|
||||
",
|
||||
"description": "Setter for \`inputValue\` that is also an \`@Input\`.",
|
||||
"name": "inputValue",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -118,8 +133,8 @@ Object {
|
||||
},
|
||||
"internalProperty": Object {
|
||||
"defaultValue": "Public hello",
|
||||
"description": "<p>Public value. </p>
|
||||
",
|
||||
"description": "
|
||||
Public value.",
|
||||
"name": "internalProperty",
|
||||
"table": Object {
|
||||
"category": "properties",
|
||||
@ -134,14 +149,13 @@ Object {
|
||||
},
|
||||
"isDisabled": Object {
|
||||
"defaultValue": false,
|
||||
"description": "<p>Sets the button to a disabled state. </p>
|
||||
",
|
||||
"description": "Sets the button to a disabled state.",
|
||||
"name": "isDisabled",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
"type": Object {
|
||||
"required": true,
|
||||
"summary": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
@ -165,8 +179,7 @@ Object {
|
||||
},
|
||||
"label": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>The inner text of the button.</p>
|
||||
",
|
||||
"description": "The inner text of the button.",
|
||||
"name": "label",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -182,8 +195,11 @@ Object {
|
||||
"onClick": Object {
|
||||
"action": "onClick",
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Handler to be called when the button is clicked by a user.</p>
|
||||
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
|
||||
"description": "
|
||||
|
||||
Handler to be called when the button is clicked by a user.
|
||||
|
||||
Will also block the emission of the event if \`isDisabled\` is true.
|
||||
",
|
||||
"name": "onClick",
|
||||
"table": Object {
|
||||
@ -197,9 +213,27 @@ Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"onClickListener": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": undefined,
|
||||
"name": "onClickListener",
|
||||
"table": Object {
|
||||
"category": "methods",
|
||||
"type": Object {
|
||||
"required": false,
|
||||
"summary": "(btn: ) => void",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
},
|
||||
},
|
||||
"privateMethod": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A private method.</p>
|
||||
"description": "
|
||||
|
||||
A private method.
|
||||
|
||||
",
|
||||
"name": "privateMethod",
|
||||
"table": Object {
|
||||
@ -230,7 +264,10 @@ Object {
|
||||
},
|
||||
"protectedMethod": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A protected method.</p>
|
||||
"description": "
|
||||
|
||||
A protected method.
|
||||
|
||||
",
|
||||
"name": "protectedMethod",
|
||||
"table": Object {
|
||||
@ -246,8 +283,8 @@ Object {
|
||||
},
|
||||
"publicMethod": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>A public method using an interface. </p>
|
||||
",
|
||||
"description": "
|
||||
A public method using an interface.",
|
||||
"name": "publicMethod",
|
||||
"table": Object {
|
||||
"category": "methods",
|
||||
@ -277,8 +314,7 @@ Object {
|
||||
},
|
||||
"size": Object {
|
||||
"defaultValue": "medium",
|
||||
"description": "<p>Size of the button. </p>
|
||||
",
|
||||
"description": "Size of the button.",
|
||||
"name": "size",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -293,8 +329,7 @@ Object {
|
||||
},
|
||||
"someDataObject": Object {
|
||||
"defaultValue": undefined,
|
||||
"description": "<p>Specifies some arbitrary object </p>
|
||||
",
|
||||
"description": "Specifies some arbitrary object",
|
||||
"name": "someDataObject",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
@ -309,14 +344,13 @@ Object {
|
||||
},
|
||||
"somethingYouShouldNotUse": Object {
|
||||
"defaultValue": false,
|
||||
"description": "<p>Some input you shouldn't use.</p>
|
||||
",
|
||||
"description": "Some input you shouldn't use.",
|
||||
"name": "somethingYouShouldNotUse",
|
||||
"table": Object {
|
||||
"category": "inputs",
|
||||
"type": Object {
|
||||
"required": true,
|
||||
"summary": undefined,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
|
||||
@ -8,10 +8,11 @@ Object {
|
||||
"accessors": Object {
|
||||
"inputValue": Object {
|
||||
"getSignature": Object {
|
||||
"description": "<p>Getter for <code>inputValue</code>. </p>
|
||||
"description": "<p>Getter for <code>inputValue</code>.</p>
|
||||
",
|
||||
"line": 115,
|
||||
"name": "inputValue",
|
||||
"rawdescription": "Getter for \`inputValue\`.",
|
||||
"returnType": "",
|
||||
"type": "",
|
||||
},
|
||||
@ -19,14 +20,20 @@ Object {
|
||||
"setSignature": Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "value",
|
||||
"type": "string",
|
||||
},
|
||||
],
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "value",
|
||||
"tagName": Object {
|
||||
"text": "param",
|
||||
@ -36,6 +43,7 @@ Object {
|
||||
],
|
||||
"line": 110,
|
||||
"name": "inputValue",
|
||||
"rawdescription": "Setter for \`inputValue\` that is also an \`@Input\`.",
|
||||
"returnType": "void",
|
||||
"type": "void",
|
||||
},
|
||||
@ -45,17 +53,23 @@ Object {
|
||||
"setSignature": Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "item",
|
||||
"type": "[]",
|
||||
"type": "T[]",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "item",
|
||||
"tagName": Object {
|
||||
"text": "param",
|
||||
},
|
||||
"type": "[]",
|
||||
"type": "T[]",
|
||||
},
|
||||
],
|
||||
"line": 195,
|
||||
@ -66,10 +80,11 @@ Object {
|
||||
},
|
||||
"value": Object {
|
||||
"getSignature": Object {
|
||||
"description": "<p>Get the private value. </p>
|
||||
"description": "<p>Get the private value.</p>
|
||||
",
|
||||
"line": 154,
|
||||
"name": "value",
|
||||
"rawdescription": "Get the private value.",
|
||||
"returnType": "string | number",
|
||||
"type": "",
|
||||
},
|
||||
@ -77,29 +92,38 @@ Object {
|
||||
"setSignature": Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "value",
|
||||
"type": "",
|
||||
"type": "string | number",
|
||||
},
|
||||
],
|
||||
"description": "<p>Set the private value. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Set the private value.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "value",
|
||||
"tagName": Object {
|
||||
"text": "param",
|
||||
},
|
||||
"type": "",
|
||||
"type": "string | number",
|
||||
},
|
||||
],
|
||||
"line": 149,
|
||||
"name": "value",
|
||||
"rawdescription": "Set the private value.",
|
||||
"returnType": "void",
|
||||
"type": "void",
|
||||
},
|
||||
},
|
||||
},
|
||||
"assetsDirs": Array [],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.</p>
|
||||
<p>It supports <a href=\\"https://en.wikipedia.org/wiki/Markdown\\">markdown</a>, so you can embed formatted text,
|
||||
like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
@ -113,14 +137,19 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
"hostBindings": Array [
|
||||
Object {
|
||||
"defaultValue": "false",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"line": 124,
|
||||
"name": "class.focused",
|
||||
"type": "boolean",
|
||||
},
|
||||
],
|
||||
"hostListeners": Array [
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "btn",
|
||||
"type": "",
|
||||
},
|
||||
@ -128,6 +157,8 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
"argsDecorator": Array [
|
||||
"$event.target",
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"line": 120,
|
||||
"name": "click",
|
||||
},
|
||||
@ -136,298 +167,391 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
"inputs": Array [],
|
||||
"inputsClass": Array [
|
||||
Object {
|
||||
"description": "<p>Specify the accent-type of the button </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Specify the accent-type of the button</p>
|
||||
",
|
||||
"line": 56,
|
||||
"name": "accent",
|
||||
"rawdescription": "Specify the accent-type of the button",
|
||||
"type": "ButtonAccent",
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "'secondary'",
|
||||
"description": "<p>Appearance style of the button. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Appearance style of the button.</p>
|
||||
",
|
||||
"line": 52,
|
||||
"name": "appearance",
|
||||
"rawdescription": "Appearance style of the button.",
|
||||
"type": "\\"primary\\" | \\"secondary\\"",
|
||||
},
|
||||
Object {
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
|
||||
",
|
||||
"line": 110,
|
||||
"name": "inputValue",
|
||||
"rawdescription": "Setter for \`inputValue\` that is also an \`@Input\`.",
|
||||
"type": "string",
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "false",
|
||||
"description": "<p>Sets the button to a disabled state. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Sets the button to a disabled state.</p>
|
||||
",
|
||||
"line": 60,
|
||||
"name": "isDisabled",
|
||||
"rawdescription": "Sets the button to a disabled state.",
|
||||
"type": "boolean",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"line": 195,
|
||||
"name": "item",
|
||||
"type": "[]",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>The inner text of the button.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"comment": "",
|
||||
"end": 1525,
|
||||
"flags": 4227072,
|
||||
"kind": 317,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 1512,
|
||||
"tagName": Object {
|
||||
"end": 1521,
|
||||
"escapedText": "required",
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 1513,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"transformFlags": 0,
|
||||
},
|
||||
],
|
||||
"line": 68,
|
||||
"name": "label",
|
||||
"rawdescription": "The inner text of the button.",
|
||||
"type": "string",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"line": 192,
|
||||
"name": "showKeyAlias",
|
||||
"type": "",
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "'medium'",
|
||||
"description": "<p>Size of the button. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Size of the button.</p>
|
||||
",
|
||||
"line": 72,
|
||||
"name": "size",
|
||||
"rawdescription": "Size of the button.",
|
||||
"type": "ButtonSize",
|
||||
},
|
||||
Object {
|
||||
"description": "<p>Specifies some arbitrary object </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Specifies some arbitrary object</p>
|
||||
",
|
||||
"line": 75,
|
||||
"name": "someDataObject",
|
||||
"rawdescription": "Specifies some arbitrary object",
|
||||
"type": "ISomeInterface",
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "false",
|
||||
"deprecated": true,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Some input you shouldn't use.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"comment": "",
|
||||
"end": 1802,
|
||||
"flags": 4227072,
|
||||
"kind": 321,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 1787,
|
||||
"tagName": Object {
|
||||
"end": 1798,
|
||||
"escapedText": "deprecated",
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 1788,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"transformFlags": 0,
|
||||
},
|
||||
],
|
||||
"line": 83,
|
||||
"name": "somethingYouShouldNotUse",
|
||||
},
|
||||
],
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"atToken": Object {
|
||||
"end": 859,
|
||||
"flags": 0,
|
||||
"kind": 57,
|
||||
"pos": 858,
|
||||
},
|
||||
"comment": "Hello world",
|
||||
"end": 866,
|
||||
"flags": 0,
|
||||
"kind": 288,
|
||||
"pos": 858,
|
||||
"tagName": Object {
|
||||
"end": 865,
|
||||
"escapedText": "string",
|
||||
"flags": 0,
|
||||
"pos": 859,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"atToken": Object {
|
||||
"end": 882,
|
||||
"flags": 0,
|
||||
"kind": 57,
|
||||
"pos": 881,
|
||||
},
|
||||
"comment": "[Example](http://example.com)",
|
||||
"end": 887,
|
||||
"flags": 0,
|
||||
"kind": 288,
|
||||
"pos": 881,
|
||||
"tagName": Object {
|
||||
"end": 886,
|
||||
"escapedText": "link",
|
||||
"flags": 0,
|
||||
"pos": 882,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"atToken": Object {
|
||||
"end": 921,
|
||||
"flags": 0,
|
||||
"kind": 57,
|
||||
"pos": 920,
|
||||
},
|
||||
"comment": "\`ThingThing\`",
|
||||
"end": 926,
|
||||
"flags": 0,
|
||||
"kind": 288,
|
||||
"pos": 920,
|
||||
"tagName": Object {
|
||||
"end": 925,
|
||||
"escapedText": "code",
|
||||
"flags": 0,
|
||||
"pos": 921,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"atToken": Object {
|
||||
"end": 943,
|
||||
"flags": 0,
|
||||
"kind": 57,
|
||||
"pos": 942,
|
||||
},
|
||||
"comment": "<span class=\\"badge\\">aaa</span>",
|
||||
"end": 948,
|
||||
"flags": 0,
|
||||
"kind": 288,
|
||||
"pos": 942,
|
||||
"tagName": Object {
|
||||
"end": 947,
|
||||
"escapedText": "html",
|
||||
"flags": 0,
|
||||
"pos": 943,
|
||||
},
|
||||
"rawdescription": "Some input you shouldn't use.",
|
||||
"type": "boolean",
|
||||
},
|
||||
],
|
||||
"methodsClass": Array [
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "x",
|
||||
"type": "number",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "y",
|
||||
"type": "string | number",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"comment": "<p>Some number you'd like to use.</p>
|
||||
",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": Object {
|
||||
"end": 3518,
|
||||
"escapedText": "x",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3517,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"tagName": Object {
|
||||
"end": 3516,
|
||||
"escapedText": "param",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3511,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"type": "number",
|
||||
},
|
||||
Object {
|
||||
"comment": "<p>Some other number or string you'd like to use, will have <code>parseInt()</code> applied before calculation.</p>
|
||||
",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": Object {
|
||||
"end": 3563,
|
||||
"escapedText": "y",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3562,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"tagName": Object {
|
||||
"end": 3561,
|
||||
"escapedText": "param",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3556,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"type": "string | number",
|
||||
},
|
||||
],
|
||||
"line": 164,
|
||||
"modifierKind": Array [
|
||||
114,
|
||||
122,
|
||||
],
|
||||
"name": "calc",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
|
||||
An internal calculation method which adds \`x\` and \`y\` together.
|
||||
|
||||
",
|
||||
"returnType": "number",
|
||||
"typeParameters": Array [],
|
||||
},
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "btn",
|
||||
"type": "",
|
||||
},
|
||||
],
|
||||
"decorators": Array [
|
||||
Object {
|
||||
"name": "HostListener",
|
||||
"stringifiedArguments": "'click', ['$event.target']",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "btn",
|
||||
"tagName": Object {
|
||||
"text": "param",
|
||||
},
|
||||
"type": "",
|
||||
},
|
||||
],
|
||||
"line": 120,
|
||||
"name": "onClickListener",
|
||||
"optional": false,
|
||||
"returnType": "void",
|
||||
"typeParameters": Array [],
|
||||
},
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "password",
|
||||
"type": "string",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>A private method.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"comment": "<p>Some <code>password</code>.</p>
|
||||
",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": Object {
|
||||
"end": 4079,
|
||||
"escapedText": "password",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 4071,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"tagName": Object {
|
||||
"end": 4070,
|
||||
"escapedText": "param",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 4065,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"type": "string",
|
||||
},
|
||||
],
|
||||
"line": 187,
|
||||
"modifierKind": Array [
|
||||
112,
|
||||
120,
|
||||
],
|
||||
"name": "privateMethod",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
|
||||
A private method.
|
||||
|
||||
",
|
||||
"returnType": "void",
|
||||
"typeParameters": Array [],
|
||||
},
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "id",
|
||||
"optional": true,
|
||||
"type": "number",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>A protected method.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"comment": "<p>Some <code>id</code>.</p>
|
||||
",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": Object {
|
||||
"end": 3938,
|
||||
"escapedText": "id",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3936,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"optional": true,
|
||||
"tagName": Object {
|
||||
"end": 3935,
|
||||
"escapedText": "param",
|
||||
"flags": 0,
|
||||
"flags": 4227072,
|
||||
"kind": 78,
|
||||
"modifierFlagsCache": 0,
|
||||
"pos": 3930,
|
||||
"transformFlags": 0,
|
||||
},
|
||||
"type": "number",
|
||||
},
|
||||
],
|
||||
"line": 178,
|
||||
"modifierKind": Array [
|
||||
113,
|
||||
121,
|
||||
],
|
||||
"name": "protectedMethod",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
|
||||
A protected method.
|
||||
|
||||
",
|
||||
"returnType": "void",
|
||||
"typeParameters": Array [],
|
||||
},
|
||||
Object {
|
||||
"args": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "things",
|
||||
"type": "ISomeInterface",
|
||||
},
|
||||
],
|
||||
"description": "<p>A public method using an interface. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>A public method using an interface.</p>
|
||||
",
|
||||
"jsdoctags": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "things",
|
||||
"tagName": Object {
|
||||
"text": "param",
|
||||
@ -437,10 +561,12 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
],
|
||||
"line": 169,
|
||||
"modifierKind": Array [
|
||||
114,
|
||||
122,
|
||||
],
|
||||
"name": "publicMethod",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
A public method using an interface.",
|
||||
"returnType": "void",
|
||||
"typeParameters": Array [],
|
||||
},
|
||||
@ -450,21 +576,31 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
"outputsClass": Array [
|
||||
Object {
|
||||
"defaultValue": "new EventEmitter<Event>()",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Handler to be called when the button is clicked by a user.</p>
|
||||
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
|
||||
",
|
||||
"line": 91,
|
||||
"name": "onClick",
|
||||
"rawdescription": "
|
||||
|
||||
Handler to be called when the button is clicked by a user.
|
||||
|
||||
Will also block the emission of the event if \`isDisabled\` is true.
|
||||
",
|
||||
"type": "EventEmitter",
|
||||
},
|
||||
],
|
||||
"propertiesClass": Array [
|
||||
Object {
|
||||
"defaultValue": "'some value'",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 106,
|
||||
"modifierKind": Array [
|
||||
112,
|
||||
120,
|
||||
],
|
||||
"name": "_inputValue",
|
||||
"optional": false,
|
||||
@ -472,14 +608,18 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "'Private hello'",
|
||||
"description": "<p>Private value. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Private value.</p>
|
||||
",
|
||||
"line": 146,
|
||||
"modifierKind": Array [
|
||||
112,
|
||||
120,
|
||||
],
|
||||
"name": "_value",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
Private value.",
|
||||
"type": "string",
|
||||
},
|
||||
Object {
|
||||
@ -489,29 +629,53 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
"stringifiedArguments": "'buttonRef', {static: false}",
|
||||
},
|
||||
],
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 48,
|
||||
"name": "buttonRef",
|
||||
"optional": false,
|
||||
"type": "ElementRef",
|
||||
},
|
||||
Object {
|
||||
"decorators": Array [
|
||||
Object {
|
||||
"name": "HostBinding",
|
||||
"stringifiedArguments": "'class.focused'",
|
||||
},
|
||||
],
|
||||
"defaultValue": "false",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 124,
|
||||
"name": "focus",
|
||||
"optional": false,
|
||||
"type": "",
|
||||
},
|
||||
Object {
|
||||
"defaultValue": "'Public hello'",
|
||||
"description": "<p>Public value. </p>
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "<p>Public value.</p>
|
||||
",
|
||||
"line": 143,
|
||||
"modifierKind": Array [
|
||||
114,
|
||||
122,
|
||||
],
|
||||
"name": "internalProperty",
|
||||
"optional": false,
|
||||
"rawdescription": "
|
||||
Public value.",
|
||||
"type": "string",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 199,
|
||||
"modifierKind": Array [
|
||||
114,
|
||||
122,
|
||||
],
|
||||
"name": "processedItem",
|
||||
"optional": false,
|
||||
@ -519,12 +683,16 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
|
||||
},
|
||||
],
|
||||
"providers": Array [],
|
||||
"rawdescription": "This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
|
||||
"rawdescription": "
|
||||
|
||||
This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
|
||||
|
||||
It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
|
||||
like **bold**, _italic_, and \`inline code\`.
|
||||
|
||||
> How you like dem apples?! It's never been easier to document all your components.",
|
||||
> How you like dem apples?! It's never been easier to document all your components.
|
||||
|
||||
",
|
||||
"selector": "doc-button",
|
||||
"sourceCode": "import {
|
||||
Component,
|
||||
@ -735,11 +903,11 @@ export class InputComponent<T> {
|
||||
},
|
||||
],
|
||||
"coverage": Object {
|
||||
"count": 23,
|
||||
"count": 21,
|
||||
"files": Array [
|
||||
Object {
|
||||
"coverageCount": "16/23",
|
||||
"coveragePercent": 69,
|
||||
"coverageCount": "16/25",
|
||||
"coveragePercent": 64,
|
||||
"filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"linktype": "component",
|
||||
"name": "InputComponent",
|
||||
@ -769,17 +937,23 @@ export class InputComponent<T> {
|
||||
"status": "low",
|
||||
},
|
||||
"directives": Array [],
|
||||
"guards": Array [],
|
||||
"injectables": Array [],
|
||||
"interceptors": Array [],
|
||||
"interfaces": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9",
|
||||
"indexSignatures": Array [],
|
||||
"kind": 150,
|
||||
"kind": 163,
|
||||
"methods": Array [],
|
||||
"name": "ISomeInterface",
|
||||
"properties": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 25,
|
||||
"name": "one",
|
||||
@ -787,6 +961,8 @@ export class InputComponent<T> {
|
||||
"type": "string",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 27,
|
||||
"name": "three",
|
||||
@ -794,6 +970,8 @@ export class InputComponent<T> {
|
||||
"type": "any[]",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"line": 26,
|
||||
"name": "two",
|
||||
@ -1007,15 +1185,21 @@ export class InputComponent<T> {
|
||||
Object {
|
||||
"childs": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "Normal",
|
||||
"value": "Normal",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "High",
|
||||
"value": "High",
|
||||
},
|
||||
],
|
||||
"ctype": "miscellaneous",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"name": "ButtonAccent",
|
||||
@ -1028,15 +1212,21 @@ export class InputComponent<T> {
|
||||
Object {
|
||||
"childs": Array [
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "Normal",
|
||||
"value": "Normal",
|
||||
},
|
||||
Object {
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"name": "High",
|
||||
"value": "High",
|
||||
},
|
||||
],
|
||||
"ctype": "miscellaneous",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"name": "ButtonAccent",
|
||||
@ -1049,9 +1239,11 @@ export class InputComponent<T> {
|
||||
"addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
|
||||
Object {
|
||||
"ctype": "miscellaneous",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"kind": 168,
|
||||
"kind": 183,
|
||||
"name": "ButtonSize",
|
||||
"rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
|
||||
"subtype": "typealias",
|
||||
@ -1063,6 +1255,8 @@ export class InputComponent<T> {
|
||||
Object {
|
||||
"ctype": "miscellaneous",
|
||||
"defaultValue": "'An exported constant'",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"name": "exportedConstant",
|
||||
"subtype": "variable",
|
||||
@ -1073,9 +1267,11 @@ export class InputComponent<T> {
|
||||
"typealiases": Array [
|
||||
Object {
|
||||
"ctype": "miscellaneous",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"kind": 168,
|
||||
"kind": 183,
|
||||
"name": "ButtonSize",
|
||||
"rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
|
||||
"subtype": "typealias",
|
||||
@ -1085,6 +1281,8 @@ export class InputComponent<T> {
|
||||
Object {
|
||||
"ctype": "miscellaneous",
|
||||
"defaultValue": "'An exported constant'",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
|
||||
"name": "exportedConstant",
|
||||
"subtype": "variable",
|
||||
|
||||
@ -196,7 +196,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
|
||||
const action = section === 'outputs' ? { action: item.name } : {};
|
||||
const argType = {
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
description: item.rawdescription || item.description,
|
||||
defaultValue,
|
||||
type,
|
||||
...action,
|
||||
|
||||
@ -36,13 +36,13 @@ export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext)
|
||||
return story;
|
||||
}
|
||||
const channel = addons.getChannel();
|
||||
const { props, template } = story;
|
||||
const { props, template, userDefinedTemplate } = story;
|
||||
|
||||
const {
|
||||
parameters: { component, argTypes },
|
||||
} = context;
|
||||
|
||||
if (component) {
|
||||
if (component && !userDefinedTemplate) {
|
||||
const source = computesTemplateSourceFromComponent(component, props, argTypes);
|
||||
|
||||
// We might have a story with a Directive or Service defined as the component
|
||||
|
||||
@ -4,6 +4,7 @@ export interface Method {
|
||||
returnType: string;
|
||||
decorators?: Decorator[];
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface Property {
|
||||
@ -13,6 +14,7 @@ export interface Property {
|
||||
optional: boolean;
|
||||
defaultValue?: string;
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface Class {
|
||||
|
||||
16
addons/docs/src/frameworks/html/config.ts
Normal file
16
addons/docs/src/frameworks/html/config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { prepareForInline } from './prepareForInline';
|
||||
import { SourceType } from '../../shared';
|
||||
|
||||
export const decorators = [sourceDecorator];
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
prepareForInline,
|
||||
source: {
|
||||
type: SourceType.DYNAMIC,
|
||||
language: 'html',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
prepareForInline: (storyFn: StoryFn<string>) => {
|
||||
const html = storyFn();
|
||||
if (typeof html === 'string') {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
ref={(node?: HTMLDivElement): never | null => (node ? node.appendChild(html) : null)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
13
addons/docs/src/frameworks/html/prepareForInline.tsx
Normal file
13
addons/docs/src/frameworks/html/prepareForInline.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
|
||||
export function prepareForInline(storyFn: StoryFn<string>) {
|
||||
const html = storyFn();
|
||||
if (typeof html === 'string') {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
return (
|
||||
<div ref={(node?: HTMLDivElement): never | null => (node ? node.appendChild(html) : null)} />
|
||||
);
|
||||
}
|
||||
113
addons/docs/src/frameworks/html/sourceDecorator.test.ts
Normal file
113
addons/docs/src/frameworks/html/sourceDecorator.test.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
test: (val) => typeof val === 'string',
|
||||
});
|
||||
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `html-test--${name}`,
|
||||
kind: 'js-text',
|
||||
name,
|
||||
parameters,
|
||||
args,
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
...extra,
|
||||
});
|
||||
|
||||
describe('sourceDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should render dynamically for args stories', () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
'<div>args story</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it('should dedent source by default', () => {
|
||||
const storyFn = (args: any) => `
|
||||
<div>
|
||||
args story
|
||||
</div>
|
||||
`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
['<div>', ' args story', '</div>'].join('\n')
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
const storyFn = () => `<div>classic story</div>`;
|
||||
const context = makeContext('classic', {}, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should use the originalStoryFn if excludeDecorators is set', () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const decoratedStoryFn = (args: any) => `
|
||||
<div style="padding: 25px; border: 3px solid red;">${storyFn(args)}</div>
|
||||
`;
|
||||
const context = makeContext(
|
||||
'args',
|
||||
{
|
||||
__isArgsStory: true,
|
||||
docs: {
|
||||
source: {
|
||||
excludeDecorators: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{},
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
sourceDecorator(decoratedStoryFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
'<div>args story</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it('allows the snippet output to be modified by transformSource', () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const transformSource = (dom: string) => `<p>${dom}</p>`;
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'html-test--args',
|
||||
'<p><div>args story</div></p>'
|
||||
);
|
||||
});
|
||||
|
||||
it('provides the story context to transformSource', () => {
|
||||
const storyFn = (args: any) => `<div>args story</div>`;
|
||||
const transformSource = jest.fn((x) => x);
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
|
||||
});
|
||||
});
|
||||
44
addons/docs/src/frameworks/html/sourceDecorator.ts
Normal file
44
addons/docs/src/frameworks/html/sourceDecorator.ts
Normal file
@ -0,0 +1,44 @@
|
||||
/* global window */
|
||||
import { addons, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import dedent from 'ts-dedent';
|
||||
import { SNIPPET_RENDERED, SourceType } from '../../shared';
|
||||
|
||||
function skipSourceRender(context: StoryContext) {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
// always render if the user forces it
|
||||
if (sourceParams?.type === SourceType.DYNAMIC) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// never render if the user is forcing the block to render code, or
|
||||
// if the user provides code, or if it's not an args story.
|
||||
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
||||
}
|
||||
|
||||
// By default, just remove indentation
|
||||
function defaultTransformSource(source: string) {
|
||||
// Have to wrap dedent so it doesn't serialize the context
|
||||
return dedent(source);
|
||||
}
|
||||
|
||||
function applyTransformSource(source: string, context: StoryContext): string {
|
||||
const docs = context.parameters.docs ?? {};
|
||||
const transformSource = docs.transformSource ?? defaultTransformSource;
|
||||
return transformSource(source, context);
|
||||
}
|
||||
|
||||
export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
|
||||
const story = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
: storyFn();
|
||||
|
||||
if (typeof story === 'string' && !skipSourceRender(context)) {
|
||||
const source = applyTransformSource(story, context);
|
||||
|
||||
addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
}
|
||||
|
||||
return story;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.4.0-alpha.22",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.22",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.22",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.22",
|
||||
"@storybook/addon-measure": "6.4.0-alpha.22",
|
||||
"@storybook/addon-outline": "6.4.0-alpha.22",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.22",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.30",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.30",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.30",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.30",
|
||||
"@storybook/addon-measure": "6.4.0-alpha.30",
|
||||
"@storybook/addon-outline": "6.4.0-alpha.30",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.30",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.30",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.30",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.30",
|
||||
"@storybook/web-components": "6.4.0-alpha.30",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,28 +1,36 @@
|
||||
# Storybook addon Jest
|
||||
|
||||
Brings Jest results in storybook.
|
||||
Storybook addon for inspecting Jest unit test results.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
> Checkout the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
|
||||
> Check out the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
|
||||
|
||||
## Getting started
|
||||
## Installation
|
||||
|
||||
### Install
|
||||
Install this addon by adding the `@storybook/addon-jest` as a development dependency with:
|
||||
|
||||
`npm install --save-dev @storybook/addon-jest`
|
||||
|
||||
or
|
||||
Or if you're using yarn as a package manager:
|
||||
|
||||
`yarn add --dev @storybook/addon-jest`
|
||||
|
||||
### Jest Configuration
|
||||
## Configuration
|
||||
|
||||
When running **Jest**, be sure to save the results in a json file:
|
||||
Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
`package.json`
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-jest'],
|
||||
};
|
||||
```
|
||||
|
||||
## Jest Configuration
|
||||
|
||||
When running **Jest**, be sure to save the results in a JSON file:
|
||||
|
||||
```js
|
||||
"scripts": {
|
||||
@ -30,30 +38,27 @@ When running **Jest**, be sure to save the results in a json file:
|
||||
}
|
||||
```
|
||||
|
||||
You may want to add it the result file to `.gitignore`, since it's a generated file:
|
||||
You may want to add the result file to `.gitignore`, since it's a generated file:
|
||||
|
||||
```
|
||||
.jest-test-results.json
|
||||
```
|
||||
|
||||
But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
|
||||
We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first,
|
||||
but this can mean you'll experience merge conflicts on this file in the future. (_re-generating this file is very similar to re-generating lockfiles and snapshots_)
|
||||
But much like lockfiles and snapshots, checking-in generated files can have certain advantages as well. It's up to you.
|
||||
We recommend to **do** check in the test results file so starting Storybook from a clean git clone doesn't require running all tests first,
|
||||
but this can mean you'll encounter merge conflicts on this file in the future (_re-generating this file is very similar to re-generating lockfiles and snapshots_).
|
||||
|
||||
## Generating the test results
|
||||
### Generating the test results
|
||||
|
||||
You need to make sure the generated test-results file exists before you start storybook.
|
||||
During development you will likely start jest in watch-mode
|
||||
and so the json file will be re-generated every time code or tests change.
|
||||
Ensure the generated test-results file exists before you start Storybook. During development, you will likely start Jest in watch-mode and so the JSON file will be re-generated every time code or tests change.
|
||||
|
||||
```sh
|
||||
npm run test:generate-output -- --watch
|
||||
```
|
||||
|
||||
This change will then be HMR (hot module reloaded) using webpack and displayed by this addon.
|
||||
This change will then be HMR (hot module reloaded) using Webpack and displayed by the addon.
|
||||
|
||||
If you want to pre-run jest automatically during development or a static build,
|
||||
you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.
|
||||
If you want to pre-run Jest automatically during development or a static build, you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.
|
||||
You could create a `prebuild:storybook` npm script, which will never fail by appending `|| true`:
|
||||
|
||||
```json
|
||||
@ -67,125 +72,175 @@ You could create a `prebuild:storybook` npm script, which will never fail by app
|
||||
}
|
||||
```
|
||||
|
||||
### Register
|
||||
|
||||
within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-jest'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Assuming that you have created test files `MyComponent.test.js` and `MyOtherComponent.test.js`
|
||||
Assuming that you have already created a test file for your component (e.g., `MyComponent.test.js`).
|
||||
|
||||
In your `story.js`
|
||||
### Story-level
|
||||
|
||||
In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
import results from '../.jest-test-results.json';
|
||||
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'MyComponent',
|
||||
decorators: [withTests({ results })],
|
||||
};
|
||||
```
|
||||
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
import results from '../.jest-test-results.json';
|
||||
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'MyComponent',
|
||||
decorators: [withTests({ results })],
|
||||
};
|
||||
|
||||
const Template = (args) => <MyComponent {....args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
text: 'Jest results in Storybook',
|
||||
};
|
||||
Default.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js']
|
||||
};
|
||||
```
|
||||
|
||||
Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/preview.js` and results will display for stories that you have set the `jest` parameter on:
|
||||
### Global level
|
||||
|
||||
To avoid importing the results of the tests in each story, you can update
|
||||
your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
|
||||
|
||||
```js
|
||||
import { addDecorator } from '@storybook/react'; // <- or your view layer
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
// .storybook/preview.js
|
||||
|
||||
import { withTests } from "@storybook/addon-jest";
|
||||
|
||||
import results from '../.jest-test-results.json';
|
||||
|
||||
addDecorator(
|
||||
export const decorators = [
|
||||
withTests({
|
||||
results,
|
||||
})
|
||||
);
|
||||
}),
|
||||
];
|
||||
```
|
||||
|
||||
Then in your story:
|
||||
Then in your story file:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
const Template = (args) => <MyComponent {....args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args={
|
||||
text: 'Jest results in Storybook',
|
||||
};
|
||||
Default.parameters = {
|
||||
jest: ['MyComponent.test.js'],
|
||||
};
|
||||
```
|
||||
|
||||
The jest parameter will default to inferring from your story file name if not provided. For example, if your story file is `MyComponent.stories.js`,
|
||||
then "MyComponent" will be used to find your test file results. This currently doesn't work in production environments.
|
||||
The `jest` parameter will default to inferring from your story file name if not provided. For example, if your story file is `MyComponent.stories.js`,
|
||||
then "MyComponent" will be used to find your test file results. It currently doesn't work in production environments.
|
||||
|
||||
### Disabling
|
||||
|
||||
You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
const Template = (args) => <MyComponent {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
Default.args={
|
||||
text: 'Jest results in Storybook',
|
||||
};
|
||||
Default.parameters = {
|
||||
jest: { disable: true },
|
||||
};
|
||||
```
|
||||
|
||||
### withTests(options)
|
||||
|
||||
- **options.results**: OBJECT jest output results. _mandatory_
|
||||
- **filesExt**: STRING test file extension. _optional_. This allows you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That means it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
|
||||
|
||||
## Usage with Angular
|
||||
|
||||
Assuming that you have created test files `my.component.spec.ts` and `my-other.component.spec.ts`
|
||||
Using this addon with Angular will require some additional configuration. You'll need to install and configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular).
|
||||
|
||||
Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
|
||||
Then, in your `.storybook/preview.js`, you'll need to add a decorator with the following:
|
||||
|
||||
In project's `typings.d.ts` add
|
||||
|
||||
```ts
|
||||
declare module '*.json' {
|
||||
const value: any;
|
||||
export default value;
|
||||
}
|
||||
```
|
||||
|
||||
In your `.storybook/preview.ts`:
|
||||
|
||||
```ts
|
||||
import { addDecorator } from '@storybook/angular';
|
||||
```js
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
import results from '../.jest-test-results.json';
|
||||
|
||||
addDecorator(
|
||||
export const decorators = [
|
||||
withTests({
|
||||
results,
|
||||
filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
|
||||
})
|
||||
);
|
||||
filesExt: "((\\.specs?)|(\\.tests?))?(\\.ts)?$",
|
||||
}),
|
||||
];
|
||||
```
|
||||
|
||||
Finally, in your story, you'll need to include the following:
|
||||
|
||||
```ts
|
||||
import { Meta, Story } from '@storybook/angular/types-6-0';
|
||||
|
||||
import MyComponent from './MyComponent.component';
|
||||
|
||||
export default {
|
||||
component: MyComponent,
|
||||
title: 'MyComponent',
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<MyComponent> = (args: MyComponent) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {
|
||||
jest: ['MyComponent.component'],
|
||||
};
|
||||
```
|
||||
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/main/examples/angular-cli)
|
||||
|
||||
## Available options
|
||||
|
||||
- **options.results**: OBJECT jest output results. _mandatory_
|
||||
- **filesExt**: STRING test file extension. _optional_. This allows you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That means it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
|
||||
|
||||
## TODO
|
||||
|
||||
- [ ] Add coverage
|
||||
@ -197,7 +252,7 @@ addDecorator(
|
||||
|
||||
## Contributing
|
||||
|
||||
All ideas and contributions are welcomed.
|
||||
All ideas and contributions are welcome.
|
||||
|
||||
## Licence
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 783 KiB After Width: | Height: | Size: 651 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.4.0-alpha.22",
|
||||
"@storybook/router": "6.4.0-alpha.30",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
@ -70,7 +70,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -67,12 +67,12 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.22",
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/react": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/vue3": "6.4.0-alpha.22",
|
||||
"babel-loader": "^8.2.2",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.30",
|
||||
"@storybook/angular": "6.4.0-alpha.30",
|
||||
"@storybook/react": "6.4.0-alpha.30",
|
||||
"@storybook/vue": "6.4.0-alpha.30",
|
||||
"@storybook/vue3": "6.4.0-alpha.30",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"jest-emotion": "^10.0.32",
|
||||
@ -149,7 +149,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"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.1",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.22",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.30",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010"
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,17 +41,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/router": "6.4.0-alpha.22",
|
||||
"@storybook/source-loader": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/router": "6.4.0-alpha.30",
|
||||
"@storybook/source-loader": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^13.5.3",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -68,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-logger": "6.4.0-alpha.30",
|
||||
"@storybook/components": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/theming": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@storybook/core-events": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -129,5 +129,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010"
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c"
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@ describe('decorateStory', () => {
|
||||
},
|
||||
template:
|
||||
'<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -75,6 +76,7 @@ describe('decorateStory', () => {
|
||||
},
|
||||
template:
|
||||
'<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -89,6 +91,7 @@ describe('decorateStory', () => {
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -121,6 +124,7 @@ describe('decorateStory', () => {
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -153,6 +157,7 @@ describe('decorateStory', () => {
|
||||
expect(decorated()).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
|
||||
@ -185,6 +190,7 @@ describe('decorateStory', () => {
|
||||
expect(decorated(makeContext({ parameters: { component: FooComponent } }))).toEqual({
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
|
||||
userDefinedTemplate: false,
|
||||
});
|
||||
});
|
||||
|
||||
@ -218,6 +224,7 @@ describe('decorateStory', () => {
|
||||
template:
|
||||
'<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
|
||||
component: FooComponent,
|
||||
userDefinedTemplate: false,
|
||||
});
|
||||
});
|
||||
|
||||
@ -258,6 +265,7 @@ describe('decorateStory', () => {
|
||||
)
|
||||
).toEqual({
|
||||
template: 'Args available in the story : withControl,withAction',
|
||||
userDefinedTemplate: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { DecoratorFunction, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
|
||||
|
||||
import { StoryFnAngularReturnType } from './types';
|
||||
|
||||
const defaultContext: StoryContext = {
|
||||
@ -43,13 +42,14 @@ const prepareMain = (
|
||||
let { template } = story;
|
||||
|
||||
const component = story.component ?? context.parameters.component;
|
||||
const userDefinedTemplate = !hasNoTemplate(template);
|
||||
|
||||
if (hasNoTemplate(template) && component) {
|
||||
if (!userDefinedTemplate && component) {
|
||||
template = computesTemplateFromComponent(component, story.props, '');
|
||||
}
|
||||
return {
|
||||
...story,
|
||||
...(template ? { template } : {}),
|
||||
...(template ? { template, userDefinedTemplate } : {}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { RenderStoryFunction, start } from '@storybook/core/client';
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
import { RenderStoryFunction, start } from '@storybook/core/client';
|
||||
import decorateStory from './decorateStory';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
import decorateStory from './decorateStory';
|
||||
import { IStorybookSection, StoryFnAngularReturnType } from './types';
|
||||
import { Story } from './types-6-0';
|
||||
|
||||
const framework = 'angular';
|
||||
|
||||
@ -19,8 +19,11 @@ interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
|
||||
load: (...args: any[]) => void;
|
||||
}
|
||||
|
||||
const globalRender: Story = (props) => ({ props });
|
||||
|
||||
const api = start((render as any) as RenderStoryFunction, { decorateStory });
|
||||
|
||||
api.clientApi.globalRender = globalRender;
|
||||
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
|
||||
framework,
|
||||
|
||||
@ -28,4 +28,5 @@ export interface StoryFnAngularReturnType {
|
||||
moduleMetadata?: NgModuleMetadata;
|
||||
template?: string;
|
||||
styles?: string[];
|
||||
userDefinedTemplate?: boolean;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -43,8 +43,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^2.1.4",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -65,6 +65,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,10 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -68,6 +68,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,9 +46,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,10 +49,10 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.2",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -71,7 +71,7 @@
|
||||
"webpack": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/prompts": "^2.0.9"
|
||||
},
|
||||
@ -94,6 +94,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -202,7 +202,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t
|
||||
```json
|
||||
{
|
||||
"title": "Buttons",
|
||||
"argTypess": {
|
||||
"argTypes": {
|
||||
"color": { "control": { "type": "color" } }
|
||||
},
|
||||
"stories": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/api": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@storybook/node-logger": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -28,12 +28,6 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
|
||||
// For cross framework & language support we pick a consistent representation of Dates as strings
|
||||
storyArgs[key] = new Date(argValue).toISOString();
|
||||
break;
|
||||
case 'array': {
|
||||
// use the supplied separator when serializing an array as a string
|
||||
const separator = control.separator || ',';
|
||||
storyArgs[key] = argValue.join(separator);
|
||||
break;
|
||||
}
|
||||
case 'object':
|
||||
// send objects as JSON strings
|
||||
storyArgs[key] = JSON.stringify(argValue);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -73,6 +73,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -79,6 +79,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"version": "6.4.0-alpha.30",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,10 +50,10 @@
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.30",
|
||||
"@storybook/client-api": "6.4.0-alpha.30",
|
||||
"@storybook/core": "6.4.0-alpha.30",
|
||||
"@storybook/core-common": "6.4.0-alpha.30",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"gitHead": "271665e76bd5ef0287fe0651831f771e693b3b1c",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -26,6 +26,7 @@ Usage: start-storybook [options]
|
||||
| --ssl-key `<key>` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` |
|
||||
| --smoke-test | Exit after successful start | `start-storybook --smoke-test` |
|
||||
| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` |
|
||||
| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` |
|
||||
| --quiet | Suppress verbose build output | `start-storybook --quiet` |
|
||||
| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` |
|
||||
| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` |
|
||||
|
||||
@ -12,7 +12,9 @@ Let's get started with an example that combines Markdown with a single story:
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/checkbox-story-starter-example.mdx.mdx',
|
||||
'react/checkbox-story-starter-example.mdx.mdx',
|
||||
'vue/checkbox-story-starter-example.mdx.mdx',
|
||||
'angular/checkbox-story-starter-example.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -40,6 +42,7 @@ For example, here's the story from `Checkbox` example above, rewritten in CSF:
|
||||
paths={[
|
||||
'react/checkbox-story-csf.js.mdx',
|
||||
'vue/checkbox-story-csf.js.mdx',
|
||||
'angular/checkbox-story-csf.ts.mdx',
|
||||
'svelte/checkbox-story-csf.native-format.mdx',
|
||||
]}
|
||||
/>
|
||||
@ -56,7 +59,9 @@ Now let's look at a more realistic example to see a few more things we can do:
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/badge-story-starter-example.mdx.mdx',
|
||||
'react/badge-story-starter-example.mdx.mdx',
|
||||
'vue/badge-story-starter-example.mdx.mdx',
|
||||
'angular/badge-story-starter-example.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -47,11 +47,15 @@ Then you can access this environment variable anywhere, even within your stories
|
||||
'react/my-component-with-env-variables.ts.mdx',
|
||||
'react/my-component-with-env-variables.mdx.mdx',
|
||||
'vue/my-component-with-env-variables.2.js.mdx',
|
||||
'vue/my-component-with-env-variables.mdx-2.mdx.mdx',
|
||||
'vue/my-component-with-env-variables.3.js.mdx',
|
||||
'vue/my-component-with-env-variables.mdx-3.mdx.mdx',
|
||||
'angular/my-component-with-env-variables.ts.mdx',
|
||||
'angular/my-component-with-env-variables.mdx.mdx',
|
||||
'web-components/my-component-with-env-variables.js.mdx',
|
||||
'svelte/my-component-with-env-variables.js.mdx',
|
||||
'svelte/my-component-with-env-variables.native-format.mdx',
|
||||
'svelte/my-component-with-env-variables.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -15,11 +15,16 @@ Afterwards you can use any asset in your stories:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-with-import.js.mdx',
|
||||
'react/component-story-static-asset-with-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-with-import.2.js.mdx',
|
||||
'vue/component-story-static-asset-with-import.mdx-2.mdx.mdx',
|
||||
'vue/component-story-static-asset-with-import.3.js.mdx',
|
||||
'vue/component-story-static-asset-with-import.mdx-3.mdx.mdx',
|
||||
'angular/component-story-static-asset-with-import.ts.mdx',
|
||||
'angular/component-story-static-asset-with-import.mdx.mdx',
|
||||
'svelte/component-story-static-asset-with-import.js.mdx',
|
||||
'svelte/component-story-static-asset-with-import.native-format.mdx',
|
||||
'svelte/component-story-static-asset-with-import.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -56,10 +61,14 @@ Here `./public` is your static directory. Now use it in a component or story lik
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-without-import.js.mdx',
|
||||
'react/component-story-static-asset-without-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-without-import.js.mdx',
|
||||
'vue/component-story-static-asset-without-import.mdx.mdx',
|
||||
'angular/component-story-static-asset-without-import.ts.mdx',
|
||||
'angular/component-story-static-asset-without-import.mdx.mdx',
|
||||
'svelte/component-story-static-asset-without-import.js.mdx',
|
||||
'svelte/component-story-static-asset-without-import.native-format.mdx',
|
||||
'svelte/component-story-static-asset-without-import.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -93,10 +102,14 @@ Upload your files to an online CDN and reference them. In this example we’re u
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-cdn.js.mdx',
|
||||
'react/component-story-static-asset-cdn.mdx.mdx',
|
||||
'vue/component-story-static-asset-cdn.js.mdx',
|
||||
'vue/component-story-static-asset-cdn.mdx.mdx',
|
||||
'angular/component-story-static-asset-cdn.ts.mdx',
|
||||
'angular/component-story-static-asset-cdn.mdx.mdx',
|
||||
'svelte/component-story-static-asset-cdn.js.mdx',
|
||||
'svelte/component-story-static-asset-cdn.native-format.mdx',
|
||||
'svelte/component-story-static-asset-cdn.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -35,6 +35,7 @@ You can also set it at a component level like so:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-component-layout-param.js.mdx',
|
||||
'common/storybook-component-layout-param.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -49,6 +50,7 @@ Or even apply it to specific stories like so:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-story-layout-param.js.mdx',
|
||||
'common/storybook-story-layout-param.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -36,6 +36,7 @@ You can also set backgrounds on per-story or per-component basis by using [param
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-backgrounds-configure-backgrounds.js.mdx',
|
||||
'common/storybook-addon-backgrounds-configure-backgrounds.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -48,6 +49,7 @@ You can also only override a single key on the backgrounds parameter, for instan
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-backgrounds-override-background-color.js.mdx',
|
||||
'common/storybook-addon-backgrounds-override-background-color.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -60,6 +62,7 @@ If you want to disable backgrounds in a story, you can do so by setting the `bac
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-backgrounds-disable-backgrounds.js.mdx',
|
||||
'common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -78,6 +81,7 @@ Each of these properties have the following default values in case they are not
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-backgrounds-configure-grid.js.mdx',
|
||||
'common/storybook-addon-backgrounds-configure-grid.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -90,6 +94,7 @@ If you wish to disable the grid in a story, you can do so by setting the `backgr
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-backgrounds-disable-grid.js.mdx',
|
||||
'common/storybook-addon-backgrounds-disable-grid.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -114,8 +114,11 @@ Up until now, we only used auto-generated controls based on the component we're
|
||||
'react/table-story-fully-customize-controls.js.mdx',
|
||||
'react/table-story-fully-customize-controls.mdx.mdx',
|
||||
'vue/table-story-fully-customize-controls.2.js.mdx',
|
||||
'vue/table-story-fully-customize-controls.mdx-2.mdx.mdx',
|
||||
'vue/table-story-fully-customize-controls.3.js.mdx',
|
||||
'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
|
||||
'angular/table-story-fully-customize-controls.ts.mdx',
|
||||
'angular/table-story-fully-customize-controls.mdx.mdx',
|
||||
'svelte/table-story-fully-customize-controls.native-format.mdx',
|
||||
]}
|
||||
/>
|
||||
@ -143,9 +146,10 @@ One way to deal with this is to use primitive values (e.g. strings) as arg value
|
||||
'react/component-story-custom-args-complex.js.mdx',
|
||||
'react/component-story-custom-args-complex.ts.mdx',
|
||||
'react/component-story-custom-args-complex.mdx.mdx',
|
||||
'vue/component-story-custom-args-complex.2.js.mdx',
|
||||
'vue/component-story-custom-args-complex.3.js.mdx',
|
||||
'vue/component-story-custom-args-complex.mdx-3.mdx.mdx',
|
||||
'angular/component-story-custom-args-complex.ts.mdx',
|
||||
'angular/component-story-custom-args-complex.mdx.mdx',
|
||||
'svelte/component-story-custom-args-complex.js.mdx',
|
||||
'svelte/component-story-custom-args-complex.native-format.mdx',
|
||||
]}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Essential addons'
|
||||
---
|
||||
|
||||
A major strength of Storybook are [addons](/addons/) that extend Storybook’s UI and behavior. There are many third-party addons as well as “official” addons developed by the Storybook core team. Storybook ships by default with a set of “essential” addons that add to the initial user experience.
|
||||
A major strength of Storybook are [addons](/addons/) that extend Storybook’s UI and behavior. Storybook ships by default with a set of “essential” addons that add to the initial user experience. There are many third-party addons as well as “official” addons developed by the Storybook core team.
|
||||
|
||||
- [Docs](../writing-docs/introduction.md)
|
||||
- [Controls](./controls.md)
|
||||
@ -14,7 +14,8 @@ A major strength of Storybook are [addons](/addons/) that extend Storybook’s U
|
||||
- [Outline](/addons/storybook-addon-outline)
|
||||
|
||||
### Installation
|
||||
If you're running `sb init` to add Storybook to your project, the essentials package (`@storybook/addon-essentials`) is already installed and configured for you . You can skip the rest of this section.
|
||||
|
||||
If you ran `sb init` to include Storybook in your project, the Essentials addon (`@storybook/addon-essentials`) is already installed and configured for you. You can skip the rest of this section.
|
||||
|
||||
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
|
||||
|
||||
@ -26,7 +27,7 @@ npm install --save-dev @storybook/addon-essentials
|
||||
💡 <strong>Note</strong>: If you're using <a href="https://yarnpkg.com/">yarn</a> as a package manager, you'll need to adjust the command accordingly.
|
||||
</div>
|
||||
|
||||
Update your Storybook configuration (in `.storybook/main.js`) to include the essentials addon.
|
||||
Update your Storybook configuration (in `.storybook/main.js`) to include the Essentials addon.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
@ -36,20 +37,19 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### Configuration
|
||||
|
||||
Essentials is "zero config”, it comes with a recommended configuration out of the box.
|
||||
Essentials is "zero-config”. It comes with a recommended configuration out of the box.
|
||||
|
||||
If you need to reconfigure any of the essential addons, install it manually, following the installation instructions and adjust the configuration to your needs.
|
||||
If you need to reconfigure any of the individual essential addons, install them manually by following its installation instructions and adjusting its configuration to suit your needs.
|
||||
|
||||
When you start Storybook, Essentials will override its configuration with your own.
|
||||
When you start Storybook, your custom configuration will override the default.
|
||||
|
||||
### Disabling addons
|
||||
|
||||
If you need to disable any of the Essential's addons, you can do it by changing your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) file.
|
||||
|
||||
As an example, if the background addon wasn't necessary to your work, you would need to make the following change:
|
||||
For example, if you wanted to disable the [backgrounds addon](./backgrounds.md), you would apply the following change to your Storybook configuration:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -63,6 +63,6 @@ As an example, if the background addon wasn't necessary to your work, you would
|
||||
|
||||
<div class="aside">
|
||||
|
||||
You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
|
||||
💡 You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -122,10 +122,13 @@ You can change your story through [parameters](../writing-stories/parameters.md)
|
||||
'react/my-component-story-configure-viewports.js.mdx',
|
||||
'react/my-component-story-configure-viewports.mdx.mdx',
|
||||
'vue/my-component-story-configure-viewports.js.mdx',
|
||||
'vue/my-component-story-configure-viewports.mdx.mdx',
|
||||
'angular/my-component-story-configure-viewports.ts.mdx',
|
||||
'angular/my-component-story-configure-viewports.mdx.mdx',
|
||||
'web-components/my-component-story-configure-viewports.js.mdx',
|
||||
'svelte/my-component-story-configure-viewports.js.mdx',
|
||||
'svelte/my-component-story-configure-viewports.native-format.mdx',
|
||||
'svelte/my-component-story-configure-viewports.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -121,7 +121,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'Dynamic source',
|
||||
supported: ['react', 'vue', 'angular', 'svelte', 'web-components'],
|
||||
supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
|
||||
path: 'writing-docs/doc-blocks#source',
|
||||
},
|
||||
{
|
||||
|
||||
@ -4,7 +4,7 @@ title: 'Setup Storybook'
|
||||
|
||||
Now that you’ve learned what stories are and how to browse them, let’s demo working on one of your components.
|
||||
|
||||
Pick a simple component from your project, like a Button, and write a `.stories.js` file to go along with it. It might look something like this:
|
||||
Pick a simple component from your project, like a Button, and write a `.stories.js`, or a `.stories.mdx` file to go along with it. It might look something like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -12,11 +12,16 @@ Pick a simple component from your project, like a Button, and write a `.stories.
|
||||
paths={[
|
||||
'react/your-component.js.mdx',
|
||||
'react/your-component.ts.mdx',
|
||||
'react/your-component.mdx.mdx',
|
||||
'angular/your-component.ts.mdx',
|
||||
'angular/your-component.mdx.mdx',
|
||||
'vue/your-component.2.js.mdx',
|
||||
'vue/your-component.mdx-2.mdx.mdx',
|
||||
'vue/your-component.3.js.mdx',
|
||||
'vue/your-component.mdx-3.mdx.mdx',
|
||||
'svelte/your-component.js.mdx',
|
||||
'svelte/your-component.native-format.mdx',
|
||||
'svelte/your-component.mdx.mdx',
|
||||
'web-components/your-component.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -18,7 +18,9 @@ Let’s start with the `Button` component. A story is a function that describes
|
||||
'react/button-story.ts.mdx',
|
||||
'react/button-story.mdx.mdx',
|
||||
'angular/button-story.ts.mdx',
|
||||
'angular/button-story.mdx.mdx',
|
||||
'vue/button-story.js.mdx',
|
||||
'vue/button-story.mdx.mdx',
|
||||
'svelte/button-story.js.mdx',
|
||||
'svelte/button-story.native-format.mdx',
|
||||
'svelte/button-story.mdx.mdx',
|
||||
@ -40,12 +42,17 @@ The above story definition can be further improved to take advantage of [Storybo
|
||||
paths={[
|
||||
'react/button-story-with-args.js.mdx',
|
||||
'react/button-story-with-args.ts.mdx',
|
||||
'react/button-story-with-args.mdx.mdx',
|
||||
'vue/button-story-with-args.2.js.mdx',
|
||||
'vue/button-story-with-args.mdx-2.mdx.mdx',
|
||||
'vue/button-story-with-args.3.js.mdx',
|
||||
'vue/button-story-with-args.mdx-3.mdx.mdx',
|
||||
'angular/button-story-with-args.ts.mdx',
|
||||
'angular/button-story-with-args.mdx.mdx',
|
||||
'web-components/button-story-with-args.js.mdx',
|
||||
'svelte/button-story-with-args.js.mdx',
|
||||
'svelte/button-story-with-args.native-format.mdx',
|
||||
'svelte/button-story-with-args.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
75
docs/snippets/angular/badge-story-starter-example.mdx.mdx
Normal file
75
docs/snippets/angular/badge-story-starter-example.mdx.mdx
Normal file
@ -0,0 +1,75 @@
|
||||
```md
|
||||
<!--- Badge.stories.mdx --->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import Badge from './badge.component';
|
||||
import Icon from './icon.component';
|
||||
|
||||
<Meta title="MDX/Badge" component={Badge} />
|
||||
|
||||
# Badge
|
||||
|
||||
Let's define a story for our `Badge` component:
|
||||
|
||||
<Story name="positive">
|
||||
{{
|
||||
template:`<Badge status="positive">Positive</Badge>`,
|
||||
}}
|
||||
</Story>
|
||||
|
||||
We can drop it in a `Canvas` to get a code snippet:
|
||||
|
||||
<Canvas>
|
||||
<Story name="negative">
|
||||
{{
|
||||
template: `<Badge status="negative">Negative</Badge>`,
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
We can even preview multiple stories in a block. This
|
||||
gets rendered as a group, but defines individual stories
|
||||
with unique URLs and isolated snapshot tests.
|
||||
|
||||
<Canvas>
|
||||
<Story name="warning">
|
||||
{{
|
||||
template: `<Badge status="warning">Warning</Badge>`,
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<Story name="neutral">
|
||||
{{
|
||||
template: `<Badge status="neutral">Neutral</Badge>`,
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<Story name="error">
|
||||
{{
|
||||
template: `<Badge status="error">Error</Badge>`,
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="with icon"
|
||||
decorators={[
|
||||
moduleMetadata({
|
||||
declarations: [Badge, Icon],
|
||||
imports: [CommonModule],
|
||||
})
|
||||
]}>
|
||||
{{
|
||||
template: `
|
||||
<Badge status="warning">
|
||||
<Icon icon="check" inline></Icon>
|
||||
with icon
|
||||
</Badge>
|
||||
`,
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
70
docs/snippets/angular/badge-story.mdx.mdx
Normal file
70
docs/snippets/angular/badge-story.mdx.mdx
Normal file
@ -0,0 +1,70 @@
|
||||
```md
|
||||
<!---Badge.stories.mdx --->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
import Badge from './badge.component';
|
||||
|
||||
<Meta title="MDX/Badge" component={Badge} />
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
# Badge
|
||||
|
||||
Let's define a story for our `Badge` component:
|
||||
|
||||
<Story
|
||||
name="positive"
|
||||
args={{
|
||||
status: 'positive',
|
||||
label: 'Positive',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
We can drop it in a `Canvas` to get a code snippet:
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="negative"
|
||||
args={{
|
||||
status: 'negative',
|
||||
label: 'Negative',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
We can even preview multiple Stories in a block. This
|
||||
gets rendered as a group but defines individual stories
|
||||
with unique URLs, which is great for review and testing.
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="warning"
|
||||
args={{
|
||||
status: 'warning',
|
||||
label: 'Warning',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="neutral"
|
||||
args={{
|
||||
status: 'neutral',
|
||||
label: 'Neutral',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="error"
|
||||
args={{
|
||||
status: 'error',
|
||||
label: 'Error',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -0,0 +1,20 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific argTypes for args and turns every Button story into primary -->
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
backgroundColor: { control: 'color' },
|
||||
}},
|
||||
args={{
|
||||
primary: true,
|
||||
}}/>
|
||||
|
||||
<!-- Remainder story implementation -->
|
||||
```
|
||||
@ -8,11 +8,12 @@ import Button from './button.component';
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
//👇 Creates specific argTypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
args: {
|
||||
// Now all Button stories will be primary.
|
||||
//👇 Now all Button stories will be primary.
|
||||
primary: true,
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
import ParentComponent from './parent.component';
|
||||
|
||||
<!-- With a template -->
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
component={Button}
|
||||
decorators={[
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- With component which contains ng-content -->
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
component={Button}
|
||||
decorators={[
|
||||
moduleMetadata({
|
||||
declarations: [ParentComponent],
|
||||
}),
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Remainder story implementation -->
|
||||
```
|
||||
@ -1,13 +1,13 @@
|
||||
```ts
|
||||
// button.stories.ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, Story, componentWrapperDecorator } from '@storybook/angular';
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
|
||||
import { ButtonComponent } from './button.component';
|
||||
import { ParentComponent } from './parent.component';
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
title: 'Components/Button',
|
||||
component: ButtonComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
|
||||
36
docs/snippets/angular/button-story-decorator.mdx.mdx
Normal file
36
docs/snippets/angular/button-story-decorator.mdx.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
```md
|
||||
<!-- button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { componentWrapperDecorator,moduleMetadata } from '@storybook/angular';
|
||||
|
||||
import Button from './button.component';
|
||||
import { ParentComponent } from './parent.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button}/>
|
||||
|
||||
<!-- With a template -->
|
||||
<Story
|
||||
name="Primary"
|
||||
decorators={[
|
||||
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
|
||||
]}>
|
||||
{{
|
||||
template: `<app-button label="Submit"></app-button>`,
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<!-- With a component -->
|
||||
<Story
|
||||
name="InsideParent"
|
||||
decorators={[
|
||||
moduleMetadata({
|
||||
declarations: [ParentComponent],
|
||||
}),
|
||||
componentWrapperDecorator(ParentComponent)]}>
|
||||
{{
|
||||
template: `<app-button label="Submit"></app-button>`,
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -7,7 +7,7 @@ import { ButtonComponent } from './button.component';
|
||||
import { ParentComponent } from './parent.component'; // ParentComponent contains ng-content
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
title: 'Components/Button',
|
||||
component: ButtonComponent,
|
||||
} as Meta;
|
||||
|
||||
|
||||
43
docs/snippets/angular/button-story-default-docs-code.mdx.mdx
Normal file
43
docs/snippets/angular/button-story-default-docs-code.mdx.mdx
Normal file
@ -0,0 +1,43 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific argTypes -->
|
||||
<Meta
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- 👇 Some function to demonstrate the behavior -->
|
||||
export const someFunction = (someValue) => {
|
||||
return `i am a ${someValue}`;
|
||||
};
|
||||
|
||||
<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
|
||||
<Story
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
primary: true,
|
||||
size: 'small',
|
||||
label: 'button',
|
||||
}}>
|
||||
{(args) => {
|
||||
const { label } = args;
|
||||
const functionResult = someFunction(label);
|
||||
return {
|
||||
props: {
|
||||
...args,
|
||||
label: functionResult,
|
||||
},
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
20
docs/snippets/angular/button-story-with-args.mdx.mdx
Normal file
20
docs/snippets/angular/button-story-with-args.mdx.mdx
Normal file
@ -0,0 +1,20 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx-->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button} />
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args={{
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -3,6 +3,8 @@
|
||||
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
|
||||
24
docs/snippets/angular/button-story-with-blue-args.mdx.mdx
Normal file
24
docs/snippets/angular/button-story-with-blue-args.mdx.mdx
Normal file
@ -0,0 +1,24 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
<!-- 👇 Creates specific parameters for the story -->
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
component={Button}
|
||||
parameters={{
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: 'red', value: '#f00' },
|
||||
{ name: 'green', value: '#0f0' },
|
||||
{ name: 'blue', value: '#00f' },
|
||||
],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- Your story implmentation -->
|
||||
```
|
||||
@ -6,7 +6,7 @@ import { Meta } from '@storybook/angular/types-6-0';
|
||||
import Button from './button.component';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
title: 'Components/Button',
|
||||
//👇 Creates specific parameters for the story
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
|
||||
36
docs/snippets/angular/button-story-with-emojis.mdx.mdx
Normal file
36
docs/snippets/angular/button-story-with-emojis.mdx.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
<Meta title="Components/Button" component={Button}/>
|
||||
|
||||
<Story name="Primary">
|
||||
{{
|
||||
props: {
|
||||
background: '#ff0',
|
||||
label: 'Button',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<Story name="Secondary">
|
||||
{{
|
||||
props: {
|
||||
background: '#ff0',
|
||||
label: '😄👍😍💯',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
|
||||
<Story name="Tertiary">
|
||||
{{
|
||||
props: {
|
||||
background: '#ff0',
|
||||
label: '📚📕📈🤓',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
20
docs/snippets/angular/button-story.mdx.mdx
Normal file
20
docs/snippets/angular/button-story.mdx.mdx
Normal file
@ -0,0 +1,20 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx-->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component.ts';
|
||||
|
||||
<Meta title="Components/Button" component={Button} />
|
||||
|
||||
# Button
|
||||
|
||||
<Story name="Primary">
|
||||
{{
|
||||
props: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
22
docs/snippets/angular/checkbox-story-csf.ts.mdx
Normal file
22
docs/snippets/angular/checkbox-story-csf.ts.mdx
Normal file
@ -0,0 +1,22 @@
|
||||
```ts
|
||||
// Checkbox.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/angular/types-6-0';
|
||||
|
||||
import Checkbox from './Checkbox.component';
|
||||
|
||||
export default {
|
||||
title: 'MDX/Checkbox',
|
||||
component: Checkbox,
|
||||
} as Meta;
|
||||
|
||||
export const allCheckboxes = () => ({
|
||||
template:`
|
||||
<form>
|
||||
<Checkbox id="Unchecked" label="Unchecked" />
|
||||
<Checkbox id="Checked" label="Checked" checked />
|
||||
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
||||
</form>
|
||||
`,
|
||||
});
|
||||
```
|
||||
21
docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
Normal file
21
docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
Normal file
@ -0,0 +1,21 @@
|
||||
```md
|
||||
<!--- Checkbox.stories.mdx --->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Checkbox from './checkbox.component';
|
||||
|
||||
<Meta title="MDX/Checkbox" component={Checkbox} />
|
||||
|
||||
<Story name="MyStory">
|
||||
{{
|
||||
template: `
|
||||
<form>
|
||||
<Checkbox id="Unchecked" label="Unchecked" />
|
||||
<Checkbox id="Checked" label="Checked" checked />
|
||||
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
||||
</form>
|
||||
`,
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
45
docs/snippets/angular/checkbox-story.mdx.mdx
Normal file
45
docs/snippets/angular/checkbox-story.mdx.mdx
Normal file
@ -0,0 +1,45 @@
|
||||
```md
|
||||
<!--- Checkbox.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
import Checkbox from './checkbox.component';
|
||||
|
||||
<Meta title="MDX/Checkbox" component={Checkbox} />
|
||||
|
||||
# Checkbox
|
||||
|
||||
With `MDX`, we can define a story for `Checkbox` right in the middle of our
|
||||
Markdown documentation.
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Unchecked"
|
||||
args={{
|
||||
label: 'Unchecked',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Checked"
|
||||
args={{
|
||||
label: 'Unchecked',
|
||||
checked: true,
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Secondary"
|
||||
args={{
|
||||
label: 'Secondary',
|
||||
checked: true,
|
||||
appearance: 'secondary',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
```md
|
||||
<!--- YourComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
import YourComponent from './your-component.component';
|
||||
|
||||
<Meta title="Example of how to use argTypes and functions" component={YourComponent}/>
|
||||
|
||||
<!---👇 A function to apply some computations -->
|
||||
|
||||
export const someFunction = (valuePropertyA, valuePropertyB) => {
|
||||
|
||||
<!--- Makes some computations and returns something -->
|
||||
|
||||
};
|
||||
|
||||
export const Template = (args)=>{
|
||||
const { propertyA, propertyB } = args;
|
||||
|
||||
<!---👇 Assigns the function result to a variable -->
|
||||
const someFunctionResult = someFunction(propertyA, propertyB);
|
||||
return {
|
||||
props: {
|
||||
...args,
|
||||
someProperty: someFunctionResult,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A complex case with a function"
|
||||
argTypes={{
|
||||
propertyA: {
|
||||
options: [
|
||||
'Item One',
|
||||
'Item Two',
|
||||
'Item Three',
|
||||
],
|
||||
},
|
||||
propertyB: {
|
||||
options: [
|
||||
'Another Item One',
|
||||
'Another Item Two',
|
||||
'Another Item Three',
|
||||
],
|
||||
},
|
||||
}}
|
||||
args={{
|
||||
propertyA: 'Item One',
|
||||
propertyB: 'Another Item One',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -31,7 +31,6 @@ const Template: Story<YourComponent> = (args) => {
|
||||
const someFunctionResult = someFunction(propertyA, propertyB);
|
||||
|
||||
return {
|
||||
component: YourComponent,
|
||||
props: {
|
||||
...args,
|
||||
someProperty: someFunctionResult,
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx --->
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
import Button from './button.component';
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Story name="Basic" args={{ label: 'hello' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="img" />
|
||||
|
||||
<Story name="withAnImage">
|
||||
{{
|
||||
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />`,
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,24 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
<Meta title="img" />
|
||||
|
||||
export const image = {
|
||||
src: imageFile,
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<Story name="withAnImage">
|
||||
{{
|
||||
props: {
|
||||
src: image.src,
|
||||
alt: image.alt,
|
||||
},
|
||||
template: `<img src="{{src}}" alt="{{alt}}" />`,
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="img" />
|
||||
|
||||
<Story name="withAnImage">
|
||||
{{
|
||||
template: `<img src="/otherimage.jpg" alt="my image"/>`,
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
36
docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
Normal file
36
docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
```md
|
||||
<!-- Badge.stories.mdx --->
|
||||
|
||||
import { Canvas, Story } from '@storybook/addon-docs';
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="warning"
|
||||
args={{
|
||||
status: 'warning',
|
||||
label: 'Warning',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="neutral"
|
||||
args={{
|
||||
status: 'neutral',
|
||||
label: 'Neutral',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="error"
|
||||
args={{
|
||||
status: 'error',
|
||||
label: 'Error',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -0,0 +1,29 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
<Meta
|
||||
title="Stories"
|
||||
parameters={{
|
||||
viewport: {
|
||||
viewports: INITIAL_VIEWPORTS,
|
||||
defaultViewport: 'iphone6',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="MyStory"
|
||||
parameters={{
|
||||
viewport: {
|
||||
defaultViewport: 'iphonex',
|
||||
}
|
||||
}}>
|
||||
{{
|
||||
template: '<div></div>',
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -1,6 +1,8 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
export const getCaptionForLocale = (locale) => {
|
||||
switch(locale) {
|
||||
case 'es': return 'Hola!';
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
import MyComponent from './my-component.component';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
26
docs/snippets/angular/page-story-slots.mdx.mdx
Normal file
26
docs/snippets/angular/page-story-slots.mdx.mdx
Normal file
@ -0,0 +1,26 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import Page from './page.component.ts';
|
||||
|
||||
<Meta title="Page" component={Page} />
|
||||
|
||||
export const Template = (args) => ({
|
||||
props: args,
|
||||
template:`
|
||||
<storybook-page>
|
||||
<ng-container footer>${args.footer}</ng-container>
|
||||
</storybook-page>
|
||||
`,
|
||||
});
|
||||
|
||||
<Story
|
||||
name="CustomFooter"
|
||||
args={{
|
||||
footer: 'Built with Storybook',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,32 @@
|
||||
```md
|
||||
<!-- Table.stories.mdx -->
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
export const TableStory = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<table>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of data; let i=index">
|
||||
<td *ngFor="let col of row; let j=index">
|
||||
{{data[i][j]}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`,
|
||||
});
|
||||
|
||||
<Story
|
||||
name="Numeric"
|
||||
args={{
|
||||
data: [
|
||||
[1, 2, 3],
|
||||
[4, 5, 6],
|
||||
],
|
||||
size: 'large',
|
||||
}}>
|
||||
{TableStory.bind({})}
|
||||
</Story>
|
||||
```
|
||||
15
docs/snippets/angular/your-component-with-decorator.mdx.mdx
Normal file
15
docs/snippets/angular/your-component-with-decorator.mdx.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
```md
|
||||
<!-- your-component.stories.mdx -->
|
||||
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { componentWrapperDecorator } from '@storybook/angular';
|
||||
|
||||
import { YourComponent } from './your-component.component';
|
||||
|
||||
<Meta
|
||||
title="YourComponent"
|
||||
component={YourComponent}
|
||||
decorators={[componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)]}
|
||||
/>
|
||||
```
|
||||
20
docs/snippets/angular/your-component.mdx.mdx
Normal file
20
docs/snippets/angular/your-component.mdx.mdx
Normal file
@ -0,0 +1,20 @@
|
||||
```md
|
||||
<!-- YourComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { YourComponent } from './your.component';
|
||||
|
||||
<!--👇 The title prop determines where your story goes in the story list -->
|
||||
<Meta title="YourComponent" component={YourComponent} />
|
||||
|
||||
<!--👇 We create a “template” of how args map to rendering -->
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<!-- 👇 The args you need here will depend on your component -->
|
||||
<Story
|
||||
name="FirstStory"
|
||||
args={{}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -1,9 +1,13 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
<Meta title='Button' parameters={{
|
||||
actions: {
|
||||
handles: ['mouseover', 'click .btn'],
|
||||
},
|
||||
}} />
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="Button"
|
||||
parameters={{
|
||||
actions: {
|
||||
handles: ['mouseover', 'click .btn'],
|
||||
},
|
||||
}}/>
|
||||
```
|
||||
@ -1,7 +1,13 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
<Story name="Primary" args={{ variant: 'primary' }}>
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
<Story
|
||||
name="Primary"
|
||||
args={{
|
||||
variant: 'primary',
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -1,8 +1,12 @@
|
||||
```md
|
||||
<!---Button.stories.mdx --->
|
||||
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta
|
||||
title='Button'
|
||||
title="Button"
|
||||
component={Button}
|
||||
argTypes={{
|
||||
variant: {
|
||||
@ -11,4 +15,4 @@
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
```
|
||||
@ -6,15 +6,23 @@ import { Button } from './Button';
|
||||
import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx'
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
page: CustomMDXDocumentation,
|
||||
}
|
||||
parameters: {
|
||||
docs: {
|
||||
page: CustomMDXDocumentation,
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary = () => <Button backgroundColor="primary" />;
|
||||
|
||||
export const Secondary = () => <Button backgroundColor="secondary" />;
|
||||
|
||||
export const Large = () => <Button size="large" />;
|
||||
|
||||
export const Small = () => <Button size="small" />;
|
||||
```
|
||||
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