mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 19:01:05 +08:00
Merge remote-tracking branch 'origin/next' into 8198-source-loader-typescript
This commit is contained in:
libetl
commit
01f1f3c33e
3
.github/automention.yml
vendored
3
.github/automention.yml
vendored
@ -7,7 +7,8 @@
|
||||
'app: react-native': ['benoitdion', 'gongreg']
|
||||
'app: react-native-server': ['benoitdion', 'gongreg']
|
||||
'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
|
||||
'app: vue': ['backbone87', 'elevatebart', 'pksunkara']
|
||||
'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool']
|
||||
'app: web-components': ['daKmoR']
|
||||
'api: addons': ['ndelangen']
|
||||
'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
|
||||
'addon: contexts': ['leoyli']
|
||||
|
||||
130
CHANGELOG.md
130
CHANGELOG.md
@ -1,3 +1,133 @@
|
||||
## 5.3.0-alpha.33 (October 28, 2019)
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Web-components: Move custom-elements utils to app ([#8592](https://github.com/storybookjs/storybook/pull/8592))
|
||||
|
||||
## 5.3.0-alpha.32 (October 28, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Props / Description for web-components ([#8585](https://github.com/storybookjs/storybook/pull/8585))
|
||||
* Core: Global addDecorator/addParameters ([#8573](https://github.com/storybookjs/storybook/pull/8573))
|
||||
* Addon-docs: Generalize Description doc block ([#8590](https://github.com/storybookjs/storybook/pull/8590))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Typescript: Use native package types now available ([#8588](https://github.com/storybookjs/storybook/pull/8588))
|
||||
* Build: Fix now deploy maybe ([#8589](https://github.com/storybookjs/storybook/pull/8589))
|
||||
|
||||
## 5.3.0-alpha.31 (October 27, 2019)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Upgrade babel-plugin-react-docgen to 4.0.0-beta.1 ([#8581](https://github.com/storybookjs/storybook/pull/8581))
|
||||
|
||||
## 5.3.0-alpha.30 (October 27, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Modify Typeset doc block to accept units ([#8574](https://github.com/storybookjs/storybook/pull/8574))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Web-components: Use framework id 'web-components' ([#8579](https://github.com/storybookjs/storybook/pull/8579))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* WC-kitchen-sink: Add babel-loader dependency ([#8578](https://github.com/storybookjs/storybook/pull/8578))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Upgrade babel-plugin-react-docgen to 3.2.0 ([#8580](https://github.com/storybookjs/storybook/pull/8580))
|
||||
|
||||
## 5.3.0-alpha.29 (October 25, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Add props loader to vue preset ([#8567](https://github.com/storybookjs/storybook/pull/8567))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Angular: bump zone.js version in peer dependencies ([#8558](https://github.com/storybookjs/storybook/pull/8558))
|
||||
|
||||
## 5.3.0-alpha.28 (October 25, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Publish web-components preset ([#8563](https://github.com/storybookjs/storybook/pull/8563))
|
||||
* Addon-docs: Vue slots/events props table + generalization ([#8489](https://github.com/storybookjs/storybook/pull/8489))
|
||||
|
||||
## 5.3.0-alpha.27 (October 24, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Allow linking to kind/component ID ([#7648](https://github.com/storybookjs/storybook/pull/7648))
|
||||
* Addon-docs: Jest MDX transform for storyshots ([#8189](https://github.com/storybookjs/storybook/pull/8189))
|
||||
* CLI: Add flag to disable version checks ([#8488](https://github.com/storybookjs/storybook/pull/8488))
|
||||
* Typescript: add types for react demo ([#8517](https://github.com/storybookjs/storybook/pull/8517))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
|
||||
* UI: Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Remove outdated and unused `jsx-to-string` library ([#8549](https://github.com/storybookjs/storybook/pull/8549))
|
||||
|
||||
## 5.3.0-alpha.26 (October 23, 2019)
|
||||
|
||||
Fix web-components storybook dependencies
|
||||
|
||||
## 5.3.0-alpha.25 (October 23, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Web-components: New storybook app ([#8400](https://github.com/storybookjs/storybook/pull/8400))
|
||||
* Core: Allow custom postcss config ([#8498](https://github.com/storybookjs/storybook/pull/8498))
|
||||
|
||||
## 5.3.0-alpha.24 (October 22, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Docs: Highlight ts and tsx syntax ([#8493](https://github.com/storybookjs/storybook/pull/8493))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Automate codemod tests as jest snapshots ([#8506](https://github.com/storybookjs/storybook/pull/8506))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
|
||||
|
||||
## 5.2.5 (October 22, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
|
||||
* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
|
||||
* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
|
||||
* MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
|
||||
* React: Fix custom themes breaking the welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
|
||||
* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
|
||||
|
||||
## 5.3.0-alpha.23 (October 19, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
11
MIGRATION.md
11
MIGRATION.md
@ -3,6 +3,7 @@
|
||||
- [Migration](#migration)
|
||||
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
|
||||
- [Create React App preset](#create-react-app-preset)
|
||||
- [Description docs block](#description-docs-block)
|
||||
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
|
||||
- [Source-loader](#source-loader)
|
||||
- [Default viewports](#default-viewports)
|
||||
@ -77,6 +78,14 @@ You can now move to the new preset for [Create React App](https://create-react-a
|
||||
|
||||
Simply install [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) and it will be used automatically.
|
||||
|
||||
### Description doc block
|
||||
|
||||
In 5.3 we've changed `addon-docs`'s `Description` doc block's default behavior. Technically this is a breaking change, but MDX was not officially released in 5.2 and we reserved the right to make small breaking changes. The behavior of `DocsPage`, which was officially released, remains unchanged.
|
||||
|
||||
The old behavior of `<Description of={Component} />` was to concatenate the info parameter or notes parameter, if available, with the docgen information loaded from source comments. If you depend on the old behavior, it's still available with `<Description of={Component} type='legacy-5.2' />`. This description type will be removed in Storybook 6.0.
|
||||
|
||||
The new default behavior is to use the framework-specific description extractor, which for React/Vue is still docgen, but may come from other places (e.g. a JSON file) for other frameworks.
|
||||
|
||||
## From version 5.1.x to 5.2.x
|
||||
|
||||
### Source-loader
|
||||
@ -117,7 +126,7 @@ This isn't a breaking change per se, because `addon-docs` is a new feature. Howe
|
||||
|
||||
### storySort option
|
||||
|
||||
In 5.0.x the global option `sortStoriesByKind` option was [inadverttly removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`.
|
||||
In 5.0.x the global option `sortStoriesByKind` option was [inadvertently removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`.
|
||||
|
||||
For example, here's how to sort by story ID using `storySort`:
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import DocgenButton from '../components/DocgenButton';
|
||||
import { DocgenButton } from '../components/DocgenButton';
|
||||
import FlowTypeButton from '../components/FlowTypeButton';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import TableComponent from '../components/TableComponent';
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 342 KiB After Width: | Height: | Size: 232 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 104 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,10 +32,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -73,22 +73,23 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
|
||||
|
||||
## Framework support
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific
|
||||
features as well. This chart captures the current state of support
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
|
||||
|
||||
| | React | Vue | Angular | HTML | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact |
|
||||
| ----------------- | :---: | :-: | :-----: | :--: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | # | # | | | | | | | | |
|
||||
| Docgen | + | # | # | | | | | | | | |
|
||||
| Inline stories | + | # | | | | | | | | | |
|
||||
| | React | Vue | Angular | HTML | [Web Components](./web-components) | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact |
|
||||
| ----------------- | :---: | :-: | :-----: | :--: | :--------------------------------: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | # | | + | | | | | | | |
|
||||
| Description | + | + | # | | + | | | | | | | |
|
||||
| Inline stories | + | + | | | | | | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md)
|
||||
|
||||
## Installation
|
||||
|
||||
First add the package. Make sure that the versions for your `@storybook/*` packages match:
|
||||
@ -97,10 +98,10 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs
|
||||
```
|
||||
|
||||
Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
|
||||
Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
|
||||
|
||||
```sh
|
||||
yarn add -D react babel-loader
|
||||
yarn add -D react react-is babel-loader
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/presets.js` exports:
|
||||
@ -121,6 +122,24 @@ configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);
|
||||
|
||||
For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation.
|
||||
|
||||
If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to
|
||||
configure Jest to transform MDX stories into something Storyshots can understand:
|
||||
|
||||
Add the following to your Jest configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"transform": {
|
||||
"^.+\\.[tj]sx?$": "babel-jest",
|
||||
"^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Be sure to check framework specific installation needs
|
||||
|
||||
- [Web Components](./web-components)
|
||||
|
||||
## Preset options
|
||||
|
||||
The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
|
||||
|
||||
@ -1,2 +1 @@
|
||||
// FIXME: move this to typescript and src/react folder
|
||||
module.exports = require('../dist/lib/getPropDefs');
|
||||
module.exports = require('../dist/frameworks/common');
|
||||
|
||||
@ -77,6 +77,8 @@ Here is a summary of the slots, where the data comes from by default, and the sl
|
||||
| Props | component docgen props or propTypes | `propsSlot` | React, Vue |
|
||||
| Stories | storybook stories | `storiesSlot` | All |
|
||||
|
||||
The `storiesSlot` uses the `docs.storyDescription` parameter to show a description for each story, if available.
|
||||
|
||||
For more information on frameworks, see ["Framework support"](../README.md#framework-support)
|
||||
|
||||
### Title
|
||||
@ -261,7 +263,6 @@ addParameters({
|
||||
|
||||
With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
|
||||
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 422 KiB After Width: | Height: | Size: 339 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 110 KiB |
BIN
addons/docs/docs/media/faq-debug.png
Executable file → Normal file
BIN
addons/docs/docs/media/faq-debug.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 52 KiB |
BIN
addons/docs/docs/media/faq-devtools.png
Executable file → Normal file
BIN
addons/docs/docs/media/faq-devtools.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 539 KiB After Width: | Height: | Size: 373 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 832 KiB After Width: | Height: | Size: 822 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 41 KiB |
107
addons/docs/docs/multiframework.md
Normal file
107
addons/docs/docs/multiframework.md
Normal file
@ -0,0 +1,107 @@
|
||||
# Storybook Docs framework dev guide
|
||||
|
||||
Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to set up a new framework in docs.
|
||||
|
||||
- [Adding a preset](#adding-a-preset)
|
||||
- [Props tables](#props-tables)
|
||||
- [Component descriptions](#component-descriptions)
|
||||
- [Inline story rendering](#inline-story-rendering)
|
||||
|
||||
## Adding a preset
|
||||
|
||||
To get basic support, you need to add a [preset](https://storybook.js.org/docs/presets/introduction). By default this doesn't need to do much.
|
||||
|
||||
Here's a basic preset for `@storybook/html` in `addons/docs/html/preset.js`:
|
||||
|
||||
```js
|
||||
module.exports = require('../dist/frameworks/common/makePreset').default('html');
|
||||
```
|
||||
|
||||
This automatically adds [DocsPage](./docspage.md) for each story, as well as webpack/babel settings for MDX support.
|
||||
|
||||
There is also a little hoop-jumping that will hopefully be unnecessary soon.
|
||||
|
||||
`addons/docs/src/frameworks/html/config.js`
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/html';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`addons/docs/html/config.js`
|
||||
|
||||
```js
|
||||
module.exports = require('../dist/frameworks/html/config');
|
||||
```
|
||||
|
||||
## Props tables
|
||||
|
||||
Props tables are enabled by the framework-specific `docs.extractProps` parameter, which extracts a component's props into a common data structure.
|
||||
|
||||
Here's how it's done in Vue's framework-specific `config.js`:
|
||||
|
||||
```js
|
||||
import { extractProps } from './extractProps';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
// `container`, `page`, etc. here
|
||||
extractProps,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be a array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
|
||||
|
||||
```ts
|
||||
export interface PropDef {
|
||||
name: string;
|
||||
type: any;
|
||||
required: boolean;
|
||||
description?: string;
|
||||
defaultValue?: any;
|
||||
}
|
||||
```
|
||||
|
||||
So far, in React and Vue, the implementation of this extraction is as follows:
|
||||
|
||||
- A webpack loader is added to the user's config via the preset
|
||||
- The loader annotates the component with a field, `__docgenInfo`, which contains some metadata
|
||||
- The view-layer specific `extractProps` function translates that metadata into `PropsTableProps`
|
||||
|
||||
However, for your framework you may want to implement this in some other way. There is also an effort to load data from static JSON files for performance [#7942](https://github.com/storybookjs/storybook/issues/7942).
|
||||
|
||||
## Component descriptions
|
||||
|
||||
Component descriptions are enabled by the `docs.extractComponentDescription` parameter, which extract's a component description (usually from source code comments) into a markdown string.
|
||||
|
||||
It follows the pattern of [Props tables](#props-tables) above, only it's even simpler because the function output is simply a string (or null if there no description).
|
||||
|
||||
## Inline story rendering
|
||||
|
||||
Inline story rendering is another framework specific optimization, made possible by the `docs.prepareForInline` parameter.
|
||||
|
||||
Again let's look at Vue's framework-specific `config.js`:
|
||||
|
||||
```js
|
||||
import toReact from '@egoist/vue-to-react';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
// `container`, `page`, etc. here
|
||||
prepareForInline: storyFn => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
The input is the story function, and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('../dist/frameworks/html/config');
|
||||
34
addons/docs/jest-transform-mdx.js
Normal file
34
addons/docs/jest-transform-mdx.js
Normal file
@ -0,0 +1,34 @@
|
||||
const path = require('path');
|
||||
const mdx = require('@mdx-js/mdx');
|
||||
const { ScriptTransformer } = require('@jest/transform');
|
||||
const { dedent } = require('ts-dedent');
|
||||
|
||||
const createCompiler = require('./mdx-compiler-plugin');
|
||||
|
||||
const compilers = [createCompiler({})];
|
||||
|
||||
const getNextTransformer = (filename, config) => {
|
||||
const extension = path.extname(filename);
|
||||
const jsFileName = `${filename.slice(0, -extension.length)}.js`;
|
||||
const self = config.transform.find(([pattern]) => new RegExp(pattern).test(filename));
|
||||
const jsTransforms = config.transform.filter(([pattern]) => new RegExp(pattern).test(jsFileName));
|
||||
return new ScriptTransformer({
|
||||
...config,
|
||||
transform: [
|
||||
...config.transform.filter(entry => entry !== self),
|
||||
...jsTransforms.map(([pattern, ...rest]) => [self[0], ...rest]),
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
process(src, filename, config, { instrument }) {
|
||||
const result = dedent`
|
||||
/* @jsx mdx */
|
||||
import React from 'react'
|
||||
import { mdx } from '@mdx-js/react'
|
||||
${mdx.sync(src, { compilers, filepath: filename })}
|
||||
`;
|
||||
return getNextTransformer(filename, config).transformSource(filename, result, instrument);
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,6 +25,7 @@
|
||||
"html/**/*",
|
||||
"react/**/*",
|
||||
"vue/**/*",
|
||||
"web-components/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -39,20 +40,23 @@
|
||||
"@babel/parser": "^7.4.2",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@egoist/vue-to-react": "^1.1.0",
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@mdx-js/loader": "^1.1.0",
|
||||
"@mdx-js/mdx": "^1.1.0",
|
||||
"@mdx-js/react": "^1.0.27",
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/router": "5.3.0-alpha.23",
|
||||
"@storybook/source-loader": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/router": "5.3.0-alpha.33",
|
||||
"@storybook/source-loader": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"js-string-escape": "^1.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2"
|
||||
"prop-types": "^15.7.2",
|
||||
"storybook-addon-vue-info": "^1.2.1",
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/prop-types": "^15.5.9",
|
||||
@ -61,7 +65,8 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^8.0.0",
|
||||
"react": "^16.8.0"
|
||||
"react": "^16.8.0",
|
||||
"react-is": "^16.8.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION } from './shared';
|
||||
import { str } from '../lib/docgenUtils';
|
||||
|
||||
export enum DescriptionType {
|
||||
INFO = 'info',
|
||||
NOTES = 'notes',
|
||||
DOCGEN = 'docgen',
|
||||
LEGACY_5_2 = 'legacy-5.2',
|
||||
AUTO = 'auto',
|
||||
}
|
||||
|
||||
@ -20,23 +21,12 @@ interface DescriptionProps {
|
||||
markdown?: string;
|
||||
}
|
||||
|
||||
const str = (o: any) => {
|
||||
if (!o) {
|
||||
return '';
|
||||
}
|
||||
if (typeof o === 'string') {
|
||||
return o as string;
|
||||
}
|
||||
throw new Error(`Description: expected string, got: ${JSON.stringify(o)}`);
|
||||
};
|
||||
|
||||
export const getNotes = (notes?: Notes) =>
|
||||
notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text));
|
||||
|
||||
export const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : str(info.text));
|
||||
|
||||
export const getDocgen = (component?: Component) =>
|
||||
component && component.__docgenInfo && str(component.__docgenInfo.description);
|
||||
const noDescription = (component?: Component): string | null => null;
|
||||
|
||||
export const getDescriptionProps = (
|
||||
{ of, type, markdown }: DescriptionProps,
|
||||
@ -45,24 +35,27 @@ export const getDescriptionProps = (
|
||||
if (markdown) {
|
||||
return { markdown };
|
||||
}
|
||||
const { component, notes, info } = parameters;
|
||||
const { component, notes, info, docs } = parameters;
|
||||
const { extractComponentDescription = noDescription } = docs || {};
|
||||
const target = of === CURRENT_SELECTION ? component : of;
|
||||
switch (type) {
|
||||
case DescriptionType.INFO:
|
||||
return { markdown: getInfo(info) };
|
||||
case DescriptionType.NOTES:
|
||||
return { markdown: getNotes(notes) };
|
||||
case DescriptionType.DOCGEN:
|
||||
return { markdown: getDocgen(target) };
|
||||
case DescriptionType.AUTO:
|
||||
default:
|
||||
// FIXME: remove in 6.0
|
||||
case DescriptionType.LEGACY_5_2:
|
||||
return {
|
||||
markdown: `
|
||||
${getNotes(notes) || getInfo(info) || ''}
|
||||
|
||||
${getDocgen(target) || ''}
|
||||
${extractComponentDescription(target) || ''}
|
||||
`.trim(),
|
||||
};
|
||||
case DescriptionType.DOCGEN:
|
||||
case DescriptionType.AUTO:
|
||||
default:
|
||||
return { markdown: extractComponentDescription(target) };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { parseKind } from '@storybook/router';
|
||||
import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components';
|
||||
import { H2, H3 } from '@storybook/components/html';
|
||||
import { DocsContext } from './DocsContext';
|
||||
import { Description, getDocgen } from './Description';
|
||||
import { Description } from './Description';
|
||||
import { Story } from './Story';
|
||||
import { Preview } from './Preview';
|
||||
import { Anchor } from './Anchor';
|
||||
@ -64,8 +64,13 @@ const defaultSubtitleSlot: StringSlot = ({ parameters }) =>
|
||||
|
||||
const defaultPropsSlot: PropsSlot = context => getPropsTableProps({ of: '.' }, context);
|
||||
|
||||
const defaultDescriptionSlot: StringSlot = ({ parameters }) =>
|
||||
parameters && getDocgen(parameters.component);
|
||||
const defaultDescriptionSlot: StringSlot = ({ parameters: { component, docs } }) => {
|
||||
if (!component) {
|
||||
return null;
|
||||
}
|
||||
const { extractComponentDescription } = docs || {};
|
||||
return extractComponentDescription && extractComponentDescription(component);
|
||||
};
|
||||
|
||||
const defaultPrimarySlot: StorySlot = stories => stories && stories[0];
|
||||
const defaultStoriesSlot: StoriesSlot = stories => {
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
|
||||
import { PropsTable, PropsTableError, PropsTableProps } from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { Component, CURRENT_SELECTION } from './shared';
|
||||
import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
|
||||
|
||||
import { PropsExtractor } from '../lib/docgenUtils';
|
||||
import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
|
||||
import { extractProps as vueExtractProps } from '../frameworks/vue/extractProps';
|
||||
|
||||
interface PropsProps {
|
||||
exclude?: string[];
|
||||
of: '.' | Component;
|
||||
}
|
||||
|
||||
const inferPropDefs = (framework: string): PropDefGetter | null => {
|
||||
// FIXME: remove in SB6.0 & require config
|
||||
const inferPropsExtractor = (framework: string): PropsExtractor | null => {
|
||||
switch (framework) {
|
||||
case 'react':
|
||||
return reactExtractProps;
|
||||
case 'vue':
|
||||
return autoPropDefs;
|
||||
return vueExtractProps;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@ -32,13 +37,11 @@ export const getPropsTableProps = (
|
||||
throw new Error(PropsTableError.NO_COMPONENT);
|
||||
}
|
||||
|
||||
const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
|
||||
if (!getPropDefs) {
|
||||
const { extractProps = inferPropsExtractor(framework) } = params.docs || {};
|
||||
if (!extractProps) {
|
||||
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
|
||||
}
|
||||
const allRows = getPropDefs(target);
|
||||
const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name));
|
||||
return { rows };
|
||||
return extractProps(target, { exclude });
|
||||
} catch (err) {
|
||||
return { error: err.message };
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/angular';
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
@ -1 +1 @@
|
||||
export * from '../../lib/getPropDefs';
|
||||
export * from '../../lib/docgenUtils';
|
||||
|
||||
@ -2,10 +2,13 @@ import fs from 'fs';
|
||||
import * as common from './preset';
|
||||
|
||||
const makePreset = (framework: string) => {
|
||||
const frameworkConfig = `${__dirname}/../../../${framework}/config.js`;
|
||||
const preConfig = fs.existsSync(frameworkConfig) ? [frameworkConfig] : [];
|
||||
const docsConfig = [`${__dirname}/config.js`];
|
||||
const frameworkConfig = `${__dirname}/../../../dist/frameworks/${framework}/config.js`;
|
||||
if (fs.existsSync(frameworkConfig)) {
|
||||
docsConfig.push(frameworkConfig);
|
||||
}
|
||||
function config(entry: any[] = []) {
|
||||
return [...preConfig, ...entry];
|
||||
return [...docsConfig, ...entry];
|
||||
}
|
||||
|
||||
const configureJSX = framework !== 'react';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/html';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: storyFn => storyFn(),
|
||||
},
|
||||
});
|
||||
15
addons/docs/src/frameworks/react/config.ts
Normal file
15
addons/docs/src/frameworks/react/config.ts
Normal file
@ -0,0 +1,15 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { extractProps } from './extractProps';
|
||||
import { extractComponentDescription } from '../../lib/docgenUtils';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: (storyFn: StoryFn) => storyFn(),
|
||||
extractProps,
|
||||
extractComponentDescription,
|
||||
},
|
||||
});
|
||||
@ -1,15 +1,13 @@
|
||||
/* eslint-disable no-underscore-dangle,react/forbid-foreign-prop-types */
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { isForwardRef, isMemo } from 'react-is';
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { Component } from '../blocks/shared';
|
||||
import { PropDefGetter, PropsExtractor, propsFromDocgen, hasDocgen } from '../../lib/docgenUtils';
|
||||
|
||||
interface PropDefMap {
|
||||
export interface PropDefMap {
|
||||
[p: string]: PropDef;
|
||||
}
|
||||
|
||||
export type PropDefGetter = (type: Component) => PropDef[] | null;
|
||||
|
||||
const propTypesMap = new Map();
|
||||
|
||||
Object.keys(PropTypes).forEach(typeName => {
|
||||
@ -20,30 +18,7 @@ Object.keys(PropTypes).forEach(typeName => {
|
||||
propTypesMap.set(type.isRequired, typeName);
|
||||
});
|
||||
|
||||
const hasDocgen = (obj: any) => obj && obj.props && Object.keys(obj.props).length > 0;
|
||||
|
||||
const propsFromDocgen: PropDefGetter = type => {
|
||||
const props: PropDefMap = {};
|
||||
const docgenInfoProps = type.__docgenInfo.props;
|
||||
|
||||
Object.keys(docgenInfoProps).forEach(property => {
|
||||
const docgenInfoProp = docgenInfoProps[property];
|
||||
const defaultValueDesc = docgenInfoProp.defaultValue || {};
|
||||
const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
|
||||
|
||||
props[property] = {
|
||||
name: property,
|
||||
type: propType,
|
||||
required: docgenInfoProp.required,
|
||||
description: docgenInfoProp.description,
|
||||
defaultValue: defaultValueDesc.value,
|
||||
};
|
||||
});
|
||||
|
||||
return Object.values(props);
|
||||
};
|
||||
|
||||
const propsFromPropTypes: PropDefGetter = type => {
|
||||
const propsFromPropTypes: PropDefGetter = (type, section) => {
|
||||
const props: PropDefMap = {};
|
||||
|
||||
if (type.propTypes) {
|
||||
@ -51,7 +26,7 @@ const propsFromPropTypes: PropDefGetter = type => {
|
||||
const typeInfo = type.propTypes[property];
|
||||
const required = typeInfo.isRequired === undefined;
|
||||
const docgenInfo =
|
||||
type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
|
||||
type.__docgenInfo && type.__docgenInfo[section] && type.__docgenInfo[section][property];
|
||||
const description = docgenInfo ? docgenInfo.description : null;
|
||||
let propType = propTypesMap.get(typeInfo) || 'other';
|
||||
|
||||
@ -84,15 +59,22 @@ const propsFromPropTypes: PropDefGetter = type => {
|
||||
return Object.values(props);
|
||||
};
|
||||
|
||||
export const getPropDefs: PropDefGetter = type => {
|
||||
export const getPropDefs: PropDefGetter = (type, section) => {
|
||||
let processedType = type;
|
||||
if (type.render) {
|
||||
processedType = type.render().type;
|
||||
if (!hasDocgen(type)) {
|
||||
if (isForwardRef(type) || type.render) {
|
||||
processedType = type.render().type;
|
||||
}
|
||||
if (isMemo(type)) {
|
||||
// (typeof type.type === 'function')?
|
||||
processedType = type.type().type;
|
||||
}
|
||||
}
|
||||
if (typeof type.type === 'function') {
|
||||
processedType = type.type().type;
|
||||
}
|
||||
return hasDocgen(processedType.__docgenInfo)
|
||||
? propsFromDocgen(processedType)
|
||||
: propsFromPropTypes(processedType);
|
||||
return hasDocgen(processedType)
|
||||
? propsFromDocgen(processedType, section)
|
||||
: propsFromPropTypes(processedType, section);
|
||||
};
|
||||
|
||||
export const extractProps: PropsExtractor = component => ({
|
||||
rows: getPropDefs(component, 'props'),
|
||||
});
|
||||
@ -1,16 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import toReact from '@egoist/vue-to-react';
|
||||
import { addParameters } from '@storybook/vue';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
prepareForInline: storyFn => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
},
|
||||
},
|
||||
});
|
||||
18
addons/docs/src/frameworks/vue/config.tsx
Normal file
18
addons/docs/src/frameworks/vue/config.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React from 'react';
|
||||
import toReact from '@egoist/vue-to-react';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { extractProps } from './extractProps';
|
||||
import { extractComponentDescription } from '../../lib/docgenUtils';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
prepareForInline: (storyFn: StoryFn) => {
|
||||
const Story = toReact(storyFn());
|
||||
return <Story />;
|
||||
},
|
||||
extractProps,
|
||||
extractComponentDescription,
|
||||
},
|
||||
});
|
||||
15
addons/docs/src/frameworks/vue/extractProps.ts
Normal file
15
addons/docs/src/frameworks/vue/extractProps.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { PropDef } from '@storybook/components';
|
||||
import { PropsExtractor, propsFromDocgen, hasDocgen } from '../../lib/docgenUtils';
|
||||
|
||||
const SECTIONS = ['props', 'events', 'slots'];
|
||||
|
||||
export const extractProps: PropsExtractor = component => {
|
||||
if (!hasDocgen(component)) {
|
||||
return null;
|
||||
}
|
||||
const sections: Record<string, PropDef[]> = {};
|
||||
SECTIONS.forEach(section => {
|
||||
sections[section] = propsFromDocgen(component, section);
|
||||
});
|
||||
return { sections };
|
||||
};
|
||||
58
addons/docs/src/frameworks/web-components/config.js
Normal file
58
addons/docs/src/frameworks/web-components/config.js
Normal file
@ -0,0 +1,58 @@
|
||||
/* global window */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/client-api';
|
||||
import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
|
||||
|
||||
function mapData(data) {
|
||||
return data.map(item => ({
|
||||
name: item.name,
|
||||
type: { name: item.type },
|
||||
required: '',
|
||||
description: item.description,
|
||||
defaultValue: item.default,
|
||||
}));
|
||||
}
|
||||
|
||||
function isEmpty(obj) {
|
||||
return Object.entries(obj).length === 0 && obj.constructor === Object;
|
||||
}
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
extractProps: tagName => {
|
||||
const customElements = getCustomElements();
|
||||
if (isValidComponent(tagName) && isValidMetaData(customElements)) {
|
||||
const metaData = customElements.tags.find(
|
||||
tag => tag.name.toUpperCase() === tagName.toUpperCase()
|
||||
);
|
||||
const sections = {};
|
||||
if (metaData.properties) {
|
||||
sections.props = mapData(metaData.properties);
|
||||
}
|
||||
if (metaData.events) {
|
||||
sections.events = mapData(metaData.events);
|
||||
}
|
||||
if (metaData.slots) {
|
||||
sections.slots = mapData(metaData.slots);
|
||||
}
|
||||
if (metaData.cssProperties) {
|
||||
sections.css = mapData(metaData.cssProperties);
|
||||
}
|
||||
return isEmpty(sections) ? false : { sections };
|
||||
}
|
||||
return false;
|
||||
},
|
||||
extractComponentDescription: tagName => {
|
||||
const customElements = getCustomElements();
|
||||
if (isValidComponent(tagName) && isValidMetaData(customElements)) {
|
||||
const metaData = customElements.tags.find(
|
||||
tag => tag.name.toUpperCase() === tagName.toUpperCase()
|
||||
);
|
||||
if (metaData && metaData.description) {
|
||||
return metaData.description;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
51
addons/docs/src/lib/docgenUtils.ts
Normal file
51
addons/docs/src/lib/docgenUtils.ts
Normal file
@ -0,0 +1,51 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { PropDef, PropsTableProps } from '@storybook/components';
|
||||
import { Component } from '../blocks/shared';
|
||||
|
||||
export type PropsExtractor = (component: Component) => PropsTableProps | null;
|
||||
|
||||
export type PropDefGetter = (type: Component, section: string) => PropDef[] | null;
|
||||
|
||||
export const str = (o: any) => {
|
||||
if (!o) {
|
||||
return '';
|
||||
}
|
||||
if (typeof o === 'string') {
|
||||
return o as string;
|
||||
}
|
||||
throw new Error(`Description: expected string, got: ${JSON.stringify(o)}`);
|
||||
};
|
||||
|
||||
export const hasDocgen = (obj: any) => !!obj.__docgenInfo;
|
||||
|
||||
export const hasDocgenSection = (obj: any, section: string) =>
|
||||
obj.__docgenInfo &&
|
||||
obj.__docgenInfo[section] &&
|
||||
Object.keys(obj.__docgenInfo[section]).length > 0;
|
||||
|
||||
export const propsFromDocgen: PropDefGetter = (type, section) => {
|
||||
const props: Record<string, PropDef> = {};
|
||||
const docgenInfoProps = type.__docgenInfo[section];
|
||||
if (!docgenInfoProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
Object.keys(docgenInfoProps).forEach(property => {
|
||||
const docgenInfoProp = docgenInfoProps[property];
|
||||
const defaultValueDesc = docgenInfoProp.defaultValue || {};
|
||||
const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
|
||||
|
||||
props[property] = {
|
||||
name: property,
|
||||
type: propType,
|
||||
required: docgenInfoProp.required,
|
||||
description: docgenInfoProp.description,
|
||||
defaultValue: defaultValueDesc.value,
|
||||
};
|
||||
});
|
||||
|
||||
return Object.values(props);
|
||||
};
|
||||
|
||||
export const extractComponentDescription = (component?: Component) =>
|
||||
component && component.__docgenInfo && str(component.__docgenInfo.description);
|
||||
2
addons/docs/src/typings.d.ts
vendored
2
addons/docs/src/typings.d.ts
vendored
@ -1,3 +1,5 @@
|
||||
declare module '@mdx-js/react';
|
||||
declare module '@storybook/addon-docs/mdx-compiler-plugin';
|
||||
declare module 'global';
|
||||
declare module 'react-is';
|
||||
declare module '@egoist/vue-to-react';
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('../dist/frameworks/vue/config');
|
||||
@ -1 +1,16 @@
|
||||
module.exports = require('../dist/frameworks/common/makePreset').default('vue');
|
||||
const commonExports = require('../dist/frameworks/common/makePreset').default('vue');
|
||||
|
||||
const webpack = (webpackConfig, options) => {
|
||||
const config = commonExports.webpack(webpackConfig, options);
|
||||
config.module.rules.push({
|
||||
test: /\.vue$/,
|
||||
loader: 'storybook-addon-vue-info/loader',
|
||||
enforce: 'post',
|
||||
});
|
||||
return config;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
...commonExports,
|
||||
webpack,
|
||||
};
|
||||
|
||||
63
addons/docs/web-components/README.md
Normal file
63
addons/docs/web-components/README.md
Normal file
@ -0,0 +1,63 @@
|
||||
# Storybook Docs for Web Components
|
||||
|
||||
## Installation
|
||||
|
||||
- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
|
||||
- Be sure to have a [custom-elements.json](./#custom-elementsjson) file.
|
||||
- Add to your `.storybook/config.js`
|
||||
|
||||
```js
|
||||
import { setCustomElements } from '@storybook/web-components';
|
||||
import customElements from '../custom-elements.json';
|
||||
|
||||
setCustomElements(customElements);
|
||||
```
|
||||
|
||||
- Add to your story files
|
||||
|
||||
```js
|
||||
export default {
|
||||
title: 'Demo Card',
|
||||
component: 'your-component-name', // which is also found in the `custom-elements.json`
|
||||
};
|
||||
```
|
||||
|
||||
### custom-elements.json
|
||||
|
||||
In order to get documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
|
||||
|
||||
You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
|
||||
|
||||
Known analyzers that output `custom-elements.json`:
|
||||
|
||||
- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
|
||||
- Supports LitElement, Polymer, Vanilla, (Stencil)
|
||||
- [stenciljs](https://stenciljs.com/)
|
||||
- Supports Stencil (but does not have all metadata)
|
||||
|
||||
It basically looks like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"version": 2,
|
||||
"tags": [
|
||||
{
|
||||
"name": "demo-wc-card",
|
||||
"properties": [
|
||||
{
|
||||
"name": "header",
|
||||
"type": "String",
|
||||
"attribute": "header",
|
||||
"description": "Shown at the top of the card",
|
||||
"default": "Your Message"
|
||||
}
|
||||
],
|
||||
"events": [],
|
||||
"slots": [],
|
||||
"cssProperties": []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
For a full example see the [web-components-kitchen-sink/custom-elements.json](../../../examples/web-components-kitchen-sink/custom-elements.json).
|
||||
1
addons/docs/web-components/index.js
Normal file
1
addons/docs/web-components/index.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('../dist/frameworks/common/index');
|
||||
1
addons/docs/web-components/preset.js
Normal file
1
addons/docs/web-components/preset.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('../dist/frameworks/common/makePreset').default('web-components');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 158 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.14.2",
|
||||
|
||||
@ -39,7 +39,7 @@ storiesOf('Component', module)
|
||||
```
|
||||
|
||||
Then, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.
|
||||
A complete list of possible configurations can be found at [in a later section](#setting-global-options).
|
||||
A complete list of possible configurations can be found [in a later section](#setting-global-options).
|
||||
This can be done per book of stories:
|
||||
|
||||
```js
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 122 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
"marksy": "^7.0.0",
|
||||
"nested-object-assign": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 157 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
1
addons/knobs/src/typings.d.ts
vendored
1
addons/knobs/src/typings.d.ts
vendored
@ -1,2 +1 @@
|
||||
declare module 'global';
|
||||
declare module '@storybook/client-api';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,10 +29,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/router": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/router": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 93 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,13 +30,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/router": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/router": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,13 +26,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.3.0-alpha.23"
|
||||
"@storybook/addon-actions": "5.3.0-alpha.33"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,9 +31,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,8 +27,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 132 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,11 +27,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 62 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -2,7 +2,7 @@ import { configure } from '@storybook/react';
|
||||
|
||||
configure(
|
||||
[
|
||||
require.context('../stories/required_with_context', false, /\.stories\.js$/),
|
||||
require.context('../stories/required_with_context', false, /\.stories\.(js|mdx)$/),
|
||||
require.context('../stories/directly_required', false, /index\.js$/),
|
||||
],
|
||||
module
|
||||
|
||||
1
addons/storyshots/storyshots-core/.storybook/presets.js
Normal file
1
addons/storyshots/storyshots-core/.storybook/presets.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = ['@storybook/addon-docs/react/preset'];
|
||||
@ -178,6 +178,23 @@ StoryShots addon for Preact is dependent on [preact-render-to-json](https://gith
|
||||
yarn add preact-render-to-json --dev
|
||||
```
|
||||
|
||||
### Configure Jest for MDX Docs Add-On Stories
|
||||
|
||||
If using the [Docs add-on](../../docs/README.md) with
|
||||
[MDX stories](../../docs/docs/mdx.md) you will need
|
||||
to configure Jest to transform MDX stories into something Storyshots can understand:
|
||||
|
||||
Add the following to your Jest configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"transform": {
|
||||
"^.+\\.[tj]sx?$": "babel-jest",
|
||||
"^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
|
||||
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 119 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,8 +33,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/client-api": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/client-api": "5.3.0-alpha.33",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -47,6 +47,9 @@
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "5.3.0-alpha.33",
|
||||
"@storybook/react": "5.3.0-alpha.33",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -43,6 +43,7 @@ describe('getPossibleStoriesFiles', () => {
|
||||
'test/foo.web.stories.jsx',
|
||||
'test/foo.web.stories.ts',
|
||||
'test/foo.web.stories.tsx',
|
||||
'test/foo.web.stories.mdx',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@ import dedent from 'ts-dedent';
|
||||
const defaultOptions: Stories2SnapsConverterOptions = {
|
||||
snapshotsDirName: '__snapshots__',
|
||||
snapshotExtension: '.storyshot',
|
||||
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx', '.mdx'],
|
||||
};
|
||||
|
||||
export interface Stories2SnapsConverterOptions {
|
||||
|
||||
@ -112,6 +112,210 @@ exports[`Storyshots Button With Text 1`] = `
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX To Storybook 1`] = `
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
>
|
||||
<Main>
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Title>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</Note>
|
||||
</article>
|
||||
</Main>
|
||||
</Welcome>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
|
||||
@ -96,6 +96,80 @@ exports[`Storyshots Button With Text 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX To Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/index.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
|
||||
@ -96,6 +96,80 @@ exports[`Storyshots Button With Text 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX To Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
Welcome to storybook
|
||||
</Title>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<InlineCode>
|
||||
src/stories
|
||||
</InlineCode>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<NavButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</NavButton>
|
||||
for a component called
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<InlineCode>
|
||||
Button
|
||||
</InlineCode>
|
||||
stories located at
|
||||
<InlineCode>
|
||||
src/stories/index.js
|
||||
</InlineCode>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<Link
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Link>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Note>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<InlineCode>
|
||||
.storybook/webpack.config.js
|
||||
</InlineCode>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Note>
|
||||
</Main>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<Main>
|
||||
<Title>
|
||||
|
||||
@ -96,6 +96,180 @@ exports[`Storyshots Button With Text 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome MDX To Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
import { Welcome } from '@storybook/react/demo';
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta
|
||||
title='Welcome MDX'
|
||||
parameters={{
|
||||
component: Welcome,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story name='to Storybook'><Welcome showApp={linkTo('Button')} /></Story>
|
||||
@ -1,5 +1,179 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome MDX To Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"color": "#000",
|
||||
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
|
||||
"lineHeight": 1.4,
|
||||
"padding": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"borderLeft": "none",
|
||||
"borderRight": "none",
|
||||
"borderTop": "none",
|
||||
"color": "#1474f3",
|
||||
"cursor": "pointer",
|
||||
"font": "inherit",
|
||||
"padding": 0,
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #1474f3",
|
||||
"color": "#1474f3",
|
||||
"paddingBottom": 2,
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f2",
|
||||
"border": "1px solid #eae9e9",
|
||||
"borderRadius": 4,
|
||||
"color": "#3a3a3a",
|
||||
"fontSize": 15,
|
||||
"fontWeight": 600,
|
||||
"padding": "2px 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</article>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome To Storybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.3.0-alpha.23",
|
||||
"@storybook/router": "5.3.0-alpha.23",
|
||||
"@storybook/node-logger": "5.3.0-alpha.33",
|
||||
"@storybook/router": "5.3.0-alpha.33",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@types/puppeteer-core": "^1.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 209 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/router": "5.3.0-alpha.23",
|
||||
"@storybook/source-loader": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/router": "5.3.0-alpha.33",
|
||||
"@storybook/source-loader": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 94 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/api": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/components": "5.3.0-alpha.23",
|
||||
"@storybook/core-events": "5.3.0-alpha.23",
|
||||
"@storybook/theming": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/api": "5.3.0-alpha.33",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/components": "5.3.0-alpha.33",
|
||||
"@storybook/core-events": "5.3.0-alpha.33",
|
||||
"@storybook/theming": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,9 +33,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/node-logger": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"@storybook/node-logger": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
"global": "^4.3.2",
|
||||
@ -64,7 +64,7 @@
|
||||
"rxjs": "^6.0.0",
|
||||
"typescript": "^3.4.0",
|
||||
"webpack": "^4.32.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0"
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -31,7 +31,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,8 +33,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,8 +33,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^2.0.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/client-logger": "5.3.0-alpha.33",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -35,8 +35,8 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.6.2",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"@types/mithril": "^2.0.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -32,7 +32,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.3.0-alpha.23",
|
||||
"version": "5.3.0-alpha.33",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -34,8 +34,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "5.3.0-alpha.23",
|
||||
"@storybook/core": "5.3.0-alpha.23",
|
||||
"@storybook/addons": "5.3.0-alpha.33",
|
||||
"@storybook/core": "5.3.0-alpha.33",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
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