mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 05:41:06 +08:00
Merge branch 'next' into add/loglevel
# Conflicts: # lib/cli/src/extract.ts # lib/client-logger/src/index.ts # yarn.lock
This commit is contained in:
Norbert de Langen
commit
f3906aadc0
@ -43,7 +43,7 @@ module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
test: './examples/vue-kitchen-sink',
|
||||
presets: ['babel-preset-vue'],
|
||||
presets: ['@vue/babel-preset-jsx'],
|
||||
env: {
|
||||
test: withTests,
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
version: 2.1
|
||||
|
||||
|
||||
aliases:
|
||||
- &defaults
|
||||
working_directory: /tmp/storybook
|
||||
@ -15,6 +15,7 @@ jobs:
|
||||
name: Restore core dependencies cache
|
||||
keys:
|
||||
- core-dependencies-v5-{{ checksum "yarn.lock" }}
|
||||
- core-dependencies-v5-
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install
|
||||
@ -25,9 +26,7 @@ jobs:
|
||||
name: Cache core dependencies
|
||||
key: core-dependencies-v5-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache
|
||||
- node_modules
|
||||
- /root/.cache
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
@ -56,7 +55,7 @@ jobs:
|
||||
- lib
|
||||
chromatic:
|
||||
<<: *defaults
|
||||
parallelism: 10
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -78,7 +77,7 @@ jobs:
|
||||
yarn packtracker
|
||||
examples:
|
||||
<<: *defaults
|
||||
parallelism: 10
|
||||
parallelism: 11
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -91,26 +90,89 @@ jobs:
|
||||
root: .
|
||||
paths:
|
||||
- built-storybooks
|
||||
publish:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: running local registry
|
||||
command: yarn local-registry --publish
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- .verdaccio-cache
|
||||
examples-v2:
|
||||
docker:
|
||||
- image: cypress/included:4.5.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
working_directory: /tmp/storybook
|
||||
parallelism: 10
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: set registry
|
||||
command: yarn config set registry http://localhost:6000/
|
||||
- run:
|
||||
name: test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-yarn-2:
|
||||
docker:
|
||||
- image: cypress/included:4.5.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
working_directory: /tmp/storybook
|
||||
# parallelism: 10
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: set registry
|
||||
command: yarn config set registry http://localhost:6000/
|
||||
- run:
|
||||
name: test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework yarn2Cra
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
e2e:
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cypress/base:8
|
||||
- image: cypress/included:4.5.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: install cypress
|
||||
command: yarn cypress install
|
||||
- save_cache:
|
||||
name: Cache core dependencies
|
||||
key: core-dependencies-v5-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache
|
||||
- node_modules
|
||||
- /root/.cache
|
||||
- run:
|
||||
name: running example
|
||||
command: yarn serve-storybooks
|
||||
@ -120,7 +182,7 @@ jobs:
|
||||
command: yarn await-serve-storybooks
|
||||
- run:
|
||||
name: cypress run
|
||||
command: yarn cypress run
|
||||
command: yarn test:e2e
|
||||
|
||||
smoke-tests:
|
||||
<<: *defaults
|
||||
@ -206,10 +268,6 @@ jobs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: Restore docs dependencies cache
|
||||
keys:
|
||||
- docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: |
|
||||
@ -220,11 +278,6 @@ jobs:
|
||||
command: |
|
||||
cd docs
|
||||
yarn build
|
||||
- save_cache:
|
||||
name: Cache docs dependencies
|
||||
key: docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache
|
||||
lint:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -256,6 +309,7 @@ jobs:
|
||||
- run:
|
||||
name: Upload coverage
|
||||
command: yarn coverage
|
||||
|
||||
workflows:
|
||||
test:
|
||||
jobs:
|
||||
@ -287,6 +341,15 @@ workflows:
|
||||
- chromatic:
|
||||
requires:
|
||||
- examples
|
||||
- publish:
|
||||
requires:
|
||||
- build
|
||||
- examples-v2:
|
||||
requires:
|
||||
- publish
|
||||
- examples-v2-yarn-2:
|
||||
requires:
|
||||
- publish
|
||||
deploy:
|
||||
jobs:
|
||||
- docs
|
||||
|
||||
@ -5,6 +5,7 @@ module.exports = {
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/**',
|
||||
'scripts/**',
|
||||
'**/__testfixtures__/**',
|
||||
'**/*.test.*',
|
||||
'**/*.stories.*',
|
||||
@ -26,6 +27,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
{ files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
|
||||
{ files: 'cypress/**', rules: { 'jest/expect-expect': 'off' } },
|
||||
{
|
||||
files: ['**/*.stories.*'],
|
||||
rules: {
|
||||
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
@ -2,8 +2,6 @@ node_modules
|
||||
*.log
|
||||
.idea
|
||||
*.iml
|
||||
.vscode/*
|
||||
!.vscode/launch.json
|
||||
*.sw*
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
@ -11,7 +9,6 @@ ts3.5
|
||||
.tern-port
|
||||
*.DS_Store
|
||||
.cache
|
||||
junit.xml
|
||||
coverage/
|
||||
*.lerna_backup
|
||||
build
|
||||
@ -27,13 +24,11 @@ integration/__image_snapshots__/__diff_output__
|
||||
/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
|
||||
lib/*.jar
|
||||
lib/**/dll
|
||||
.expo/packager-info.json
|
||||
scripts/storage
|
||||
htpasswd
|
||||
/false
|
||||
storybook-out
|
||||
/addons/docs/common/config-*
|
||||
built-storybooks
|
||||
cypress/videos
|
||||
cypress/screenshots
|
||||
examples/ember-cli/ember-output
|
||||
.verdaccio-cache
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"deepscan.enable": true
|
||||
}
|
||||
225
CHANGELOG.md
225
CHANGELOG.md
@ -1,3 +1,228 @@
|
||||
## 6.0.0-beta.14 (May 25, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- CSF: Hoist story annotation object ([#10907](https://github.com/storybookjs/storybook/pull/10907))
|
||||
- Vue: Remove babel-preset-vue ([#10909](https://github.com/storybookjs/storybook/pull/10909))
|
||||
|
||||
### Features
|
||||
|
||||
- Angular: Support `workspace.json` in nx workspace ([#10881](https://github.com/storybookjs/storybook/pull/10881))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix single item width in Preview block ([#10877](https://github.com/storybookjs/storybook/pull/10877))
|
||||
- UI: Center toolbar icon buttons ([#10897](https://github.com/storybookjs/storybook/pull/10897))
|
||||
- Core: Fix double rendering on startup ([#10892](https://github.com/storybookjs/storybook/pull/10892))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Use dedicated loader for es6 modules ([#10783](https://github.com/storybookjs/storybook/pull/10783))
|
||||
- Core: Fix yarn test command on windows ([#10904](https://github.com/storybookjs/storybook/pull/10904))
|
||||
|
||||
## 5.3.19 (May 24, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix search stories ([#10539](https://github.com/storybookjs/storybook/pull/10539))
|
||||
|
||||
### Security
|
||||
|
||||
- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
|
||||
|
||||
## 6.0.0-beta.13 (May 23, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix ts/tsx resolution in the manager ([#10886](https://github.com/storybookjs/storybook/pull/10886))
|
||||
- Core: Fix typo in projectRoot node_modules detection ([#10848](https://github.com/storybookjs/storybook/pull/10848))
|
||||
- Addon-docs: Fix story inline rendering ([#10875](https://github.com/storybookjs/storybook/pull/10875))
|
||||
- Core: Fix CRA filter for built-in webpack settings ([#10861](https://github.com/storybookjs/storybook/pull/10861))
|
||||
- Addon-docs: Fix react forwardRefs with destructured props ([#10864](https://github.com/storybookjs/storybook/pull/10864))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- React: Upgrade preset-create-react-app in examples ([#10867](https://github.com/storybookjs/storybook/pull/10867))
|
||||
- Core: Close server when e2e test failed ([#10868](https://github.com/storybookjs/storybook/pull/10868))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade markdown-to-jsx to 6.11.4 ([#10873](https://github.com/storybookjs/storybook/pull/10873))
|
||||
|
||||
## 6.0.0-beta.12 (May 21, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Core: Zero-config TypeScript loading ([#10813](https://github.com/storybookjs/storybook/pull/10813))
|
||||
|
||||
## 6.0.0-beta.11 (May 21, 2020)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 6.0.0-beta.10 (May 21, 2020)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 6.0.0-beta.9 (May 21, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Avoid full refresh when on some tab changes ([#10838](https://github.com/storybookjs/storybook/pull/10838))
|
||||
- Composition: Fix refs not authenticating ([#10819](https://github.com/storybookjs/storybook/pull/10819))
|
||||
- Core: Fix global args initial state for addon-toolbars ([#10833](https://github.com/storybookjs/storybook/pull/10833))
|
||||
- Addon-a11y: Add deprecated withA11y ([#10814](https://github.com/storybookjs/storybook/pull/10814))
|
||||
- Core: Transpile minimum node_modules ([#10725](https://github.com/storybookjs/storybook/pull/10725))
|
||||
- UI: Change default view to Canvas on mobile ([#10818](https://github.com/storybookjs/storybook/pull/10818))
|
||||
- Docs: Improve Preview zoom handling ([#10801](https://github.com/storybookjs/storybook/pull/10801))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CI: example overhaul clean ([#10702](https://github.com/storybookjs/storybook/pull/10702))
|
||||
- CLI: Migrate CLI to TypeScript ([#10802](https://github.com/storybookjs/storybook/pull/10802))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade and add some missing dependencies in core, router, api ([#10825](https://github.com/storybookjs/storybook/pull/10825))
|
||||
|
||||
## 6.0.0-beta.8 (May 17, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-toolbars: Show tool icons for all viewModes ([#10810](https://github.com/storybookjs/storybook/pull/10810))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Eval argTypes default value ([#10812](https://github.com/storybookjs/storybook/pull/10812))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Scripts: parallel execution on build package scripts ([#10808](https://github.com/storybookjs/storybook/pull/10808))
|
||||
|
||||
## 6.0.0-beta.7 (May 15, 2020)
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- Cleanup: Remove support for babel-loader < 8 ([#10781](https://github.com/storybookjs/storybook/pull/10781))
|
||||
|
||||
### Features
|
||||
|
||||
- Composition: Zero-config composition from dependencies ([#10753](https://github.com/storybookjs/storybook/pull/10753))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Detect local addons for windows machine ([#10786](https://github.com/storybookjs/storybook/pull/10786))
|
||||
- Composition: Rename `mapper` to `storyMapper` and fix loading bugs ([#10780](https://github.com/storybookjs/storybook/pull/10780))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: HTML stories homogenization ([#10705](https://github.com/storybookjs/storybook/pull/10705))
|
||||
- CLI: web-components stories homogenization ([#10703](https://github.com/storybookjs/storybook/pull/10703))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Update jest-preset-angular to 8.2.0 ([#10778](https://github.com/storybookjs/storybook/pull/10778))
|
||||
|
||||
## 6.0.0-beta.6 (May 12, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Essentials: Update configuration heuristics for main.js ([#10737](https://github.com/storybookjs/storybook/pull/10737))
|
||||
|
||||
### Features
|
||||
|
||||
- Essentials: Add addon-actions ([#10748](https://github.com/storybookjs/storybook/pull/10748))
|
||||
- Essentials: Add addon-docs ([#10729](https://github.com/storybookjs/storybook/pull/10729))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Reset layout properties when switching stories ([#10643](https://github.com/storybookjs/storybook/pull/10643))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CLI: react stories homogenization ([#10711](https://github.com/storybookjs/storybook/pull/10711))
|
||||
- CLI: vue stories homogenization ([#10708](https://github.com/storybookjs/storybook/pull/10708))
|
||||
- CLI: webpack react stories homogenization ([#10709](https://github.com/storybookjs/storybook/pull/10709))
|
||||
- CLI: svelte stories homogenization ([#10704](https://github.com/storybookjs/storybook/pull/10704))
|
||||
- CLI: react-scripts stories homogenization ([#10710](https://github.com/storybookjs/storybook/pull/10710))
|
||||
- CLI: mithril stories homogenization ([#10707](https://github.com/storybookjs/storybook/pull/10707))
|
||||
- CLI: rax stories homogenization ([#10706](https://github.com/storybookjs/storybook/pull/10706))
|
||||
- CLI: riot stories homogenization ([#10715](https://github.com/storybookjs/storybook/pull/10715))
|
||||
- CLI: ember stories homogenization ([#10713](https://github.com/storybookjs/storybook/pull/10713))
|
||||
- CLI: preact stories homogenization ([#10712](https://github.com/storybookjs/storybook/pull/10712))
|
||||
- CLI: sfc_vue stories homogenization ([#10714](https://github.com/storybookjs/storybook/pull/10714))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Revert "Change reference for jest-preset-angular/build/setupJest as per migration guide" ([#10727](https://github.com/storybookjs/storybook/pull/10727))
|
||||
|
||||
## 6.0.0-beta.5 (May 11, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix error handling on load ([#10659](https://github.com/storybookjs/storybook/pull/10659))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Storyshots: Change reference for jest-preset-angular/build/setupJest ([#10699](https://github.com/storybookjs/storybook/pull/10699))
|
||||
- CLI: Remove CRA fixtures from Yarn 2 tests run ([#10720](https://github.com/storybookjs/storybook/pull/10720))
|
||||
- Fix: Set private package on Aurelia example ([#10688](https://github.com/storybookjs/storybook/pull/10688))
|
||||
|
||||
## 6.0.0-beta.4 (May 8, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- React: Add `argsStory` convenience function ([#10685](https://github.com/storybookjs/storybook/pull/10685))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Build: Upgrade jest to 26 ([#10669](https://github.com/storybookjs/storybook/pull/10669))
|
||||
|
||||
## 6.0.0-beta.3 (May 7, 2020)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- Addon-backgrounds: Simplified parameters API ([#10634](https://github.com/storybookjs/storybook/pull/10634))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix `globalArgs` initialization from global parameters ([#10566](https://github.com/storybookjs/storybook/pull/10566))
|
||||
- Core: Fix DLL context for IE11 ([#106444]https://github.com/storybookjs/storybook/pull/10644))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Addon-storyshots: Upgrade to jest 26 ([#10642](https://github.com/storybookjs/storybook/pull/10642))
|
||||
- Bump terser-webpack-plugin from 2.3.6 to 3.0.0 ([#10650](https://github.com/storybookjs/storybook/pull/10650))
|
||||
|
||||
## 6.0.0-beta.2 (May 4, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix broken props logic for no-args stories ([#10633](https://github.com/storybookjs/storybook/pull/10633))
|
||||
- Addon-docs: Fix custom source manual override ([#10632](https://github.com/storybookjs/storybook/pull/10632))
|
||||
- Addon-docs: Fix MDX stories with multiple children ([#9531](https://github.com/storybookjs/storybook/pull/9531))
|
||||
- Addon-docs: Fix object array in Props ([#10621](https://github.com/storybookjs/storybook/pull/10621))
|
||||
- Actions: Fix import of `uuid` ([#10625](https://github.com/storybookjs/storybook/pull/10625))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Fix Args test to not use different code path ([#10607](https://github.com/storybookjs/storybook/pull/10607))
|
||||
|
||||
## 6.0.0-beta.1 (May 2, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add automatic detection for svelte ([#10623](https://github.com/storybookjs/storybook/pull/10623))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix no-props logic in Source block ([#10619](https://github.com/storybookjs/storybook/pull/10619))
|
||||
- Props: Fix subcomponents ([#10608](https://github.com/storybookjs/storybook/pull/10608))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Yarn 2: Fix dependencies issues for compatibility ([#10613](https://github.com/storybookjs/storybook/pull/10613))
|
||||
- CLI: Fix cli when working with Yarn 2 and Node 10 ([#10550](https://github.com/storybookjs/storybook/pull/10550))
|
||||
|
||||
## 6.0.0-beta.0 (April 29, 2020)
|
||||
|
||||
Storybook 6.0 is in beta. 🎉🎉🎉
|
||||
|
||||
200
MIGRATION.md
200
MIGRATION.md
@ -1,15 +1,21 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
|
||||
- [Hoisted CSF annotations](#hoisted-csf-annotations)
|
||||
- [Zero config typescript](#zero-config-typescript)
|
||||
- [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
|
||||
- [CRA preset removed](#cra-preset-removed)
|
||||
- [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
|
||||
- [Docs theme separated](#docs-theme-separated)
|
||||
- [DocsPage slots removed](#docspage-slots-removed)
|
||||
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
|
||||
- [React.FC interfaces](#reactfc-interfaces)
|
||||
- [Imported types](#imported-types)
|
||||
- [Rolling back](#rolling-back)
|
||||
- [6.0 Docs breaking changes](#60-docs-breaking-changes)
|
||||
- [Remove framework-specific docs presets](#remove-framework-specific-docs-presets)
|
||||
- [Docs theme separated](#docs-theme-separated)
|
||||
- [DocsPage slots removed](#docspage-slots-removed)
|
||||
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
|
||||
- [React.FC interfaces](#reactfc-interfaces)
|
||||
- [Imported types](#imported-types)
|
||||
- [Rolling back](#rolling-back)
|
||||
- [New addon presets](#new-addon-presets)
|
||||
- [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
|
||||
- [Removed Deprecated APIs](#removed-deprecated-apis)
|
||||
- [New setStories event](#new-setstories-event)
|
||||
- [Client API changes](#client-api-changes)
|
||||
@ -20,10 +26,15 @@
|
||||
- [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
|
||||
- [Improved story source handling](#improved-story-source-handling)
|
||||
- [6.0 Addon API changes](#60-addon-api-changes)
|
||||
- [Actions Addon uses parameters](#actions-addon-uses-parameters)
|
||||
- [Actions addon uses parameters](#actions-addon-uses-parameters)
|
||||
- [Removed action decorator APIs](#removed-action-decorator-apis)
|
||||
- [Removed addon centered](#removed-addon-centered)
|
||||
- [Removed withA11y decorator](#removed-witha11y-decorator)
|
||||
- [Essentials addon disables differently](#essentials-addon-disables-differently)
|
||||
- [6.0 Deprecations](#60-deprecations)
|
||||
- [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
|
||||
- [Deprecated addon-contexts](#deprecated-addon-contexts)
|
||||
- [Removed addon-centered](#removed-addon-centered)
|
||||
- [Deprecated polymer](#deprecated-polymer)
|
||||
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
|
||||
- [To main.js configuration](#to-mainjs-configuration)
|
||||
- [Using main.js](#using-mainjs)
|
||||
@ -105,6 +116,85 @@
|
||||
|
||||
## From version 5.3.x to 6.0.x
|
||||
|
||||
### Hoisted CSF annotations
|
||||
|
||||
Storybook 6 introduces hoisted CSF annotations and deprecates the `StoryFn.story` object-style annotation.
|
||||
|
||||
In 5.x CSF, you would annotate a story like this:
|
||||
|
||||
```js
|
||||
export const Basic = () => <Button />
|
||||
Basic.story = {
|
||||
name: 'foo',
|
||||
parameters: { ... },
|
||||
decorators: [ ... ],
|
||||
};
|
||||
```
|
||||
|
||||
In 6.0 CSF this becomes:
|
||||
|
||||
```js
|
||||
export const Basic = () => <Button />
|
||||
Basic.storyName = 'foo';
|
||||
Basic.parameters = { ... };
|
||||
Basic.decorators = [ ... ];
|
||||
```
|
||||
|
||||
1. The new syntax is slightly more compact/ergonomic compared the the old one
|
||||
2. Similar to React's `displayName`, `propTypes`, `defaultProps` annotations
|
||||
3. We're introducing a new feature, [Storybook Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing), where the new syntax will be significantly more ergonomic
|
||||
|
||||
To help you upgrade your stories, we've crated a codemod:
|
||||
|
||||
```
|
||||
npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js"
|
||||
```
|
||||
|
||||
For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
|
||||
|
||||
### Zero config typescript
|
||||
|
||||
Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`.
|
||||
|
||||
To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. If you want to override the defaults, see the [typescript configuration docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md).
|
||||
|
||||
### Backgrounds addon has a new api
|
||||
|
||||
Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
|
||||
|
||||
Consider the following example of its usage in `Button.stories.js`:
|
||||
|
||||
```jsx
|
||||
// Button.stories.js
|
||||
export default {
|
||||
title: 'Button',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'twitter', value: '#00aced', default: true },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Here's an updated version of the example, using the new api:
|
||||
|
||||
```jsx
|
||||
// Button.stories.js
|
||||
export default {
|
||||
title: 'Button',
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
default: 'twitter',
|
||||
values: [
|
||||
{ name: 'twitter', value: '#00aced' },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### CRA preset removed
|
||||
|
||||
The built-in create-react-app preset, which was [previously deprecated](#create-react-app-preset), has been fully removed.
|
||||
@ -137,13 +227,19 @@ export const parameters = {
|
||||
};
|
||||
```
|
||||
|
||||
### Docs theme separated
|
||||
### 6.0 Docs breaking changes
|
||||
|
||||
#### Remove framework-specific docs presets
|
||||
|
||||
In SB 5.2, each framework had its own preset, e.g. `@storybook/addon-docs/react/preset`. In 5.3 we [unified this into a single preset](#unified-docs-preset): `@storybook/addon-docs/preset`. In 6.0 we've removed the deprecated preset.
|
||||
|
||||
#### Docs theme separated
|
||||
|
||||
In 6.0, you should theme Storybook Docs with the `docs.theme` parameter.
|
||||
|
||||
In 5.x, the Storybook UI and Storybook Docs were themed using the same theme object. However, in 5.3 we introduced a new API, `addons.setConfig`, which improved UI theming but broke Docs theming. Rather than trying to keep the two unified, we introduced a separate theming mechanism for docs, `docs.theme`. [Read about Docs theming here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming).
|
||||
|
||||
### DocsPage slots removed
|
||||
#### DocsPage slots removed
|
||||
|
||||
In SB5.2, we introduced the concept of [DocsPage slots](https://github.com/storybookjs/storybook/blob/0de8575eab73bfd5c5c7ba5fe33e53a49b92db3a/addons/docs/docs/docspage.md#docspage-slots) for customizing the DocsPage.
|
||||
|
||||
@ -162,7 +258,7 @@ These mechanisms are superior to slots, so we've removed slots in 6.0. For each
|
||||
| Props | `propsSlot` | `docs.extractProps` parameter |
|
||||
| Stories | `storiesSlot` | Custom DocsPage |
|
||||
|
||||
### React prop tables with Typescript
|
||||
#### React prop tables with Typescript
|
||||
|
||||
Starting in 6.0 we are changing our recommended setup for extracting prop tables in `addon-docs` for React projects using TypeScript.
|
||||
|
||||
@ -179,7 +275,7 @@ The Babel-based `react-docgen` version is the default in:
|
||||
|
||||
We will be updating this section with migration information as we collect information from our users, and fixing issues as they come up throughout the 6.0 prerelease process. We are cataloging known issues [here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#known-limitations).
|
||||
|
||||
#### React.FC interfaces
|
||||
##### React.FC interfaces
|
||||
|
||||
The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
|
||||
|
||||
@ -197,7 +293,7 @@ const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
|
||||
|
||||
Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
|
||||
|
||||
#### Imported types
|
||||
##### Imported types
|
||||
|
||||
Another major issue is support for imported types.
|
||||
|
||||
@ -212,7 +308,7 @@ const MyComponent: FC<NewType> = ...
|
||||
This isn't an issue with `RDTL` so unfortunately it gets worse with `react-docgen`.
|
||||
There's an open PR for this https://github.com/reactjs/react-docgen/pull/352 which you can upvote if it affects you.
|
||||
|
||||
#### Rolling back
|
||||
##### Rolling back
|
||||
|
||||
In the meantime, if you're not ready to make the move you have two options:
|
||||
|
||||
@ -284,6 +380,23 @@ MyNonCheckedStory.story = {
|
||||
};
|
||||
```
|
||||
|
||||
### Removed babel-preset-vue from Vue preset
|
||||
|
||||
`babel-preset-vue` is not included by default anymore when using Storybook with Vue.
|
||||
This preset is outdated and [caused problems](https://github.com/storybookjs/storybook/issues/4475) with more modern setups.
|
||||
|
||||
If you have an older Vue setup that relied on this preset, make sure it is included in your babel config
|
||||
(install `babel-preset-vue` and add it to the presets).
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["babel-preset-vue"]
|
||||
}
|
||||
```
|
||||
|
||||
However, please take a moment to review why this preset is necessary in your setup.
|
||||
One usecase used to be to enable JSX in your stories. For this case, we recommend to use `@vue/babel-preset-jsx` instead.
|
||||
|
||||
### Removed Deprecated APIs
|
||||
|
||||
In 6.0 we removed a number of APIs that were previously deprecated.
|
||||
@ -420,7 +533,7 @@ The MDX analog:
|
||||
|
||||
### 6.0 Addon API changes
|
||||
|
||||
#### Actions Addon uses parameters
|
||||
#### Actions addon uses parameters
|
||||
|
||||
Leveraging the new preset `@storybook/addon-actions` uses parameters to pass action options. If you previously had:
|
||||
|
||||
@ -447,22 +560,6 @@ StoryOne.story = {
|
||||
|
||||
In 6.0 we removed the actions addon decorate API. Actions handles can be configured globaly, for a collection of stories or per story via parameters. The ability to manipulate the data arguments of an event is only relevant in a few frameworks and is not a common enough usecase to be worth the complexity of supporting.
|
||||
|
||||
#### Removed addon centered
|
||||
|
||||
In 6.0 we removed the centered addon. Centering is now core feature of storybook, that no longer needs an addon.
|
||||
|
||||
Remove the addon-centered decorator and instead add a `layout` parameter:
|
||||
|
||||
```js
|
||||
export const MyStory = () => <div>my story</div>;
|
||||
|
||||
MyStory.story = {
|
||||
parameters: { layout: 'centered' },
|
||||
};
|
||||
```
|
||||
|
||||
Other possible values are: `padded` (default) and `fullscreen`.
|
||||
|
||||
#### Removed withA11y decorator
|
||||
|
||||
In 6.0 we removed the `withA11y` decorator. The code that runs accessibility checks is now directly injected in the preview.
|
||||
@ -481,6 +578,45 @@ addParameters({
|
||||
};
|
||||
```
|
||||
|
||||
#### Essentials addon disables differently
|
||||
|
||||
In 6.0, `addon-essentials` doesn't configure addons if the user has already configured them in `main.js`. In 5.3 it previously checked to see whether the package had been installed in `package.json` to disable configuration. The new setup is preferably because now users' can install essential packages and import from them without disabling their configuration.
|
||||
|
||||
### 6.0 Deprecations
|
||||
|
||||
We've deprecated the following in 6.0: `addon-info`, `addon-notes`, `addon-contexts`, `addon-centered`, `polymer`.
|
||||
|
||||
#### Deprecated addon-info, addon-notes
|
||||
|
||||
The info/notes addons have been replaced by [addon-docs](https://github.com/storybookjs/storybook/tree/next/addons/docs). We've documented a migration in the [docs recipes](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons).
|
||||
|
||||
Both addons are still widely used, and their source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). We're looking for maintainers for both addons. If you're interested, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
|
||||
|
||||
#### Deprecated addon-contexts
|
||||
|
||||
The contexts addon has been replaced by [addon-toolbars](https://github.com/storybookjs/storybook/blob/next/addons/toolbars), which is simpler, more ergonomic, and compatible with all Storybook frameworks.
|
||||
|
||||
The addon's source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). If you're interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
|
||||
|
||||
#### Removed addon-centered
|
||||
|
||||
In 6.0 we removed the centered addon. Centering is now core feature of storybook, so w no longer need an addon.
|
||||
|
||||
Remove the addon-centered decorator and instead add a `layout` parameter:
|
||||
|
||||
```js
|
||||
export const MyStory = () => <div>my story</div>;
|
||||
MyStory.story = {
|
||||
parameters: { layout: 'centered' },
|
||||
};
|
||||
```
|
||||
|
||||
Other possible values are: `padded` (default) and `fullscreen`.
|
||||
|
||||
#### Deprecated polymer
|
||||
|
||||
We've deprecated `@storybook/polymer` and are focusing on `@storybook/web-components`. If you use Polymer and are interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
|
||||
|
||||
## From version 5.2.x to 5.3.x
|
||||
|
||||
### To main.js configuration
|
||||
@ -757,6 +893,8 @@ After a few iterations, this approach seems to be working. However, there are a
|
||||
|
||||
We'll update this section as we find more problem cases. If you have a `core-js` problem, please file an issue (preferably with a repro), and we'll do our best to get you sorted.
|
||||
|
||||
**Update**: [corejs-upgrade-webpack-plugin](https://github.com/ndelangen/corejs-upgrade-webpack-plugin) has been removed again after running into further issues as described in [https://github.com/storybookjs/storybook/issues/7445](https://github.com/storybookjs/storybook/issues/7445).
|
||||
|
||||
## From version 5.0.1 to 5.0.2
|
||||
|
||||
### Deprecate webpack extend mode
|
||||
|
||||
@ -40,10 +40,8 @@ If you wish to selectively disable `a11y` checks for a subset of stories, you ca
|
||||
|
||||
```js
|
||||
export const MyNonCheckedStory = () => <SomeComponent />;
|
||||
MyNonCheckedStory.story = {
|
||||
parameters: {
|
||||
a11y: { disable: true },
|
||||
},
|
||||
MyNonCheckedStory.parameters = {
|
||||
a11y: { disable: true },
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,23 +33,28 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/channels": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/channels": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/client-logger": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"axe-core": "^3.5.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.15",
|
||||
"react-sizeme": "^2.5.2",
|
||||
"regenerator-runtime": "^0.13.3"
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"ts-dedent": "^1.1.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@testing-library/react": "^10.0.4",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
|
||||
@ -1,5 +1,24 @@
|
||||
import { DecoratorFunction } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
export * from './highlight';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
export const withA11y: DecoratorFunction = deprecate(
|
||||
(storyFn, storyContext) => {
|
||||
return storyFn(storyContext);
|
||||
},
|
||||
dedent`
|
||||
withA11y(options) is deprecated, please configure addon-a11y using the addParameter api:
|
||||
|
||||
addParameters({
|
||||
a11y: options,
|
||||
});
|
||||
|
||||
More at: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-witha11y-decorator
|
||||
`
|
||||
);
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
export function managerEntries(entry: any[] = []) {
|
||||
return [...entry, require.resolve('./register')];
|
||||
}
|
||||
|
||||
export function config(entry: any[] = []) {
|
||||
return [...entry, require.resolve('./a11yRunner'), require.resolve('./a11yHighlight')];
|
||||
}
|
||||
3
addons/a11y/src/preset/addDecorator.ts
Normal file
3
addons/a11y/src/preset/addDecorator.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { withA11y } from '../index';
|
||||
|
||||
export const decorators = [withA11y];
|
||||
7
addons/a11y/src/preset/index.ts
Normal file
7
addons/a11y/src/preset/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export function managerEntries(entry: any[] = []) {
|
||||
return [...entry, require.resolve('../register')];
|
||||
}
|
||||
|
||||
export function config(entry: any[] = []) {
|
||||
return [...entry, require.resolve('../a11yRunner'), require.resolve('../a11yHighlight')];
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import uuid from 'uuid/v4';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { EVENT_ID } from '../constants';
|
||||
import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
|
||||
@ -12,7 +12,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
|
||||
|
||||
const handler = function actionHandler(...args: any[]) {
|
||||
const channel = addons.getChannel();
|
||||
const id = uuid();
|
||||
const id = uuidv4();
|
||||
const minDepth = 5; // anything less is really just storybook internals
|
||||
|
||||
const actionDisplayToEmit: ActionDisplay = {
|
||||
|
||||
@ -9,101 +9,121 @@ Storybook Background Addon can be used to change background colors inside the pr
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-backgrounds
|
||||
yarn add @storybook/addon-backgrounds --dev
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Then create a file called `main.js` in your storybook config.
|
||||
If it doesn't exist yet, create a file called `main.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
Add the following content to it:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-backgrounds']
|
||||
}
|
||||
addons: ['@storybook/addon-backgrounds'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Then write your stories like this:
|
||||
Backgrounds requires two parameters:
|
||||
|
||||
```js
|
||||
- `default` - matches the **name** of the value which will be selected by default.
|
||||
- `values` - an array of elements containing name and value (with a valid css color e.g. HEX, RGBA, etc.)
|
||||
|
||||
Write your stories like this:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
/*
|
||||
* Button.stories.js
|
||||
* Applies backgrounds to the Stories
|
||||
*/
|
||||
export default {
|
||||
title: 'Button',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'twitter', value: '#00aced', default: true },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
]
|
||||
backgrounds: {
|
||||
default: 'twitter',
|
||||
values: [
|
||||
{ name: 'twitter', value: '#00aced' },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
export const defaultView = () => <button>Click me</button>;
|
||||
```
|
||||
|
||||
You can add the backgrounds to all stories with `addParameters` in `.storybook/preview.js`:
|
||||
You can add the backgrounds to all stories by using `parameters` in `.storybook/preview.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react'; // <- or your storybook framework
|
||||
|
||||
addParameters({
|
||||
backgrounds: [
|
||||
{ name: 'twitter', value: '#00aced', default: true },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
}
|
||||
|
||||
export const defaultView = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{ name: 'red', value: 'rgba(255, 0, 0)' },
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'twitter',
|
||||
values: [
|
||||
{ name: 'twitter', value: '#00aced' },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon:
|
||||
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
}
|
||||
|
||||
export const noBackgrounds = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
noBackgrounds.story = {
|
||||
parameters: {
|
||||
backgrounds: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const disabledBackgrounds = () => (
|
||||
<button>Click me</button>
|
||||
);
|
||||
disabledBackgrounds.story = {
|
||||
parameters: {
|
||||
backgrounds: { disabled: true },
|
||||
export const defaultView = () => <button>Click me</button>;
|
||||
|
||||
defaultView.parameters = {
|
||||
backgrounds: {
|
||||
default: 'red',
|
||||
values: [{ name: 'red', value: 'rgba(255, 0, 0)' }],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Once you have defined backgrounds for your stories (as can be seen in the examples above), you can set a default background per story by passing the `default` property using a name from the available backgrounds:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
/*
|
||||
* Button.stories.js
|
||||
* Applies default background to the Stories
|
||||
*/
|
||||
export default {
|
||||
title: 'Button',
|
||||
parameters: {
|
||||
backgrounds: { default: 'twitter' },
|
||||
},
|
||||
};
|
||||
|
||||
export const twitterColorSelected = () => <button>Click me</button>;
|
||||
```
|
||||
|
||||
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `{ disable: true }` to skip the addon:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
/*
|
||||
* Button.stories.js
|
||||
* Disables backgrounds for one Story
|
||||
*/
|
||||
export default {
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
export const disabledBackgrounds = () => <button>Click me</button>;
|
||||
|
||||
disabledBackgrounds.parameters = {
|
||||
backgrounds: { disable: true },
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-logger": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -3,13 +3,23 @@ import memoize from 'memoizerific';
|
||||
|
||||
import { Combo, Consumer, API } from '@storybook/api';
|
||||
import { Global, Theme } from '@storybook/theming';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
|
||||
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
|
||||
|
||||
import { PARAM_KEY, EVENTS } from '../constants';
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY, EVENTS } from '../constants';
|
||||
import { ColorIcon } from '../components/ColorIcon';
|
||||
|
||||
interface Item {
|
||||
interface GlobalState {
|
||||
name: string | undefined;
|
||||
selected: string | undefined;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
api: API;
|
||||
}
|
||||
|
||||
interface BackgroundSelectorItem {
|
||||
id: string;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
@ -17,10 +27,22 @@ interface Item {
|
||||
right?: ReactElement;
|
||||
}
|
||||
|
||||
interface Input {
|
||||
interface Background {
|
||||
name: string;
|
||||
value: string;
|
||||
default?: boolean;
|
||||
}
|
||||
|
||||
interface BackgroundsParameter {
|
||||
default?: string;
|
||||
disable?: boolean;
|
||||
values: Background[];
|
||||
}
|
||||
|
||||
interface BackgroundsConfig {
|
||||
backgrounds: Background[] | null;
|
||||
selectedBackground: string | null;
|
||||
defaultBackgroundName: string | null;
|
||||
disable: boolean;
|
||||
}
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
@ -32,7 +54,7 @@ const createBackgroundSelectorItem = memoize(1000)(
|
||||
value: string,
|
||||
hasSwatch: boolean,
|
||||
change: (arg: { selected: string; name: string }) => void
|
||||
): Item => ({
|
||||
): BackgroundSelectorItem => ({
|
||||
id: id || name,
|
||||
title: name,
|
||||
onClick: () => {
|
||||
@ -43,85 +65,114 @@ const createBackgroundSelectorItem = memoize(1000)(
|
||||
})
|
||||
);
|
||||
|
||||
const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string): string => {
|
||||
if (!list.length) {
|
||||
const getDisplayedItems = memoize(10)(
|
||||
(
|
||||
backgrounds: Background[],
|
||||
selectedBackgroundColor: string | null,
|
||||
change: (arg: { selected: string; name: string }) => void
|
||||
) => {
|
||||
const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
|
||||
createBackgroundSelectorItem(null, name, value, true, change)
|
||||
);
|
||||
|
||||
if (selectedBackgroundColor !== 'transparent') {
|
||||
return [
|
||||
createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change),
|
||||
...backgroundSelectorItems,
|
||||
];
|
||||
}
|
||||
|
||||
return backgroundSelectorItems;
|
||||
}
|
||||
);
|
||||
|
||||
const getSelectedBackgroundColor = (
|
||||
backgrounds: Background[] = [],
|
||||
currentSelectedValue: string,
|
||||
defaultName: string
|
||||
): string => {
|
||||
if (currentSelectedValue === 'transparent') {
|
||||
return 'transparent';
|
||||
}
|
||||
|
||||
if (currentSelectedValue === 'transparent') {
|
||||
if (backgrounds.find((background) => background.value === currentSelectedValue)) {
|
||||
return currentSelectedValue;
|
||||
}
|
||||
|
||||
if (list.find((i) => i.value === currentSelectedValue)) {
|
||||
return currentSelectedValue;
|
||||
const defaultBackground = backgrounds.find((background) => background.name === defaultName);
|
||||
if (defaultBackground) {
|
||||
return defaultBackground.value;
|
||||
}
|
||||
|
||||
if (list.find((i) => i.default)) {
|
||||
return list.find((i) => i.default).value;
|
||||
if (defaultName) {
|
||||
const availableColors = backgrounds.map((background) => background.name).join(', ');
|
||||
logger.warn(
|
||||
`Backgrounds Addon: could not find the default color "${defaultName}".
|
||||
These are the available colors for your story based on your configuration: ${availableColors}`
|
||||
);
|
||||
}
|
||||
|
||||
return 'transparent';
|
||||
};
|
||||
|
||||
const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
|
||||
const list = api.getCurrentParameter<Input[]>(PARAM_KEY);
|
||||
const selected = state.addons[PARAM_KEY] || null;
|
||||
const getBackgroundsConfig = ({ api, state }: Combo): BackgroundsConfig => {
|
||||
const backgroundsParameter = api.getCurrentParameter<BackgroundsParameter>(BACKGROUNDS_PARAM_KEY);
|
||||
const selectedBackgroundValue = state.addons[BACKGROUNDS_PARAM_KEY] || null;
|
||||
|
||||
return { items: list || [], selected };
|
||||
};
|
||||
|
||||
const getDisplayedItems = memoize(10)(
|
||||
(
|
||||
list: Input[],
|
||||
selected: string | null,
|
||||
change: (arg: { selected: string; name: string }) => void
|
||||
) => {
|
||||
let availableBackgroundSelectorItems: Item[] = [];
|
||||
|
||||
if (selected !== 'transparent') {
|
||||
availableBackgroundSelectorItems.push(
|
||||
createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
|
||||
);
|
||||
}
|
||||
|
||||
if (list.length) {
|
||||
availableBackgroundSelectorItems = [
|
||||
...availableBackgroundSelectorItems,
|
||||
...list.map(({ name, value }) =>
|
||||
createBackgroundSelectorItem(null, name, value, true, change)
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
return availableBackgroundSelectorItems;
|
||||
if (Array.isArray(backgroundsParameter)) {
|
||||
logger.warn(
|
||||
'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
interface GlobalState {
|
||||
name: string | undefined;
|
||||
selected: string | undefined;
|
||||
}
|
||||
const isBackgroundsEmpty = !backgroundsParameter?.values?.length;
|
||||
if (backgroundsParameter?.disable || isBackgroundsEmpty) {
|
||||
// other null properties are necessary to keep the same return shape for Consumer memoization
|
||||
return {
|
||||
disable: true,
|
||||
backgrounds: null,
|
||||
selectedBackground: null,
|
||||
defaultBackgroundName: null,
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
api: API;
|
||||
}
|
||||
return {
|
||||
disable: false,
|
||||
backgrounds: backgroundsParameter?.values,
|
||||
selectedBackground: selectedBackgroundValue,
|
||||
defaultBackgroundName: backgroundsParameter?.default,
|
||||
};
|
||||
};
|
||||
|
||||
export class BackgroundSelector extends Component<Props> {
|
||||
change = ({ selected, name }: GlobalState) => {
|
||||
const { api } = this.props;
|
||||
if (typeof selected === 'string') {
|
||||
api.setAddonState<string>(PARAM_KEY, selected);
|
||||
api.setAddonState<string>(BACKGROUNDS_PARAM_KEY, selected);
|
||||
}
|
||||
api.emit(EVENTS.UPDATE, { selected, name });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Consumer filter={mapper}>
|
||||
{({ items, selected }: ReturnType<typeof mapper>) => {
|
||||
const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
|
||||
<Consumer filter={getBackgroundsConfig}>
|
||||
{({
|
||||
disable,
|
||||
backgrounds,
|
||||
selectedBackground,
|
||||
defaultBackgroundName,
|
||||
}: BackgroundsConfig) => {
|
||||
if (disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return items.length ? (
|
||||
const selectedBackgroundColor = getSelectedBackgroundColor(
|
||||
backgrounds,
|
||||
selectedBackground,
|
||||
defaultBackgroundName
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{selectedBackgroundColor ? (
|
||||
<Global
|
||||
@ -138,26 +189,26 @@ export class BackgroundSelector extends Component<Props> {
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
closeOnClick
|
||||
tooltip={({ onHide }) => (
|
||||
<TooltipLinkList
|
||||
links={getDisplayedItems(items, selectedBackgroundColor, (i) => {
|
||||
links={getDisplayedItems(backgrounds, selectedBackgroundColor, (i) => {
|
||||
this.change(i);
|
||||
onHide();
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
closeOnClick
|
||||
>
|
||||
<IconButton
|
||||
key="background"
|
||||
active={selectedBackgroundColor !== 'transparent'}
|
||||
title="Change the background of the preview"
|
||||
active={selectedBackgroundColor !== 'transparent'}
|
||||
>
|
||||
<Icons icon="photo" />
|
||||
</IconButton>
|
||||
</WithTooltip>
|
||||
</Fragment>
|
||||
) : null;
|
||||
);
|
||||
}}
|
||||
</Consumer>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,11 +32,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-logger": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -226,12 +226,7 @@ addParameters({
|
||||
|
||||
## 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).
|
||||
As of SB6 [TypeScript is zero-config](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](./docs/props-tables.md).
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [More resources](#more-resources)
|
||||
@ -36,7 +37,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
|
||||
To get this, you'll first need to install Compodoc:
|
||||
|
||||
@ -133,6 +136,49 @@ Yes, it's redundant to declare `component` twice. [Coming soon](https://github.c
|
||||
|
||||
Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage).
|
||||
|
||||
When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
|
||||
import { CheckboxComponent, RadioButtonComponent } from './my-components';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
|
||||
<Meta title='Checkbox' decorators={[
|
||||
moduleMetadata({
|
||||
declarations: [CheckboxComponent]
|
||||
})
|
||||
]} />
|
||||
|
||||
# Basic Checkbox
|
||||
|
||||
<Story name='basic check' height='400px'>{{
|
||||
template: `
|
||||
<div class="some-wrapper-with-padding">
|
||||
<my-checkbox [checked]="checked">Some Checkbox</my-checkbox>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
checked: true
|
||||
}
|
||||
}}</Story>
|
||||
|
||||
# Basic Radiobutton
|
||||
|
||||
<Story name='basic radio' height='400px'>{{
|
||||
moduleMetadata: {
|
||||
declarations: [RadioButtonComponent]
|
||||
}
|
||||
template: `
|
||||
<div class="some-wrapper-with-padding">
|
||||
<my-radio-btn [checked]="checked">Some Checkbox</my-radio-btn>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
checked: true
|
||||
}
|
||||
}}</Story>
|
||||
```
|
||||
|
||||
## IFrame height
|
||||
|
||||
Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.
|
||||
@ -149,8 +195,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
1
addons/docs/aurelia/index.js
Normal file
1
addons/docs/aurelia/index.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('../dist/frameworks/aurelia/index');
|
||||
@ -80,8 +80,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -110,8 +110,8 @@ export default {
|
||||
import { Button } from './Button';
|
||||
// export default { ... }
|
||||
export const basic => () => <Button>Basic</Button>
|
||||
basic.story = {
|
||||
parameters: { docs: { page: null } }
|
||||
basic.parameters = {
|
||||
docs: { page: null }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -7,25 +7,18 @@
|
||||
Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
|
||||
|
||||
- [Usage](#usage)
|
||||
- [Args Controls](#args-controls)
|
||||
- [Controls](#controls)
|
||||
- [DocsPage](#docspage)
|
||||
- [MDX](#mdx)
|
||||
- [Controls customization](#controls-customization)
|
||||
- [Rows customization](#rows-customization)
|
||||
- [Reporting a bug](#reporting-a-bug)
|
||||
- [Known limitations](#known-limitations)
|
||||
- [React](#react)
|
||||
- [Fully support React.FC](#fully-support-reactfc)
|
||||
- [Imported types](#imported-types)
|
||||
- [Vue](#vue)
|
||||
- [Angular](#angular)
|
||||
- [Web components](#web-components)
|
||||
- [Ember](#ember)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Usage
|
||||
|
||||
For framework-specific setup instructions, see the framework's README: [React](../../react/README.md), [Vue](../../vue/README.md), [Angular](../../angular/README.md), [Web Components](../../web-components/README.md), [Ember](../../ember/README.md).
|
||||
For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
|
||||
|
||||
To use the props table in [DocsPage](./docspage.md), simply export a component property on your stories metadata:
|
||||
|
||||
@ -52,9 +45,9 @@ import { MyComponent } from './MyComponent';
|
||||
<Props of={MyComponent} />
|
||||
```
|
||||
|
||||
## Args Controls
|
||||
## Controls
|
||||
|
||||
Starting in SB 6.0, the `Props` block has built-in controls (formerly known as "knobs") for editing stories dynamically.
|
||||
Starting in SB 6.0, the `Props` block has built-in `Controls` (formerly known as "knobs") for editing stories dynamically.
|
||||
|
||||
<center>
|
||||
<img src="./media/args-controls.gif" width="100%" />
|
||||
@ -155,20 +148,18 @@ export const Batch = ({ labels, padding }) => (
|
||||
In this case, the args are basically unrelated to the underlying component's props, and are instead related to the individual story. To generate a prop table for the story, you can configure the Story's metadata:
|
||||
|
||||
```js
|
||||
Batch.story = {
|
||||
argTypes: {
|
||||
labels: {
|
||||
description: 'A comma-separated list of labels to display',
|
||||
defaultValue: 'a,b,c',
|
||||
control: { type: 'array' }
|
||||
}
|
||||
padding: {
|
||||
description: 'The padding to space out labels int he story',
|
||||
defaultValue: 4,
|
||||
control: { type: 'range', min: 0, max: 20, step: 2 },
|
||||
}
|
||||
}
|
||||
}
|
||||
Batch.argTypes = {
|
||||
labels: {
|
||||
description: 'A comma-separated list of labels to display',
|
||||
defaultValue: 'a,b,c',
|
||||
control: { type: 'array' },
|
||||
},
|
||||
padding: {
|
||||
description: 'The padding to space out labels int he story',
|
||||
defaultValue: 4,
|
||||
control: { type: 'range', min: 0, max: 20, step: 2 },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
In this case, the user-specified `argTypes` are not a subset of the component's props, so Storybook shows ONLY the user-specified `argTypes`, and shows the component's props (without controls) in a separate tab.
|
||||
@ -197,57 +188,13 @@ If the problem appears to be an issue with the sub-package, please file an issue
|
||||
|
||||
This package relies on a variety of sub-packages to extract property information from components. Many of the bugs in this package correspond to bugs in a sub-package. Since we don't maintain the sub-packages, the best we can do for now is (1) document these limitations, (2) provide clean reproductions to the sub-package, (3) optionally provide PRs to those packages to fix the problems.
|
||||
|
||||
### React
|
||||
|
||||
SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables.
|
||||
|
||||
#### Fully support React.FC
|
||||
|
||||
The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
interface IProps { ... };
|
||||
const MyComponent: FC<IProps> = ({ ... }) => ...
|
||||
```
|
||||
|
||||
The following workaround is needed:
|
||||
|
||||
```tsx
|
||||
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
|
||||
```
|
||||
|
||||
Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
|
||||
|
||||
#### Imported types
|
||||
|
||||
Another major issue is support for imported types.
|
||||
|
||||
```js
|
||||
import React, { FC } from 'react';
|
||||
import SomeType from './someFile';
|
||||
|
||||
type NewType = SomeType & { foo: string };
|
||||
const MyComponent: FC<NewType> = ...
|
||||
```
|
||||
|
||||
This was also an issue in RDTL so it doesn't get worse with `react-docgen`. There's an open PR for this https://github.com/reactjs/react-docgen/pull/352 which you can upvote if it affects you.
|
||||
|
||||
### Vue
|
||||
|
||||
SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.
|
||||
|
||||
### Angular
|
||||
|
||||
SB Docs for Angular uses `compodoc` for prop table information.
|
||||
|
||||
### Web components
|
||||
|
||||
SB Docs for Web-components uses `custom-elements.json` for prop table information.
|
||||
|
||||
### Ember
|
||||
|
||||
SB Docs for Ember uses `yui-doc` for prop table information.
|
||||
| Framework | Underlying library | Docs | Open issues |
|
||||
| -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| React | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22) |
|
||||
| Vue | `vue-docgen-api` | [Docs](../vue/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22) |
|
||||
| Angular | `compodoc` | [Docs](../angular/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22) |
|
||||
| Web-components | `custom-elements.json` | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
|
||||
| Ember | `yui-doc` | [Docs](../ember/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22) |
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
- [MDX Stories](#mdx-stories)
|
||||
- [Controlling a story's view mode](#controlling-a-storys-view-mode)
|
||||
- [Customizing source snippets](#customizing-source-snippets)
|
||||
- [Overwriting docs container](#overwriting-docs-container)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Component Story Format (CSF) with DocsPage
|
||||
@ -50,8 +51,8 @@ export default {
|
||||
};
|
||||
|
||||
export const basic = () => <Button>Basic</Button>;
|
||||
basic.story = {
|
||||
parameters: { foo: 'bar' },
|
||||
basic.parameters = {
|
||||
foo: 'bar',
|
||||
};
|
||||
```
|
||||
|
||||
@ -198,7 +199,7 @@ User defines stories in CSF and renders docs using DocsPage, but wishes to exclu
|
||||
|
||||
```js
|
||||
export const foo = () => <Button>foo</Button>;
|
||||
foo.story = { parameters: { docs: { disable: true } } };
|
||||
foo.parameters = { docs: { disable: true } };
|
||||
```
|
||||
|
||||
### MDX Stories
|
||||
@ -219,11 +220,9 @@ Based on user feedback, it's also possible to control the view mode for an indiv
|
||||
|
||||
```js
|
||||
export const Foo = () => <Component />;
|
||||
Foo.story = {
|
||||
parameters: {
|
||||
// reset the view mode to "story" whenever the user navigates to this story
|
||||
viewMode: 'story',
|
||||
},
|
||||
Foo.parameters = {
|
||||
// reset the view mode to "story" whenever the user navigates to this story
|
||||
viewMode: 'story',
|
||||
};
|
||||
```
|
||||
|
||||
@ -244,10 +243,8 @@ If you override the `docs.source.code` parameter, the `Source` block will render
|
||||
|
||||
```js
|
||||
const Example = () => <Button />;
|
||||
Example.story = {
|
||||
parameters: {
|
||||
docs: { source: { code: 'some arbitrary string' } },
|
||||
},
|
||||
Example.parameters = {
|
||||
docs: { source: { code: 'some arbitrary string' } },
|
||||
};
|
||||
```
|
||||
|
||||
@ -267,6 +264,62 @@ export const parameters = {
|
||||
|
||||
These two methods are complementary. The former is useful for story-specific, and the latter is useful for global formatting.
|
||||
|
||||
## Overwriting docs container
|
||||
|
||||
What happens if you want to add some wrapper for your MDX page, or add some other kind of React context?
|
||||
|
||||
When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/basics/writing-stories/#decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
|
||||
|
||||
The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:
|
||||
|
||||
```js
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta
|
||||
title="Addons/Docs/container-override"
|
||||
parameters={{
|
||||
docs: {
|
||||
container: ({ children, context }) => (
|
||||
<DocsContainer context={context}>
|
||||
<div style={{ border: '5px solid red' }}>{children}</div>
|
||||
</DocsContainer>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
# Title
|
||||
|
||||
Rest of your file...
|
||||
```
|
||||
|
||||
This is especially useful if you are using `styled-components` and need to wrap your JSX with a `ThemeProvider` to have access to your theme:
|
||||
|
||||
```js
|
||||
import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
import { theme } from '../path/to/theme'
|
||||
|
||||
<Meta
|
||||
title="Addons/Docs/container-override"
|
||||
parameters={{
|
||||
docs: {
|
||||
container: ({ children, context }) => (
|
||||
<DocsContainer context={context}>
|
||||
<ThemeProvider theme={theme}>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</DocsContainer>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
# Title
|
||||
|
||||
Rest of your file...
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
|
||||
|
||||
@ -8,6 +8,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [More resources](#more-resources)
|
||||
@ -32,7 +33,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
|
||||
|
||||
```js
|
||||
let app = new EmberApp(defaults, {
|
||||
@ -131,8 +134,8 @@ For `DocsPage`, you need to update the parameter locally in a story:
|
||||
|
||||
```ts
|
||||
export const basic = () => ...
|
||||
basic.story = {
|
||||
parameters: { docs: { iframeHeight: 400 } }
|
||||
basic.parameters = {
|
||||
docs: { iframeHeight: 400 }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -44,20 +44,21 @@
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@egoist/vue-to-react": "^1.1.0",
|
||||
"@jest/transform": "^25.2.4",
|
||||
"@jest/transform": "^26.0.0",
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.0-beta.0",
|
||||
"@storybook/postinstall": "6.0.0-beta.0",
|
||||
"@storybook/source-loader": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/node-logger": "6.0.0-beta.14",
|
||||
"@storybook/postinstall": "6.0.0-beta.14",
|
||||
"@storybook/source-loader": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -83,22 +84,22 @@
|
||||
"@babel/core": "^7.9.6",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/styled": "^10.0.17",
|
||||
"@storybook/react": "6.0.0-beta.0",
|
||||
"@storybook/web-components": "6.0.0-beta.0",
|
||||
"@storybook/react": "6.0.0-beta.14",
|
||||
"@storybook/web-components": "6.0.0-beta.14",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
"@types/estree": "^0.0.44",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/tmp": "^0.1.0",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/prop-types": "^15.5.9",
|
||||
"@types/react-is": "^16.7.1",
|
||||
"@types/tmp": "^0.1.0",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-react-docgen": "^4.1.0",
|
||||
"corejs-upgrade-webpack-plugin": "^4.0.1",
|
||||
"cross-spawn": "^7.0.1",
|
||||
"fs-extra": "^9.0.0",
|
||||
"jest": "^25.5.2",
|
||||
"jest": "^26.0.0",
|
||||
"jest-specific-snapshot": "^3.0.0",
|
||||
"lit-element": "^2.2.1",
|
||||
"lit-html": "^1.0.0",
|
||||
@ -109,8 +110,9 @@
|
||||
"require-from-string": "^2.0.2",
|
||||
"rxjs": "^6.5.4",
|
||||
"styled-components": "^5.0.1",
|
||||
"terser-webpack-plugin": "^2.3.6",
|
||||
"terser-webpack-plugin": "^3.0.0",
|
||||
"tmp": "^0.2.1",
|
||||
"tslib": "^1.11.1",
|
||||
"web-component-analyzer": "^1.0.3",
|
||||
"webpack": "^4.33.0",
|
||||
"zone.js": "^0.10.2"
|
||||
|
||||
@ -12,8 +12,10 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [Inline Stories](#inline-stories)
|
||||
- [Inline stories](#inline-stories)
|
||||
- [TypeScript props with `react-docgen`](#typescript-props-with-react-docgen)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
@ -37,7 +39,9 @@ module.exports = {
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
To show the props table for your component, be sure to fill in the `component` field in your story metadata:
|
||||
## Props tables
|
||||
|
||||
Storybook Docs automatically generates [Props tables](../docs/props-tables.md) for your components based on either `PropTypes` or `TypeScript` types. To show the props table for your component, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
```ts
|
||||
import { Button } from './Button';
|
||||
@ -98,7 +102,7 @@ Some **markdown** description, or whatever you want.
|
||||
<Props of={Button} />
|
||||
```
|
||||
|
||||
## Inline Stories
|
||||
## Inline stories
|
||||
|
||||
Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
|
||||
|
||||
@ -112,6 +116,66 @@ addParameters({
|
||||
});
|
||||
```
|
||||
|
||||
## TypeScript props with `react-docgen`
|
||||
|
||||
If you're using TypeScript, there are two different options for generating props: `react-docgen-typescript` (default) or `react-docgen`.
|
||||
|
||||
You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
typescript: {
|
||||
// also valid 'react-docgen-typescript' | false
|
||||
reactDocgen: 'react-docgen',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Neither option is perfect, so here's everything you should know if you're thinking about using `react-docgen` for TypeScript.
|
||||
|
||||
| | `react-docgen-typescript` | `react-docgen` |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| **Features** | **Great**. The analysis produces great results which gives the best props table experience. | **OK**. React-docgen produces basic results that are fine for most use cases. |
|
||||
| **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation. | **Blazing fast**. Adding it to your project increases build time negligibly. |
|
||||
| **Bugs** | **Many**. There are a lot of corner cases that are not handled properly, and are annoying for developers. | **Few**. But there's a dealbreaker, which is lack for imported types (see below). |
|
||||
| **SB docs** | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
|
||||
|
||||
**Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
|
||||
|
||||
| Docgen | Build time |
|
||||
| ----------------------- | ---------- |
|
||||
| react-docgen-typescript | 59s |
|
||||
| react-docgen | 29s |
|
||||
| none | 28s |
|
||||
|
||||
The biggest limitation of `react-docgen` is lack of support for imported types. What that means is that when a component uses a type defined in another file or package, `react-docgen` is unable to extract props information for that type.
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
import SomeType from './someFile';
|
||||
|
||||
type NewType = SomeType & { foo: string };
|
||||
const MyComponent: FC<NewType> = ...
|
||||
```
|
||||
|
||||
So in the previous example, `SomeType` would simply be ignored! There's an [open PR for this in the `react-docgen` repo](https://github.com/reactjs/react-docgen/pull/352) which you can upvote if it affects you.
|
||||
|
||||
Another common pitfall when switching to `react-docgen` is [lack of support for `React.FC`](https://github.com/reactjs/react-docgen/issues/387). This means that the following common pattern **DOESN'T WORK**:
|
||||
|
||||
```tsx
|
||||
import React, { FC } from 'react';
|
||||
interface IProps { ... };
|
||||
const MyComponent: FC<IProps> = ({ ... }) => ...
|
||||
```
|
||||
|
||||
Fortunately, the following workaround works:
|
||||
|
||||
```tsx
|
||||
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
|
||||
```
|
||||
|
||||
Please upvote [the issue](https://github.com/reactjs/react-docgen/issues/387) if this is affecting your productivity, or better yet, submit a fix!
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import path from 'path';
|
||||
import { ProgressPlugin, DllPlugin } from 'webpack';
|
||||
import TerserPlugin from 'terser-webpack-plugin';
|
||||
import CoreJSUpgradeWebpackPlugin from 'corejs-upgrade-webpack-plugin';
|
||||
|
||||
const resolveLocal = (dir) => path.join(__dirname, dir);
|
||||
|
||||
@ -60,7 +59,6 @@ export default ({ entry, provided = [] }) => ({
|
||||
path: `${out}/storybook_docs-manifest.json`,
|
||||
name: 'storybook_docs_dll',
|
||||
}),
|
||||
new CoreJSUpgradeWebpackPlugin(),
|
||||
],
|
||||
optimization: {
|
||||
concatenateModules: true,
|
||||
|
||||
@ -158,17 +158,29 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
|
||||
}
|
||||
storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
|
||||
|
||||
// This code handles three cases:
|
||||
// 1. the story has args, in which case we want to show controls for the story
|
||||
// 2. the story has args, and the user specifies showComponents, in which case
|
||||
// we want to show controls for the primary component AND show props for each component
|
||||
// 3. the story has NO args, in which case we want to show props for each component
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [args, updateArgs] = useArgs(storyId, storyStore);
|
||||
if (!storyArgTypes || !Object.values(storyArgTypes).find((v) => !!v?.control)) {
|
||||
updateArgs = null;
|
||||
}
|
||||
|
||||
let tabs = { Story: { rows: storyArgTypes, args, updateArgs } } as Record<
|
||||
string,
|
||||
ArgsTableProps
|
||||
>;
|
||||
if (showComponents) {
|
||||
|
||||
// Use the dynamically generated component tabs if there are no controls
|
||||
const storyHasArgsWithControls =
|
||||
storyArgTypes && Object.values(storyArgTypes).find((v) => !!v?.control);
|
||||
|
||||
if (!storyHasArgsWithControls) {
|
||||
updateArgs = null;
|
||||
tabs = {};
|
||||
}
|
||||
|
||||
if (showComponents || !storyHasArgsWithControls) {
|
||||
tabs = addComponentTabs(tabs, components, context, include, exclude);
|
||||
}
|
||||
|
||||
|
||||
@ -35,12 +35,13 @@ export const getSourceProps = (
|
||||
|
||||
let source = codeProps.code; // prefer user-specified code
|
||||
if (!source) {
|
||||
const targetId = singleProps.id === CURRENT_SELECTION ? currentId : singleProps.id;
|
||||
const targetId =
|
||||
singleProps.id === CURRENT_SELECTION || !singleProps.id ? currentId : singleProps.id;
|
||||
const targetIds = multiProps.ids || [targetId];
|
||||
source = targetIds
|
||||
.map((sourceId) => {
|
||||
const data = storyStore.fromId(sourceId);
|
||||
const enhanced = data && enhanceSource(data);
|
||||
const enhanced = data && (enhanceSource(data) || data.parameters);
|
||||
return enhanced?.docs?.source?.code || '';
|
||||
})
|
||||
.join('\n\n');
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { FunctionComponent, ReactNode } from 'react';
|
||||
import React, { FunctionComponent, ReactNode, ComponentProps } from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { resetComponents } from '@storybook/components/html';
|
||||
import { Story as PureStory, StoryProps as PureStoryProps } from '@storybook/components';
|
||||
import { Story as PureStory } from '@storybook/components';
|
||||
import { toId, storyNameFromExport } from '@storybook/csf';
|
||||
import { CURRENT_SELECTION } from './types';
|
||||
|
||||
@ -9,6 +9,8 @@ import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
type PureStoryProps = ComponentProps<typeof PureStory>;
|
||||
|
||||
interface CommonProps {
|
||||
height?: string;
|
||||
inline?: boolean;
|
||||
@ -25,15 +27,6 @@ type StoryRefProps = {
|
||||
|
||||
export type StoryProps = StoryDefProps | StoryRefProps;
|
||||
|
||||
const inferInlineStories = (framework: string): boolean => {
|
||||
switch (framework) {
|
||||
case 'react':
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const lookupStoryId = (
|
||||
storyName: string,
|
||||
{ mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
|
||||
@ -48,33 +41,27 @@ export const getStoryProps = (props: StoryProps, context: DocsContextProps): Pur
|
||||
const { name } = props as StoryDefProps;
|
||||
const inputId = id === CURRENT_SELECTION ? context.id : id;
|
||||
const previewId = inputId || lookupStoryId(name, context);
|
||||
const data = context.storyStore.fromId(previewId) || {};
|
||||
|
||||
const { height, inline } = props;
|
||||
const data = context.storyStore.fromId(previewId);
|
||||
const { framework = null } = (data && data.parameters) || {};
|
||||
const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data;
|
||||
const { docs = {} } = parameters;
|
||||
|
||||
const docsParam = (data && data.parameters && data.parameters.docs) || {};
|
||||
|
||||
if (docsParam.disable) {
|
||||
if (docs.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// prefer props, then global options, then framework-inferred values
|
||||
const {
|
||||
inlineStories = inferInlineStories(framework),
|
||||
iframeHeight = undefined,
|
||||
prepareForInline = undefined,
|
||||
} = docsParam;
|
||||
const { storyFn = undefined, name: storyName = undefined } = data || {};
|
||||
|
||||
// prefer block props, then story parameters defined by the framework-specific settings and optionally overriden by users
|
||||
const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs;
|
||||
const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
||||
if (storyIsInline && !prepareForInline && framework !== 'react') {
|
||||
if (storyIsInline && !prepareForInline) {
|
||||
throw new Error(
|
||||
`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
parameters,
|
||||
inline: storyIsInline,
|
||||
id: previewId,
|
||||
storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn) : storyFn,
|
||||
|
||||
@ -3,8 +3,10 @@ import { enhanceArgTypes } from './enhanceArgTypes';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: false,
|
||||
container: DocsContainer,
|
||||
page: DocsPage,
|
||||
iframeHeight: 100,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ const inferType = (value?: any): SBType => {
|
||||
if (Array.isArray(value)) {
|
||||
const childType: SBType =
|
||||
value.length > 0 ? inferType(value[0]) : { name: 'other', value: 'unknown' };
|
||||
return { name: 'array', value: [childType] };
|
||||
return { name: 'array', value: childType };
|
||||
}
|
||||
if (value) {
|
||||
const fieldTypes = mapValues(value, (field) => inferType(field));
|
||||
|
||||
@ -4,13 +4,22 @@ import { Control } from '@storybook/components';
|
||||
import { SBEnumType } from '../../lib/sbtypes';
|
||||
|
||||
const inferControl = (argType: ArgType): Control => {
|
||||
if (!argType.type) {
|
||||
const { type } = argType;
|
||||
if (!type) {
|
||||
// console.log('no sbtype', { argType });
|
||||
return null;
|
||||
}
|
||||
switch (argType.type.name) {
|
||||
case 'array':
|
||||
switch (type.name) {
|
||||
case 'array': {
|
||||
const { value } = type;
|
||||
if (value?.name && ['object', 'other'].includes(value.name)) {
|
||||
return {
|
||||
type: 'object',
|
||||
validator: (obj: any) => Array.isArray(obj),
|
||||
};
|
||||
}
|
||||
return { type: 'array' };
|
||||
}
|
||||
case 'boolean':
|
||||
return { type: 'boolean' };
|
||||
case 'string':
|
||||
@ -18,7 +27,7 @@ const inferControl = (argType: ArgType): Control => {
|
||||
case 'number':
|
||||
return { type: 'number' };
|
||||
case 'enum': {
|
||||
const { value } = argType.type as SBEnumType;
|
||||
const { value } = type as SBEnumType;
|
||||
return { type: 'options', controlType: 'select', options: value };
|
||||
}
|
||||
case 'function':
|
||||
|
||||
@ -8,7 +8,10 @@ import { DllReferencePlugin } from 'webpack';
|
||||
import createCompiler from '../../mdx/mdx-compiler-plugin';
|
||||
|
||||
const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
|
||||
const context = path.join(coreDirName, '../../node_modules');
|
||||
// TODO: improve node_modules detection
|
||||
const context = coreDirName.includes('node_modules')
|
||||
? path.join(coreDirName, '../../') // Real life case, already in node_modules
|
||||
: path.join(coreDirName, '../../node_modules'); // SB Monorepo
|
||||
|
||||
function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
|
||||
if (!configureJSX) {
|
||||
@ -66,7 +69,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]],
|
||||
},
|
||||
@ -77,11 +80,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
test: /\.(stories|story).mdx$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: createBabelOptions(babelOptions, configureJSX),
|
||||
},
|
||||
{
|
||||
loader: '@mdx-js/loader',
|
||||
loader: require.resolve('@mdx-js/loader'),
|
||||
options: {
|
||||
compilers: [createCompiler(options)],
|
||||
...mdxLoaderOptions,
|
||||
@ -94,11 +97,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
exclude: /\.(stories|story).mdx$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: createBabelOptions(babelOptions, configureJSX),
|
||||
},
|
||||
{
|
||||
loader: '@mdx-js/loader',
|
||||
loader: require.resolve('@mdx-js/loader'),
|
||||
options: mdxLoaderOptions,
|
||||
},
|
||||
],
|
||||
@ -112,7 +115,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
result.plugins.push(
|
||||
new DllReferencePlugin({
|
||||
context,
|
||||
manifest: path.join(coreDirName, 'dll', 'storybook_docs-manifest.json'),
|
||||
manifest: require.resolve('@storybook/core/dll/storybook_docs-manifest.json'),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { extractComponentDescription } from '../../lib/docgen';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
|
||||
inlineStories: true,
|
||||
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
|
||||
prepareForInline: (storyFn: StoryFn) => storyFn(),
|
||||
extractArgTypes,
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
import { PropDef, PropsTableRowsProps } from '@storybook/components';
|
||||
import { ArgTypes } from '@storybook/api';
|
||||
import { ArgTypesExtractor } from '../../lib/docgen';
|
||||
import { trimQuotes } from '../../lib/sbtypes/utils';
|
||||
import { extractProps } from './extractProps';
|
||||
|
||||
const trim = (val: any) => (val && typeof val === 'string' ? trimQuotes(val) : val);
|
||||
|
||||
export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (component) {
|
||||
const props = extractProps(component);
|
||||
const { rows } = props as PropsTableRowsProps;
|
||||
if (rows) {
|
||||
return rows.reduce((acc: ArgTypes, row: PropDef) => {
|
||||
const { type, sbType, defaultValue, jsDocTags, required } = row;
|
||||
const { type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row;
|
||||
let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
|
||||
try {
|
||||
// eslint-disable-next-line no-eval
|
||||
defaultValue = eval(defaultValue);
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch {}
|
||||
|
||||
acc[row.name] = {
|
||||
...row,
|
||||
defaultValue: defaultValue && trim(defaultValue.detail || defaultValue.summary),
|
||||
defaultValue,
|
||||
type: { required, ...sbType },
|
||||
table: {
|
||||
type,
|
||||
jsDocTags,
|
||||
defaultValue,
|
||||
defaultValue: defaultSummary,
|
||||
},
|
||||
};
|
||||
return acc;
|
||||
|
||||
@ -26,7 +26,7 @@ function getPropDefs(component: Component, section: string): PropDef[] {
|
||||
// eslint-disable-next-line react/forbid-foreign-prop-types
|
||||
if (!hasDocgen(component) && !component.propTypes) {
|
||||
if (isForwardRef(component) || component.render) {
|
||||
processedComponent = component.render().type;
|
||||
processedComponent = component.render({}).type;
|
||||
}
|
||||
if (isMemo(component)) {
|
||||
processedComponent = component.type().type;
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import { Parser } from 'acorn';
|
||||
// @ts-ignore
|
||||
import jsx from 'acorn-jsx';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import estree from 'estree';
|
||||
// @ts-ignore
|
||||
import * as acornWalk from 'acorn-walk';
|
||||
import {
|
||||
InspectionType,
|
||||
|
||||
@ -9,7 +9,7 @@ export type SBScalarType = SBBaseType & {
|
||||
|
||||
export type SBArrayType = SBBaseType & {
|
||||
name: 'array';
|
||||
value: SBType[];
|
||||
value: SBType;
|
||||
};
|
||||
export type SBObjectType = SBBaseType & {
|
||||
name: 'object';
|
||||
|
||||
@ -49,9 +49,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -33,9 +33,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -52,10 +52,9 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.story.decorators = [(storyFn) => <div className=\\"local\\">{storyFn()}</div>];
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.decorators = [(storyFn) => <div className=\\"local\\">{storyFn()}</div>];
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -38,7 +38,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -40,14 +40,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
helloStory.story = {};
|
||||
helloStory.story.name = 'hello story';
|
||||
helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloStory.storyName = 'hello story';
|
||||
helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
|
||||
|
||||
|
||||
@ -49,14 +49,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
export const storyNotes = () => <Button>Story notes</Button>;
|
||||
storyNotes.story = {};
|
||||
storyNotes.story.name = 'story notes';
|
||||
storyNotes.story.parameters = {
|
||||
storyNotes.storyName = 'story notes';
|
||||
storyNotes.parameters = {
|
||||
storySource: { source: '<Button>Story notes</Button>' },
|
||||
...{
|
||||
notes: 'story notes',
|
||||
|
||||
@ -53,14 +53,12 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const helloButton = () => <Button>Hello button</Button>;
|
||||
helloButton.story = {};
|
||||
helloButton.story.name = 'hello button';
|
||||
helloButton.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloButton.storyName = 'hello button';
|
||||
helloButton.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
export const two = () => <Button>Two</Button>;
|
||||
two.story = {};
|
||||
two.story.name = 'two';
|
||||
two.story.parameters = { storySource: { source: '<Button>Two</Button>' } };
|
||||
two.storyName = 'two';
|
||||
two.parameters = { storySource: { source: '<Button>Two</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -49,9 +49,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const componentNotes = () => <Button>Component notes</Button>;
|
||||
componentNotes.story = {};
|
||||
componentNotes.story.name = 'component notes';
|
||||
componentNotes.story.argTypes = {
|
||||
componentNotes.storyName = 'component notes';
|
||||
componentNotes.argTypes = {
|
||||
a: {
|
||||
name: 'A',
|
||||
},
|
||||
@ -59,11 +58,11 @@ componentNotes.story.argTypes = {
|
||||
name: 'B',
|
||||
},
|
||||
};
|
||||
componentNotes.story.args = {
|
||||
componentNotes.args = {
|
||||
a: 1,
|
||||
b: 2,
|
||||
};
|
||||
componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
|
||||
|
||||
|
||||
@ -33,9 +33,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const text = () => 'Plain text';
|
||||
text.story = {};
|
||||
text.story.name = 'text';
|
||||
text.story.parameters = { storySource: { source: \\"'Plain text'\\" } };
|
||||
text.storyName = 'text';
|
||||
text.parameters = { storySource: { source: \\"'Plain text'\\" } };
|
||||
|
||||
const componentMeta = { title: 'Text', includeStories: ['text'] };
|
||||
|
||||
|
||||
@ -43,24 +43,20 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const one = () => <Button>One</Button>;
|
||||
one.story = {};
|
||||
one.story.name = 'one';
|
||||
one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
one.storyName = 'one';
|
||||
one.parameters = { storySource: { source: '<Button>One</Button>' } };
|
||||
|
||||
export const helloStory = () => <Button>Hello button</Button>;
|
||||
helloStory.story = {};
|
||||
helloStory.story.name = 'hello story';
|
||||
helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
helloStory.storyName = 'hello story';
|
||||
helloStory.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
|
||||
|
||||
export const wPunctuation = () => <Button>with punctuation</Button>;
|
||||
wPunctuation.story = {};
|
||||
wPunctuation.story.name = 'w/punctuation';
|
||||
wPunctuation.story.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
|
||||
wPunctuation.storyName = 'w/punctuation';
|
||||
wPunctuation.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
|
||||
|
||||
export const _1FineDay = () => <Button>starts with number</Button>;
|
||||
_1FineDay.story = {};
|
||||
_1FineDay.story.name = '1 fine day';
|
||||
_1FineDay.story.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
|
||||
_1FineDay.storyName = '1 fine day';
|
||||
_1FineDay.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
|
||||
|
||||
const componentMeta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -37,9 +37,8 @@ function MDXContent({ components, ...props }) {
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const basic = assertIsFn(basicFn);
|
||||
basic.story = {};
|
||||
basic.story.name = 'basic';
|
||||
basic.story.parameters = { storySource: { source: 'basicFn' } };
|
||||
basic.storyName = 'basic';
|
||||
basic.parameters = { storySource: { source: 'basicFn' } };
|
||||
|
||||
const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
|
||||
|
||||
|
||||
@ -39,9 +39,8 @@ export const functionStory = () => {
|
||||
btn.addEventListener('click', action('Click'));
|
||||
return btn;
|
||||
};
|
||||
functionStory.story = {};
|
||||
functionStory.story.name = 'function';
|
||||
functionStory.story.parameters = {
|
||||
functionStory.storyName = 'function';
|
||||
functionStory.parameters = {
|
||||
storySource: {
|
||||
source:
|
||||
\\"() => {\\\\n const btn = document.createElement('button');\\\\n btn.innerHTML = 'Hello Button';\\\\n btn.addEventListener('click', action('Click'));\\\\n return btn;\\\\n}\\",
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
<Meta title="Multiple" />
|
||||
|
||||
# Multiple children
|
||||
|
||||
<Story name="multiple children">
|
||||
<p>Hello Child #1</p>
|
||||
<p>Hello Child #2</p>
|
||||
</Story>
|
||||
@ -0,0 +1,63 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`docs-mdx-compiler-plugin story-multiple-children.mdx 1`] = `
|
||||
"/* @jsx mdx */
|
||||
import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
const makeShortcode = (name) =>
|
||||
function MDXDefaultShortcode(props) {
|
||||
console.warn(
|
||||
'Component ' +
|
||||
name +
|
||||
' was not imported, exported, or provided by MDXProvider as global scope'
|
||||
);
|
||||
return <div {...props} />;
|
||||
};
|
||||
|
||||
const layoutProps = {};
|
||||
const MDXLayout = 'wrapper';
|
||||
function MDXContent({ components, ...props }) {
|
||||
return (
|
||||
<MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
|
||||
<Meta title=\\"Multiple\\" mdxType=\\"Meta\\" />
|
||||
<h1>{\`Multiple children\`}</h1>
|
||||
<Story name=\\"multiple children\\" mdxType=\\"Story\\">
|
||||
<p>Hello Child #1</p>
|
||||
<p>Hello Child #2</p>
|
||||
</Story>
|
||||
</MDXLayout>
|
||||
);
|
||||
}
|
||||
|
||||
MDXContent.isMDXComponent = true;
|
||||
|
||||
export const multipleChildren = () => (
|
||||
<>
|
||||
<p>Hello Child #1</p>
|
||||
<p>Hello Child #2</p>
|
||||
</>
|
||||
);
|
||||
multipleChildren.storyName = 'multiple children';
|
||||
multipleChildren.parameters = {
|
||||
storySource: { source: '<p>Hello Child #1</p>\\\\n<p>Hello Child #2</p>' },
|
||||
};
|
||||
|
||||
const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };
|
||||
|
||||
const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
};
|
||||
|
||||
export default componentMeta;
|
||||
"
|
||||
`;
|
||||
@ -51,9 +51,8 @@ export const toStorybook = () => ({
|
||||
declarations: [Welcome],
|
||||
},
|
||||
});
|
||||
toStorybook.story = {};
|
||||
toStorybook.story.name = 'to storybook';
|
||||
toStorybook.story.parameters = {
|
||||
toStorybook.storyName = 'to storybook';
|
||||
toStorybook.parameters = {
|
||||
storySource: {
|
||||
source:
|
||||
'{\\\\n template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n props: {\\\\n showApp: linkTo(\\\\'Button\\\\')\\\\n },\\\\n moduleMetadata: {\\\\n declarations: [Welcome]\\\\n }\\\\n}',
|
||||
|
||||
@ -33,7 +33,7 @@ export const __page = () => {
|
||||
throw new Error('Docs-only story');
|
||||
};
|
||||
|
||||
__page.story = { parameters: { docsOnly: true } };
|
||||
__page.parameters = { docsOnly: true };
|
||||
|
||||
const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
|
||||
|
||||
|
||||
@ -61,50 +61,56 @@ function genStoryExport(ast, context) {
|
||||
const statements = [];
|
||||
const storyKey = getStoryKey(storyName, context.counter);
|
||||
|
||||
let body = ast.children.find((n) => n.type !== 'JSXText');
|
||||
const bodyNodes = ast.children.filter((n) => n.type !== 'JSXText');
|
||||
let storyCode = null;
|
||||
|
||||
if (!body) {
|
||||
let storyVal = null;
|
||||
if (!bodyNodes.length) {
|
||||
// plain text node
|
||||
const { code } = generate(ast.children[0], {});
|
||||
storyCode = `'${code}'`;
|
||||
storyVal = `() => (
|
||||
${storyCode}
|
||||
)`;
|
||||
} else {
|
||||
if (body.type === 'JSXExpressionContainer') {
|
||||
// FIXME: handle fragments
|
||||
body = body.expression;
|
||||
const bodyParts = bodyNodes.map((bodyNode) => {
|
||||
const body = bodyNode.type === 'JSXExpressionContainer' ? bodyNode.expression : bodyNode;
|
||||
const { code } = generate(body, {});
|
||||
return { code, body };
|
||||
});
|
||||
// if we have more than two children
|
||||
// 1. Add line breaks
|
||||
// 2. Enclose in <> ... </>
|
||||
storyCode = bodyParts.map(({ code }) => code).join('\n');
|
||||
const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
|
||||
// keep track if an indentifier or function call
|
||||
// avoid breaking change for 5.3
|
||||
switch (bodyParts.length === 1 && bodyParts[0].body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
// assumes it's a function from CSF. Let's see who complains!
|
||||
case 'Identifier':
|
||||
storyVal = `assertIsFn(${storyCode})`;
|
||||
break;
|
||||
case 'ArrowFunctionExpression':
|
||||
storyVal = `(${storyCode})`;
|
||||
break;
|
||||
default:
|
||||
storyVal = `() => (
|
||||
${storyReactCode}
|
||||
)`;
|
||||
break;
|
||||
}
|
||||
const { code } = generate(body, {});
|
||||
storyCode = code;
|
||||
}
|
||||
|
||||
let storyVal = null;
|
||||
switch (body && body.type) {
|
||||
// We don't know what type the identifier is, but this code
|
||||
// assumes it's a function from CSF. Let's see who complains!
|
||||
case 'Identifier':
|
||||
storyVal = `assertIsFn(${storyCode})`;
|
||||
break;
|
||||
case 'ArrowFunctionExpression':
|
||||
storyVal = `(${storyCode})`;
|
||||
break;
|
||||
default:
|
||||
storyVal = `() => (
|
||||
${storyCode}
|
||||
)`;
|
||||
break;
|
||||
}
|
||||
|
||||
statements.push(`export const ${storyKey} = ${storyVal};`);
|
||||
statements.push(`${storyKey}.story = {};`);
|
||||
|
||||
// always preserve the name, since CSF exports can get modified by displayName
|
||||
statements.push(`${storyKey}.story.name = '${storyName}';`);
|
||||
statements.push(`${storyKey}.storyName = '${storyName}';`);
|
||||
|
||||
const argTypes = genAttribute('argTypes', ast.openingElement);
|
||||
if (argTypes) statements.push(`${storyKey}.story.argTypes = ${argTypes};`);
|
||||
if (argTypes) statements.push(`${storyKey}.argTypes = ${argTypes};`);
|
||||
|
||||
const args = genAttribute('args', ast.openingElement);
|
||||
if (args) statements.push(`${storyKey}.story.args = ${args};`);
|
||||
if (args) statements.push(`${storyKey}.args = ${args};`);
|
||||
|
||||
let parameters = getAttr(ast.openingElement, 'parameters');
|
||||
parameters = parameters && parameters.expression;
|
||||
@ -112,16 +118,16 @@ function genStoryExport(ast, context) {
|
||||
const sourceParam = `storySource: { source: '${source}' }`;
|
||||
if (parameters) {
|
||||
const { code: params } = generate(parameters, {});
|
||||
statements.push(`${storyKey}.story.parameters = { ${sourceParam}, ...${params} };`);
|
||||
statements.push(`${storyKey}.parameters = { ${sourceParam}, ...${params} };`);
|
||||
} else {
|
||||
statements.push(`${storyKey}.story.parameters = { ${sourceParam} };`);
|
||||
statements.push(`${storyKey}.parameters = { ${sourceParam} };`);
|
||||
}
|
||||
|
||||
let decorators = getAttr(ast.openingElement, 'decorators');
|
||||
decorators = decorators && decorators.expression;
|
||||
if (decorators) {
|
||||
const { code: decos } = generate(decorators, {});
|
||||
statements.push(`${storyKey}.story.decorators = ${decos};`);
|
||||
statements.push(`${storyKey}.decorators = ${decos};`);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
@ -329,7 +335,7 @@ function extractExports(node, options) {
|
||||
if (metaExport) {
|
||||
if (!storyExports.length) {
|
||||
storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');
|
||||
storyExports.push('__page.story = { parameters: { docsOnly: true } };');
|
||||
storyExports.push('__page.parameters = { docsOnly: true };');
|
||||
includeStories.push('__page');
|
||||
}
|
||||
} else {
|
||||
|
||||
1
addons/docs/src/typings.d.ts
vendored
1
addons/docs/src/typings.d.ts
vendored
@ -6,3 +6,4 @@ declare module 'remark-external-links';
|
||||
declare module 'babel-plugin-react-docgen';
|
||||
declare module 'require-from-string';
|
||||
declare module 'styled-components';
|
||||
declare module 'acorn-jsx';
|
||||
|
||||
@ -13,6 +13,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
- [Installation](#installation)
|
||||
- [Preset options](#preset-options)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [MDX](#mdx)
|
||||
- [Inline Stories](#inline-stories)
|
||||
- [More resources](#more-resources)
|
||||
@ -62,7 +63,9 @@ The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-
|
||||
|
||||
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
|
||||
|
||||
Props tables for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
|
||||
## Props tables
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
|
||||
|
||||
Finally, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
# Storybook Docs for Web Components
|
||||
<h1>Storybook Docs for Web Components</h1>
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Props tables](#props-tables)
|
||||
- [Stories not inline](#stories-not-inline)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Installation
|
||||
|
||||
@ -22,9 +27,9 @@
|
||||
};
|
||||
```
|
||||
|
||||
### custom-elements.json
|
||||
## Props tables
|
||||
|
||||
In order to get documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
|
||||
In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
|
||||
|
||||
You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
|
||||
|
||||
@ -44,7 +49,7 @@ To generate this file with Stencil, add `docs-vscode` to outputTargets in `stenc
|
||||
},
|
||||
```
|
||||
|
||||
The file looks somewthing like this:
|
||||
The file looks something like this:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@ -8,7 +8,9 @@ Each addon is documented and maintained by the core team and will be upgraded al
|
||||
|
||||
Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
|
||||
|
||||
- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
|
||||
- [Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
|
||||
|
||||
## Installation
|
||||
@ -31,7 +33,7 @@ module.exports = {
|
||||
|
||||
Essentials is "zero config." That means that comes with a recommended configuration out of the box.
|
||||
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `package.json` on startup and if detects one of its addons is already installed, it will skip that addon's configuration entirely.
|
||||
If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `main.js` on startup and if detects one of its addons is already configured in the `addons` field, it will skip that addon's configuration entirely.
|
||||
|
||||
## Disabling addons
|
||||
|
||||
@ -48,4 +50,4 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
Valid addon keys include: `backgrounds`, `viewport`
|
||||
Valid addon keys include: `actions`, `backgrounds`, `docs`, `viewport`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,17 +28,20 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.0",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/node-logger": "6.0.0-beta.0",
|
||||
"@storybook/addon-actions": "6.0.0-beta.14",
|
||||
"@storybook/addon-backgrounds": "6.0.0-beta.14",
|
||||
"@storybook/addon-docs": "6.0.0-beta.14",
|
||||
"@storybook/addon-viewport": "6.0.0-beta.14",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/node-logger": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"ts-dedent": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^25.1.1"
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^8.0.0",
|
||||
|
||||
@ -1,32 +1,40 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
interface PresetOptions {
|
||||
configDir?: string;
|
||||
backgrounds?: any;
|
||||
viewport?: any;
|
||||
docs?: any;
|
||||
}
|
||||
|
||||
let packageJson: any = {};
|
||||
if (fs.existsSync('./package.json')) {
|
||||
const requireMain = (configDir: string) => {
|
||||
let main = {};
|
||||
const mainFile = path.join(process.cwd(), configDir, 'main');
|
||||
try {
|
||||
packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
|
||||
// eslint-disable-next-line global-require,import/no-dynamic-require
|
||||
main = require(mainFile);
|
||||
} catch (err) {
|
||||
logger.error(`Error reading package.json: ${err.message}`);
|
||||
logger.warn(`Unable to find main.js: ${mainFile}`);
|
||||
}
|
||||
}
|
||||
|
||||
const isInstalled = (addon: string) => {
|
||||
const { dependencies, devDependencies } = packageJson;
|
||||
return (dependencies && dependencies[addon]) || (devDependencies && devDependencies[addon]);
|
||||
return main;
|
||||
};
|
||||
|
||||
const makeAddon = (key: string) => `@storybook/addon-${key}`;
|
||||
export function addons(options: PresetOptions = {}) {
|
||||
const checkInstalled = (addon: string, main: any) => {
|
||||
const existingAddon = main.addons?.find((entry: string | { name: string }) => {
|
||||
const name = typeof entry === 'string' ? entry : entry.name;
|
||||
return name?.startsWith(addon);
|
||||
});
|
||||
if (existingAddon) {
|
||||
logger.warn(`Found existing addon ${JSON.stringify(existingAddon)}, skipping.`);
|
||||
}
|
||||
return !!existingAddon;
|
||||
};
|
||||
|
||||
export function managerEntries(entry: any[] = [], options: PresetOptions = {}) {
|
||||
const registerAddons = ['backgrounds', 'viewport']
|
||||
const main = requireMain(options.configDir);
|
||||
return ['actions', 'docs', 'backgrounds', 'viewport']
|
||||
.filter((key) => (options as any)[key] !== false)
|
||||
.map((key) => makeAddon(key))
|
||||
.filter((addon) => !isInstalled(addon))
|
||||
.map((addon) => `${addon}/register`);
|
||||
return [...entry, ...registerAddons];
|
||||
.map((key) => `@storybook/addon-${key}`)
|
||||
.filter((addon) => !checkInstalled(addon, main));
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["jest"]
|
||||
"types": ["webpack-env", "jest", "node"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**.test.ts"]
|
||||
|
||||
@ -9,7 +9,7 @@ This [storybook](https://storybooks.js.org) ([source](https://github.com/storybo
|
||||
### Getting Started
|
||||
|
||||
```sh
|
||||
npm i --save-dev @storybook/addon-events
|
||||
npm i --save-dev @storybook/addon-events event-emitter
|
||||
```
|
||||
|
||||
within `.storybook/main.js`:
|
||||
@ -24,13 +24,13 @@ Then write your stories like this:
|
||||
|
||||
```js
|
||||
import withEvents from '@storybook/addon-events';
|
||||
import EventEmiter from 'event-emiter';
|
||||
import EventEmitter from 'event-emitter';
|
||||
|
||||
import Logger from './Logger';
|
||||
import * as EVENTS from './events';
|
||||
|
||||
const emiter = new EventEmiter();
|
||||
const emit = emiter.emit.bind(emiter);
|
||||
const emitter = new EventEmitter();
|
||||
const emit = emitter.emit.bind(emitter);
|
||||
|
||||
export default {
|
||||
title: 'withEvents',
|
||||
@ -89,6 +89,6 @@ export default {
|
||||
}
|
||||
|
||||
export const defaultView = () => (
|
||||
<Logger emiter={emiter} />
|
||||
<Logger emitter={emitter} />
|
||||
);
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,9 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-classes": "^7.9.2",
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@types/webpack": "^4.41.9",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.17.5",
|
||||
|
||||
@ -73,8 +73,8 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-jest']
|
||||
}
|
||||
addons: ['@storybook/addon-jest'],
|
||||
};
|
||||
```
|
||||
|
||||
## Usage
|
||||
@ -92,13 +92,9 @@ export default {
|
||||
decorators: [withTests({ results })],
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
},
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -126,13 +122,9 @@ export default {
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
},
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -147,13 +139,9 @@ export default {
|
||||
title: 'MyComponent',
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div>Jest results in storybook</div>
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
jest: { disable: true },
|
||||
},
|
||||
export const defaultView = () => <div>Jest results in storybook</div>;
|
||||
defaultView.parameters = {
|
||||
jest: { disable: true },
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 831 KiB After Width: | Height: | Size: 783 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -23,35 +23,34 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-knobs']
|
||||
}
|
||||
addons: ['@storybook/addon-knobs'],
|
||||
};
|
||||
```
|
||||
|
||||
Now, write your stories with Knobs.
|
||||
|
||||
### With React
|
||||
|
||||
```js
|
||||
import React from "react";
|
||||
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
|
||||
import React from 'react';
|
||||
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
// Add the `withKnobs` decorator to add knobs support to your stories.
|
||||
// You can also configure `withKnobs` as a global decorator.
|
||||
|
||||
// Knobs for React props
|
||||
export const withAButton = () => (
|
||||
<button disabled={boolean("Disabled", false)}>
|
||||
{text("Label", "Hello Storybook")}
|
||||
</button>
|
||||
<button disabled={boolean('Disabled', false)}>{text('Label', 'Hello Storybook')}</button>
|
||||
);
|
||||
|
||||
// Knobs as dynamic variables.
|
||||
export const asDynamicVariables = () => {
|
||||
const name = text("Name", "James");
|
||||
const age = number("Age", 35);
|
||||
const name = text('Name', 'James');
|
||||
const age = number('Age', 35);
|
||||
const content = `I am ${name} and I'm ${age} years old.`;
|
||||
|
||||
return <div>{content}</div>;
|
||||
@ -59,7 +58,9 @@ export const asDynamicVariables = () => {
|
||||
```
|
||||
|
||||
### With Vue.js
|
||||
|
||||
MyButton.story.js:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
@ -67,8 +68,8 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import MyButton from './MyButton.vue';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
// Assign `props` to the story's component, calling
|
||||
@ -80,17 +81,18 @@ export const exampleWithKnobs = () => ({
|
||||
components: { MyButton },
|
||||
props: {
|
||||
isDisabled: {
|
||||
default: boolean('Disabled', false)
|
||||
default: boolean('Disabled', false),
|
||||
},
|
||||
text: {
|
||||
default: text('Text', 'Hello Storybook')
|
||||
}
|
||||
default: text('Text', 'Hello Storybook'),
|
||||
},
|
||||
},
|
||||
template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`
|
||||
template: `<MyButton :isDisabled="isDisabled">{{ text }}</MyButton>`,
|
||||
});
|
||||
```
|
||||
|
||||
MyButton.vue:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<button :disabled="isDisabled">
|
||||
@ -103,14 +105,15 @@ export default {
|
||||
props: {
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### With Angular
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
@ -118,8 +121,8 @@ import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
import { Button } from '@storybook/angular/demo';
|
||||
|
||||
export default {
|
||||
title: "Storybook Knobs",
|
||||
decorators: [withKnobs]
|
||||
title: 'Storybook Knobs',
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export const withKnobs = () => ({
|
||||
@ -131,6 +134,7 @@ export const withKnobs = () => ({
|
||||
```
|
||||
|
||||
### With Ember
|
||||
|
||||
```js
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
@ -160,9 +164,9 @@ export const inGroups = () => {
|
||||
const personalGroupId = 'personal info';
|
||||
const generalGroupId = 'general info';
|
||||
|
||||
const name = text("Name", "James", personalGroupId);
|
||||
const age = number("Age", 35, personalGroupId);
|
||||
const message = text("Hello!", 35, generalGroupId);
|
||||
const name = text('Name', 'James', personalGroupId);
|
||||
const age = number('Age', 35, { min: 0, max: 99 }, personalGroupId);
|
||||
const message = text('Hello!', 35, generalGroupId);
|
||||
const content = `
|
||||
I am ${name} and I'm ${age} years old.
|
||||
${message}
|
||||
@ -245,10 +249,10 @@ import { number } from '@storybook/addon-knobs';
|
||||
const label = 'Temperature';
|
||||
const defaultValue = 73;
|
||||
const options = {
|
||||
range: true,
|
||||
min: 60,
|
||||
max: 90,
|
||||
step: 1,
|
||||
range: true,
|
||||
min: 60,
|
||||
max: 90,
|
||||
step: 1,
|
||||
};
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
@ -345,7 +349,7 @@ Options can also be an array:
|
||||
```js
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
const label = 'Cats';
|
||||
const options = ['linus', 'eleanor', 'lover']
|
||||
const options = ['linus', 'eleanor', 'lover'];
|
||||
const defaultValue = 'eleanor';
|
||||
const groupId = 'GROUP-ID2';
|
||||
const value = select(label, options, defaultValue, groupId);
|
||||
@ -369,7 +373,7 @@ const arrayOfObjects = [
|
||||
];
|
||||
const defaultValue = arrayOfObjects[0];
|
||||
const groupId = 'GROUP-ID3';
|
||||
const value = select(label, options, defaultValue, groupId);
|
||||
const value = select(label, arrayOfObjects, defaultValue, groupId);
|
||||
```
|
||||
|
||||
### radio buttons
|
||||
@ -393,7 +397,7 @@ const value = radios(label, options, defaultValue, groupId);
|
||||
|
||||
### options
|
||||
|
||||
Configurable UI for selecting a value from a set of options.
|
||||
Configurable UI for selecting a value from a set of options.
|
||||
|
||||
```js
|
||||
import { optionsKnob as options } from '@storybook/addon-knobs';
|
||||
@ -406,13 +410,15 @@ const valuesObj = {
|
||||
};
|
||||
const defaultValue = 'kiwi';
|
||||
const optionsObj = {
|
||||
display: 'inline-radio'
|
||||
display: 'inline-radio',
|
||||
};
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
const value = options(label, valuesObj, defaultValue, optionsObj, groupId);
|
||||
```
|
||||
|
||||
> The display property for `optionsObj` accepts:
|
||||
>
|
||||
> - `radio`
|
||||
> - `inline-radio`
|
||||
> - `check`
|
||||
@ -459,8 +465,8 @@ If your component needs the date in a different form you can wrap the `date` fun
|
||||
|
||||
```js
|
||||
function myDateKnob(name, defaultValue) {
|
||||
const stringTimestamp = date(name, defaultValue)
|
||||
return new Date(stringTimestamp)
|
||||
const stringTimestamp = date(name, defaultValue);
|
||||
return new Date(stringTimestamp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -494,20 +500,16 @@ export default {
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export const defaultView = () => (
|
||||
<div />
|
||||
);
|
||||
defaultView.story = {
|
||||
parameters: {
|
||||
knobs: {
|
||||
// Doesn't emit events while user is typing.
|
||||
timestamps: true,
|
||||
export const defaultView = () => <div />;
|
||||
defaultView.parameters = {
|
||||
knobs: {
|
||||
// Doesn't emit events while user is typing.
|
||||
timestamps: true,
|
||||
|
||||
// Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
|
||||
// You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
|
||||
escapeHTML: true,
|
||||
}
|
||||
}
|
||||
// Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
|
||||
// You can still set it to false, but it's strongly discouraged to set to true in cases when you host your storybook on some route of your main site or web app.
|
||||
escapeHTML: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -518,9 +520,8 @@ If you are using Typescript, make sure you have the type definitions installed f
|
||||
- node
|
||||
- react
|
||||
|
||||
You can install them using: (*assuming you are using Typescript >2.0.*)
|
||||
You can install them using: (_assuming you are using Typescript >2.0._)
|
||||
|
||||
```sh
|
||||
yarn add @types/node @types/react --dev
|
||||
```
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 709 KiB After Width: | Height: | Size: 699 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/channels": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/channels": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -150,4 +150,4 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
|
||||
>Go to Second</LinkTo>
|
||||
```
|
||||
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/lib/components/src/navigation/routed_link.js#L4-L9) for reference.
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/addons/links/src/react/components/RoutedLink.js#L20-L24) for reference.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,11 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/client-logger": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.0.0-beta.0",
|
||||
"@storybook/router": "6.0.0-beta.14",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/api": "6.0.0-beta.0",
|
||||
"@storybook/client-logger": "6.0.0-beta.0",
|
||||
"@storybook/components": "6.0.0-beta.0",
|
||||
"@storybook/core-events": "6.0.0-beta.0",
|
||||
"@storybook/theming": "6.0.0-beta.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/api": "6.0.0-beta.14",
|
||||
"@storybook/client-logger": "6.0.0-beta.14",
|
||||
"@storybook/components": "6.0.0-beta.14",
|
||||
"@storybook/core-events": "6.0.0-beta.14",
|
||||
"@storybook/theming": "6.0.0-beta.14",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -33,29 +33,28 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y
|
||||
|
||||
|
||||
|
||||
|
||||
## Configure your app for Jest
|
||||
|
||||
In many cases, for example Create React App, it's already configured for Jest. You need to create a filename with the extension `.test.js`.
|
||||
|
||||
If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
- [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
|
||||
- [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). ***paid content***
|
||||
- [Getting Started - Jest Official Documentation](https://facebook.github.io/jest/docs/en/getting-started.html)
|
||||
- [Javascript Testing with Jest - Egghead](https://egghead.io/lessons/javascript-test-javascript-with-jest). **_paid content_**
|
||||
|
||||
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
|
||||
>
|
||||
> Note: Make sure you have added the ```json``` extension to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
|
||||
> Note: Make sure you have added the `json` extension to `moduleFileExtensions` in `jest.config.json`. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): `Cannot find module 'spdx-license-ids' from 'scan.js'`.
|
||||
>
|
||||
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.
|
||||
|
||||
> Note: Please make sure you are using `jsdom` as the testEnvironment on your jest config file.
|
||||
|
||||
### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)
|
||||
|
||||
**NOTE**: if you are using Storybook 5.3's `main.js` to list story files, this is no longer needed.
|
||||
|
||||
Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories).
|
||||
Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories).
|
||||
|
||||
1) If you're using the `storiesOf` API, you can integrate it this way:
|
||||
1. If you're using the `storiesOf` API, you can integrate it this way:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/react';
|
||||
@ -63,13 +62,13 @@ import { configure } from '@storybook/react';
|
||||
const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
req.keys().forEach((filename) => req(filename));
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
```
|
||||
|
||||
2) If you're using Component Story Format (CSF), you'll integrate it like so:
|
||||
2. If you're using Component Story Format (CSF), you'll integrate it like so:
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/react';
|
||||
@ -77,7 +76,7 @@ import { configure } from '@storybook/react';
|
||||
const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once
|
||||
|
||||
configure(req, module);
|
||||
```
|
||||
```
|
||||
|
||||
The problem here is that it will work only during the build with webpack,
|
||||
other tools may lack this feature. Since Storyshot is running under Jest,
|
||||
@ -100,11 +99,13 @@ Next, it needs to be registered and loaded before each test. To register it, cre
|
||||
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
|
||||
registerRequireContextHook();
|
||||
```
|
||||
|
||||
That file needs to be added as a setup file for Jest. To do that, add (or create) a property in Jest's config called [`setupFiles`](https://jestjs.io/docs/en/configuration.html#setupfiles-array). Add the file name and path to this array.
|
||||
|
||||
```json
|
||||
setupFiles: ['<rootDir>/.jest/register-context.js']
|
||||
```
|
||||
|
||||
Finally, add the plugin to `.babelrc`:
|
||||
|
||||
```json
|
||||
@ -118,6 +119,7 @@ Finally, add the plugin to `.babelrc`:
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The plugin is only added to the test environment otherwise it could replace webpack's version of it.
|
||||
|
||||
#### Option 2: Macro
|
||||
@ -138,6 +140,7 @@ const req = requireContext('../stories', true, /\.stories\.js$/);
|
||||
```
|
||||
|
||||
### Configure Jest for React
|
||||
|
||||
StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -146,6 +149,7 @@ yarn add react-test-renderer --dev
|
||||
```
|
||||
|
||||
### Configure Jest for Angular
|
||||
|
||||
StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -155,6 +159,7 @@ yarn add jest-preset-angular
|
||||
|
||||
If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
|
||||
Anyway you can add these lines to your jest config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
globals: {
|
||||
@ -167,7 +172,9 @@ module.exports = {
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
|
||||
};
|
||||
```
|
||||
|
||||
### Configure Jest for Vue
|
||||
|
||||
StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -177,20 +184,20 @@ yarn add jest-vue-preprocessor
|
||||
|
||||
If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
|
||||
Anyway you can add these lines to your jest config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
|
||||
},
|
||||
transformIgnorePatterns: [
|
||||
'/node_modules/(?!(@storybook/.*\\.vue$))',
|
||||
],
|
||||
transformIgnorePatterns: ['/node_modules/(?!(@storybook/.*\\.vue$))'],
|
||||
moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
|
||||
};
|
||||
```
|
||||
|
||||
### Configure Jest for Preact
|
||||
|
||||
StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
@ -200,7 +207,7 @@ yarn add preact-render-to-json --dev
|
||||
|
||||
### Configure Jest for MDX Docs Add-On Stories
|
||||
|
||||
If using the [Docs add-on](../../docs/README.md) with
|
||||
If using the [Docs add-on](../../docs/README.md) with
|
||||
[MDX stories](../../docs/docs/mdx.md) you will need
|
||||
to configure Jest to transform MDX stories into something Storyshots can understand:
|
||||
|
||||
@ -216,6 +223,7 @@ Add the following to your Jest configuration:
|
||||
```
|
||||
|
||||
### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
|
||||
|
||||
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
|
||||
|
||||
`dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
|
||||
@ -238,34 +246,33 @@ out elements that rely on refs, you will have to use the
|
||||
Here is an example of how to specify the `createNodeMock` option in Storyshots:
|
||||
|
||||
```js
|
||||
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'
|
||||
import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs'
|
||||
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
|
||||
import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs';
|
||||
|
||||
initStoryshots({
|
||||
test: snapshotWithOptions({
|
||||
createNodeMock: (element) => {
|
||||
if (element.type === TextareaThatUsesRefs) {
|
||||
return document.createElement('textarea')
|
||||
return document.createElement('textarea');
|
||||
}
|
||||
},
|
||||
}),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Provide a function to have story-specific options:
|
||||
|
||||
|
||||
```js
|
||||
initStoryshots({
|
||||
test: snapshotWithOptions(story =>({
|
||||
test: snapshotWithOptions((story) => ({
|
||||
createNodeMock: (element) => {
|
||||
if(story.name == 'foobar') {
|
||||
return null
|
||||
if (story.name == 'foobar') {
|
||||
return null;
|
||||
}
|
||||
return element
|
||||
return element;
|
||||
},
|
||||
})),
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### StoryShots for async rendered components
|
||||
@ -280,28 +287,28 @@ Add _stories of UserForm_ in the file: UserForm.story.jsx
|
||||
|
||||
```jsx
|
||||
/* global module */
|
||||
import React from "react";
|
||||
import { QueryRenderer } from "react-relay";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from 'react';
|
||||
import { QueryRenderer } from 'react-relay';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
// Use the same queries used in YOUR app routes
|
||||
import { newUserFormQuery, editUserFormQuery } from "app/routes";
|
||||
import UserFormContainer from "app/users/UserForm";
|
||||
import { newUserFormQuery, editUserFormQuery } from 'app/routes';
|
||||
import UserFormContainer from 'app/users/UserForm';
|
||||
|
||||
// YOUR function to generate a Relay Environment mock.
|
||||
// See https://github.com/1stdibs/relay-mock-network-layer for more info
|
||||
import getEnvironment from "test/support/relay-environment-mock";
|
||||
import getEnvironment from 'test/support/relay-environment-mock';
|
||||
|
||||
// User test data YOU generated for your tests
|
||||
import { user } from "test/support/data/index";
|
||||
import { user } from 'test/support/data/index';
|
||||
|
||||
// Use this function to return a new Environment for each story
|
||||
const Environment = () =>
|
||||
getEnvironment({
|
||||
mocks: {
|
||||
Node: () => ({ __typename: "User" }),
|
||||
User: () => user
|
||||
}
|
||||
Node: () => ({ __typename: 'User' }),
|
||||
User: () => user,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
@ -328,23 +335,23 @@ const renderStory = (query, environment, variables = {}) => (
|
||||
/>
|
||||
);
|
||||
|
||||
storiesOf("users/UserForm", module)
|
||||
.add("New User", () => {
|
||||
storiesOf('users/UserForm', module)
|
||||
.add('New User', () => {
|
||||
const environment = new Environment();
|
||||
return renderStory(newUserFormQuery, environment);
|
||||
})
|
||||
.add("Editing User", () => {
|
||||
.add('Editing User', () => {
|
||||
const environment = new Environment();
|
||||
return renderStory(editUserFormQuery, environment, { id: user.id });
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Then, init Storyshots for async component in the file: StoryShots.test.js
|
||||
|
||||
```jsx
|
||||
import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
|
||||
import { mount } from "enzyme";
|
||||
import toJson from "enzyme-to-json";
|
||||
import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
|
||||
import { mount } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
// Runner
|
||||
initStoryshots({
|
||||
@ -352,7 +359,7 @@ initStoryshots({
|
||||
test: ({
|
||||
story,
|
||||
context,
|
||||
done // --> callback passed to test method when asyncJest option is true
|
||||
done, // --> callback passed to test method when asyncJest option is true
|
||||
}) => {
|
||||
const converter = new Stories2SnapsConverter();
|
||||
const snapshotFilename = converter.getSnapshotFileName(context);
|
||||
@ -371,12 +378,12 @@ initStoryshots({
|
||||
}
|
||||
|
||||
done();
|
||||
}, waitTime)
|
||||
}, waitTime);
|
||||
},
|
||||
// other options here
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
NOTICE that When using the `asyncJest: true` option, you also must specify a `test` method that calls the `done()` callback.
|
||||
|
||||
This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
|
||||
@ -405,8 +412,8 @@ initStoryshots({
|
||||
|
||||
By default, Storyshots assumes the config directory path for your project as below:
|
||||
|
||||
- Storybook for React: `.storybook`
|
||||
- Storybook for React Native: `storybook`
|
||||
- Storybook for React: `.storybook`
|
||||
- Storybook for React Native: `storybook`
|
||||
|
||||
If you are using a different config directory path, you could change it like this:
|
||||
|
||||
@ -414,7 +421,7 @@ If you are using a different config directory path, you could change it like thi
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir'
|
||||
configPath: '.my-storybook-config-dir',
|
||||
});
|
||||
```
|
||||
|
||||
@ -433,15 +440,14 @@ original one. It also may be useful for separating tests to different test confi
|
||||
|
||||
```js
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir/testConfig1.js'
|
||||
configPath: '.my-storybook-config-dir/testConfig1.js',
|
||||
});
|
||||
|
||||
initStoryshots({
|
||||
configPath: '.my-storybook-config-dir/testConfig2.js'
|
||||
configPath: '.my-storybook-config-dir/testConfig2.js',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### `suite`
|
||||
|
||||
By default, Storyshots groups stories inside a Jest test suite called "Storyshots". You could change it like this:
|
||||
@ -450,7 +456,7 @@ By default, Storyshots groups stories inside a Jest test suite called "Storyshot
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
suite: 'MyStoryshots'
|
||||
suite: 'MyStoryshots',
|
||||
});
|
||||
```
|
||||
|
||||
@ -462,7 +468,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyKindRegex: /^MyComponent$/
|
||||
storyKindRegex: /^MyComponent$/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -474,7 +480,7 @@ If you want to run all stories except stories of a specific kind, you can write
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyKindRegex:/^((?!.*?DontTest).)*$/
|
||||
storyKindRegex: /^((?!.*?DontTest).)*$/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -489,7 +495,7 @@ If you'd like to only run a subset of the stories for your snapshot tests based
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
storyNameRegex: /buttons/
|
||||
storyNameRegex: /buttons/,
|
||||
});
|
||||
```
|
||||
|
||||
@ -533,7 +539,6 @@ initStoryshots({
|
||||
If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
|
||||
For that, you can pass an enzyme-compatible snapshotSerializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) with the `snapshotSerializer` option (see below).
|
||||
|
||||
|
||||
### `snapshotSerializers`
|
||||
|
||||
Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
|
||||
@ -549,8 +554,9 @@ initStoryshots({
|
||||
```
|
||||
|
||||
This option needs to be set if either:
|
||||
* the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
|
||||
* serializers not specified in your jest config should be used when snapshotting stories.
|
||||
|
||||
- the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
|
||||
- serializers not specified in your jest config should be used when snapshotting stories.
|
||||
|
||||
### `serializer` (deprecated)
|
||||
|
||||
@ -569,6 +575,7 @@ initStoryshots({
|
||||
This option only needs to be set if the default `snapshotSerializers` is not set in your jest config.
|
||||
|
||||
### `stories2snapsConverter`
|
||||
|
||||
This parameter should be an instance of the [`Stories2SnapsConverter`](src/Stories2SnapsConverter.js) (or a derived from it) Class that is used to convert story-file name to snapshot-file name and vice versa.
|
||||
|
||||
By default, the instance of this class is created with these default options:
|
||||
@ -592,7 +599,6 @@ initStoryshots({
|
||||
storiesExtensions: ['.foo'],
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## Exports
|
||||
@ -620,6 +626,7 @@ Like the default, but allows you to specify a set of options for the renderer, j
|
||||
|
||||
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object.
|
||||
If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
|
||||
|
||||
```js
|
||||
// jest.config.js
|
||||
module.exports = {
|
||||
@ -670,7 +677,7 @@ initStoryshots({
|
||||
if (snapshotFileName) {
|
||||
expect(toJson(shallowTree)).toMatchSpecificSnapshot(snapshotFileName);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@ -678,7 +685,6 @@ initStoryshots({
|
||||
|
||||
Enables Jest `done()` callback in the StoryShots tests for async testing. See [StoryShots for async rendered components](#storyshots-for-async-rendered-components) for more info.
|
||||
|
||||
|
||||
## Story Parameters
|
||||
|
||||
### `disable`
|
||||
@ -689,10 +695,8 @@ Some stories are difficult or impossible to snapshot, such as those covering com
|
||||
export const Exception = () => {
|
||||
throw new Error('storyFn threw an error! WHOOPS');
|
||||
};
|
||||
Exception.story = {
|
||||
name: 'story throws exception',
|
||||
parameters: {
|
||||
storyshots: { disable: true },
|
||||
},
|
||||
Exception.storyName = 'story throws exception';
|
||||
Exception.parameters = {
|
||||
storyshots: { disable: true },
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,10 +32,10 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^25.2.4",
|
||||
"@storybook/addons": "6.0.0-beta.0",
|
||||
"@storybook/client-api": "6.0.0-beta.0",
|
||||
"@storybook/core": "6.0.0-beta.0",
|
||||
"@jest/transform": "^26.0.0",
|
||||
"@storybook/addons": "6.0.0-beta.14",
|
||||
"@storybook/client-api": "6.0.0-beta.14",
|
||||
"@storybook/core": "6.0.0-beta.14",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -50,8 +50,8 @@
|
||||
"ts-dedent": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "6.0.0-beta.0",
|
||||
"@storybook/react": "6.0.0-beta.0",
|
||||
"@storybook/addon-docs": "6.0.0-beta.14",
|
||||
"@storybook/react": "6.0.0-beta.14",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
|
||||
@ -7,17 +7,17 @@ import { StoryshotsOptions } from '../../api/StoryshotsOptions';
|
||||
|
||||
function setupAngularJestPreset() {
|
||||
// Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
|
||||
require.requireActual('core-js');
|
||||
require.requireActual('core-js/modules/es.promise');
|
||||
// require.requireActual('core-js/es6/reflect');
|
||||
// require.requireActual('core-js/es7/reflect');
|
||||
jest.requireActual('core-js');
|
||||
jest.requireActual('core-js/modules/es.promise');
|
||||
// jest.requireActual('core-js/es6/reflect');
|
||||
// jest.requireActual('core-js/es7/reflect');
|
||||
|
||||
// Angular + Jest + Storyshots = Crazy Shit:
|
||||
// We need to require 'jest-preset-angular/setupJest' before any storybook code
|
||||
// is running inside jest - one of the things that `jest-preset-angular/setupJest` does is
|
||||
// We need to require 'jest-preset-angular/build/setupJest' before any storybook code
|
||||
// is running inside jest - one of the things that `jest-preset-angular/build/setupJest` does is
|
||||
// extending the `window.Reflect` with all the needed metadata functions, that are required
|
||||
// for emission of the TS decorations like 'design:paramtypes'
|
||||
require.requireActual('jest-preset-angular/setupJest');
|
||||
jest.requireActual('jest-preset-angular/build/setupJest');
|
||||
}
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
@ -29,13 +29,13 @@ function test(options: StoryshotsOptions): boolean {
|
||||
function load(options: StoryshotsOptions) {
|
||||
setupAngularJestPreset();
|
||||
|
||||
const storybook = require.requireActual('@storybook/angular');
|
||||
const storybook = jest.requireActual('@storybook/angular');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'angular' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for angular');
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
|
||||
import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
|
||||
import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
|
||||
@ -48,7 +48,7 @@ function getConfigPathParts(input: string): Output {
|
||||
output.files.push(preview);
|
||||
}
|
||||
if (main) {
|
||||
const { stories = [] } = require.requireActual(main);
|
||||
const { stories = [] } = jest.requireActual(main);
|
||||
|
||||
output.stories = stories.map(
|
||||
(pattern: string | { path: string; recursive: boolean; match: string }) => {
|
||||
@ -80,7 +80,7 @@ function configure(
|
||||
const { files, stories } = getConfigPathParts(configPath);
|
||||
|
||||
files.forEach((f) => {
|
||||
require.requireActual(f);
|
||||
jest.requireActual(f);
|
||||
});
|
||||
|
||||
if (stories && stories.length) {
|
||||
|
||||
@ -10,13 +10,13 @@ function test(options: StoryshotsOptions): boolean {
|
||||
function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'html';
|
||||
|
||||
const storybook = require.requireActual('@storybook/html');
|
||||
const storybook = jest.requireActual('@storybook/html');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'html' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for HTML');
|
||||
},
|
||||
|
||||
@ -15,13 +15,13 @@ function test(options: StoryshotsOptions): boolean {
|
||||
function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'preact';
|
||||
|
||||
const storybook = require.requireActual('@storybook/preact');
|
||||
const storybook = jest.requireActual('@storybook/preact');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'preact' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for preact');
|
||||
},
|
||||
|
||||
@ -11,13 +11,13 @@ function test(options: StoryshotsOptions): boolean {
|
||||
function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'rax';
|
||||
|
||||
const storybook = require.requireActual('@storybook/rax');
|
||||
const storybook = jest.requireActual('@storybook/rax');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'rax' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for rax');
|
||||
},
|
||||
|
||||
@ -20,11 +20,11 @@ function configure(options: StoryshotsOptions, storybook: any) {
|
||||
}
|
||||
|
||||
const resolvedConfigPath = path.resolve(configPath);
|
||||
require.requireActual(resolvedConfigPath);
|
||||
jest.requireActual(resolvedConfigPath);
|
||||
}
|
||||
|
||||
function load(options: StoryshotsOptions) {
|
||||
const storybook = require.requireActual('@storybook/react-native');
|
||||
const storybook = jest.requireActual('@storybook/react-native');
|
||||
|
||||
configure(options, storybook);
|
||||
|
||||
|
||||
@ -8,14 +8,14 @@ function test(options: StoryshotsOptions): boolean {
|
||||
}
|
||||
|
||||
function load(options: StoryshotsOptions) {
|
||||
const storybook = require.requireActual('@storybook/react');
|
||||
const storybook = jest.requireActual('@storybook/react');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'react' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: require.requireActual('./renderShallowTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: jest.requireActual('./renderShallowTree').default,
|
||||
storybook,
|
||||
};
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import { Loader } from '../Loader';
|
||||
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
|
||||
|
||||
function mockRiotToIncludeCompiler() {
|
||||
jest.mock('riot', () => require.requireActual('riot/riot.js'));
|
||||
jest.mock('riot', () => jest.requireActual('riot/riot.js'));
|
||||
}
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
@ -16,13 +16,13 @@ function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'riot';
|
||||
mockRiotToIncludeCompiler();
|
||||
|
||||
const storybook = require.requireActual('@storybook/riot');
|
||||
const storybook = jest.requireActual('@storybook/riot');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'riot' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for riot');
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { document } from 'global';
|
||||
|
||||
const riotForStorybook = require.requireActual('@storybook/riot');
|
||||
const riotForStorybook = jest.requireActual('@storybook/riot');
|
||||
|
||||
function bootstrapADocumentAndReturnANode() {
|
||||
const rootElement = document.createElement('div');
|
||||
|
||||
@ -13,13 +13,13 @@ function test(options: StoryshotsOptions): boolean {
|
||||
function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'svelte';
|
||||
|
||||
const storybook = require.requireActual('@storybook/svelte');
|
||||
const storybook = jest.requireActual('@storybook/svelte');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'svelte' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for svelte');
|
||||
},
|
||||
|
||||
@ -5,7 +5,7 @@ import { Loader } from '../Loader';
|
||||
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
|
||||
|
||||
function mockVueToIncludeCompiler() {
|
||||
jest.mock('vue', () => require.requireActual('vue/dist/vue.common.js'));
|
||||
jest.mock('vue', () => jest.requireActual('vue/dist/vue.common.js'));
|
||||
}
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
@ -16,13 +16,13 @@ function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'vue';
|
||||
mockVueToIncludeCompiler();
|
||||
|
||||
const storybook = require.requireActual('@storybook/vue');
|
||||
const storybook = jest.requireActual('@storybook/vue');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'vue' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderTree: jest.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for vue');
|
||||
},
|
||||
|
||||
@ -31,6 +31,4 @@ export default {
|
||||
};
|
||||
|
||||
export const withTimeout = () => <AsyncTestComponent />;
|
||||
withTimeout.story = {
|
||||
name: `with ${TIMEOUT}ms timeout simulating async operation`,
|
||||
};
|
||||
withTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`;
|
||||
|
||||
@ -21,6 +21,4 @@ export const withSomeEmoji = () => (
|
||||
</Button>
|
||||
);
|
||||
|
||||
withSomeEmoji.story = {
|
||||
name: 'with some emoji',
|
||||
};
|
||||
withSomeEmoji.storyName = 'with some emoji';
|
||||
|
||||
@ -13,6 +13,4 @@ export default {
|
||||
|
||||
export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
|
||||
|
||||
toStorybook.story = {
|
||||
name: 'to Storybook',
|
||||
};
|
||||
toStorybook.storyName = 'to Storybook';
|
||||
|
||||
@ -22,6 +22,7 @@ When willing to run Puppeteer tests for your stories, you have two options:
|
||||
Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
|
||||
|
||||
## _puppeteerTest_
|
||||
|
||||
Allows to define arbitrary Puppeteer tests as `story.parameters.puppeteerTest` function.
|
||||
|
||||
You can either create a new Storyshots instance or edit the one you previously used:
|
||||
@ -34,17 +35,16 @@ initStoryshots({ suite: 'Puppeteer storyshots', test: puppeteerTest() });
|
||||
```
|
||||
|
||||
Then, in your stories:
|
||||
|
||||
```js
|
||||
export const myExample = () => {
|
||||
...
|
||||
};
|
||||
myExample.story = {
|
||||
parameters: {
|
||||
async puppeteerTest(page) {
|
||||
const element = await page.$('<some-selector>');
|
||||
await element.click();
|
||||
expect(something).toBe(something);
|
||||
},
|
||||
myExample.parameters = {
|
||||
async puppeteerTest(page) {
|
||||
const element = await page.$('<some-selector>');
|
||||
await element.click();
|
||||
expect(something).toBe(something);
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -80,7 +80,7 @@ import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
initStoryshots({
|
||||
suite: 'Puppeteer storyshots',
|
||||
test: puppeteerTest({
|
||||
test: puppeteerTest({
|
||||
storybookUrl: 'file:///path/to/my/storybook-static',
|
||||
// storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}'
|
||||
}),
|
||||
@ -93,12 +93,14 @@ You might use `getGotoOptions` to specify options when the storybook is navigati
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
const getGotoOptions = ({ context, url }) => {
|
||||
return {
|
||||
waitUntil: 'networkidle0',
|
||||
};
|
||||
};
|
||||
|
||||
initStoryshots({
|
||||
suite: 'Puppeteer storyshots',
|
||||
test: puppeteerTest({ storybookUrl: 'http://localhost:6006', getGotoOptions }),
|
||||
@ -130,7 +132,7 @@ import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
|
||||
import puppeteer from 'puppeteer';
|
||||
|
||||
(async function() {
|
||||
(async function () {
|
||||
initStoryshots({
|
||||
suite: 'Puppeteer storyshots',
|
||||
test: puppeteerTest({
|
||||
@ -214,18 +216,20 @@ This can be achieved by adding a step before running the test ie: `npm run build
|
||||
If you run the Puppeteer storyshots against a running Storybook in dev mode, you don't have to worry about the stories being up-to-date because the dev-server is watching changes and rebuilds automatically.
|
||||
|
||||
## _axeTest_
|
||||
|
||||
Runs [Axe](https://www.deque.com/axe/) accessibility checks and verifies that they pass using [jest-puppeteer-axe](https://github.com/WordPress/gutenberg/tree/master/packages/jest-puppeteer-axe).
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { axeTest } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
axeTest({ suite: 'A11y checks', test: axeTest() });
|
||||
initStoryshots({ suite: 'A11y checks', test: axeTest() });
|
||||
```
|
||||
|
||||
For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
|
||||
|
||||
## _imageSnapshots_
|
||||
|
||||
Generates and compares screenshots of your stories using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
|
||||
|
||||
```js
|
||||
@ -251,14 +255,14 @@ const getMatchOptions = ({ context: { kind, story }, url }) => {
|
||||
};
|
||||
};
|
||||
const beforeScreenshot = (page, { context: { kind, story }, url }) => {
|
||||
return new Promise(resolve =>
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 600)
|
||||
);
|
||||
};
|
||||
const afterScreenshot = ({ image, context }) => {
|
||||
return new Promise(resolve =>
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 600)
|
||||
@ -266,7 +270,12 @@ const afterScreenshot = ({ image, context }) => {
|
||||
};
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot, afterScreenshot }),
|
||||
test: imageSnapshot({
|
||||
storybookUrl: 'http://localhost:6006',
|
||||
getMatchOptions,
|
||||
beforeScreenshot,
|
||||
afterScreenshot,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.0.0-beta.0",
|
||||
"version": "6.0.0-beta.14",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,7 +30,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.0.0-beta.0",
|
||||
"@storybook/node-logger": "6.0.0-beta.14",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
@ -42,7 +42,7 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.0",
|
||||
"@storybook/addon-storyshots": "6.0.0-beta.14",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
|
||||
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