mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 09:51:06 +08:00
Merge branch 'next' into pr/hansottowirtz/7738
This commit is contained in:
Norbert de Langen
commit
d91386ed94
10
.github/CODEOWNERS
vendored
10
.github/CODEOWNERS
vendored
@ -7,12 +7,12 @@
|
||||
/addons/centered/ @kazupon
|
||||
/addons/events/ @z4o4z @ndelangen
|
||||
/addons/graphql/ @mnmtanish
|
||||
/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael @danielduan
|
||||
/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael
|
||||
/addons/jest/ @renaudtertrais
|
||||
/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx
|
||||
/addons/links/ @ndelangen
|
||||
/addons/notes/ @alexandrebodin
|
||||
/addons/options/ @danielduan @UsulPro
|
||||
/addons/options/ @UsulPro
|
||||
/addons/storyshots/ @igor-dv @thomasbertet
|
||||
/addons/storysource/ @igor-dv
|
||||
/addons/viewport/ @saponifi3d
|
||||
@ -20,7 +20,7 @@
|
||||
/app/angular/ @alterx @igor-dv
|
||||
/app/polymer/ @ndelangen @naipath @leonrodenburg
|
||||
/app/react/ @xavcz @shilman @thomasbertet
|
||||
/app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
|
||||
/app/react-native/ @rmevans9 @Gongreg @tmeasday
|
||||
/app/vue/ @thomasbertet @kazupon
|
||||
/app/svelte/ @plumpNation
|
||||
|
||||
@ -29,12 +29,12 @@
|
||||
/examples/angular-cli/ @igor-dv @alterx
|
||||
/examples/cra-kitchen-sink/ @ndelangen @UsulPro
|
||||
/examples/cra-ts-kitchen-sink/ @mucsi96
|
||||
/examples/official-storybook/ @danielduan @UsulPro
|
||||
/examples/official-storybook/ @UsulPro
|
||||
/examples/polymer-cli/ @naipath @igor-dv
|
||||
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
|
||||
/examples/svelte-kitchen-sink/ @plumpNation
|
||||
|
||||
/examples-native/crna-kitchen-sink/ @Gongreg @danielduan
|
||||
/examples-native/crna-kitchen-sink/ @Gongreg
|
||||
|
||||
/lib/addons/ @ndelangen @theinterned
|
||||
/lib/channel-postmessage/ @mnmtanish @ndelangen
|
||||
|
||||
32
.github/main.workflow
vendored
32
.github/main.workflow
vendored
@ -1,32 +0,0 @@
|
||||
action "Danger JS" {
|
||||
uses = "danger/danger-js@master"
|
||||
secrets = ["GITHUB_TOKEN"]
|
||||
args = "--dangerfile .ci/danger/dangerfile.ts"
|
||||
}
|
||||
|
||||
workflow "Dangerfile JS Pull" {
|
||||
on = "pull_request"
|
||||
resolves = "Danger JS"
|
||||
}
|
||||
|
||||
workflow "Dangerfile JS Label" {
|
||||
on = "label"
|
||||
resolves = "Danger JS"
|
||||
}
|
||||
|
||||
# ===
|
||||
|
||||
action "Automention" {
|
||||
uses = "shilman/automention@master"
|
||||
secrets = ["GITHUB_TOKEN"]
|
||||
}
|
||||
|
||||
workflow "Automention Issues" {
|
||||
on = "issues"
|
||||
resolves = "Automention"
|
||||
}
|
||||
|
||||
workflow "Automention PRs" {
|
||||
on = "pull_request"
|
||||
resolves = "Automention"
|
||||
}
|
||||
12
.github/workflows/issues.yml
vendored
Normal file
12
.github/workflows/issues.yml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
on: issues
|
||||
name: Automention Issues
|
||||
jobs:
|
||||
automention:
|
||||
name: Automention
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Automention
|
||||
uses: shilman/automention@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
14
.github/workflows/label.yml
vendored
Normal file
14
.github/workflows/label.yml
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
on: label
|
||||
name: Dangerfile JS Label
|
||||
jobs:
|
||||
dangerJS:
|
||||
name: Danger JS
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
args: --dangerfile .ci/danger/dangerfile.ts
|
||||
24
.github/workflows/nodejs.yml
vendored
Normal file
24
.github/workflows/nodejs.yml
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
name: Github CI
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [10]
|
||||
os: [ubuntu-latest]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- name: Use Node.js ${{ matrix.node_version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
version: ${{ matrix.node_version }}
|
||||
- name: install, build, and test
|
||||
run: |
|
||||
yarn bootstrap --core
|
||||
yarn test --core
|
||||
12
.github/workflows/pull_request-automention-prs.yml
vendored
Normal file
12
.github/workflows/pull_request-automention-prs.yml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
on: pull_request
|
||||
name: Automention PRs
|
||||
jobs:
|
||||
automention:
|
||||
name: Automention
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Automention
|
||||
uses: shilman/automention@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
14
.github/workflows/pull_request-dangerfile-js-pull.yml
vendored
Normal file
14
.github/workflows/pull_request-dangerfile-js-pull.yml
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
on: pull_request
|
||||
name: Dangerfile JS Pull
|
||||
jobs:
|
||||
dangerJS:
|
||||
name: Danger JS
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
args: --dangerfile .ci/danger/dangerfile.ts
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -30,4 +30,5 @@ scripts/storage
|
||||
htpasswd
|
||||
/false
|
||||
storybook-out
|
||||
/addons/docs/common/config-*
|
||||
/addons/docs/common/config-*
|
||||
built-storybooks
|
||||
|
||||
10
.npmignore
10
.npmignore
@ -1,10 +0,0 @@
|
||||
/example/
|
||||
/demo/
|
||||
/docs/
|
||||
/media/
|
||||
/node_modules/
|
||||
/.storybook/
|
||||
|
||||
*.md
|
||||
|
||||
.babelrc
|
||||
320
CHANGELOG.md
320
CHANGELOG.md
@ -1,3 +1,319 @@
|
||||
## 5.2.1 (September 17, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
|
||||
|
||||
## 5.3.0-alpha.0 (September 16, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034))
|
||||
* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049))
|
||||
|
||||
## 5.2.0 (September 13, 2019)
|
||||
|
||||
Storybook 5.2 is here!
|
||||
|
||||
- 📚 DocsPage: Zero-config documentation
|
||||
- 📦 Component Story Format: Portable ES6 modules
|
||||
- 🖼 Design System: Best practice component development
|
||||
- 🧩 Addon API: Simplified w/ hooks
|
||||
|
||||
5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
|
||||
|
||||
## 5.2.0-rc.11 (September 10, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045))
|
||||
|
||||
## 5.2.0-rc.10 (September 9, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036))
|
||||
|
||||
### Documentation
|
||||
|
||||
* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030))
|
||||
|
||||
## 5.2.0-rc.9 (September 7, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027))
|
||||
|
||||
## 5.2.0-rc.8 (September 6, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994))
|
||||
* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015))
|
||||
|
||||
## 5.2.0-rc.7 (September 6, 2019)
|
||||
|
||||
Publish failed
|
||||
|
||||
## 5.2.0-rc.6 (September 5, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991))
|
||||
* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992))
|
||||
* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990))
|
||||
* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965))
|
||||
|
||||
## 5.2.0-rc.5 (September 4, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979))
|
||||
|
||||
## 5.2.0-rc.4 (September 3, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974))
|
||||
|
||||
## 5.2.0-rc.3 (September 3, 2019)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 5.2.0-rc.2 (September 1, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946))
|
||||
|
||||
## 5.2.0-rc.1 (August 31, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940))
|
||||
* React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908))
|
||||
* Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683))
|
||||
* Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934))
|
||||
|
||||
## 5.2.0-rc.0 (August 30, 2019)
|
||||
|
||||
5.2 is in RC!!! 🎉What this means:
|
||||
|
||||
- no glaring bugs relating to new features (that we know of)
|
||||
- bugfixes only until 5.2 final
|
||||
- follow-on features to be released in `5.3-alpha` ASAP
|
||||
|
||||
Track progress on the [5.2 release issue](https://github.com/storybookjs/storybook/issues/7430)
|
||||
|
||||
## 5.2.0-beta.48 (August 30, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix docs-only story ID suffix ([#7921](https://github.com/storybookjs/storybook/pull/7921))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Replace favicon with new Storybook icon. ([#7922](https://github.com/storybookjs/storybook/pull/7922))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Bump react-draggable from 3.1.1 to 3.3.2 ([#7912](https://github.com/storybookjs/storybook/pull/7912))
|
||||
|
||||
## 5.2.0-beta.47 (August 30, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))
|
||||
* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))
|
||||
|
||||
## 5.2.0-beta.46 (August 29, 2019)
|
||||
|
||||
CSF users: this reverts the `makeDisplayName` change introduced in `5.2.0-beta.43` for maintainability reasons. See [#7901](https://github.com/storybookjs/storybook/pull/7901) for full rationale. And apologies for the inconvenience!
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: Fix missing props in the Welcome.tsx demo ([#7774](https://github.com/storybookjs/storybook/pull/7774))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CSF: Revert `makeDisplayName` & add stable `storyNameFromExport` ([#7901](https://github.com/storybookjs/storybook/pull/7901))
|
||||
* Addon-a11y: Upgrade axe to 3.3.2 which adds/mods rules ([#7888](https://github.com/storybookjs/storybook/pull/7888))
|
||||
|
||||
## 5.2.0-beta.45 (August 28, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix MDX Story ID to match new CSF ([#7894](https://github.com/storybookjs/storybook/pull/7894))
|
||||
|
||||
## 5.2.0-beta.44 (August 28, 2019)
|
||||
|
||||
Publish failed
|
||||
|
||||
## 5.2.0-beta.43 (August 28, 2019)
|
||||
|
||||
CSF users: This is potentially a breaking change. If you want to opt-out of the new default display name calculation (`lodash.startCase`) you can add the following to your SB config:
|
||||
|
||||
```js
|
||||
addParameters({ options: { makeDisplayName: key => key }});
|
||||
```
|
||||
|
||||
### Features
|
||||
|
||||
* CSF: Transform CSF named exports w/ `makeDisplayName` ([#7878](https://github.com/storybookjs/storybook/pull/7878))
|
||||
|
||||
## 5.2.0-beta.42 (August 28, 2019)
|
||||
|
||||
Addon-docs users: This is a breaking change if you have been hacking the `docs` parameter manually. If you're using the zero-config option for `DocsPage` or `MDX`, you should be unaffected by it.
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Addon-docs: Make config API consistent with other addons ([#7874](https://github.com/storybookjs/storybook/pull/7874))
|
||||
|
||||
## 5.2.0-beta.41 (August 27, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-info: Add configurable component comparator ([#7409](https://github.com/storybookjs/storybook/pull/7409))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-viewports: Add back default viewports ([#7448](https://github.com/storybookjs/storybook/pull/7448))
|
||||
* Core: Pass a separate hooks context per story ([#7860](https://github.com/storybookjs/storybook/pull/7860))
|
||||
* UI: Fix TooltipLinkList not scrollable ([#7865](https://github.com/storybookjs/storybook/pull/7865))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* UI: Add ignore `first-child` selector warning flag ([#7861](https://github.com/storybookjs/storybook/pull/7861))
|
||||
|
||||
## 5.2.0-beta.40 (August 23, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix DocsPage primary story switching ([#7849](https://github.com/storybookjs/storybook/pull/7849))
|
||||
* Source-loader: Selectively ignore typescript errors in generated code ([#7845](https://github.com/storybookjs/storybook/pull/7845))
|
||||
* Addon-docs: Force hidden attribute on #root element ([#7841](https://github.com/storybookjs/storybook/pull/7841))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Remove temporarily added --no-dll option on examples ([#7647](https://github.com/storybookjs/storybook/pull/7647))
|
||||
|
||||
## 5.2.0-beta.39 (August 22, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React-Native: Fix tabs layout issue on simulator ([#7809](https://github.com/storybookjs/storybook/pull/7809))
|
||||
* Source-loader: Selectively ignore typescript errors in generated code ([#7831](https://github.com/storybookjs/storybook/pull/7831))
|
||||
|
||||
## 5.2.0-beta.38 (August 21, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* FIX issue where the block of build info (including url) wouldn't show if passed --ci #7821 ([#7822](https://github.com/storybookjs/storybook/pull/7822))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Remove babel-register in favor of esm ([#7823](https://github.com/storybookjs/storybook/pull/7823))
|
||||
|
||||
## 5.2.0-beta.37 (August 20, 2019)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
* Addon-docs: Add docsContainer parameter ([#7814](https://github.com/storybookjs/storybook/pull/7814))
|
||||
|
||||
## 5.2.0-beta.36 (August 20, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Improved "No docs" message ([#7785](https://github.com/storybookjs/storybook/pull/7785))
|
||||
* Core: Add .pdf support to file-loader ([#7651](https://github.com/storybookjs/storybook/pull/7651))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Preview hooks: trigger effects after story render ([#7791](https://github.com/storybookjs/storybook/pull/7791))
|
||||
|
||||
## 5.2.0-beta.35 (August 20, 2019)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 5.2.0-beta.34 (August 20, 2019)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 5.2.0-beta.33 (August 18, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-jest: Add pending & todo items ([#7793](https://github.com/storybookjs/storybook/pull/7793))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix unique key warning ([#7796](https://github.com/storybookjs/storybook/pull/7796))
|
||||
|
||||
## 5.2.0-beta.32 (August 17, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix docs-only story load ([#7787](https://github.com/storybookjs/storybook/pull/7787))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Addon-docs: Unwrap doc blocks stories ([#7788](https://github.com/storybookjs/storybook/pull/7788))
|
||||
|
||||
## 5.2.0-beta.31 (August 16, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Add toolbar support to Preview ([#7778](https://github.com/storybookjs/storybook/pull/7778))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix CSS bleed issue in doc blocks ([#7771](https://github.com/storybookjs/storybook/pull/7771))
|
||||
|
||||
## 5.2.0-beta.30 (August 14, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* CLI: Don't output startup information on smoke test ([#6949](https://github.com/storybookjs/storybook/pull/6949))
|
||||
* Ondevice-knobs: Expose withKnobs from addon-knobs ([#7555](https://github.com/storybookjs/storybook/pull/7555))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Addon-Jest: Add flexibility ([#7748](https://github.com/storybookjs/storybook/pull/7748))
|
||||
|
||||
## 5.1.11 (August 13, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401))
|
||||
* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
|
||||
|
||||
## 5.2.0-beta.29 (August 13, 2019)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
* Addon-docs: Packaging for 5.2 release ([#7741](https://github.com/storybookjs/storybook/pull/7741))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750))
|
||||
* Core: Revert "Addon-centered: Fix disappearing when zoomed" ([#7749](https://github.com/storybookjs/storybook/pull/7749))
|
||||
|
||||
## 5.2.0-beta.28 (August 10, 2019)
|
||||
|
||||
### Features
|
||||
@ -725,7 +1041,7 @@ Storybook 5.1 is a juicy upgrade including:
|
||||
- 🛠 Context addon: New UI for themes, internationalization, & more
|
||||
- 🎛 Presets: One-line configuration for babel, webpack, & addons
|
||||
|
||||
5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier.
|
||||
5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
|
||||
|
||||
## 5.1.0 (June 5, 2019)
|
||||
|
||||
@ -1817,7 +2133,7 @@ Storybook 5.0 is a completely new UI with the following improvements:
|
||||
- ⌨️ Improved keyboard shortcuts that are user configurable
|
||||
- 🌍 New URL structure that eliminates long strings of query parameters
|
||||
|
||||
5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`.
|
||||
5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `4.x`.
|
||||
|
||||
## 5.0.0-rc.11 (March 5, 2019)
|
||||
|
||||
|
||||
15
MIGRATION.md
15
MIGRATION.md
@ -67,6 +67,21 @@
|
||||
|
||||
## From version 5.1.x to 5.2.x
|
||||
|
||||
### default viewports
|
||||
|
||||
The default viewports have been reduced to a smaller set, we think is enough for most usecases.
|
||||
You can get the old default back by adding the following to your `config.js`:
|
||||
|
||||
```js
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
addParameters({
|
||||
viewport: {
|
||||
viewports: INITIAL_VIEWPORTS,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Grid toolbar-feature
|
||||
|
||||
The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.
|
||||
|
||||
62
README.md
62
README.md
@ -1,38 +1,62 @@
|
||||
# Storybook
|
||||
|
||||
<p align="center">
|
||||
<a href="https://circleci.com/gh/storybookjs/storybook"><img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" /></a>
|
||||
<a href="https://www.codefactor.io/repository/github/storybookjs/storybook"><img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" /></a>
|
||||
<a href="https://snyk.io/test/github/storybookjs/storybook"><img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" /></a>
|
||||
<a href="https://bettercodehub.com/results/storybookjs/storybook"><img src="https://bettercodehub.com/edge/badge/storybookjs/storybook" alt="BCH compliance" /></a>
|
||||
<a href="https://codecov.io/gh/storybookjs/storybook"><img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/LICENSE"><img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" /></a></p>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://discord.gg/sMFvFsG"><img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" /></a>
|
||||
<a href="https://now-examples-slackin-rrirkqohko.now.sh/"><img src="https://now-examples-slackin-rrirkqohko.now.sh/badge.svg?logo=slack" alt="Storybook Slack" /></a>
|
||||
<a href="#backers"><img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" /></a>
|
||||
<a href="#sponsors"><img src="https://opencollective.com/storybook/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
|
||||
<a href="https://twitter.com/intent/follow?screen_name=storybookjs"><img src="https://img.shields.io/twitter/follow/storybookjs.svg?style=social&label=Follow" alt="Official Twitter Handle" /></a>
|
||||
<a href="https://storybook.js.org/">
|
||||
<img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
<p align="center">Build bulletproof UI components faster</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://circleci.com/gh/storybookjs/storybook">
|
||||
<img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" />
|
||||
</a>
|
||||
<a href="https://www.codefactor.io/repository/github/storybookjs/storybook">
|
||||
<img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" />
|
||||
</a>
|
||||
<a href="https://snyk.io/test/github/storybookjs/storybook">
|
||||
<img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" />
|
||||
</a>
|
||||
<a href="https://codecov.io/gh/storybookjs/storybook">
|
||||
<img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" />
|
||||
</a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" />
|
||||
</a>
|
||||
<br/>
|
||||
<a href="https://discord.gg/sMFvFsG">
|
||||
<img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />
|
||||
</a>
|
||||
<a href="https://now-examples-slackin-rrirkqohko.now.sh/">
|
||||
<img src="https://now-examples-slackin-rrirkqohko.now.sh/badge.svg?logo=slack" alt="Storybook Slack" />
|
||||
</a>
|
||||
<a href="#backers">
|
||||
<img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" />
|
||||
</a>
|
||||
<a href="#sponsors">
|
||||
<img src="https://opencollective.com/storybook/sponsors/badge.svg" alt="Sponsors on Open Collective" />
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/follow?screen_name=storybookjs">
|
||||
<img src="https://badgen.net/twitter/follow/storybookjs?icon=twitter&label=%40storybookjs" alt="Official Twitter Handle" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Storybook is a development environment for UI components.
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
|
||||
|
||||
## Intro
|
||||
|
||||
<center>
|
||||
<img src="media/storybook-intro.gif" width="100%" />
|
||||
</center>
|
||||
|
||||
<p align="center">
|
||||
README for:<br/>
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
</p>
|
||||
|
||||
## Intro
|
||||
|
||||
Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
|
||||
|
||||
@ -45,7 +45,7 @@ storiesOf('button', module)
|
||||
```
|
||||
|
||||
For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
|
||||
You can override these options at story level too.
|
||||
You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -20,19 +20,25 @@
|
||||
"directory": "addons/a11y"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"axe-core": "^3.2.2",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"axe-core": "^3.3.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -139,6 +139,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
background: #FFFFFF;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
border-left: 1px solid rgba(0,0,0,.1);
|
||||
@ -215,13 +216,13 @@ exports[`A11YPanel should render report 1`] = `
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"0": true,
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1551xjo": true,
|
||||
"15paq49": true,
|
||||
"1977chw": true,
|
||||
"19mcg9j": true,
|
||||
"1ez3l8h": true,
|
||||
"1imo1gr": true,
|
||||
"1kbt4a0": true,
|
||||
"1l7fvsg": true,
|
||||
"1vwgrhn": true,
|
||||
@ -497,7 +498,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -723,7 +724,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,18 +15,24 @@
|
||||
"directory": "addons/actions"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Background Addon can be used to change background colors inside the pr
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,18 +19,24 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "jbaxleyiii",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export const ADDON_ID = 'storybook/background';
|
||||
export const PARAM_KEY = 'backgrounds';
|
||||
export const GRID_PARAM_KEY = 'grid';
|
||||
|
||||
export const EVENTS = {
|
||||
UPDATE: `${ADDON_ID}/update`,
|
||||
|
||||
@ -128,7 +128,7 @@ export class BackgroundSelector extends Component<Props> {
|
||||
<Global
|
||||
styles={(theme: Theme) => ({
|
||||
[`#${iframeId}`]: {
|
||||
background:
|
||||
backgroundColor:
|
||||
selectedBackgroundColor === 'transparent'
|
||||
? theme.background.content
|
||||
: selectedBackgroundColor,
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { FunctionComponent, memo } from 'react';
|
||||
|
||||
import { useAddonState } from '@storybook/api';
|
||||
import { useAddonState, useParameter } from '@storybook/api';
|
||||
import { Global } from '@storybook/theming';
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
|
||||
import { ADDON_ID } from '../constants';
|
||||
import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
|
||||
|
||||
export interface BackgroundGridParameters {
|
||||
cellSize: number;
|
||||
}
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
export const GridSelector: FunctionComponent = () => {
|
||||
export const GridSelector: FunctionComponent = memo(() => {
|
||||
const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
|
||||
const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
@ -23,19 +28,24 @@ export const GridSelector: FunctionComponent = () => {
|
||||
<Global
|
||||
styles={{
|
||||
[`#${iframeId}`]: {
|
||||
backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
|
||||
backgroundSize: [
|
||||
`${cellSize * 5}px ${cellSize * 5}px`,
|
||||
`${cellSize * 5}px ${cellSize * 5}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
].join(', '),
|
||||
backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
|
||||
backgroundBlendMode: 'difference',
|
||||
backgroundImage: [
|
||||
'linear-gradient(rgba(130, 130, 130,0.5) 1px,transparent 1px)',
|
||||
'linear-gradient(90deg,rgb(130, 130, 130,0.5) 1px,transparent 1px)',
|
||||
'linear-gradient(rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
|
||||
'linear-gradient(90deg,rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
|
||||
].join(','),
|
||||
'linear-gradient(rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
|
||||
'linear-gradient(90deg, rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
|
||||
'linear-gradient(rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
|
||||
'linear-gradient(90deg, rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
|
||||
].join(', '),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -4,6 +4,8 @@ Storybook Centered Decorator can be used to center components inside the preview
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.
|
||||
|
||||
### Usage
|
||||
|
||||
```sh
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,13 +17,27 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"angular.js",
|
||||
"angular.d.ts",
|
||||
"ember.js",
|
||||
"html.js",
|
||||
"mithril.js",
|
||||
"preact.js",
|
||||
"rax.js",
|
||||
"react.js",
|
||||
"svelte.js",
|
||||
"vue.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@ -33,13 +47,5 @@
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @jsx m */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import m, { ComponentTypes } from 'mithril';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @jsx h */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { Component, h } from 'preact';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
/** @jsx createElement */
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { createElement } from 'rax';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import View from 'rax-view';
|
||||
import { makeDecorator } from '@storybook/addons/src/make-decorator';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React, { ReactNode } from 'react';
|
||||
import { makeDecorator, StoryFn } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"preact",
|
||||
"react",
|
||||
"storybook",
|
||||
"vue"
|
||||
],
|
||||
"author": "Leo Y. Li",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/contexts"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/register.js",
|
||||
"author": "Leo Y. Li",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"register.js",
|
||||
@ -18,21 +22,19 @@
|
||||
"react.js",
|
||||
"vue.js"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/contexts"
|
||||
},
|
||||
"main": "dist/register.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js",
|
||||
"dev:check-types": "tsc --noEmit"
|
||||
"dev:check-types": "tsc --noEmit",
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"core-js": "^3.0.1"
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"global": "*",
|
||||
@ -41,11 +43,6 @@
|
||||
"react": "*",
|
||||
"vue": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"preact": "*",
|
||||
"react": "*",
|
||||
"vue": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useChannel } from './libs/useChannel';
|
||||
import { useChannel } from '@storybook/api';
|
||||
import { ToolBar } from './components/ToolBar';
|
||||
import { deserialize, serialize } from '../shared/serializers';
|
||||
import { PARAM, REBOOT_MANAGER, UPDATE_MANAGER, UPDATE_PREVIEW } from '../shared/constants';
|
||||
@ -21,11 +21,13 @@ export const ContextsManager: ContextsManager = ({ api }) => {
|
||||
);
|
||||
|
||||
// from preview
|
||||
useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes || []), []);
|
||||
const emit = useChannel({
|
||||
[UPDATE_MANAGER]: newNodes => setNodes(newNodes || []),
|
||||
});
|
||||
|
||||
// to preview
|
||||
useEffect(() => api.emit(REBOOT_MANAGER), []);
|
||||
useEffect(() => api.emit(UPDATE_PREVIEW, state), [state]);
|
||||
useEffect(() => emit(REBOOT_MANAGER), []);
|
||||
useEffect(() => emit(UPDATE_PREVIEW, state), [state]);
|
||||
useEffect(() => api.setQueryParams({ [PARAM]: serialize(state) }), [state]);
|
||||
|
||||
return <ToolBar nodes={nodes} state={state || {}} setSelected={setSelected} />;
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { useEffect } from 'react';
|
||||
import { AnyFunctionReturns } from '../../shared/types.d';
|
||||
|
||||
/**
|
||||
* The React hook version of Storybook Channel API.
|
||||
*/
|
||||
type UseChannel = (
|
||||
event: string,
|
||||
eventHandler: AnyFunctionReturns<void>,
|
||||
input?: unknown[]
|
||||
) => void;
|
||||
|
||||
export const useChannel: UseChannel = (event, eventHandler, inputs = []) =>
|
||||
useEffect(() => {
|
||||
const channel = addons.getChannel();
|
||||
channel.on(event, eventHandler);
|
||||
return () => channel.removeListener(event, eventHandler);
|
||||
}, inputs);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,16 +19,22 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "nm123github",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"parameter",
|
||||
"design",
|
||||
"assets",
|
||||
"design",
|
||||
"files",
|
||||
"parameter",
|
||||
"storybook",
|
||||
"viewer"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
@ -21,18 +21,24 @@
|
||||
"directory": "addons/design-assets"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,39 +1,109 @@
|
||||
<center>
|
||||
<img src="docs/media/hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs
|
||||
|
||||
Living documentation for your components.
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation.
|
||||
|
||||
- [Sneak peak article](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into simple, easy-to-read pages.
|
||||
|
||||
## View layer support
|
||||
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
|
||||
|
||||
Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific
|
||||
Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
|
||||
|
||||
Read on to learn more:
|
||||
|
||||
- [DocsPage](#docspage)
|
||||
- [MDX](#mdx)
|
||||
- [Framework support](#framework-support)
|
||||
- [Installation](#installation)
|
||||
- [Preset options](#preset-options)
|
||||
- [Manual configuration](#manual-configuration)
|
||||
- [TypeScript configuration](#typescript-configuration)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## DocsPage
|
||||
|
||||
When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage` pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.
|
||||
|
||||
Click on the `Docs` tab to see it:
|
||||
|
||||
<center>
|
||||
<img src="docs/media/docs-tab.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on how it works, see the [`DocsPage` reference](./docs/docspage.md).
|
||||
|
||||
## MDX
|
||||
|
||||
`MDX` is a syntax for writing long-form documentation and stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
|
||||
|
||||
Here's an example file:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX|Checkbox" component={Checkbox} />
|
||||
|
||||
# Checkbox
|
||||
|
||||
With `MDX` we can define a story for `Checkbox` right in the middle of our
|
||||
markdown documentation.
|
||||
|
||||
<Preview>
|
||||
<Story name="all checkboxes">
|
||||
<form>
|
||||
<Checkbox id="Unchecked" label="Unchecked" />
|
||||
<Checkbox id="Checked" label="Checked" checked />
|
||||
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
||||
</form>
|
||||
</Story>
|
||||
</Preview>
|
||||
```
|
||||
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="docs/media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
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
|
||||
|
||||
| | React | Vue | Angular | Polymer | Mithril | HTML | Marko | Svelte | Riot | Ember | Preact |
|
||||
| -------------- | :---: | :-: | :-----: | :-----: | :-----: | :--: | :---: | :----: | :--: | :---: | :----: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Module stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Legacy stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | # | | | | | | | | |
|
||||
| Docgen | + | + | # | | | | | | | | |
|
||||
| Inline stories | + | # | | | | | | | | | |
|
||||
| | 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 | + | # | | | | | | | | | |
|
||||
|
||||
**Notes:**
|
||||
|
||||
- `#` denotes planned/WIP support
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
## Installation
|
||||
|
||||
First add the package. Make sure that the versions for your `@storybook/*` packages match:
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-docs
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
The add the following to your `.storybook/presets.js` exports:
|
||||
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:
|
||||
|
||||
```sh
|
||||
yarn add -D react babel-loader
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/presets.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = ['@storybook/addon-docs/react/preset'];
|
||||
@ -41,6 +111,16 @@ module.exports = ['@storybook/addon-docs/react/preset'];
|
||||
|
||||
If you're not using `react`, replace it with your framework of choice corresponding to the Storybook package name, e.g. `angular` for `@storybook/angular` etc.
|
||||
|
||||
**Configure.** If you're migrating from an earlier version of Storybook and want to use `MDX`, you need to upgrade your Storybook config:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/react';
|
||||
|
||||
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.
|
||||
|
||||
## 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:
|
||||
@ -82,7 +162,9 @@ module.exports = async ({ config }) => {
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
// may or may not need this line depending on your app's setup
|
||||
plugins: ['@babel/plugin-transform-react-jsx'],
|
||||
options: {
|
||||
plugins: ['@babel/plugin-transform-react-jsx'],
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: '@mdx-js/loader',
|
||||
@ -101,3 +183,36 @@ module.exports = async ({ config }) => {
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
Finally, you'll need to set up DocsPage in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## TypeScript configuration
|
||||
|
||||
SB Docs for React uses `babel-plugin-react-docgen` to extract Docgen comments from your code automatically. However, if you're using TypeScript, some extra configuration maybe required to get this information included in your docs.
|
||||
|
||||
1. You can add [react-docgen-typescript-loader](https://www.npmjs.com/package/react-docgen-typescript-loader) to your project by following the instructions there.
|
||||
2. You can use [@storybook/preset-typescript](https://www.npmjs.com/package/@storybook/preset-typescript) which includes `react-docgen-typescript-loader`.
|
||||
|
||||
Install the preset with care. If you've already configured Typescript manually, that configuration may conflict with the preset. You can [debug your final webpack configuration with `--debug-webpack`](https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config).
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
248
addons/docs/docs/docspage.md
Normal file
248
addons/docs/docs/docspage.md
Normal file
@ -0,0 +1,248 @@
|
||||
<center>
|
||||
<img src="./media/docspage-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook DocsPage
|
||||
|
||||
When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.
|
||||
|
||||
- [Motivation](#motivation)
|
||||
- [Component parameter](#component-parameter)
|
||||
- [DocsPage slots](#docspage-slots)
|
||||
- [Replacing DocsPage](#replacing-docspage)
|
||||
- [Story file names](#story-file-names)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Motivation
|
||||
|
||||
`DocsPage` is the successor to [`addon-info`](https://github.com/storybookjs/storybook/tree/next/addons/info), which was one of the most popular Storybook addons despite many limitations.
|
||||
|
||||
Like `addon-info`, `DocsPage` provides sensible defaults, meaning it adds documentation to your existing Storybook without requiring any additional work on your part.
|
||||
|
||||
However, `DocsPage` brings the following improvements:
|
||||
|
||||
- It supports all frameworks that Storybook supports, including React, Vue, Angular and [many others](../README.md#framework-support).
|
||||
- It generates better documentation that can be used as a standalone docs site, independently of Storybook.
|
||||
- It supports better configuration, so you can capture project specific information with ease.
|
||||
- It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation.
|
||||
|
||||
## Component parameter
|
||||
|
||||
`DocsPage` pulls info from many sources, but one of the main ones is the `component` parameter, which is a new addition to Storybook in 5.2. It's based on the best practice that each component should have an associated set of documentation and stories (versus organizing it in some other way).
|
||||
|
||||
Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
|
||||
|
||||
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/):
|
||||
|
||||
```js
|
||||
import { Badge } from './Badge';
|
||||
|
||||
export default {
|
||||
title: 'Path/to/Badge',
|
||||
component: Badge,
|
||||
};
|
||||
```
|
||||
|
||||
And here's how to do the same thing the underlying `storiesOf` API:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Badge } from './Badge';
|
||||
|
||||
storiesOf('Path/to/Badge', module).addParameters({ component: Badge });
|
||||
```
|
||||
|
||||
If you're coming from the `storiesOf` format, there's [a codemod that adds it for you](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#add-component-parameters).
|
||||
|
||||
## DocsPage slots
|
||||
|
||||
`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
|
||||
|
||||
<center>
|
||||
<img style="padding: 30px; border: 3px solid #eee;" src="./media/docspage-slots.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## Slot values
|
||||
|
||||
Each of the slots is computed by a built-in function, that can also be overridden using [Slot Function](#slot-functions).
|
||||
|
||||
Here is a summary of the slots, where the data comes from by default, and the slot function that can be used to override it:
|
||||
|
||||
| Slot | Default source | Slot function | Frameworks |
|
||||
| ----------- | ----------------------------------- | ----------------- | ---------- |
|
||||
| Title | component `title` | `titleSlot` | All |
|
||||
| Subtitle | `componentSubtitle` parameter | `subtitleSlot` | All |
|
||||
| Description | component `docgen` comment | `descriptionSlot` | React, Vue |
|
||||
| Primary | storybook stories | `primarySlot` | All |
|
||||
| Props | component docgen props or propTypes | `propsSlot` | React, Vue |
|
||||
| Stories | storybook stories | `storiesSlot` | All |
|
||||
|
||||
For more information on frameworks, see ["Framework support"](../README.md#framework-support)
|
||||
|
||||
### Title
|
||||
|
||||
`Title` is computed from the component's `title`, and matches the component caption in Storybook's navigation.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
export default {
|
||||
title: 'Path/to/Badge',
|
||||
};
|
||||
```
|
||||
|
||||
### Subtitle
|
||||
|
||||
The `Subtitle` slot is computed from the component's `componentSubtitle` parameter.
|
||||
|
||||
For example in [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df):
|
||||
|
||||
```js
|
||||
export default {
|
||||
...
|
||||
parameters: {
|
||||
componentSubtitle: 'Handy status label',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Description
|
||||
|
||||
The `Description` slot is computed from the Component's docgen comments in the component's source.
|
||||
|
||||
For example, here's the source for `Badge`:
|
||||
|
||||
```js
|
||||
/**
|
||||
* Use `Badge` to highlight key info with a predefined status. Easy peasy!
|
||||
*/
|
||||
export const Badge = ({ status, children }) => { ... }
|
||||
```
|
||||
|
||||
### Primary
|
||||
|
||||
The `Primary` slot is computed from the first user-defined story for the component.
|
||||
|
||||
For example here are `Badge`'s stories in CSF. The `allBadges` is selected as the primary story because it's first:
|
||||
|
||||
```js
|
||||
// export default { ... }; /* Badge component metadata */
|
||||
export const allBadges = () => ...
|
||||
export const positive = () => ...
|
||||
export const negative = () => ...
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
The `Props` slot is computed from the component's docgen props, which can be defined in typescript or using `react` PropTypes.
|
||||
|
||||
For example, here are the `PropTypes` for the `Badge` component
|
||||
|
||||
```js
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// ... Badge definition ...
|
||||
|
||||
Badge.propTypes = {
|
||||
status: PropTypes.oneOf(['positive', 'negative', 'neutral', 'error', 'warning']),
|
||||
};
|
||||
Badge.defaultProps = {
|
||||
status: 'neutral',
|
||||
};
|
||||
```
|
||||
|
||||
### Stories
|
||||
|
||||
The `Stories` slot is computed from the user-defined stories for the component, excluding the first.
|
||||
|
||||
For example here are `Badge`'s stories in CSF. The `positive` and `negative` stories are selected in that order:
|
||||
|
||||
```js
|
||||
// export default { ... }; /* Badge component metadata */
|
||||
export const allBadges = () => ...
|
||||
export const positive = () => ...
|
||||
export const negative = () => ...
|
||||
```
|
||||
|
||||
## Slot functions
|
||||
|
||||
> ⚠️ Slot functions are an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
|
||||
|
||||
The value for each slot is computed from a `SlotContext` context, and the function that's used to compute the value can be overridden if you need to customize the page. If you find yourself doing a lot of configuration, or wanting different configurations for different pages, you might be better off using `MDX`. Everything that `DocsPage` gives you can be reconstructed in a few lines of `MDX`.
|
||||
|
||||
Here is the `SlotContext` type definition:
|
||||
|
||||
```ts
|
||||
export interface SlotContext {
|
||||
id?: string;
|
||||
selectedKind?: string;
|
||||
selectedStory?: string;
|
||||
parameters?: any;
|
||||
storyStore?: any;
|
||||
}
|
||||
```
|
||||
|
||||
And here are the return type signatures for each of the slot functions
|
||||
|
||||
| Slot | Function | Inputs | Output |
|
||||
| -------- | ------------ | ---------------------------- | ------------------ |
|
||||
| Title | titleSlot | `SlotContext` | `string?` |
|
||||
| Subtitle | subtitleSlot | `SlotContext` | `string?` |
|
||||
| Primary | primarySlot | `StoryData[]`, `SlotContext` | `StoryProps?` |
|
||||
| Props | propsSlot | `SlotContext` | `PropsTableProps?` |
|
||||
| Stories | storiesSlot | `StoryData[]`, `SlotContext` | `StoryProps[]?` |
|
||||
|
||||
## Replacing DocsPage
|
||||
|
||||
What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
|
||||
|
||||
You can replace DocsPage at any level by overriding the `docs.page` parameter:
|
||||
|
||||
- With `null` to remove docs
|
||||
- [With MDX](#csf-stories-with-mdx-docs) docs
|
||||
- With a custom React component
|
||||
|
||||
**Globally (config.js)**
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
addParameters({ docs: { page: null } });
|
||||
```
|
||||
|
||||
**Component-level (Button.stories.js)**
|
||||
|
||||
```js
|
||||
import { Button } from './Button';
|
||||
export default {
|
||||
title: 'Demo/Button',
|
||||
component: Button,
|
||||
parameters: { docs: { page: null } },
|
||||
};
|
||||
```
|
||||
|
||||
**Story-level (Button.stories.js)**
|
||||
|
||||
```js
|
||||
import { Button } from './Button';
|
||||
// export default { ... }
|
||||
export const basic => () => <Button>Basic</Button>
|
||||
basic.story = {
|
||||
parameters: { docs: { page: null } }
|
||||
}
|
||||
```
|
||||
|
||||
## Story file names
|
||||
|
||||
Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
|
||||
|
||||
The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration).
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
53
addons/docs/docs/faq.md
Normal file
53
addons/docs/docs/faq.md
Normal file
@ -0,0 +1,53 @@
|
||||
# Storybook Docs FAQs
|
||||
|
||||
You've read the [Storybook Docs README](../README.md). You're already familiar with both [DocsPage](./docspage.md) and [MDX](./mdx.md). You've even browsed our [Docs recipes](/./recipes.md). But Docs is a big project and you've still got questions! Maybe you'll find your answer here:
|
||||
|
||||
- [Storybook Docs FAQs](#storybook-docs-faqs)
|
||||
- [Does Docs support framework X?](#does-docs-support-framework-x)
|
||||
- [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
|
||||
- [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Does Docs support framework X?
|
||||
|
||||
Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, Polymer, and others.
|
||||
|
||||
## How does Docs interact with existing addons?
|
||||
|
||||
Currently we hide the addons panel when docs is visible. It's tricky because all the addons assume that there is only one story currently visible, and in docs there are potentially many. We have a proposal for "knobs v2" to address this for knobs, but nothing planned to address it in general. How we deal with it generally is [open for discussion](https://github.com/storybooks/storybook/issues/6700)!
|
||||
|
||||
## How do I debug my MDX story?
|
||||
|
||||
<center>
|
||||
<img src="./media/faq-debug.png" width="100%" />
|
||||
</center>
|
||||
|
||||
> "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas”
|
||||
|
||||
The original MDX gets compiled to Javascript, and the easiest way to debug your MDX stories in the Canvas is to inspect that Javascript. To do this, open your browser dev tools and view the source that’s being served by the webpack dev server. You may need to hunt for it a little bit under the `webpack > > . > path/to/your/stories` folder, but it’s there.
|
||||
|
||||
For example, the following MDX story:
|
||||
|
||||
```jsx
|
||||
<Story name="solo story">
|
||||
<Button onClick={action('clicked')}>solo</Button>
|
||||
</Story>
|
||||
```
|
||||
|
||||
Shows up in the dev tools as follows:
|
||||
|
||||
<center>
|
||||
<img src="./media/faq-devtools.png" width="100%" />
|
||||
</center>
|
||||
|
||||
This is just [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so it should be easy to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
205
addons/docs/docs/mdx.md
Normal file
205
addons/docs/docs/mdx.md
Normal file
@ -0,0 +1,205 @@
|
||||
<center>
|
||||
<img src="./media/mdx-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs MDX
|
||||
|
||||
> ⚠️ MDX support is an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
|
||||
|
||||
`MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
|
||||
|
||||
- [Basic example](#basic-example)
|
||||
- [MDX-Flavored CSF](#mdx-flavored-csf)
|
||||
- [Writing stories](#writing-stories)
|
||||
- [Embedding stories](#embedding-stories)
|
||||
- [Decorators and parameters](#decorators-and-parameters)
|
||||
- [Documentation-only MDX](#documentation-only-mdx)
|
||||
- [MDX file names](#mdx-file-names)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Basic example
|
||||
|
||||
Let's get started with a simple example that combines markdown with a single story:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX|Checkbox" component={Checkbox} />
|
||||
|
||||
# Checkbox
|
||||
|
||||
With `MDX` we can define a story for `Checkbox` right in the middle of our
|
||||
markdown documentation.
|
||||
|
||||
<Preview>
|
||||
<Story name="all checkboxes">
|
||||
<form>
|
||||
<Checkbox id="Unchecked" label="Unchecked" />
|
||||
<Checkbox id="Checked" label="Checked" checked />
|
||||
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
||||
</form>
|
||||
</Story>
|
||||
</Preview>
|
||||
```
|
||||
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
|
||||
|
||||
Let's break it down.
|
||||
|
||||
## MDX-Flavored CSF
|
||||
|
||||
[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as `# heading`) for your documentation, and freely embed JSX component blocks at any point in the file.
|
||||
|
||||
MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers.
|
||||
|
||||
For example, here's the story from `Checkbox` example above, rewritten in CSF:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { Checkbox } from './Checkbox';
|
||||
export default { title: "MDX|Checkbox" component: Checkbox };
|
||||
export const allCheckboxes = () => (
|
||||
<form>
|
||||
<Checkbox id="Unchecked" label="Unchecked" />
|
||||
<Checkbox id="Checked" label="Checked" checked />
|
||||
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
|
||||
</form>
|
||||
);
|
||||
```
|
||||
|
||||
There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user this means your existing Storybook knowledge should easily translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
|
||||
|
||||
## Writing stories
|
||||
|
||||
Now let's look at a more realistic example to see a few more things we can do:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
<Meta title="MDX|Badge" component={Badge} />
|
||||
|
||||
# Badge
|
||||
|
||||
Let's define a story for our `Badge` component:
|
||||
|
||||
<Story name="positive">
|
||||
<Badge status="positive">Positive</Badge>
|
||||
</Story>
|
||||
|
||||
We can drop it in a `Preview` to get a code snippet:
|
||||
|
||||
<Preview>
|
||||
<Story name="negative">
|
||||
<Badge status="negative">Negative</Badge>
|
||||
</Story>
|
||||
</Preview>
|
||||
|
||||
We can even preview multiple stories in a block. This
|
||||
gets rendered as a group, but defines individual stories
|
||||
with unique URLs and isolated snapshot tests.
|
||||
|
||||
<Preview>
|
||||
<Story name="warning">
|
||||
<Badge status="warning">Warning</Badge>
|
||||
</Story>
|
||||
<Story name="neutral">
|
||||
<Badge status="neutral">Neutral</Badge>
|
||||
</Story>
|
||||
<Story name="error">
|
||||
<Badge status="error">Error</Badge>
|
||||
</Story>
|
||||
<Story name="with icon">
|
||||
<Badge status="warning">
|
||||
<Icon icon="check" inline />
|
||||
with icon
|
||||
</Badge>
|
||||
</Story>
|
||||
</Preview>
|
||||
```
|
||||
|
||||
And here's how that gets rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-page.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## Embedding stories
|
||||
|
||||
Suppose you have an existing story and want to embed it into your docs. Here's how to show a story with ID `some--id` (check the browser URL in Storybook v5+ to see a story's ID):
|
||||
|
||||
```md
|
||||
import { Story } from "@storybook/addon-docs/blocks";
|
||||
|
||||
# Some header
|
||||
|
||||
And markdown here
|
||||
|
||||
<Story id="some--id" />
|
||||
```
|
||||
|
||||
You can also use the rest of the MDX features in conjunction with embedding. That includes source, preview, and prop tables.
|
||||
|
||||
## Decorators and parameters
|
||||
|
||||
To add [decorators](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#decorators) and [parameters](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#parameters) in MDX:
|
||||
|
||||
```md
|
||||
<Meta
|
||||
title='MyComponent'
|
||||
decorators={[ ... ]}
|
||||
parameters={{ ... }}
|
||||
/>
|
||||
|
||||
<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
|
||||
...
|
||||
</Story>
|
||||
```
|
||||
|
||||
In addition, global decorators work just like before, e.g. adding the following to your `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addDecorator, addParameters } from '@storybook/react';
|
||||
|
||||
addDecorator(...);
|
||||
addParameters({ ... });
|
||||
```
|
||||
|
||||
## Documentation-only MDX
|
||||
|
||||
Typically, when you use Storybook MDX, you define stories in the MDX documentation is automatically associated with those stories. But what if you want to write Markdown-style documentation and have it show up in your Storybook?
|
||||
|
||||
If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation.
|
||||
|
||||
If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](recipes.md#csf-stories-with-mdx-docs).
|
||||
|
||||
To get a "documentation-only story", in your UI, simply define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-documentation-only.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## MDX file names
|
||||
|
||||
Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
|
||||
Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](../README.md#installation).
|
||||
|
||||
## More resources
|
||||
|
||||
`MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
BIN
addons/docs/docs/media/docs-tab.png
Normal file
BIN
addons/docs/docs/media/docs-tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
addons/docs/docs/media/docspage-hero.png
Normal file
BIN
addons/docs/docs/media/docspage-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
BIN
addons/docs/docs/media/docspage-slots.png
Normal file
BIN
addons/docs/docs/media/docspage-slots.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
addons/docs/docs/media/faq-debug.png
Executable file
BIN
addons/docs/docs/media/faq-debug.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
addons/docs/docs/media/faq-devtools.png
Executable file
BIN
addons/docs/docs/media/faq-devtools.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
BIN
addons/docs/docs/media/hero.png
Normal file
BIN
addons/docs/docs/media/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 KiB |
BIN
addons/docs/docs/media/mdx-documentation-only.png
Normal file
BIN
addons/docs/docs/media/mdx-documentation-only.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
addons/docs/docs/media/mdx-hero.png
Normal file
BIN
addons/docs/docs/media/mdx-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
addons/docs/docs/media/mdx-page.png
Normal file
BIN
addons/docs/docs/media/mdx-page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
addons/docs/docs/media/mdx-simple.png
Normal file
BIN
addons/docs/docs/media/mdx-simple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
139
addons/docs/docs/recipes.md
Normal file
139
addons/docs/docs/recipes.md
Normal file
@ -0,0 +1,139 @@
|
||||
# Storybook Docs Recipes
|
||||
|
||||
[Storybook Docs](../README.md) consists of two basic mechanisms, [DocsPage](docspage.md) and [MDX](mdx.md). But how should you use them in your project?
|
||||
|
||||
- [Component Story Format (CSF) with DocsPage](#component-story-format-csf-with-docspage)
|
||||
- [Pure MDX Stories](#pure-mdx-stories)
|
||||
- [Mixed CSF / MDX Stories](#mixed-csf--mdx-stories)
|
||||
- [CSF Stories with MDX Docs](#csf-stories-with-mdx-docs)
|
||||
- [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx)
|
||||
- [Migrating from notes/info addons](#migrating-from-notesinfo-addons)
|
||||
- [Exporting documentation](#exporting-documentation)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Component Story Format (CSF) with DocsPage
|
||||
|
||||
Storybook's [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) is a convenient, portable way to write stories. [DocsPage](docspage.md) is a convenient, zero-config way to get rich docs for CSF stories. Using these together is a primary use case for Storybook Docs.
|
||||
|
||||
If you want to intersperse longform documentation in your Storybook, for example to include an introductory page at the beginning of your storybook with an explanation of your design system and installation instructions, [Documentation-only MDX](mdx.md#documentation-only-mdx) is a good way to achieve this.
|
||||
|
||||
## Pure MDX Stories
|
||||
|
||||
[MDX](mdx.md) is an alternative syntax to CSF that allows you to co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.
|
||||
|
||||
## Mixed CSF / MDX Stories
|
||||
|
||||
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) make it easy.
|
||||
|
||||
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.
|
||||
|
||||
## CSF Stories with MDX Docs
|
||||
|
||||
Perhaps you want to write your stories in CSF, but document them in MDX? Here's how to do that:
|
||||
|
||||
**Button.mdx**
|
||||
|
||||
```md
|
||||
import { Story } from '@storybook/addon-docs/blocks';
|
||||
import { SomeComponent } from 'somewhere';
|
||||
|
||||
# Button
|
||||
|
||||
I can embed a story (but not define one, since this file should not contain a `Meta`):
|
||||
|
||||
<Story id="some--id" />
|
||||
|
||||
And of course I can also embed arbitrary markdown & JSX in this file.
|
||||
|
||||
<SomeComponent prop1="val1" />
|
||||
```
|
||||
|
||||
**Button.stories.js**
|
||||
|
||||
```js
|
||||
import { Button } from './Button';
|
||||
import mdx from './Button.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Demo/Button',
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const basic = () => <Button>Basic</Button>;
|
||||
```
|
||||
|
||||
Note that in contrast to other examples, the MDX file suffix is `.mdx` rather than `.stories.mdx`. This key difference means that the file will be loaded with the default MDX loader rather than Storybook's CSF loader, which has several implications:
|
||||
|
||||
1. You don't need to provide a `Meta` declaration.
|
||||
2. You can refer to existing stories (i.e. `<Story id="...">`) but cannot define new stories (i.e. `<Story name="...">`).
|
||||
3. The documentation gets exported as the default export (MDX default) rather than as a parameter hanging off the default export (CSF).
|
||||
|
||||
## Mixing storiesOf with CSF/MDX
|
||||
|
||||
You might have a collection of stories using the `storiesOf` API and want to add CSF/MDX piecemeal. Or you might have certain stories that are only possible with the `storiesOf` API (e.g. dynamically generated ones)
|
||||
|
||||
So how do you mix these two types? The first argument to `configure` can be a `require.context "req"`, an array of `req's`, or a `loader function`. The loader function should either return null or an array of module exports that include the default export. The default export is used by `configure` to load CSF/MDX files.
|
||||
|
||||
So here's a naive implementation of a loader function that assumes that none of your `storiesOf` files contains a default export, and filters out those exports:
|
||||
|
||||
```js
|
||||
const loadFn = () => {
|
||||
const req = require.context('../src', true, /\.stories\.js$/);
|
||||
return req
|
||||
.keys()
|
||||
.map(fname => req(fname))
|
||||
.filter(exp => !!exp.default);
|
||||
};
|
||||
|
||||
configure(loadFn, module);
|
||||
```
|
||||
|
||||
We could have baked this heuristic into Storybook, but we can't assume that your `storiesOf` files don't have default exports. If they do, you can filter them some other way (e.g. by file name).
|
||||
|
||||
If you don't filter out those files, you'll see the following error:
|
||||
|
||||
> "Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export"
|
||||
|
||||
We made this error explicit to make sure you know what you're doing when you mix `storiesOf` and CSF/MDX.
|
||||
|
||||
## Migrating from notes/info addons
|
||||
|
||||
If you're currently using the notes/info addons, you can upgrade to DocsPage [using slots](./docspage.md#docspage-slots). There are different ways to use each addon, so you can adapt this recipe according to your use case.
|
||||
|
||||
Suppose you've added a `notes` parameter to each component in your library, containing markdown text, and you want that to show up at the top of the page in the `Description` slot. Then you would modify your setup in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: ({ context }) => (
|
||||
<DocsPage context={context} descriptionSlot={({ parameters }) => parameters.notes} />
|
||||
),
|
||||
});
|
||||
```
|
||||
|
||||
## Exporting documentation
|
||||
|
||||
> ⚠️ The `--docs` flag is an experimental feature in Storybook 5.2. The behavior may change in 5.3 outside of the normal semver rules. Be forewarned!
|
||||
|
||||
The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to just export the docs to reduce clutter.
|
||||
|
||||
To address this, we’ve added a CLI flag to export just the docs. This flag is also available in dev mode:
|
||||
|
||||
```sh
|
||||
yarn build-storybook --docs
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
71
addons/docs/docs/theming.md
Normal file
71
addons/docs/docs/theming.md
Normal file
@ -0,0 +1,71 @@
|
||||
# Storybook Docs Theming
|
||||
|
||||
[Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting:
|
||||
|
||||
- [Storybook theming](#storybook-theming)
|
||||
- [CSS escape hatches](#css-escape-hatches)
|
||||
- [MDX component overrides](#mdx-component-overrides)
|
||||
|
||||
## Storybook theming
|
||||
|
||||
Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
|
||||
|
||||
For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
theme: themes.dark,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## CSS escape hatches
|
||||
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk.
|
||||
|
||||
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser.
|
||||
|
||||
You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.sbdocs.sbdocs-content {
|
||||
max-width: 1440px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
|
||||
|
||||
## MDX component overrides
|
||||
|
||||
If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
|
||||
|
||||
Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { CodeBlock } from './CodeBlock';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
components: {
|
||||
code: CodeBlock,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,6 +17,19 @@
|
||||
"directory": "addons/docs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"angular/**/*",
|
||||
"common/**/*",
|
||||
"html/**/*",
|
||||
"react/**/*",
|
||||
"vue/**/*",
|
||||
"README.md",
|
||||
"blocks.js",
|
||||
"mdx-compiler-plugin.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
@ -25,15 +38,16 @@
|
||||
"dependencies": {
|
||||
"@babel/generator": "^7.4.0",
|
||||
"@babel/parser": "^7.4.2",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@mdx-js/loader": "^1.1.0",
|
||||
"@mdx-js/mdx": "^1.1.0",
|
||||
"@mdx-js/react": "^1.0.27",
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/router": "5.2.0-beta.28",
|
||||
"@storybook/source-loader": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/router": "5.3.0-alpha.0",
|
||||
"@storybook/source-loader": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"js-string-escape": "^1.0.1",
|
||||
@ -46,7 +60,8 @@
|
||||
"@types/webpack-env": "^1.13.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
"babel-loader": "^8.0.0",
|
||||
"react": "^16.8.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
11
addons/docs/src/blocks/Anchor.tsx
Normal file
11
addons/docs/src/blocks/Anchor.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
|
||||
|
||||
export interface AnchorProps {
|
||||
storyId: string;
|
||||
}
|
||||
|
||||
export const Anchor: React.FC<AnchorProps> = ({ storyId, children }) => (
|
||||
<div id={anchorBlockIdFromId(storyId)}>{children}</div>
|
||||
);
|
||||
@ -1,49 +1,75 @@
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
|
||||
import React from 'react';
|
||||
import { document } from 'global';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import { DocsWrapper, DocsContent, Source } from '@storybook/components';
|
||||
import { components as htmlComponents, Code } from '@storybook/components/html';
|
||||
import { DocsContextProps, DocsContext } from './DocsContext';
|
||||
import { anchorBlockIdFromId } from './Anchor';
|
||||
import { storyBlockIdFromId } from './Story';
|
||||
|
||||
interface DocsContainerProps {
|
||||
context: DocsContextProps;
|
||||
content: React.ElementType<any>;
|
||||
}
|
||||
|
||||
const defaultComponents = {
|
||||
// p: ({ children }) => <b>{children}</b>,
|
||||
wrapper: DocumentFormatting,
|
||||
interface CodeOrSourceProps {
|
||||
className?: string;
|
||||
}
|
||||
export const CodeOrSource: React.FC<CodeOrSourceProps> = props => {
|
||||
const { className, children, ...rest } = props;
|
||||
// markdown-to-jsx does not add className to inline code
|
||||
if (
|
||||
typeof className !== 'string' &&
|
||||
(typeof children !== 'string' || !(children as string).match(/[\n\r]/g))
|
||||
) {
|
||||
return <Code>{children}</Code>;
|
||||
}
|
||||
// className: "lang-jsx"
|
||||
const language = className && className.split('-');
|
||||
return (
|
||||
<Source
|
||||
language={(language && language[1]) || 'plaintext'}
|
||||
format={false}
|
||||
code={children as string}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const globalWithOverflow = (args: any) => {
|
||||
const global = createGlobal(args);
|
||||
const { body, ...rest } = global;
|
||||
const { overflow, ...bodyRest } = body;
|
||||
return {
|
||||
body: bodyRest,
|
||||
...rest,
|
||||
};
|
||||
const defaultComponents = {
|
||||
...htmlComponents,
|
||||
code: CodeOrSource,
|
||||
};
|
||||
|
||||
export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
|
||||
context,
|
||||
content: MDXContent,
|
||||
children,
|
||||
}) => {
|
||||
const parameters = (context && context.parameters) || {};
|
||||
const { id: storyId = null, parameters = {} } = context || {};
|
||||
const options = parameters.options || {};
|
||||
const theme = ensureTheme(options.theme);
|
||||
const { components: userComponents = null } = options.docs || {};
|
||||
const { components: userComponents = null } = parameters.docs || {};
|
||||
const components = { ...defaultComponents, ...userComponents };
|
||||
|
||||
React.useEffect(() => {
|
||||
let element = document.getElementById(anchorBlockIdFromId(storyId));
|
||||
if (!element) {
|
||||
element = document.getElementById(storyBlockIdFromId(storyId));
|
||||
}
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'end',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}, [storyId]);
|
||||
return (
|
||||
<DocsContext.Provider value={context}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Global styles={globalWithOverflow} />
|
||||
<MDXProvider components={components}>
|
||||
<DocsWrapper>
|
||||
<DocsContent>
|
||||
<MDXContent components={components} />
|
||||
</DocsContent>
|
||||
<DocsWrapper className="sbdocs sbdocs-wrapper">
|
||||
<DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
|
||||
</DocsWrapper>
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -6,15 +6,11 @@ export interface DocsContextProps {
|
||||
selectedStory?: string;
|
||||
|
||||
/**
|
||||
* mdxKind is a statically-generated "kind" that corresponds to the
|
||||
* component that's being documented in the MDX file, It's combined
|
||||
* with the MDX story name `<Story name='story name'>...</Story>` to
|
||||
* generate a storyId. In the case that the user is viewing a non-MDX
|
||||
* story, the value of `mdxKind` will be the currently-selected kind.
|
||||
* (I can't remember the corner case in which using the currentl-selected
|
||||
* kind breaks down in MDX-defined stories, but there is one!)
|
||||
* mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's
|
||||
* display name to its storyId. It's used internally by the `<Story>`
|
||||
* doc block.
|
||||
*/
|
||||
mdxKind?: string;
|
||||
mdxStoryNameToId?: Record<string, string>;
|
||||
parameters?: any;
|
||||
storyStore?: any;
|
||||
forceRender?: () => void;
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
import { parseKind } from '@storybook/router';
|
||||
import { styled } from '@storybook/theming';
|
||||
import {
|
||||
DocsPage as PureDocsPage,
|
||||
DocsPageProps as PureDocsPageProps,
|
||||
PropsTable,
|
||||
PropsTableProps,
|
||||
} from '@storybook/components';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { DocsContainer } from './DocsContainer';
|
||||
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 { Story } from './Story';
|
||||
import { Preview } from './Preview';
|
||||
import { Props, getPropsTableProps } from './Props';
|
||||
import { Anchor } from './Anchor';
|
||||
import { getPropsTableProps } from './Props';
|
||||
|
||||
export type StringSlot = (context: DocsContextProps) => string | void;
|
||||
export type PropsSlot = (context: DocsContextProps) => PropsTableProps | void;
|
||||
export type StorySlot = (
|
||||
storyData: StoryData,
|
||||
isPrimary: boolean,
|
||||
context: DocsContextProps
|
||||
) => DocsStoryProps;
|
||||
export interface SlotContext {
|
||||
id?: string;
|
||||
selectedKind?: string;
|
||||
selectedStory?: string;
|
||||
parameters?: any;
|
||||
storyStore?: any;
|
||||
}
|
||||
|
||||
export type StringSlot = (context: SlotContext) => string | void;
|
||||
export type PropsSlot = (context: SlotContext) => PropsTableProps | void;
|
||||
export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps | void;
|
||||
export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[] | void;
|
||||
|
||||
export interface DocsPageProps {
|
||||
titleSlot: StringSlot;
|
||||
subtitleSlot: StringSlot;
|
||||
descriptionSlot: StringSlot;
|
||||
primarySlot: StorySlot;
|
||||
propsSlot: PropsSlot;
|
||||
storySlot: StorySlot;
|
||||
storiesSlot: StoriesSlot;
|
||||
}
|
||||
|
||||
interface DocsStoryProps {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
expanded?: boolean;
|
||||
withToolbar?: boolean;
|
||||
parameters?: any;
|
||||
}
|
||||
|
||||
interface StoryData {
|
||||
@ -58,39 +60,50 @@ const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
|
||||
};
|
||||
|
||||
const defaultSubtitleSlot: StringSlot = ({ parameters }) =>
|
||||
parameters && parameters.componentDescription;
|
||||
parameters && parameters.componentSubtitle;
|
||||
|
||||
const defaultPropsSlot: PropsSlot = context => getPropsTableProps({ of: '.' }, context);
|
||||
|
||||
const defaultDescriptionSlot: StringSlot = ({ parameters }) =>
|
||||
parameters && getDocgen(parameters.component);
|
||||
|
||||
const defaultStorySlot: StorySlot = (storyData, isPrimary, context) => storyData;
|
||||
const defaultPrimarySlot: StorySlot = stories => stories && stories[0];
|
||||
const defaultStoriesSlot: StoriesSlot = stories => {
|
||||
if (stories && stories.length > 1) {
|
||||
const [first, ...rest] = stories;
|
||||
return rest;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const StoriesHeading = styled.h2();
|
||||
const StoryHeading = styled.h3();
|
||||
const StoriesHeading = H2;
|
||||
const StoryHeading = H3;
|
||||
|
||||
const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
expanded = true,
|
||||
withToolbar = false,
|
||||
parameters,
|
||||
}) => (
|
||||
<>
|
||||
{expanded && <StoryHeading>{name}</StoryHeading>}
|
||||
{expanded && description && <Description markdown={description} />}
|
||||
<Preview>
|
||||
<Anchor storyId={id}>
|
||||
{expanded && <StoryHeading>{(parameters && parameters.displayName) || name}</StoryHeading>}
|
||||
{expanded && parameters && parameters.docs && parameters.docs.storyDescription && (
|
||||
<Description markdown={parameters.docs.storyDescription} />
|
||||
)}
|
||||
<Preview withToolbar={withToolbar}>
|
||||
<Story id={id} />
|
||||
</Preview>
|
||||
</>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
const DocsPage: React.FunctionComponent<DocsPageProps> = ({
|
||||
titleSlot,
|
||||
subtitleSlot,
|
||||
descriptionSlot,
|
||||
propsSlot,
|
||||
storySlot,
|
||||
export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
|
||||
titleSlot = defaultTitleSlot,
|
||||
subtitleSlot = defaultSubtitleSlot,
|
||||
descriptionSlot = defaultDescriptionSlot,
|
||||
primarySlot = defaultPrimarySlot,
|
||||
propsSlot = defaultPropsSlot,
|
||||
storiesSlot = defaultStoriesSlot,
|
||||
}) => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
@ -100,50 +113,20 @@ const DocsPage: React.FunctionComponent<DocsPageProps> = ({
|
||||
const propsTableProps = propsSlot(context);
|
||||
|
||||
const { selectedKind, storyStore } = context;
|
||||
const componentStories = (storyStore.raw() as StoryData[]).filter(
|
||||
s => s.kind === selectedKind
|
||||
);
|
||||
const [primary, ...rest] = componentStories.map((storyData, idx) =>
|
||||
storySlot(storyData, idx === 0, context)
|
||||
);
|
||||
const componentStories = storyStore.getStoriesForKind(selectedKind);
|
||||
const primary = primarySlot(componentStories, context);
|
||||
const stories = storiesSlot(componentStories, context);
|
||||
|
||||
return (
|
||||
<PureDocsPage title={title} subtitle={subtitle}>
|
||||
<Description markdown={description} />
|
||||
<DocsStory {...primary} expanded={false} />
|
||||
{primary && <DocsStory key={primary.id} {...primary} expanded={false} withToolbar />}
|
||||
{propsTableProps && <PropsTable {...propsTableProps} />}
|
||||
<StoriesHeading>Stories</StoriesHeading>
|
||||
{rest.map(story => story && <DocsStory {...story} expanded />)}
|
||||
{stories && stories.length > 0 && <StoriesHeading>Stories</StoriesHeading>}
|
||||
{stories &&
|
||||
stories.map(story => story && <DocsStory key={story.id} {...story} expanded />)}
|
||||
</PureDocsPage>
|
||||
);
|
||||
}}
|
||||
</DocsContext.Consumer>
|
||||
);
|
||||
|
||||
interface DocsPageWrapperProps {
|
||||
context: DocsContextProps;
|
||||
titleSlot?: StringSlot;
|
||||
subtitleSlot?: StringSlot;
|
||||
descriptionSlot?: StringSlot;
|
||||
propsSlot?: PropsSlot;
|
||||
storySlot?: StorySlot;
|
||||
}
|
||||
|
||||
const DocsPageWrapper: React.FunctionComponent<DocsPageWrapperProps> = ({
|
||||
context,
|
||||
titleSlot = defaultTitleSlot,
|
||||
subtitleSlot = defaultSubtitleSlot,
|
||||
descriptionSlot = defaultDescriptionSlot,
|
||||
propsSlot = defaultPropsSlot,
|
||||
storySlot = defaultStorySlot,
|
||||
}) => (
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
<DocsContainer
|
||||
context={{ ...context, mdxKind: context.selectedKind }}
|
||||
content={() => (
|
||||
<DocsPage {...{ titleSlot, subtitleSlot, descriptionSlot, storySlot, propsSlot }} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
export { DocsPageWrapper as DocsPage };
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { ReactNodeArray } from 'react';
|
||||
import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
|
||||
import { toId } from '@storybook/router';
|
||||
import { getSourceProps } from './Source';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
@ -20,7 +19,7 @@ const getPreviewProps = (
|
||||
children,
|
||||
...props
|
||||
}: PreviewProps & { children?: React.ReactNode },
|
||||
{ mdxKind, storyStore }: DocsContextProps
|
||||
{ mdxStoryNameToId, storyStore }: DocsContextProps
|
||||
): PurePreviewProps => {
|
||||
if (withSource === SourceState.NONE && !children) {
|
||||
return props;
|
||||
@ -29,7 +28,7 @@ const getPreviewProps = (
|
||||
const stories = childArray.filter(
|
||||
(c: React.ReactElement) => c.props && (c.props.id || c.props.name)
|
||||
) as React.ReactElement[];
|
||||
const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name));
|
||||
const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
|
||||
return {
|
||||
...props, // pass through columns etc.
|
||||
|
||||
@ -23,17 +23,16 @@ export const getPropsTableProps = (
|
||||
{ exclude, of }: PropsProps,
|
||||
{ parameters }: DocsContextProps
|
||||
): PropsTableProps => {
|
||||
const { component } = parameters;
|
||||
try {
|
||||
const params = parameters || {};
|
||||
const { component, framework = null } = params;
|
||||
|
||||
const target = of === CURRENT_SELECTION ? component : of;
|
||||
if (!target) {
|
||||
throw new Error(PropsTableError.NO_COMPONENT);
|
||||
}
|
||||
|
||||
const { framework = null } = parameters || {};
|
||||
const { getPropDefs = inferPropDefs(framework) } =
|
||||
(parameters && parameters.options && parameters.options.docs) || {};
|
||||
|
||||
const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
|
||||
if (!getPropDefs) {
|
||||
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
|
||||
}
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
import React from 'react';
|
||||
import { toId } from '@storybook/router';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { components as docsComponents } from '@storybook/components/html';
|
||||
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
|
||||
import { CURRENT_SELECTION } from './shared';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
const resetComponents: Record<string, React.ElementType> = {};
|
||||
Object.keys(docsComponents).forEach(key => {
|
||||
resetComponents[key] = (props: any) => React.createElement(key, props);
|
||||
});
|
||||
|
||||
interface CommonProps {
|
||||
height?: string;
|
||||
inline?: boolean;
|
||||
@ -32,12 +40,12 @@ const inferInlineStories = (framework: string): boolean => {
|
||||
|
||||
export const getStoryProps = (
|
||||
props: StoryProps,
|
||||
{ id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
|
||||
{ id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps
|
||||
): PureStoryProps => {
|
||||
const { id } = props as StoryRefProps;
|
||||
const { name } = props as StoryDefProps;
|
||||
const inputId = id === CURRENT_SELECTION ? currentId : id;
|
||||
const previewId = inputId || toId(mdxKind, name);
|
||||
const previewId = inputId || mdxStoryNameToId[name];
|
||||
|
||||
const { height, inline } = props;
|
||||
const data = storyStore.fromId(previewId);
|
||||
@ -45,7 +53,7 @@ export const getStoryProps = (
|
||||
|
||||
// prefer props, then global options, then framework-inferred values
|
||||
const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
|
||||
(parameters && parameters.options && parameters.options.docs) || {};
|
||||
(parameters && parameters.docs) || {};
|
||||
return {
|
||||
inline: typeof inline === 'boolean' ? inline : inlineStories,
|
||||
id: previewId,
|
||||
@ -59,7 +67,13 @@ const StoryContainer: React.FunctionComponent<StoryProps> = props => (
|
||||
<DocsContext.Consumer>
|
||||
{context => {
|
||||
const storyProps = getStoryProps(props, context);
|
||||
return <Story {...storyProps} />;
|
||||
return (
|
||||
<div id={storyBlockIdFromId(storyProps.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
<Story {...storyProps} />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</DocsContext.Consumer>
|
||||
);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
|
||||
|
||||
export * from './Anchor';
|
||||
export * from './Description';
|
||||
export * from './DocsContext';
|
||||
export * from './DocsPage';
|
||||
|
||||
7
addons/docs/src/frameworks/angular/config.js
vendored
7
addons/docs/src/frameworks/angular/config.js
vendored
@ -1,7 +1,10 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/angular';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/html';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { addParameters } from '@storybook/vue';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
},
|
||||
});
|
||||
|
||||
@ -53,6 +53,7 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { mdxSource: '<Button>One</Button>' };
|
||||
one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
|
||||
|
||||
@ -72,12 +73,15 @@ const componentMeta = {
|
||||
includeStories: ['one'],
|
||||
};
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = { one: 'button--one' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -117,20 +121,23 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const storybookDocsOnly = () => {
|
||||
export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
storybookDocsOnly.story = { parameters: { docsOnly: true } };
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: 'docs-only', includeStories: ['storybookDocsOnly'] };
|
||||
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -177,6 +184,7 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { mdxSource: '<Button>One</Button>' };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
@ -186,12 +194,15 @@ helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -268,12 +279,18 @@ const componentMeta = {
|
||||
includeStories: ['componentNotes', 'storyNotes'],
|
||||
};
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = {
|
||||
'component notes': 'button--component-notes',
|
||||
'story notes': 'button--story-notes',
|
||||
};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -334,6 +351,7 @@ helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
|
||||
|
||||
export const two = () => <Button>Two</Button>;
|
||||
two.story = {};
|
||||
two.story.name = 'two';
|
||||
two.story.parameters = { mdxSource: '<Button>Two</Button>' };
|
||||
|
||||
const componentMeta = {
|
||||
@ -344,12 +362,15 @@ const componentMeta = {
|
||||
includeStories: ['helloButton', 'two'],
|
||||
};
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -386,12 +407,15 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -431,16 +455,20 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
export const text = () => 'Plain text';
|
||||
text.story = {};
|
||||
text.story.name = 'text';
|
||||
text.story.parameters = { mdxSource: \\"'Plain text'\\" };
|
||||
|
||||
const componentMeta = { title: 'Text', includeStories: ['text'] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = { text: 'text--text' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -487,6 +515,7 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { mdxSource: '<Button>One</Button>' };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
@ -501,12 +530,19 @@ wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>'
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = {
|
||||
one: 'button--one',
|
||||
'hello story': 'button--hello-story',
|
||||
'w/punctuation': 'button--w-punctuation',
|
||||
};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -545,27 +581,30 @@ function MDXContent({ components, ...props }) {
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const story0 = () => {
|
||||
export const functionStory = () => {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerHTML = 'Hello Button';
|
||||
btn.addEventListener('click', action('Click'));
|
||||
return btn;
|
||||
};
|
||||
story0.story = {};
|
||||
story0.story.name = 'function';
|
||||
story0.story.parameters = {
|
||||
functionStory.story = {};
|
||||
functionStory.story.name = 'function';
|
||||
functionStory.story.parameters = {
|
||||
mdxSource:
|
||||
\\"() => {\\\\n const btn = document.createElement('button');\\\\n btn.innerHTML = 'Hello Button';\\\\n btn.addEventListener('click', action('Click'));\\\\n return btn;\\\\n}\\",
|
||||
};
|
||||
|
||||
const componentMeta = { includeStories: ['story0'] };
|
||||
const componentMeta = { includeStories: ['functionStory'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -631,12 +670,15 @@ toStorybook.story.parameters = {
|
||||
|
||||
const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -673,12 +715,15 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
@ -716,12 +761,15 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
|
||||
);
|
||||
const mdxStoryNameToId = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => (
|
||||
<DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
|
||||
),
|
||||
page: MDXContent,
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
|
||||
@ -3,6 +3,7 @@ const parser = require('@babel/parser');
|
||||
const generate = require('@babel/generator').default;
|
||||
const camelCase = require('lodash/camelCase');
|
||||
const jsStringEscape = require('js-string-escape');
|
||||
const { toId, storyNameFromExport } = require('@storybook/router/utils');
|
||||
|
||||
// Generate the MDX as is, but append named exports for every
|
||||
// story in the contents
|
||||
@ -17,17 +18,19 @@ function getAttr(elt, what) {
|
||||
return attr && attr.value;
|
||||
}
|
||||
|
||||
function getStoryFn(name, counter) {
|
||||
if (name) {
|
||||
const storyFn = camelCase(name.replace(/[^a-z0-9-]/g, '-'));
|
||||
if (storyFn.length > 1 && !RESERVED.exec(storyFn)) {
|
||||
return storyFn;
|
||||
}
|
||||
}
|
||||
return `story${counter}`;
|
||||
}
|
||||
const isReserved = name => RESERVED.exec(name);
|
||||
|
||||
function genStoryExport(ast, counter) {
|
||||
const sanitizeName = name => {
|
||||
let key = camelCase(name);
|
||||
if (isReserved(key)) {
|
||||
key = `${key}Story`;
|
||||
}
|
||||
return key;
|
||||
};
|
||||
|
||||
const getStoryKey = (name, counter) => (name ? sanitizeName(name) : `story${counter}`);
|
||||
|
||||
function genStoryExport(ast, context) {
|
||||
let storyName = getAttr(ast.openingElement, 'name');
|
||||
let storyId = getAttr(ast.openingElement, 'id');
|
||||
storyName = storyName && storyName.value;
|
||||
@ -45,7 +48,7 @@ function genStoryExport(ast, counter) {
|
||||
// console.log('genStoryExport', JSON.stringify(ast, null, 2));
|
||||
|
||||
const statements = [];
|
||||
const storyKey = getStoryFn(storyName, counter);
|
||||
const storyKey = getStoryKey(storyName, context.counter);
|
||||
|
||||
let body = ast.children.find(n => n.type !== 'JSXText');
|
||||
let storyCode = null;
|
||||
@ -72,9 +75,8 @@ function genStoryExport(ast, counter) {
|
||||
}
|
||||
statements.push(`${storyKey}.story = {};`);
|
||||
|
||||
if (storyName !== storyKey) {
|
||||
statements.push(`${storyKey}.story.name = '${storyName}';`);
|
||||
}
|
||||
// always preserve the name, since CSF exports can get modified by displayName
|
||||
statements.push(`${storyKey}.story.name = '${storyName}';`);
|
||||
|
||||
let parameters = getAttr(ast.openingElement, 'parameters');
|
||||
parameters = parameters && parameters.expression;
|
||||
@ -94,23 +96,26 @@ function genStoryExport(ast, counter) {
|
||||
statements.push(`${storyKey}.story.decorators = ${decos};`);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
context.storyNameToKey[storyName] = storyKey;
|
||||
|
||||
return {
|
||||
[storyKey]: statements.join('\n'),
|
||||
};
|
||||
}
|
||||
|
||||
function genPreviewExports(ast, counter) {
|
||||
function genPreviewExports(ast, context) {
|
||||
// console.log('genPreviewExports', JSON.stringify(ast, null, 2));
|
||||
|
||||
let localCounter = counter;
|
||||
const previewExports = {};
|
||||
for (let i = 0; i < ast.children.length; i += 1) {
|
||||
const child = ast.children[i];
|
||||
if (child.type === 'JSXElement' && child.openingElement.name.name === 'Story') {
|
||||
const storyExport = genStoryExport(child, localCounter);
|
||||
const storyExport = genStoryExport(child, context);
|
||||
if (storyExport) {
|
||||
Object.assign(previewExports, storyExport);
|
||||
localCounter += 1;
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
context.counter += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -163,12 +168,16 @@ function getExports(node, counter) {
|
||||
// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
|
||||
// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
|
||||
const wrapperJs = `
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => <DocsContainer context={{...context, mdxKind}} content={MDXContent} />;
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = WrappedMDXContent;
|
||||
componentMeta.parameters.docs = {
|
||||
container: ({ context, children }) => <DocsContainer context={{...context, mdxStoryNameToId}}>{children}</DocsContainer>,
|
||||
page: MDXContent,
|
||||
};
|
||||
`.trim();
|
||||
|
||||
// Use this rather than JSON.stringify because `Meta`'s attributes
|
||||
// are already valid code strings, so we want to insert them raw
|
||||
// rather than add an extra set of quotes
|
||||
function stringifyMeta(meta) {
|
||||
let result = '{ ';
|
||||
Object.entries(meta).forEach(([key, val]) => {
|
||||
@ -186,16 +195,18 @@ function extractExports(node, options) {
|
||||
const storyExports = [];
|
||||
const includeStories = [];
|
||||
let metaExport = null;
|
||||
let counter = 0;
|
||||
const context = {
|
||||
counter: 0,
|
||||
storyNameToKey: {},
|
||||
};
|
||||
node.children.forEach(n => {
|
||||
const exports = getExports(n, counter);
|
||||
const exports = getExports(n, context);
|
||||
if (exports) {
|
||||
const { stories, meta } = exports;
|
||||
if (stories) {
|
||||
Object.entries(stories).forEach(([key, story]) => {
|
||||
includeStories.push(key);
|
||||
storyExports.push(story);
|
||||
counter += 1;
|
||||
});
|
||||
}
|
||||
if (meta) {
|
||||
@ -208,22 +219,32 @@ function extractExports(node, options) {
|
||||
});
|
||||
if (metaExport) {
|
||||
if (!storyExports.length) {
|
||||
storyExports.push(
|
||||
'export const storybookDocsOnly = () => { throw new Error("Docs-only story"); };'
|
||||
);
|
||||
storyExports.push('storybookDocsOnly.story = { parameters: { docsOnly: true } };');
|
||||
includeStories.push('storybookDocsOnly');
|
||||
storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');
|
||||
storyExports.push('__page.story = { parameters: { docsOnly: true } };');
|
||||
includeStories.push('__page');
|
||||
}
|
||||
} else {
|
||||
metaExport = {};
|
||||
}
|
||||
metaExport.includeStories = JSON.stringify(includeStories);
|
||||
|
||||
const { title } = metaExport;
|
||||
const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce(
|
||||
(acc, [storyName, storyKey]) => {
|
||||
if (title) {
|
||||
acc[storyName] = toId(title, storyNameFromExport(storyKey));
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
const fullJsx = [
|
||||
'import { DocsContainer } from "@storybook/addon-docs/blocks";',
|
||||
defaultJsx,
|
||||
...storyExports,
|
||||
`const componentMeta = ${stringifyMeta(metaExport)};`,
|
||||
`const mdxStoryNameToId = ${JSON.stringify(mdxStoryNameToId)};`,
|
||||
wrapperJs,
|
||||
'export default componentMeta;',
|
||||
].join('\n\n');
|
||||
|
||||
1
addons/docs/src/typings.d.ts
vendored
1
addons/docs/src/typings.d.ts
vendored
@ -1,2 +1,3 @@
|
||||
declare module '@mdx-js/react';
|
||||
declare module '@storybook/addon-docs/mdx-compiler-plugin';
|
||||
declare module 'global';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,17 +18,23 @@
|
||||
"directory": "addons/events"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-api": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-api": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,14 +16,20 @@
|
||||
"directory": "addons/graphql"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.13.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,16 +16,21 @@
|
||||
"directory": "addons/info"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
|
||||
@ -26,6 +26,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
maxPropObjectKeys={3}
|
||||
maxPropStringLength={50}
|
||||
maxPropsIntoLine={3}
|
||||
propTableCompare={[Function]}
|
||||
propTables={Array []}
|
||||
propTablesExclude={Array []}
|
||||
showHeader={true}
|
||||
@ -160,6 +161,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
maxPropObjectKeys={3}
|
||||
maxPropStringLength={50}
|
||||
maxPropsIntoLine={3}
|
||||
propTableCompare={[Function]}
|
||||
propTables={Array []}
|
||||
propTablesExclude={Array []}
|
||||
showHeader={true}
|
||||
@ -292,6 +294,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
|
||||
maxPropObjectKeys={3}
|
||||
maxPropStringLength={50}
|
||||
maxPropsIntoLine={3}
|
||||
propTableCompare={[Function]}
|
||||
propTables={null}
|
||||
propTablesExclude={Array []}
|
||||
showHeader={true}
|
||||
@ -769,6 +772,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
background: #FFFFFF;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
border-left: 1px solid rgba(0,0,0,.1);
|
||||
@ -820,6 +824,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
maxPropObjectKeys={3}
|
||||
maxPropStringLength={50}
|
||||
maxPropsIntoLine={3}
|
||||
propTableCompare={[Function]}
|
||||
propTables={null}
|
||||
propTablesExclude={Array []}
|
||||
showHeader={true}
|
||||
@ -1360,8 +1365,8 @@ exports[`addon Info should render component description if story kind matches co
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1imo1gr": true,
|
||||
"1maezg8": true,
|
||||
"1si67pu": true,
|
||||
"4zr3vl": true,
|
||||
@ -2077,7 +2082,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -2575,7 +2580,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -3144,8 +3149,8 @@ exports[`addon Info should render component description if story kind matches co
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1imo1gr": true,
|
||||
"1maezg8": true,
|
||||
"1si67pu": true,
|
||||
"4zr3vl": true,
|
||||
@ -3861,7 +3866,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -4359,7 +4364,7 @@ exports[`addon Info should render component description if story kind matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -5326,6 +5331,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
background: #FFFFFF;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
border-left: 1px solid rgba(0,0,0,.1);
|
||||
@ -5377,6 +5383,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
maxPropObjectKeys={3}
|
||||
maxPropStringLength={50}
|
||||
maxPropsIntoLine={3}
|
||||
propTableCompare={[Function]}
|
||||
propTables={null}
|
||||
propTablesExclude={Array []}
|
||||
showHeader={true}
|
||||
@ -5917,8 +5924,8 @@ exports[`addon Info should render component description if story name matches co
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1imo1gr": true,
|
||||
"1maezg8": true,
|
||||
"1si67pu": true,
|
||||
"4zr3vl": true,
|
||||
@ -6862,7 +6869,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -7360,7 +7367,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -7929,8 +7936,8 @@ exports[`addon Info should render component description if story name matches co
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1imo1gr": true,
|
||||
"1maezg8": true,
|
||||
"1si67pu": true,
|
||||
"4zr3vl": true,
|
||||
@ -8874,7 +8881,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -9372,7 +9379,7 @@ exports[`addon Info should render component description if story name matches co
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
|
||||
@ -302,6 +302,7 @@ class Story extends Component {
|
||||
const {
|
||||
children,
|
||||
propTablesExclude,
|
||||
propTableCompare,
|
||||
maxPropObjectKeys,
|
||||
maxPropArrayLength,
|
||||
maxPropStringLength,
|
||||
@ -349,7 +350,7 @@ class Story extends Component {
|
||||
(propTables.length > 0 && // if propTables is set and has items in it
|
||||
!propTables.includes(innerChildren.type)) || // ignore types that are missing from propTables
|
||||
(Array.isArray(propTablesExclude) && // also ignore excluded types
|
||||
~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
|
||||
propTablesExclude.some(Comp => propTableCompare(innerChildren, Comp)))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@ -409,6 +410,7 @@ Story.propTypes = {
|
||||
info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||
propTables: PropTypes.arrayOf(PropTypes.func),
|
||||
propTablesExclude: PropTypes.arrayOf(PropTypes.func),
|
||||
propTableCompare: PropTypes.func.isRequired,
|
||||
showInline: PropTypes.bool,
|
||||
showHeader: PropTypes.bool,
|
||||
showSource: PropTypes.bool,
|
||||
|
||||
@ -13,6 +13,12 @@ const defaultOptions = {
|
||||
header: true,
|
||||
source: true,
|
||||
propTables: [],
|
||||
propTableCompare: (element, Component) =>
|
||||
// https://github.com/gaearon/react-hot-loader#checking-element-types
|
||||
typeof reactHotLoaderGlobal === 'undefined'
|
||||
? element.type === Component
|
||||
: // eslint-disable-next-line no-undef
|
||||
reactHotLoaderGlobal.areComponentsEqual(element.type, Component),
|
||||
TableComponent: PropTable,
|
||||
maxPropsIntoLine: 3,
|
||||
maxPropObjectKeys: 3,
|
||||
@ -73,6 +79,7 @@ function addInfo(storyFn, context, infoOptions) {
|
||||
: s => nestedObjectAssign({}, s, options.styles),
|
||||
propTables: options.propTables,
|
||||
propTablesExclude: options.propTablesExclude,
|
||||
propTableCompare: options.propTableCompare,
|
||||
PropTable: makeTableComponent(options.TableComponent),
|
||||
components,
|
||||
maxPropObjectKeys: options.maxPropObjectKeys,
|
||||
|
||||
@ -26,14 +26,14 @@ When running **Jest**, be sure to save the results in a json file:
|
||||
|
||||
```js
|
||||
"scripts": {
|
||||
"test:generate-output": "jest --json --outputFile=jest-test-results.json"
|
||||
"test:generate-output": "jest --json --outputFile=.jest-test-results.json"
|
||||
}
|
||||
```
|
||||
|
||||
You may want to add it the result file to `.gitignore`, since it's a generated file:
|
||||
|
||||
```
|
||||
jest-test-results.json
|
||||
.jest-test-results.json
|
||||
```
|
||||
|
||||
But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,17 +22,23 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { styled, withTheme } from '@storybook/theming';
|
||||
import { styled, themes, convert } from '@storybook/theming';
|
||||
import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
|
||||
import { SizeMe } from 'react-sizeme';
|
||||
import Result from './Result';
|
||||
import provideJestResult, { Test } from '../hoc/provideJestResult';
|
||||
|
||||
const StatusTypes = {
|
||||
PASSED_TYPE: 'passed',
|
||||
FAILED_TYPE: 'failed',
|
||||
PENDING_TYPE: 'pending',
|
||||
TODO_TYPE: 'todo',
|
||||
};
|
||||
|
||||
const List = styled.ul({
|
||||
listStyle: 'none',
|
||||
fontSize: 14,
|
||||
@ -20,6 +27,9 @@ const Item = styled.li({
|
||||
const ProgressWrapper = styled.div({
|
||||
position: 'relative',
|
||||
height: '10px',
|
||||
width: '30px',
|
||||
display: 'flex',
|
||||
top: '-2px',
|
||||
});
|
||||
|
||||
const SuiteHead = styled.div({
|
||||
@ -27,19 +37,19 @@ const SuiteHead = styled.div({
|
||||
alignItems: 'baseline',
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
right: '50px',
|
||||
right: '20px',
|
||||
marginTop: '15px',
|
||||
});
|
||||
|
||||
const SuiteTotals = styled(({ successNumber, failedNumber, result, className, width }) => (
|
||||
const SuiteTotals = styled(({ result, className, width }) => (
|
||||
<div className={className}>
|
||||
<Fragment>
|
||||
{width > 325 ? (
|
||||
{width > 325 && result.assertionResults ? (
|
||||
<div>
|
||||
{result.assertionResults.length} {result.assertionResults.length > 1 ? `tests` : `test`}
|
||||
</div>
|
||||
) : null}
|
||||
{width > 280 ? (
|
||||
{width > 280 && result.endTime && result.startTime ? (
|
||||
<div>
|
||||
{result.endTime - result.startTime}
|
||||
ms
|
||||
@ -58,38 +68,53 @@ const SuiteTotals = styled(({ successNumber, failedNumber, result, className, wi
|
||||
},
|
||||
}));
|
||||
|
||||
const SuiteProgress = styled(({ successNumber, result, className }) => (
|
||||
<div className={className} role="progressbar">
|
||||
<span style={{ width: `${(successNumber / result.assertionResults.length) * 100}%` }} />
|
||||
</div>
|
||||
))(({ theme }) => ({
|
||||
width: '30px',
|
||||
backgroundColor: theme.color.negative,
|
||||
height: '6px',
|
||||
top: '3px',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
appearance: 'none',
|
||||
|
||||
'& > span': {
|
||||
backgroundColor: theme.color.positive,
|
||||
bottom: 0,
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
},
|
||||
}));
|
||||
const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
|
||||
({ theme, color, progressPercent }) => ({
|
||||
height: '6px',
|
||||
top: '3px',
|
||||
width: `${progressPercent}%`,
|
||||
backgroundColor: color,
|
||||
})
|
||||
);
|
||||
|
||||
interface ContentProps {
|
||||
tests: Test[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const getTestsByTypeMap = (result: any) => {
|
||||
const testsByType: Map<string, any> = new Map();
|
||||
result.assertionResults.forEach((assertion: any) => {
|
||||
testsByType.set(
|
||||
assertion.status,
|
||||
testsByType.get(assertion.status)
|
||||
? testsByType.get(assertion.status).concat(assertion)
|
||||
: [assertion]
|
||||
);
|
||||
});
|
||||
return testsByType;
|
||||
};
|
||||
|
||||
const getColorByType = (type: string) => {
|
||||
// using switch to allow for new types to be added
|
||||
switch (type) {
|
||||
case StatusTypes.PASSED_TYPE:
|
||||
return convert(themes.normal).color.positive;
|
||||
case StatusTypes.FAILED_TYPE:
|
||||
return convert(themes.normal).color.negative;
|
||||
case StatusTypes.PENDING_TYPE:
|
||||
return convert(themes.normal).color.warning;
|
||||
case StatusTypes.TODO_TYPE:
|
||||
return convert(themes.normal).color.purple;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const Content = styled(({ tests, className }: ContentProps) => (
|
||||
<div className={className}>
|
||||
{tests.map(({ name, result }) => {
|
||||
if (!result) {
|
||||
if (!result || !result.assertionResults) {
|
||||
return (
|
||||
<Placeholder key={name}>
|
||||
This story has tests configured, but no file was found
|
||||
@ -97,10 +122,9 @@ const Content = styled(({ tests, className }: ContentProps) => (
|
||||
);
|
||||
}
|
||||
|
||||
const successNumber = result.assertionResults.filter(({ status }) => status === 'passed')
|
||||
.length;
|
||||
const failedNumber = result.assertionResults.length - successNumber;
|
||||
const passingRate = ((successNumber / result.assertionResults.length) * 100).toFixed(2);
|
||||
const testsByType: Map<string, any> = getTestsByTypeMap(result);
|
||||
const entries: any = testsByType.entries();
|
||||
const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
|
||||
|
||||
return (
|
||||
<SizeMe refreshMode="debounce" key={name}>
|
||||
@ -109,34 +133,119 @@ const Content = styled(({ tests, className }: ContentProps) => (
|
||||
return (
|
||||
<section>
|
||||
<SuiteHead>
|
||||
<SuiteTotals {...{ successNumber, failedNumber, result, passingRate, width }} />
|
||||
<SuiteTotals {...{ result, width }} />
|
||||
{width > 240 ? (
|
||||
<ProgressWrapper>
|
||||
<SuiteProgress {...{ successNumber, failedNumber, result }} />
|
||||
{sortedTestsByCount.map((entry: any) => {
|
||||
return (
|
||||
<SuiteProgressPortion
|
||||
key={`progress-portion-${entry[0]}`}
|
||||
color={getColorByType(entry[0])}
|
||||
progressPercent={
|
||||
entry[1]
|
||||
? (entry[1].length / result.assertionResults.length) * 100
|
||||
: 0
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ProgressWrapper>
|
||||
) : null}
|
||||
</SuiteHead>
|
||||
<TabsState initial="failing-tests" backgroundColor="rgba(0,0,0,.05)">
|
||||
<div id="failing-tests" title={`${failedNumber} Failed`} color="#FF4400">
|
||||
<TabsState
|
||||
initial="failing-tests"
|
||||
backgroundColor={convert(themes.normal).background.hoverable}
|
||||
>
|
||||
<div
|
||||
id="failing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.FAILED_TYPE)
|
||||
? testsByType.get(StatusTypes.FAILED_TYPE).length
|
||||
: 0
|
||||
} Failed`}
|
||||
color={getColorByType(StatusTypes.FAILED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{result.assertionResults.map(res => {
|
||||
return res.status === 'failed' ? (
|
||||
{testsByType.get(StatusTypes.FAILED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
) : null;
|
||||
})}
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.FAILED_TYPE}`}>
|
||||
This story has no failing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div id="passing-tests" title={`${successNumber} Passed`} color="#66BF3C">
|
||||
<div
|
||||
id="passing-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PASSED_TYPE)
|
||||
? testsByType.get(StatusTypes.PASSED_TYPE).length
|
||||
: 0
|
||||
} Passed`}
|
||||
color={getColorByType(StatusTypes.PASSED_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{result.assertionResults.map(res => {
|
||||
return res.status === 'passed' ? (
|
||||
{testsByType.get(StatusTypes.PASSED_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PASSED_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
) : null;
|
||||
})}
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PASSED_TYPE}`}>
|
||||
This story has no passing tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="pending-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.PENDING_TYPE)
|
||||
? testsByType.get(StatusTypes.PENDING_TYPE).length
|
||||
: 0
|
||||
} Pending`}
|
||||
color={getColorByType(StatusTypes.PENDING_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.PENDING_TYPE) ? (
|
||||
testsByType.get(StatusTypes.PENDING_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.PENDING_TYPE}`}>
|
||||
This story has no pending tests.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
id="todo-tests"
|
||||
title={`${
|
||||
testsByType.get(StatusTypes.TODO_TYPE)
|
||||
? testsByType.get(StatusTypes.TODO_TYPE).length
|
||||
: 0
|
||||
} Todo`}
|
||||
color={getColorByType(StatusTypes.TODO_TYPE)}
|
||||
>
|
||||
<List>
|
||||
{testsByType.get(StatusTypes.TODO_TYPE) ? (
|
||||
testsByType.get(StatusTypes.TODO_TYPE).map((res: any) => (
|
||||
<Item key={res.fullName || res.title}>
|
||||
<Result {...res} />
|
||||
</Item>
|
||||
))
|
||||
) : (
|
||||
<Placeholder key={`no-tests-${StatusTypes.TODO_TYPE}`}>
|
||||
This story has no tests todo.
|
||||
</Placeholder>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
</TabsState>
|
||||
@ -151,8 +260,6 @@ const Content = styled(({ tests, className }: ContentProps) => (
|
||||
flex: '1 1 0%',
|
||||
});
|
||||
|
||||
const ContentWithTheme = withTheme(Content);
|
||||
|
||||
interface PanelProps {
|
||||
tests: null | Test[];
|
||||
}
|
||||
@ -160,7 +267,7 @@ interface PanelProps {
|
||||
const Panel = ({ tests }: PanelProps) => (
|
||||
<ScrollArea vertical>
|
||||
{tests ? (
|
||||
<ContentWithTheme tests={tests} />
|
||||
<Content tests={tests} />
|
||||
) : (
|
||||
<Placeholder>
|
||||
<Fragment>No tests found</Fragment>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component, Fragment, useState } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { styled, themes, convert } from '@storybook/theming';
|
||||
import { Icons } from '@storybook/components';
|
||||
import Message from './Message';
|
||||
|
||||
@ -70,7 +70,7 @@ export function Result(props: ResultProps) {
|
||||
<Icon
|
||||
icon="chevrondown"
|
||||
size={10}
|
||||
color="#9DA5AB"
|
||||
color={convert(themes.normal).color.mediumdark}
|
||||
style={{
|
||||
transform: `rotate(${isOpen ? 0 : -90}deg)`,
|
||||
}}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,18 +16,32 @@
|
||||
"directory": "addons/knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"angular.js",
|
||||
"html.js",
|
||||
"marko.js",
|
||||
"mithril.js",
|
||||
"polymer.js",
|
||||
"react.js",
|
||||
"vue.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-api": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-api": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -40,16 +54,15 @@
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-select": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^2.0.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^2.0.19"
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ expectKnobOfType<string>(
|
||||
},
|
||||
'none'
|
||||
),
|
||||
select('select with string array', ['yes', 'no'], 'yes'),
|
||||
select<string>('select with string array', ['yes', 'no'], 'yes'),
|
||||
select('select with string literal array', stringLiteralArray, stringLiteralArray[0]),
|
||||
select('select with readonly array', ['red', 'blue'] as const, 'red'),
|
||||
select<ButtonVariant>('select with string enum options', ButtonVariant, ButtonVariant.primary)
|
||||
@ -123,7 +123,7 @@ expectKnobOfType<number>(
|
||||
{ 'type a': SomeEnum.Type1, 'type b': SomeEnum.Type2 },
|
||||
SomeEnum.Type2
|
||||
),
|
||||
select('select with number array', [1, 2, 3, 4], 1),
|
||||
select<number>('select with number array', [1, 2, 3, 4], 1),
|
||||
select('select with readonly number array', [1, 2] as const, 1)
|
||||
);
|
||||
|
||||
@ -131,6 +131,60 @@ expectKnobOfType<number | null>(
|
||||
select('select with null option', { a: 1, b: null }, null, groupId)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[]>(
|
||||
select(
|
||||
'select with string and string array options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: 'transparent',
|
||||
},
|
||||
'red'
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number | number[]>(
|
||||
select(
|
||||
'select with number and number array options',
|
||||
{
|
||||
Red: 1,
|
||||
Blue: 2,
|
||||
Yellow: 3,
|
||||
Rainbow: [4, 5, 6],
|
||||
None: 7,
|
||||
},
|
||||
7
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[] | null>(
|
||||
select(
|
||||
'select with string, string array, and null options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: null,
|
||||
},
|
||||
null
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number[]>(
|
||||
select(
|
||||
'select with number array options',
|
||||
{
|
||||
ones: [1],
|
||||
twos: [2, 2],
|
||||
threes: [3, 3, 3],
|
||||
},
|
||||
[1]
|
||||
)
|
||||
);
|
||||
|
||||
/** Object knob */
|
||||
|
||||
expectKnobOfType(
|
||||
@ -163,6 +217,68 @@ expectKnobOfType(
|
||||
options('options with group', {}, '', { display: 'check' })
|
||||
);
|
||||
|
||||
expectKnobOfType<number | null>(
|
||||
options('select with null option', { a: 1, b: null }, null, { display: 'check' })
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[]>(
|
||||
options(
|
||||
'options with string and string array options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: 'transparent',
|
||||
},
|
||||
'red',
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number | number[]>(
|
||||
options(
|
||||
'select with number and number array options',
|
||||
{
|
||||
Red: 1,
|
||||
Blue: 2,
|
||||
Yellow: 3,
|
||||
Rainbow: [4, 5, 6],
|
||||
None: 7,
|
||||
},
|
||||
7,
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[] | null>(
|
||||
options(
|
||||
'select with string, string array, and null options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: null,
|
||||
},
|
||||
null,
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number[]>(
|
||||
options(
|
||||
'select with number array options',
|
||||
{
|
||||
ones: [1],
|
||||
twos: [2, 2],
|
||||
threes: [3, 3, 3],
|
||||
},
|
||||
[1],
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
/** Array knob */
|
||||
|
||||
const arrayReadonly = array('array as readonly', ['hi', 'there'] as const);
|
||||
|
||||
@ -9,7 +9,14 @@ import CheckboxesType from './Checkboxes';
|
||||
|
||||
// TODO: Apply the Storybook theme to react-select
|
||||
|
||||
export type OptionsTypeKnobSingleValue = string | number | null | undefined;
|
||||
export type OptionsTypeKnobSingleValue =
|
||||
| string
|
||||
| number
|
||||
| null
|
||||
| undefined
|
||||
| string[]
|
||||
| number[]
|
||||
| (string | number)[];
|
||||
|
||||
export type OptionsTypeKnobValue<
|
||||
T extends OptionsTypeKnobSingleValue = OptionsTypeKnobSingleValue
|
||||
@ -24,7 +31,7 @@ export type OptionsKnobOptionsDisplay =
|
||||
| 'multi-select';
|
||||
|
||||
export interface OptionsKnobOptions {
|
||||
display?: OptionsKnobOptionsDisplay;
|
||||
display: OptionsKnobOptionsDisplay;
|
||||
}
|
||||
|
||||
export interface OptionsTypeKnob<T extends OptionsTypeKnobValue> extends KnobControlConfig<T> {
|
||||
|
||||
@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
|
||||
import { Form } from '@storybook/components';
|
||||
import { KnobControlConfig, KnobControlProps } from './types';
|
||||
|
||||
export type SelectTypeKnobValue = string | number | null | undefined;
|
||||
export type SelectTypeKnobValue = string | number | null | undefined | PropertyKey[];
|
||||
|
||||
export type SelectTypeOptionsProp<T extends SelectTypeKnobValue = SelectTypeKnobValue> =
|
||||
| Record<string | number, T>
|
||||
| Record<Exclude<T, null | undefined>, T[keyof T]>
|
||||
| Exclude<T, null | undefined>[]
|
||||
| readonly Exclude<T, null | undefined>[];
|
||||
| Record<PropertyKey, T>
|
||||
| Record<Extract<T, PropertyKey>, T[keyof T]>
|
||||
| Extract<T, PropertyKey>[]
|
||||
| readonly Extract<T, PropertyKey>[];
|
||||
|
||||
export interface SelectTypeKnob<T extends SelectTypeKnobValue = SelectTypeKnobValue>
|
||||
extends KnobControlConfig<T> {
|
||||
@ -31,8 +31,8 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
|
||||
} = ({ knob, onChange }) => {
|
||||
const { options } = knob;
|
||||
const entries = Array.isArray(options)
|
||||
? options.reduce<Record<string, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
|
||||
: (options as Record<string, SelectTypeKnobValue>);
|
||||
? options.reduce<Record<PropertyKey, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
|
||||
: (options as Record<PropertyKey, SelectTypeKnobValue>);
|
||||
|
||||
const selectedKey = Object.keys(entries).find(k => {
|
||||
if (Array.isArray(knob.value)) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,15 +16,22 @@
|
||||
"directory": "addons/links"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"react.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/router": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/router": "5.3.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -4,7 +4,9 @@ import EVENTS, { ADDON_ID } from './constants';
|
||||
|
||||
export const register = () => {
|
||||
addons.register(ADDON_ID, api => {
|
||||
api.on(EVENTS.REQUEST, ({ kind, name }) => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
channel.on(EVENTS.REQUEST, ({ kind, name }) => {
|
||||
const id = api.storyId(kind, name);
|
||||
api.emit(EVENTS.RECEIVE, id);
|
||||
});
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
import { document, HTMLElement } from 'global';
|
||||
import qs from 'qs';
|
||||
import addons from '@storybook/addons';
|
||||
import { SELECT_STORY, STORY_CHANGED } from '@storybook/core-events';
|
||||
import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
|
||||
import { toId } from '@storybook/router/utils';
|
||||
|
||||
interface Params {
|
||||
interface ParamsId {
|
||||
storyId: string;
|
||||
}
|
||||
interface ParamsCombo {
|
||||
kind: string;
|
||||
story: string;
|
||||
}
|
||||
|
||||
export const navigate = (params: Params) => addons.getChannel().emit(SELECT_STORY, params);
|
||||
export const navigate = (params: ParamsId | ParamsCombo) =>
|
||||
addons.getChannel().emit(SELECT_STORY, params);
|
||||
|
||||
const generateUrl = (id: string) => {
|
||||
const { location } = document;
|
||||
@ -25,6 +29,7 @@ const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) =>
|
||||
|
||||
export const linkTo = (kind: string, story?: string) => (...args: string[]) => {
|
||||
const resolver = valueOrCall(args);
|
||||
|
||||
navigate({
|
||||
kind: resolver(kind),
|
||||
story: resolver(story),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,19 +17,26 @@
|
||||
"directory": "addons/notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js",
|
||||
"register-panel.js"
|
||||
],
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/router": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/router": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
|
||||
@ -7,7 +7,7 @@ import { styled } from '@storybook/theming';
|
||||
import {
|
||||
SyntaxHighlighter as SyntaxHighlighterBase,
|
||||
Placeholder,
|
||||
DocumentFormatting,
|
||||
DocumentWrapper,
|
||||
Link,
|
||||
TabWrapper,
|
||||
TabsState,
|
||||
@ -173,9 +173,9 @@ const NotesPanel = ({ active }: Props) => {
|
||||
|
||||
return (
|
||||
<Panel className="addon-notes-container">
|
||||
<DocumentFormatting>
|
||||
<DocumentWrapper>
|
||||
<Markdown options={options}>{formatter(md)}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</DocumentWrapper>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
@ -188,9 +188,9 @@ const NotesPanel = ({ active }: Props) => {
|
||||
render: ({ active: isActive }) => (
|
||||
<TabWrapper key={title} active={isActive}>
|
||||
<Panel>
|
||||
<DocumentFormatting>
|
||||
<DocumentWrapper>
|
||||
<Markdown options={options}>{formatter(docs)}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</DocumentWrapper>
|
||||
</Panel>
|
||||
</TabWrapper>
|
||||
),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -14,18 +14,24 @@
|
||||
"url": "https://github.com/storybookjs/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.2.0-beta.28"
|
||||
"@storybook/addon-actions": "5.3.0-alpha.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,13 +18,18 @@
|
||||
"directory": "addons/ondevice-backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -15,14 +15,19 @@
|
||||
"directory": "addons/ondevice-knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -2,6 +2,8 @@ import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import Panel from './panel';
|
||||
|
||||
export { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
export function register() {
|
||||
addons.register('RNKNOBS', () => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"storybook",
|
||||
"react-native"
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -14,14 +14,19 @@
|
||||
"directory": "addons/ondevice-notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,13 +16,19 @@
|
||||
"directory": "addons/options"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"query"
|
||||
"query",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"bugs": {
|
||||
@ -17,18 +17,23 @@
|
||||
"directory": "addons/addon-queryparams"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/api": "5.2.0-beta.28",
|
||||
"@storybook/client-logger": "5.2.0-beta.28",
|
||||
"@storybook/components": "5.2.0-beta.28",
|
||||
"@storybook/core-events": "5.2.0-beta.28",
|
||||
"@storybook/theming": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"@storybook/api": "5.3.0-alpha.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.0",
|
||||
"@storybook/components": "5.3.0-alpha.0",
|
||||
"@storybook/core-events": "5.3.0-alpha.0",
|
||||
"@storybook/theming": "5.3.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,8 +16,12 @@
|
||||
"directory": "addons/storyshots/storyshots-core"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook",
|
||||
"example": "jest storyshot.test",
|
||||
@ -25,7 +29,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.28",
|
||||
"@storybook/addons": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -166,6 +166,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
@ -272,6 +273,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
@ -139,6 +139,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
@ -233,6 +234,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
@ -43,6 +43,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
@ -137,6 +138,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
@ -43,6 +43,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
@ -137,6 +138,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
"textDecoration": "none",
|
||||
}
|
||||
}
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.2.0-beta.28",
|
||||
"version": "5.3.0-alpha.0",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,25 +16,29 @@
|
||||
"directory": "addons/storyshots/storyshots-puppeteer"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.2.0-beta.28",
|
||||
"@storybook/router": "5.2.0-beta.28",
|
||||
"@storybook/node-logger": "5.3.0-alpha.0",
|
||||
"@storybook/router": "5.3.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.2.0-beta.13",
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
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