mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Merge branch 'next' into pr/osdiab/14811
# Conflicts: # addons/storyshots/storyshots-core/package.json # examples/ember-cli/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
485e3bc819
@ -176,7 +176,7 @@ jobs:
|
||||
condition:
|
||||
and:
|
||||
- not:
|
||||
equal: [master, << pipeline.git.branch >>]
|
||||
equal: [main, << pipeline.git.branch >>]
|
||||
- not:
|
||||
equal: [next, << pipeline.git.branch >>]
|
||||
steps:
|
||||
@ -198,7 +198,7 @@ jobs:
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
e2e-tests-core:
|
||||
executor:
|
||||
@ -224,7 +224,7 @@ jobs:
|
||||
command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
cra-bench:
|
||||
executor:
|
||||
@ -271,7 +271,7 @@ jobs:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
e2e-tests-examples:
|
||||
executor:
|
||||
@ -293,7 +293,7 @@ jobs:
|
||||
name: cypress run
|
||||
command: yarn test:e2e-examples
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
smoke-tests:
|
||||
executor:
|
||||
|
||||
28
.github/workflows/tests-unit.yml
vendored
28
.github/workflows/tests-unit.yml
vendored
@ -7,19 +7,15 @@ jobs:
|
||||
name: Core Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: '12.x'
|
||||
- uses: actions/checkout@v2
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: node_modules
|
||||
key: yarn-2-cache-v1-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install, bootstrap
|
||||
run: |
|
||||
yarn install --immutable
|
||||
yarn bootstrap --core
|
||||
- name: test
|
||||
run: |
|
||||
yarn test --runInBand --ci
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "12.x"
|
||||
cache: yarn
|
||||
- name: install, bootstrap
|
||||
run: |
|
||||
yarn install --immutable
|
||||
yarn bootstrap --core
|
||||
- name: test
|
||||
run: |
|
||||
yarn test --runInBand --ci
|
||||
|
||||
@ -19,7 +19,7 @@ changeBuildType(RelativeId("TestWorkflow")) {
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:master
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
|
||||
4
.teamcity/settings.kts
vendored
4
.teamcity/settings.kts
vendored
@ -426,7 +426,7 @@ object Frontpage : BuildType({
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = "+:master"
|
||||
branchFilter = "+:main"
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -518,7 +518,7 @@ object TestWorkflow : BuildType({
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:master
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
|
||||
5
.yarn/plugins/@yarnpkg/plugin-typescript.cjs
generated
vendored
5
.yarn/plugins/@yarnpkg/plugin-typescript.cjs
generated
vendored
File diff suppressed because one or more lines are too long
695
.yarn/releases/yarn-sources.cjs
generated
vendored
695
.yarn/releases/yarn-sources.cjs
generated
vendored
File diff suppressed because one or more lines are too long
342
CHANGELOG.md
342
CHANGELOG.md
@ -1,3 +1,345 @@
|
||||
## 6.4.0-alpha.22 (July 28, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF3: Add auto-titles from standard glob patterns ([#15697](https://github.com/storybookjs/storybook/pull/15697))
|
||||
- CSF3: Add startCase to auto-generated titles ([#15618](https://github.com/storybookjs/storybook/pull/15618))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix Svelte CLI template markup ([#15689](https://github.com/storybookjs/storybook/pull/15689))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Server: Upgrade to CSF3 ([#15698](https://github.com/storybookjs/storybook/pull/15698))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Fix some transitive peer dependency warnings ([#15687](https://github.com/storybookjs/storybook/pull/15687))
|
||||
- Upgrade react-refresh plugin to fix fast refresh on Webpack5 ([#15616](https://github.com/storybookjs/storybook/pull/15616))
|
||||
|
||||
## 6.3.6 (July 26, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix debug webpack output in static build ([#15674](https://github.com/storybookjs/storybook/pull/15674))
|
||||
- CSF3: Fix custom render function ([#15668](https://github.com/storybookjs/storybook/pull/15668))
|
||||
|
||||
## 6.4.0-alpha.21 (July 26, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix debug webpack output in static build ([#15674](https://github.com/storybookjs/storybook/pull/15674))
|
||||
- Controls: Fix boolean toggle style to match underlying value ([#15676](https://github.com/storybookjs/storybook/pull/15676))
|
||||
- Components: Fix Button to accept href attribute ([#15671](https://github.com/storybookjs/storybook/pull/15671))
|
||||
|
||||
## 6.4.0-alpha.20 (July 24, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF3: Fix custom render function ([#15668](https://github.com/storybookjs/storybook/pull/15668))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Remove glob-base dependency ([#15399](https://github.com/storybookjs/storybook/pull/15399))
|
||||
|
||||
## 6.3.5 (July 22, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Don't set arg in validateOptions if it would be `undefined` ([#15654](https://github.com/storybookjs/storybook/pull/15654))
|
||||
- Trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
|
||||
- Controls: Fix color matching behavior for non-string types ([#15549](https://github.com/storybookjs/storybook/pull/15549))
|
||||
- Composition: Fix refs ordering ([#15527](https://github.com/storybookjs/storybook/pull/15527))
|
||||
|
||||
## 6.4.0-alpha.19 (July 22, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Controls: Don't set arg in validateOptions if it would be `undefined` ([#15654](https://github.com/storybookjs/storybook/pull/15654))
|
||||
- Vue: Add support for tsx ([#11936](https://github.com/storybookjs/storybook/pull/11936))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
|
||||
- Components: Lazy-load syntax highlighter ([#15607](https://github.com/storybookjs/storybook/pull/15607))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Controls: Clean up arg unboxing and switch statements ([#14394](https://github.com/storybookjs/storybook/pull/14394))
|
||||
- Examples: Fix react-ts to be runnable standalone ([#15621](https://github.com/storybookjs/storybook/pull/15621))
|
||||
|
||||
## 6.4.0-alpha.18 (July 16, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Allow keyboard shortcut to copy code in preview blocks ([#15559](https://github.com/storybookjs/storybook/pull/15559))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Avoid slow regex.match call in renderJsx ([#15581](https://github.com/storybookjs/storybook/pull/15581))
|
||||
|
||||
## 6.4.0-alpha.17 (July 15, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Types: Export BaseStoryFn and BaseStoryObject ([#15592](https://github.com/storybookjs/storybook/pull/15592))
|
||||
- Addon-docs: Add transparency support to color swatch ([#14439](https://github.com/storybookjs/storybook/pull/14439))
|
||||
|
||||
## 6.4.0-alpha.16 (July 13, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Addon-backgrounds: Respect user's reduced motion settings ([#13711](https://github.com/storybookjs/storybook/pull/13711))
|
||||
- CSF: Add CSF3 typings ([#15558](https://github.com/storybookjs/storybook/pull/15558))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix actions argType auto generation ([#15563](https://github.com/storybookjs/storybook/pull/15563))
|
||||
|
||||
## 6.4.0-alpha.15 (July 13, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Controls: Fix color matching behavior for non-string types ([#15549](https://github.com/storybookjs/storybook/pull/15549))
|
||||
- UI: Fix toggle button for custom theming ([#15449](https://github.com/storybookjs/storybook/pull/15449))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Fix `publish` step on CircleCI ([#15556](https://github.com/storybookjs/storybook/pull/15556))
|
||||
- Examples: Add no-manager-cache to all examples ([#15546](https://github.com/storybookjs/storybook/pull/15546))
|
||||
- Official-storybook: Add example of embedding story object in MDX ([#15533](https://github.com/storybookjs/storybook/pull/15533))
|
||||
|
||||
## 6.4.0-alpha.14 (July 11, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Web-components: Dynamic source snippets ([#15337](https://github.com/storybookjs/storybook/pull/15337))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Essentials: Add measure addon to monorepo ([#15545](https://github.com/storybookjs/storybook/pull/15545))
|
||||
|
||||
## 6.4.0-alpha.13 (July 9, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs/Angular: Add unique id to Angular stories ([#15501](https://github.com/storybookjs/storybook/pull/15501))
|
||||
- Composition: Fix refs ordering ([#15527](https://github.com/storybookjs/storybook/pull/15527))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Essentials: Add outline addon to monorepo ([#15526](https://github.com/storybookjs/storybook/pull/15526))
|
||||
- Build: Fix cache setup in GitHub Actions workflow ([#15523](https://github.com/storybookjs/storybook/pull/15523))
|
||||
|
||||
## 6.3.4 (July 8, 2021)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: Cache DocsContext on window to prevent duplication ([#15428](https://github.com/storybookjs/storybook/pull/15428))
|
||||
|
||||
## 6.3.3 (July 7, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Webpack5: Quit process after finishing a static build ([#15483](https://github.com/storybookjs/storybook/pull/15483))
|
||||
- Addon-docs/Angular: Fix numeric args default value handling ([#15491](https://github.com/storybookjs/storybook/pull/15491))
|
||||
- Angular: Fix circular reference not being handled in moduleMetadata ([#15410](https://github.com/storybookjs/storybook/pull/15410))
|
||||
- Core: Fix double rebuilds by removing aggregateTimeout ([#15372](https://github.com/storybookjs/storybook/pull/15372))
|
||||
- CLI: Fix NPM typo ([#15461](https://github.com/storybookjs/storybook/pull/15461))
|
||||
|
||||
## 6.4.0-alpha.12 (July 7, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Webpack5: Quit process after finishing a static build ([#15483](https://github.com/storybookjs/storybook/pull/15483))
|
||||
- Addon-docs/Angular: Fix numeric args default value handling ([#15491](https://github.com/storybookjs/storybook/pull/15491))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Angular: Make Ivy work by default in the angular-cli example ([#15280](https://github.com/storybookjs/storybook/pull/15280))
|
||||
- Official-storybook: Fix shortcut for navigating to previous language ([#15489](https://github.com/storybookjs/storybook/pull/15489))
|
||||
- Addon-docs: Add docs to standalone example ([#7848](https://github.com/storybookjs/storybook/pull/7848))
|
||||
- Build: Update Yarn cache setup in GitHub Actions workflow ([#15480](https://github.com/storybookjs/storybook/pull/15480))
|
||||
|
||||
## 6.4.0-alpha.11 (July 3, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix sidebar toggle in fullscreen mode ([#15459](https://github.com/storybookjs/storybook/pull/15459))
|
||||
- Angular: Fix circular reference not being handled in moduleMetadata ([#15410](https://github.com/storybookjs/storybook/pull/15410))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-a11y: Reverse help and description labels in accordion ([#15466](https://github.com/storybookjs/storybook/pull/15466))
|
||||
|
||||
## 6.4.0-alpha.10 (July 2, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Display menu icon on the toolbar when the sidebar is collapsed ([#15369](https://github.com/storybookjs/storybook/pull/15369))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix double rebuilds by removing aggregateTimeout ([#15372](https://github.com/storybookjs/storybook/pull/15372))
|
||||
- CLI: Fix NPM typo ([#15461](https://github.com/storybookjs/storybook/pull/15461))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: Cache DocsContext on window to prevent duplication ([#15428](https://github.com/storybookjs/storybook/pull/15428))
|
||||
|
||||
## 6.3.2 (June 30, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Essentials: Update measure and outline. Fix alt+tab issues on windows. ([#15402](https://github.com/storybookjs/storybook/pull/15402))
|
||||
- Core: Fix decorator context update ([#15408](https://github.com/storybookjs/storybook/pull/15408))
|
||||
- Revert "Vue3: Update args without re-mounting component" ([#15409](https://github.com/storybookjs/storybook/pull/15409))
|
||||
- Upgrade bad release of `react-docgen-typescript-plugin` ([#15432](https://github.com/storybookjs/storybook/pull/15432))
|
||||
|
||||
## 6.4.0-alpha.9 (June 30, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade bad release of `react-docgen-typescript-plugin` ([#15432](https://github.com/storybookjs/storybook/pull/15432))
|
||||
|
||||
## 6.4.0-alpha.8 (June 30, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- Web-components: Custom Elements Manifest v1 support ([#15138](https://github.com/storybookjs/storybook/pull/15138))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF: Fix auto-title generation for standard config dir ([#15430](https://github.com/storybookjs/storybook/pull/15430))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade `react-docgen-typescript-plugin` for refresh perf regression ([#15431](https://github.com/storybookjs/storybook/pull/15431))
|
||||
|
||||
## 6.4.0-alpha.7 (June 29, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF: Generate default titles based on file path ([#15376](https://github.com/storybookjs/storybook/pull/15376))
|
||||
|
||||
## 6.4.0-alpha.6 (June 29, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix decorator context update ([#15408](https://github.com/storybookjs/storybook/pull/15408))
|
||||
- Revert "Vue3: Update args without re-mounting component" ([#15409](https://github.com/storybookjs/storybook/pull/15409))
|
||||
|
||||
## 6.4.0-alpha.5 (June 29, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF: Add stories.json generation for CSF3 stories ([#15395](https://github.com/storybookjs/storybook/pull/15395))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Essentials: Update measure and outline. Fix alt+tab issues on windows. ([#15402](https://github.com/storybookjs/storybook/pull/15402))
|
||||
|
||||
## 6.3.1 (June 28, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Only use dotenv-webpack when a user has a dotenv file ([#15365](https://github.com/storybookjs/storybook/pull/15365))
|
||||
- Essentials: Update addon measure and outline ([#15354](https://github.com/storybookjs/storybook/pull/15354))
|
||||
- Actions: Don't override existing action args ([#15394](https://github.com/storybookjs/storybook/pull/15394))
|
||||
- Svelte: Fix argType.type.name extraction ([#15332](https://github.com/storybookjs/storybook/pull/15332))
|
||||
- CSF3: Genericize feature flagging and fix webpack5 ([#15375](https://github.com/storybookjs/storybook/pull/15375))
|
||||
- Webpack5: Fix warnings typo ([#15374](https://github.com/storybookjs/storybook/pull/15374))
|
||||
- UI: Fix navigation after no story error ([#15349](https://github.com/storybookjs/storybook/pull/15349))
|
||||
- CSF3: Rename setup to play ([#15358](https://github.com/storybookjs/storybook/pull/15358))
|
||||
- Upgrade dotenv-webpack to 7.0.x ([#15343](https://github.com/storybookjs/storybook/pull/15343))
|
||||
|
||||
## 6.4.0-alpha.4 (June 28, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Actions: Don't override existing action args ([#15394](https://github.com/storybookjs/storybook/pull/15394))
|
||||
|
||||
## 6.4.0-alpha.3 (June 26, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF3: Genericize feature flagging and fix webpack5 ([#15375](https://github.com/storybookjs/storybook/pull/15375))
|
||||
- Webpack5: Fix warnings typo ([#15374](https://github.com/storybookjs/storybook/pull/15374))
|
||||
|
||||
## 6.4.0-alpha.2 (June 25, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Only use dotenv-webpack when a user has a dotenv file ([#15365](https://github.com/storybookjs/storybook/pull/15365))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CSF3: Rename setup to play ([#15358](https://github.com/storybookjs/storybook/pull/15358))
|
||||
|
||||
## 6.4.0-alpha.1 (June 25, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Essentials: Update addon measure and outline ([#15354](https://github.com/storybookjs/storybook/pull/15354))
|
||||
- UI: Fix navigation after no story error ([#15349](https://github.com/storybookjs/storybook/pull/15349))
|
||||
|
||||
## 6.4.0-alpha.0 (June 24, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Svelte: Fix argType.type.name extraction ([#15332](https://github.com/storybookjs/storybook/pull/15332))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade dotenv-webpack to 7.0.x ([#15343](https://github.com/storybookjs/storybook/pull/15343))
|
||||
|
||||
## 6.3.0 (June 23, 2021)
|
||||
|
||||
**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**
|
||||
|
||||
SB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:
|
||||
|
||||
- 📐 Layout debugging with Measure and Outline addons
|
||||
- 🔌 Reuse your stories in unit tests: Jest, Cypress & more
|
||||
- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components
|
||||
- 🛠 Builders: Webpack5 stable, Vite community
|
||||
- 📦 Packaging: Modern ESM
|
||||
|
||||
It also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions.
|
||||
|
||||
## 6.3.0-rc.12 (June 23, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Update types in React typescript templates ([#15292](https://github.com/storybookjs/storybook/pull/15292))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Yarn: Disable unnecessary builds ([#15299](https://github.com/storybookjs/storybook/pull/15299))
|
||||
- Toolbars: Add missing `regenerator-runtime` dependency ([#15312](https://github.com/storybookjs/storybook/pull/15312))
|
||||
|
||||
## 6.3.0-rc.11 (June 18, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade react-docgen-typescript-plugin per PR#46 ([#15287](https://github.com/storybookjs/storybook/pull/15287))
|
||||
- Fix peer deps ([#15288](https://github.com/storybookjs/storybook/pull/15288))
|
||||
|
||||
## 6.3.0-rc.10 (June 17, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix nx project with workspace.json ([#15267](https://github.com/storybookjs/storybook/pull/15267))
|
||||
- Angular: Fix some Ivy rendering glitches ([#15279](https://github.com/storybookjs/storybook/pull/15279))
|
||||
|
||||
## 6.3.0-rc.9 (June 17, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump postcss to 7.0.36 with security fix ([#15276](https://github.com/storybookjs/storybook/pull/15276))
|
||||
- Fix monorepo peer deps ([#15277](https://github.com/storybookjs/storybook/pull/15277))
|
||||
|
||||
## 6.3.0-rc.8 (June 16, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<h1>Contributing to Storybook</h1>
|
||||
|
||||
- [Issues](#issues)
|
||||
- [Testing against `master`](#testing-against-master)
|
||||
- [Testing against `main`](#testing-against-main)
|
||||
- [1. Download the latest version of this project, and build it:](#1-download-the-latest-version-of-this-project-and-build-it)
|
||||
- [2a. Run unit tests](#2a-run-unit-tests)
|
||||
- [Core & Examples Tests](#core--examples-tests)
|
||||
@ -53,7 +53,7 @@ No software is bug-free. So, if you got an issue, follow these steps:
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
|
||||
### Testing against `master`
|
||||
### Testing against `main`
|
||||
|
||||
To test your project against the current latest version of storybook, you can clone the repository and link it with `yarn`. Try following these steps:
|
||||
|
||||
@ -145,7 +145,7 @@ Then run `yarn cypress open` if you want to see the tests run in the UI, or `yar
|
||||
|
||||
#### In the monorepo
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `main` branch.
|
||||
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
|
||||
@ -222,9 +222,9 @@ Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if
|
||||
|
||||
### Reviewing PRs
|
||||
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/main/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `master` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `main` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
|
||||
**As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
|
||||
|
||||
@ -234,7 +234,7 @@ If you are looking for a way to help the project, triaging issues is a great pla
|
||||
|
||||
### Responding to issues
|
||||
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/main/CONTRIBUTING.md#reproductions).
|
||||
|
||||
### Triaging issues
|
||||
|
||||
@ -385,7 +385,7 @@ This section is for Storybook maintainers who will be creating releases. It assu
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Push the changelog to main or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the [GitHub release page](https://github.com/storybookjs/storybook/releases), and mark it as a (pre-) release
|
||||
|
||||
@ -428,8 +428,8 @@ open https://github.com/storybookjs/storybook/releases
|
||||
#### Full release:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout master
|
||||
# make sure you current with origin/main.
|
||||
git checkout main
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
|
||||
@ -58,9 +58,9 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the master branch |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the master branch |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
|
||||
64
MIGRATION.md
64
MIGRATION.md
@ -4,10 +4,10 @@
|
||||
- [Webpack 5 manager build](#webpack-5-manager-build)
|
||||
- [Angular 12 upgrade](#angular-12-upgrade)
|
||||
- [Lit support](#lit-support)
|
||||
- [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
|
||||
- [6.3 deprecations](#63-deprecations)
|
||||
- [Deprecated addon-knobs](#deprecated-addon-knobs)
|
||||
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
|
||||
- [Deprecated `argType.defaultValue`](#deprecated-argtypedefaultvalue)
|
||||
- [Deprecated layout URL params](#deprecated-layout-url-params)
|
||||
- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
|
||||
- [MDX pattern tweaked](#mdx-pattern-tweaked)
|
||||
@ -176,6 +176,14 @@ yarn add @storybook/manager-webpack5 --dev
|
||||
npm install @storybook/manager-webpack5 --save-dev
|
||||
```
|
||||
|
||||
Because Storybook uses `webpack@4` as the default, it's possible for the wrong version of webpack to get hoisted by your package manager. If you receive an error that looks like you might be using the wrong version of webpack, install `webpack@5` explicitly as a dev dependency to force it to be hoisted:
|
||||
|
||||
```shell
|
||||
yarn add webpack@5 --dev
|
||||
# Or
|
||||
npm install webpack@5 --save-dev
|
||||
```
|
||||
|
||||
### Angular 12 upgrade
|
||||
|
||||
Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
|
||||
@ -204,34 +212,13 @@ To do so, it relies on helpers added in the latest minor versions of `lit-html`/
|
||||
|
||||
According to the package manager you are using, it can be handled automatically when updating Storybook or can require to manually update the versions and regenerate the lockfile.
|
||||
|
||||
### 6.3 deprecations
|
||||
|
||||
#### Deprecated addon-knobs
|
||||
|
||||
We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
|
||||
|
||||
- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
|
||||
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
|
||||
|
||||
#### Deprecated scoped blocks imports
|
||||
|
||||
In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
|
||||
|
||||
To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
|
||||
|
||||
```js
|
||||
// before
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
// after
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
```
|
||||
|
||||
#### Deprecated `argType.defaultValue`
|
||||
### No longer inferring default values of args
|
||||
|
||||
Previously, unset `args` were set to the `argType.defaultValue` if set or inferred from the component's prop types (etc.). In 6.3 we no longer infer default values and instead set arg values to `undefined` when unset, allowing the framework to supply the default value.
|
||||
|
||||
If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code. If you were using it to set a default value for an arg, there is a simpler way; simply set a value for the arg at the component level:
|
||||
If you were using `argType.defaultValue` to fix issues with the above inference, it should no longer be necessary, you can remove that code.
|
||||
|
||||
If you were using `argType.defaultValue` or relying on inference to set a default value for an arg, you should now set a value for the arg at the component level:
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -255,6 +242,29 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 6.3 deprecations
|
||||
|
||||
#### Deprecated addon-knobs
|
||||
|
||||
We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
|
||||
|
||||
- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
|
||||
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
|
||||
|
||||
#### Deprecated scoped blocks imports
|
||||
|
||||
In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
|
||||
|
||||
To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
|
||||
|
||||
```js
|
||||
// before
|
||||
import { Meta, Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
// after
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
```
|
||||
|
||||
#### Deprecated layout URL params
|
||||
|
||||
Several URL params to control the manager layout have been deprecated and will be removed in 7.0:
|
||||
@ -263,7 +273,7 @@ Several URL params to control the manager layout have been deprecated and will b
|
||||
- `panelRight=1`: use `panel=right` instead
|
||||
- `stories=0`: use `nav=false` instead
|
||||
|
||||
Additionally, support for legacy URLs using `selectedKind` and `selectedStory` will be removed in 7.0 . Use `path` instead.
|
||||
Additionally, support for legacy URLs using `selectedKind` and `selectedStory` will be removed in 7.0. Use `path` instead.
|
||||
|
||||
## From version 6.1.x to 6.2.0
|
||||
|
||||
|
||||
66
README.md
66
README.md
@ -19,9 +19,9 @@
|
||||
<img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" />
|
||||
</a>
|
||||
<a href="https://codecov.io/gh/storybookjs/storybook">
|
||||
<img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" />
|
||||
<img src="https://codecov.io/gh/storybookjs/storybook/branch/main/graph/badge.svg" alt="codecov" />
|
||||
</a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/LICENSE">
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" />
|
||||
</a>
|
||||
<br/>
|
||||
@ -46,12 +46,12 @@
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/media/storybook-intro.gif" width="100%" />
|
||||
</center>
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
</p>
|
||||
|
||||
@ -92,23 +92,23 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| ----------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.2.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.2.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.2.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.2.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.2.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.2.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.2.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.2.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.2.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.2.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](app/riot) | [v6.2.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](app/rax) | [v6.2.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.2.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.3.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.3.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.3.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.3.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.3.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.3.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.3.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.3.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.3.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.3.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](app/riot) | [v6.3.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](app/rax) | [v6.3.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.3.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -118,7 +118,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
### Addons
|
||||
|
||||
| Addons | |
|
||||
|---------------------------------------------------------------------------|----------------------------------------------------------------------------|
|
||||
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
@ -134,18 +134,20 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
| [outline](addons/outline/) | Visuallly debug the CSS layout and alignment within the Storybook UI |
|
||||
| [measure](addons/measure/) | Visually inspect the layout and box model within the Storybook UI |
|
||||
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
### Deprecated Addons
|
||||
|
||||
| Addons | |
|
||||
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------|
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI|
|
||||
| Addons | |
|
||||
| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/main/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/main/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI |
|
||||
|
||||
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
|
||||
|
||||
@ -157,10 +159,10 @@ If you're using contexts, we highly recommend you to migrate to [toolbars](https
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
|
||||
|
||||
|
||||
```md
|
||||
[](link to site)
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [brand repo](https://github.com/storybookjs/brand).
|
||||
@ -279,6 +281,6 @@ Support us with a monthly donation and help us continue our activities. \[[Becom
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/master/LICENSE)
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)
|
||||
|
||||
-the end-
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
A Storybook release process based on [Semver](http://semver.org/). In short:
|
||||
|
||||
1. Merge all PRs into `next`, which is the default branch. Cherry-pick bugfix PRs into `master`, which is the stable release.
|
||||
1. Merge all PRs into `next`, which is the default branch. Cherry-pick bugfix PRs into `main`, which is the stable release.
|
||||
|
||||
2. Every week: release patch releases off `master` to the NPM tag `latest`, and alpha releases off `next` to the NPM tag `next` (as e.g. `4.1.0-alpha.0`).
|
||||
2. Every week: release patch releases off `main` to the NPM tag `latest`, and alpha releases off `next` to the NPM tag `next` (as e.g. `4.1.0-alpha.0`).
|
||||
|
||||
3. Every month or two, merge `next` into `master` and release a minor/major version according to `semver`. We set minor release dates as soon as we have feature clarity and manage to those dates:
|
||||
3. Every month or two, merge `next` into `main` and release a minor/major version according to `semver`. We set minor release dates as soon as we have feature clarity and manage to those dates:
|
||||
- Date should be a Monday so if we slip we don't get pushed into the weekend
|
||||
- T-3wk:
|
||||
- Draft announcement and socialize
|
||||
@ -48,7 +48,7 @@ releases. We'll try our best to restrict breaking changes to MAJOR releases.
|
||||
Every bugfix should go out as soon as we've verified the fix, and based on the
|
||||
current rate of contribution, we should be issuing PATCH releases weekly.
|
||||
Eventually, we'll automate the process so that a release will go out every time a PR is
|
||||
merged into `master`, and we've already laid most of the groundwork for this.
|
||||
merged into `main`, and we've already laid most of the groundwork for this.
|
||||
|
||||
## MINOR releases
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting started
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 175 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -11,13 +11,13 @@
|
||||
"verify",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/a11y",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybookjs/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/a11y"
|
||||
},
|
||||
"funding": {
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/channels": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/channels": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -7,7 +7,7 @@ const Wrapper = styled.div({
|
||||
padding: 12,
|
||||
marginBottom: 10,
|
||||
});
|
||||
const Help = styled.p({
|
||||
const Description = styled.p({
|
||||
margin: '0 0 12px',
|
||||
});
|
||||
const Link = styled.a({
|
||||
@ -24,7 +24,7 @@ interface InfoProps {
|
||||
export const Info: FunctionComponent<InfoProps> = ({ item }) => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Help>{item.help}</Help>
|
||||
<Description>{item.description}</Description>
|
||||
<Link href={item.helpUrl} target="_blank">
|
||||
More info...
|
||||
</Link>
|
||||
|
||||
@ -82,7 +82,7 @@ export const Item = (props: ItemProps) => {
|
||||
transform: `rotate(${open ? 0 : -90}deg)`,
|
||||
}}
|
||||
/>
|
||||
{item.description}
|
||||
{item.help}
|
||||
</HeaderBar>
|
||||
<HighlightToggleElement>
|
||||
<HighlightToggle toggleId={highlightToggleId} elementsToHighlight={item.nodes} />
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"essentials",
|
||||
"data-state"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -8,6 +8,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should add actions that match a pattern', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -17,25 +18,41 @@ describe('actions parameter enhancers', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should override pre-existing argTypes', () => {
|
||||
it('should NOT override pre-existing args', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: 'pre-existing value' },
|
||||
argTypes,
|
||||
parameters,
|
||||
argTypes: {
|
||||
onClick: { defaultValue: 'pre-existing value' },
|
||||
},
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
});
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: null },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: undefined },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters: {
|
||||
...parameters,
|
||||
actions: { ...parameters.actions, disable: true },
|
||||
},
|
||||
argTypes,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({});
|
||||
});
|
||||
@ -48,16 +65,47 @@ describe('actions parameter enhancers', () => {
|
||||
};
|
||||
it('should add actions based on action.args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({ argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
addActionsFromArgTypes(({ args: {}, argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onBlur: expect.any(Function),
|
||||
});
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: 'pre-existing value' },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: null },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: undefined },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({ onClick: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters: { actions: { disable: true } },
|
||||
} as unknown) as StoryContext)
|
||||
|
||||
@ -14,8 +14,9 @@ import { action } from '../index';
|
||||
|
||||
export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
parameters: { actions },
|
||||
args,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
|
||||
return {};
|
||||
@ -27,7 +28,9 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
);
|
||||
|
||||
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(name);
|
||||
if (typeof args[name] === 'undefined') {
|
||||
acc[name] = action(name);
|
||||
}
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
@ -37,6 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
*/
|
||||
export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
args,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
@ -47,7 +51,9 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
|
||||
|
||||
return argTypesWithAction.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
if (typeof args[name] === 'undefined') {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
}
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,7 +10,7 @@
|
||||
"essentials",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/backgrounds",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/backgrounds",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
|
||||
|
||||
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
|
||||
import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
|
||||
import {
|
||||
clearStyles,
|
||||
addBackgroundStyle,
|
||||
getBackgroundColorByName,
|
||||
isReduceMotionEnabled,
|
||||
} from '../helpers';
|
||||
|
||||
export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
const { globals, parameters } = context;
|
||||
@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) =>
|
||||
context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
|
||||
|
||||
const backgroundStyles = useMemo(() => {
|
||||
const transitionStyle = 'transition: background-color 0.3s;';
|
||||
return `
|
||||
${selector} {
|
||||
background: ${selectedBackgroundColor} !important;
|
||||
transition: background-color 0.3s;
|
||||
${isReduceMotionEnabled() ? '' : transitionStyle}
|
||||
}
|
||||
`;
|
||||
}, [selectedBackgroundColor, selector]);
|
||||
|
||||
@ -5,7 +5,12 @@ import { logger } from '@storybook/client-logger';
|
||||
|
||||
import { Background } from '../types';
|
||||
|
||||
const { document } = global;
|
||||
const { document, window } = global;
|
||||
|
||||
export const isReduceMotionEnabled = () => {
|
||||
const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
return prefersReduceMotion.matches;
|
||||
};
|
||||
|
||||
export const getBackgroundColorByName = (
|
||||
currentSelectedValue: string,
|
||||
|
||||
@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) you should consider migrating to Controls.
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
@ -90,7 +90,7 @@ export const Reflow = () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
|
||||
|
||||
@ -98,24 +98,24 @@ And again, as above, this can be rewritten using [fully custom args](https://sto
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow'
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow',
|
||||
};
|
||||
|
||||
Reflow.argTypes = {
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20
|
||||
}
|
||||
}
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -37,6 +37,7 @@ export const ensureDocsBeforeControls = (configDir: string) => {
|
||||
if (!verifyDocsBeforeControls(main.addons)) {
|
||||
logger.warn(dedent`
|
||||
Expected '@storybook/addon-docs' to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials'). Check your main.js?
|
||||
If addon-docs or addon-essentials is included by another addon/preset you can safely ignore this warning.
|
||||
|
||||
https://github.com/storybookjs/storybook/issues/11442
|
||||
`);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/hero.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs
|
||||
@ -34,7 +34,7 @@ When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage
|
||||
Click on the `Docs` tab to see it:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).
|
||||
@ -70,7 +70,7 @@ markdown documentation.
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
- [Reordering Docs tab first](#reordering-docs-tab-first)
|
||||
- [Customizing source snippets](#customizing-source-snippets)
|
||||
- [Overwriting docs container](#overwriting-docs-container)
|
||||
- [Add description to individual stories](#add-description-to-individual-stories)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Component Story Format (CSF) with DocsPage
|
||||
@ -31,7 +32,7 @@ If you want to intersperse longform documentation in your Storybook, for example
|
||||
|
||||
## Mixed CSF / MDX Stories
|
||||
|
||||
Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help.
|
||||
Can't decide between CSF and MDX? In transition? Or have you found that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help.
|
||||
|
||||
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.
|
||||
|
||||
@ -336,6 +337,24 @@ import { theme } from '../path/to/theme'
|
||||
Rest of your file...
|
||||
```
|
||||
|
||||
## Add description to individual stories
|
||||
|
||||
Add `story` to `docs.description` parameter
|
||||
|
||||
```js
|
||||
const Example = () => <Button />;
|
||||
|
||||
Example.parameters = {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Individiual story description, may conatin `markdown` markup"
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
There is also an webpack loader package that extracts descriptions from jsdoc comments [story-description-loader](https://www.npmjs.com/package/story-description-loader)
|
||||
|
||||
## 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)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,7 +10,7 @@
|
||||
"essentials",
|
||||
"organize"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/docs",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -63,20 +63,20 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/csf-tools": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/postinstall": "6.3.0-rc.8",
|
||||
"@storybook/source-loader": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@storybook/postinstall": "6.4.0-alpha.22",
|
||||
"@storybook/source-loader": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -89,8 +89,9 @@
|
||||
"js-string-escape": "^1.0.1",
|
||||
"loader-utils": "^2.0.0",
|
||||
"lodash": "^4.17.20",
|
||||
"nanoid": "^3.1.23",
|
||||
"p-limit": "^3.1.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-element-to-jsx-string": "^14.3.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -104,10 +105,10 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.3.0-rc.8",
|
||||
"@storybook/react": "6.3.0-rc.8",
|
||||
"@storybook/vue": "6.3.0-rc.8",
|
||||
"@storybook/web-components": "6.3.0-rc.8",
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/react": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -137,10 +138,10 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.3.0-beta.17",
|
||||
"@storybook/vue": "6.3.0-beta.17",
|
||||
"@storybook/vue3": "6.3.0-beta.17",
|
||||
"@storybook/web-components": "6.3.0-beta.17",
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/vue3": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -191,7 +192,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Context, createContext } from 'react';
|
||||
import { window as globalWindow } from 'global';
|
||||
|
||||
export interface DocsContextProps {
|
||||
id?: string;
|
||||
@ -17,4 +18,15 @@ export interface DocsContextProps {
|
||||
forceRender?: () => void;
|
||||
}
|
||||
|
||||
export const DocsContext: Context<DocsContextProps> = createContext({});
|
||||
// We add DocsContext to window. The reason is that in case DocsContext.ts is
|
||||
// imported multiple times (maybe once directly, and another time from a minified bundle)
|
||||
// we will have multiple DocsContext definitions - leading to lost context in
|
||||
// the React component tree.
|
||||
// This was specifically a problem with the Vite builder.
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
if (globalWindow.__DOCS_CONTEXT__ === undefined) {
|
||||
globalWindow.__DOCS_CONTEXT__ = createContext({});
|
||||
globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
|
||||
}
|
||||
|
||||
export const DocsContext: Context<DocsContextProps> = globalWindow.__DOCS_CONTEXT__;
|
||||
|
||||
@ -14,7 +14,7 @@ Object {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"_value": Object {
|
||||
@ -30,7 +30,7 @@ Object {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"accent": Object {
|
||||
@ -129,7 +129,7 @@ Object {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "string",
|
||||
},
|
||||
},
|
||||
"isDisabled": Object {
|
||||
@ -225,7 +225,7 @@ Object {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "void",
|
||||
"name": "object",
|
||||
},
|
||||
},
|
||||
"protectedMethod": Object {
|
||||
|
||||
@ -112,7 +112,9 @@ const displaySignature = (item: Method): string => {
|
||||
|
||||
const extractTypeFromValue = (defaultValue: any) => {
|
||||
const valueType = typeof defaultValue;
|
||||
return defaultValue || valueType === 'boolean' || valueType === 'string' ? valueType : null;
|
||||
return defaultValue || valueType === 'number' || valueType === 'boolean' || valueType === 'string'
|
||||
? valueType
|
||||
: null;
|
||||
};
|
||||
|
||||
const extractEnumValues = (compodocType: any) => {
|
||||
@ -188,7 +190,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
|
||||
const section = mapItemToSection(key, item);
|
||||
const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
|
||||
const type =
|
||||
isMethod(item) || section !== 'inputs'
|
||||
isMethod(item) || (section !== 'inputs' && section !== 'properties')
|
||||
? { name: 'void' }
|
||||
: extractType(item as Property, defaultValue);
|
||||
const action = section === 'outputs' ? { action: item.name } : {};
|
||||
@ -215,9 +217,9 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
|
||||
});
|
||||
|
||||
const SECTIONS = [
|
||||
'properties',
|
||||
'inputs',
|
||||
'outputs',
|
||||
'properties',
|
||||
'methods',
|
||||
'view child',
|
||||
'view children',
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import pLimit from 'p-limit';
|
||||
import { nanoid } from 'nanoid';
|
||||
|
||||
import { IStory, StoryContext } from '@storybook/angular';
|
||||
import { rendererFactory } from '@storybook/angular/renderer';
|
||||
@ -18,7 +19,7 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
|
||||
}
|
||||
|
||||
return limit(async () => {
|
||||
const renderer = await rendererFactory.getRendererInstance(id, node);
|
||||
const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`, node);
|
||||
await renderer.render({
|
||||
forced: false,
|
||||
parameters,
|
||||
|
||||
@ -115,12 +115,14 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
|
||||
// @ts-ignore FIXME: workaround react-element-to-jsx-string
|
||||
const child = typeof c === 'number' ? c.toString() : c;
|
||||
let string = applyBeforeRender(reactElementToJSXString(child, opts as Options), options);
|
||||
const matches = string.match(/\S+=\\"([^"]*)\\"/g);
|
||||
|
||||
if (matches) {
|
||||
matches.forEach((match) => {
|
||||
string = string.replace(match, match.replace(/"/g, "'"));
|
||||
});
|
||||
if (string.indexOf('"') > -1) {
|
||||
const matches = string.match(/\S+=\\"([^"]*)\\"/g);
|
||||
if (matches) {
|
||||
matches.forEach((match) => {
|
||||
string = string.replace(match, match.replace(/"/g, "'"));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return string;
|
||||
|
||||
@ -102,8 +102,8 @@ describe('Extracting Arguments', () => {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"slot_default": Object {
|
||||
@ -134,8 +134,8 @@ describe('Extracting Arguments', () => {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
description: item.description,
|
||||
type: {
|
||||
required: hasKeyword('required', item.keywords),
|
||||
summary: item.type?.text,
|
||||
name: item.type?.text,
|
||||
},
|
||||
table: {
|
||||
type: {
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
/* global window */
|
||||
import React from 'react';
|
||||
import { render } from 'lit-html';
|
||||
import { extractArgTypes, extractComponentDescription } from './custom-elements';
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
inlineStories: true,
|
||||
prepareForInline: (storyFn) => {
|
||||
class Story extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.wrapperRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
render(storyFn(), this.wrapperRef.current);
|
||||
}
|
||||
|
||||
render() {
|
||||
return React.createElement('div', { ref: this.wrapperRef });
|
||||
}
|
||||
}
|
||||
return React.createElement(Story);
|
||||
},
|
||||
},
|
||||
};
|
||||
19
addons/docs/src/frameworks/web-components/config.ts
Normal file
19
addons/docs/src/frameworks/web-components/config.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { extractArgTypes, extractComponentDescription } from './custom-elements';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { prepareForInline } from './prepareForInline';
|
||||
import { SourceType } from '../../shared';
|
||||
|
||||
export const decorators = [sourceDecorator];
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
inlineStories: true,
|
||||
prepareForInline,
|
||||
source: {
|
||||
type: SourceType.DYNAMIC,
|
||||
language: 'html',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -4,9 +4,10 @@ import { logger } from '@storybook/client-logger';
|
||||
|
||||
interface TagItem {
|
||||
name: string;
|
||||
type: string;
|
||||
type: { text: string };
|
||||
description: string;
|
||||
default?: any;
|
||||
kind?: string;
|
||||
defaultValue?: any;
|
||||
}
|
||||
|
||||
@ -17,6 +18,7 @@ interface Tag {
|
||||
properties?: TagItem[];
|
||||
events?: TagItem[];
|
||||
methods?: TagItem[];
|
||||
members?: TagItem[];
|
||||
slots?: TagItem[];
|
||||
cssProperties?: TagItem[];
|
||||
cssParts?: TagItem[];
|
||||
@ -24,8 +26,17 @@ interface Tag {
|
||||
|
||||
interface CustomElements {
|
||||
tags: Tag[];
|
||||
modules?: [];
|
||||
}
|
||||
|
||||
interface Module {
|
||||
declarations?: [];
|
||||
exports?: [];
|
||||
}
|
||||
|
||||
interface Declaration {
|
||||
tagName: string;
|
||||
}
|
||||
interface Sections {
|
||||
attributes?: any;
|
||||
properties?: any;
|
||||
@ -38,25 +49,32 @@ interface Sections {
|
||||
function mapData(data: TagItem[], category: string) {
|
||||
return (
|
||||
data &&
|
||||
data.reduce((acc, item) => {
|
||||
const type = category === 'properties' ? { name: item.type } : { name: 'void' };
|
||||
acc[item.name] = {
|
||||
name: item.name,
|
||||
required: false,
|
||||
description: item.description,
|
||||
type,
|
||||
table: {
|
||||
category,
|
||||
type: { summary: item.type },
|
||||
defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
|
||||
},
|
||||
};
|
||||
return acc;
|
||||
}, {} as ArgTypes)
|
||||
data
|
||||
.filter((item) => !!item)
|
||||
.reduce((acc, item) => {
|
||||
if (item.kind === 'method') return acc;
|
||||
|
||||
const type =
|
||||
category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
|
||||
acc[item.name] = {
|
||||
name: item.name,
|
||||
required: false,
|
||||
description: item.description,
|
||||
type,
|
||||
table: {
|
||||
category,
|
||||
type: { summary: item.type?.text || item.type },
|
||||
defaultValue: {
|
||||
summary: item.default !== undefined ? item.default : item.defaultValue,
|
||||
},
|
||||
},
|
||||
};
|
||||
return acc;
|
||||
}, {} as ArgTypes)
|
||||
);
|
||||
}
|
||||
|
||||
const getMetaData = (tagName: string, customElements: CustomElements) => {
|
||||
const getMetaDataExperimental = (tagName: string, customElements: CustomElements) => {
|
||||
if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
|
||||
return null;
|
||||
}
|
||||
@ -69,14 +87,34 @@ const getMetaData = (tagName: string, customElements: CustomElements) => {
|
||||
return metaData;
|
||||
};
|
||||
|
||||
const getMetaDataV1 = (tagName: string, customElements: CustomElements) => {
|
||||
if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let metadata;
|
||||
customElements?.modules?.forEach((_module: Module) => {
|
||||
_module?.declarations?.forEach((declaration: Declaration) => {
|
||||
if (declaration.tagName === tagName) {
|
||||
metadata = declaration;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (!metadata) {
|
||||
logger.warn(`Component not found in custom-elements.json: ${tagName}`);
|
||||
}
|
||||
return metadata;
|
||||
};
|
||||
|
||||
export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
|
||||
const metaData = getMetaData(tagName, customElements);
|
||||
return (
|
||||
metaData && {
|
||||
...mapData(metaData.attributes, 'attributes'),
|
||||
...mapData(metaData.members, 'properties'),
|
||||
...mapData(metaData.properties, 'properties'),
|
||||
...mapData(metaData.events, 'events'),
|
||||
...mapData(metaData.methods, 'methods'),
|
||||
...mapData(metaData.slots, 'slots'),
|
||||
...mapData(metaData.cssProperties, 'css custom properties'),
|
||||
...mapData(metaData.cssParts, 'css shadow parts'),
|
||||
@ -84,8 +122,16 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
|
||||
);
|
||||
};
|
||||
|
||||
const getMetaData = (tagName: string, manifest: any) => {
|
||||
if (manifest.version === 'experimental') {
|
||||
return getMetaDataExperimental(tagName, manifest);
|
||||
}
|
||||
return getMetaDataV1(tagName, manifest);
|
||||
};
|
||||
|
||||
export const extractArgTypes = (tagName: string) => {
|
||||
return extractArgTypesFromElements(tagName, getCustomElements());
|
||||
const cem = getCustomElements();
|
||||
return extractArgTypesFromElements(tagName, cem);
|
||||
};
|
||||
|
||||
export const extractComponentDescription = (tagName: string) => {
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import type { StoryFn } from '@storybook/addons';
|
||||
import React from 'react';
|
||||
import { render } from 'lit-html';
|
||||
|
||||
export const prepareForInline = (storyFn: StoryFn) => {
|
||||
class Story extends React.Component {
|
||||
wrapperRef = React.createRef<HTMLElement>();
|
||||
|
||||
componentDidMount(): void {
|
||||
render(storyFn(), this.wrapperRef.current);
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
return React.createElement('div', { ref: this.wrapperRef });
|
||||
}
|
||||
}
|
||||
|
||||
return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>;
|
||||
};
|
||||
@ -0,0 +1,100 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map';
|
||||
import { addons, StoryContext } from '@storybook/addons';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
import { SNIPPET_RENDERED } from '../../shared';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
test: (val) => typeof val === 'string',
|
||||
});
|
||||
|
||||
const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
|
||||
id: `lit-test--${name}`,
|
||||
kind: 'js-text',
|
||||
name,
|
||||
parameters,
|
||||
args,
|
||||
argTypes: {},
|
||||
globals: {},
|
||||
...extra,
|
||||
});
|
||||
|
||||
describe('sourceDecorator', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should render dynamically for args stories', () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const context = makeContext('args', { __isArgsStory: true }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
'<div>args story</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it('should skip dynamic rendering for no-args stories', () => {
|
||||
const storyFn = () => html`<div>classic story</div>`;
|
||||
const context = makeContext('classic', {}, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should use the originalStoryFn if excludeDecorators is set', () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const decoratedStoryFn = (args: any) => html`
|
||||
<div style=${styleMap({ padding: `${25}px`, border: '3px solid red' })}>${storyFn(args)}</div>
|
||||
`;
|
||||
const context = makeContext(
|
||||
'args',
|
||||
{
|
||||
__isArgsStory: true,
|
||||
docs: {
|
||||
source: {
|
||||
excludeDecorators: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{},
|
||||
{ originalStoryFn: storyFn }
|
||||
);
|
||||
sourceDecorator(decoratedStoryFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
'<div>args story</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it('allows the snippet output to be modified by transformSource', () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const transformSource = (dom: string) => `<p>${dom}</p>`;
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(mockChannel.emit).toHaveBeenCalledWith(
|
||||
SNIPPET_RENDERED,
|
||||
'lit-test--args',
|
||||
'<p><div>args story</div></p>'
|
||||
);
|
||||
});
|
||||
|
||||
it('provides the story context to transformSource', () => {
|
||||
const storyFn = (args: any) => html`<div>args story</div>`;
|
||||
const transformSource = jest.fn((x) => x);
|
||||
const docs = { transformSource };
|
||||
const context = makeContext('args', { __isArgsStory: true, docs }, {});
|
||||
sourceDecorator(storyFn, context);
|
||||
expect(transformSource).toHaveBeenCalledWith('<div>args story</div>', context);
|
||||
});
|
||||
});
|
||||
39
addons/docs/src/frameworks/web-components/sourceDecorator.ts
Normal file
39
addons/docs/src/frameworks/web-components/sourceDecorator.ts
Normal file
@ -0,0 +1,39 @@
|
||||
/* global window */
|
||||
import { render } from 'lit-html';
|
||||
import { addons, StoryContext, StoryFn } from '@storybook/addons';
|
||||
import { SNIPPET_RENDERED, SourceType } from '../../shared';
|
||||
|
||||
function skipSourceRender(context: StoryContext) {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
// always render if the user forces it
|
||||
if (sourceParams?.type === SourceType.DYNAMIC) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// never render if the user is forcing the block to render code, or
|
||||
// if the user provides code, or if it's not an args story.
|
||||
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
||||
}
|
||||
|
||||
function applyTransformSource(source: string, context: StoryContext): string {
|
||||
const { transformSource } = context.parameters.docs ?? {};
|
||||
if (typeof transformSource !== 'function') return source;
|
||||
return transformSource(source, context);
|
||||
}
|
||||
|
||||
export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
|
||||
const story = context?.parameters.docs?.source?.excludeDecorators
|
||||
? context.originalStoryFn(context.args)
|
||||
: storyFn();
|
||||
|
||||
if (!skipSourceRender(context)) {
|
||||
const container = window.document.createElement('div');
|
||||
render(story, container);
|
||||
const source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
|
||||
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
|
||||
}
|
||||
|
||||
return story;
|
||||
}
|
||||
@ -12,10 +12,10 @@
|
||||
- Add to your `.storybook/preview.js`
|
||||
|
||||
```js
|
||||
import { setCustomElements } from '@storybook/web-components';
|
||||
import { setCustomElementsManifest } from '@storybook/web-components';
|
||||
import customElements from '../custom-elements.json';
|
||||
|
||||
setCustomElements(customElements);
|
||||
setCustomElementsManifest(customElements);
|
||||
```
|
||||
|
||||
- Add to your story files
|
||||
@ -33,8 +33,12 @@ In order to get [Props tables](..docs/../../docs/props-tables.md) documentation
|
||||
|
||||
You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
|
||||
|
||||
Known analyzers that output `custom-elements.json`:
|
||||
Known analyzers that output `custom-elements.json` v1.0.0:
|
||||
|
||||
- [@custom-elements-manifest/analyzer](https://github.com/open-wc/custom-elements-manifest)
|
||||
- Supports Vanilla, LitElement, FASTElement, Stencil, Catalyst, Atomico
|
||||
|
||||
Known analyzers that output older versions of `custom-elements.json`:
|
||||
- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
|
||||
- Supports LitElement, Polymer, Vanilla, (Stencil)
|
||||
- [stenciljs](https://stenciljs.com/)
|
||||
@ -53,22 +57,51 @@ The file looks something like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"version": 2,
|
||||
"tags": [
|
||||
"schemaVersion": "1.0.0",
|
||||
"readme": "",
|
||||
"modules": [
|
||||
{
|
||||
"name": "demo-wc-card",
|
||||
"properties": [
|
||||
"kind": "javascript-module",
|
||||
"path": "src/my-element.js",
|
||||
"declarations": [
|
||||
{
|
||||
"name": "header",
|
||||
"type": "String",
|
||||
"attribute": "header",
|
||||
"description": "Shown at the top of the card",
|
||||
"default": "Your Message"
|
||||
"kind": "class",
|
||||
"description": "",
|
||||
"name": "MyElement",
|
||||
"members": [
|
||||
{
|
||||
"kind": "field",
|
||||
"name": "disabled"
|
||||
},
|
||||
{
|
||||
"kind": "method",
|
||||
"name": "fire"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "disabled-changed",
|
||||
"type": {
|
||||
"text": "Event"
|
||||
}
|
||||
}
|
||||
],
|
||||
"superclass": {
|
||||
"name": "HTMLElement"
|
||||
},
|
||||
"tagName": "my-element"
|
||||
}
|
||||
],
|
||||
"events": [],
|
||||
"slots": [],
|
||||
"cssProperties": []
|
||||
"exports": [
|
||||
{
|
||||
"kind": "custom-element-definition",
|
||||
"name": "my-element",
|
||||
"declaration": {
|
||||
"name": "MyElement",
|
||||
"module": "src/my-element.js"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"essentials",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/essentials",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/essentials",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.3.0-rc.8",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.8",
|
||||
"@storybook/addon-controls": "6.3.0-rc.8",
|
||||
"@storybook/addon-docs": "6.3.0-rc.8",
|
||||
"@storybook/addon-measure": "^1.2.3",
|
||||
"@storybook/addon-toolbars": "6.3.0-rc.8",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.22",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.22",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.22",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.22",
|
||||
"@storybook/addon-measure": "6.4.0-alpha.22",
|
||||
"@storybook/addon-outline": "6.4.0-alpha.22",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.22",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.22",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"storybook-addon-outline": "^1.3.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.3.0-rc.8",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.3.0-beta.17",
|
||||
"@storybook/web-components": "6.3.0-beta.17",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/web-components": "6.4.0-alpha.22",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export function addons(options: PresetOptions = {}) {
|
||||
return (
|
||||
['docs', 'controls', 'actions', 'backgrounds', 'viewport', 'toolbars', 'measure', 'outline']
|
||||
.filter((key) => (options as any)[key] !== false)
|
||||
.map((key) => (key === 'outline' ? `storybook-addon-${key}` : `@storybook/addon-${key}`))
|
||||
.map((key) => `@storybook/addon-${key}`)
|
||||
.filter((addon) => !checkInstalled(addon, main))
|
||||
// Use `require.resolve` to ensure Yarn PnP compatibility
|
||||
// Files of various addons should be resolved in the context of `addon-essentials` as they are listed as deps here
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Brings Jest results in storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
@ -184,7 +184,7 @@ addDecorator(
|
||||
);
|
||||
```
|
||||
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/master/examples/angular-cli)
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/main/examples/angular-cli)
|
||||
|
||||
## TODO
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -12,7 +12,7 @@
|
||||
"unit-testing",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/jest",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/jest",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -16,41 +16,40 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-links']
|
||||
}
|
||||
addons: ['@storybook/addon-links'],
|
||||
};
|
||||
```
|
||||
|
||||
Then you can import `linkTo` in your stories and use like this:
|
||||
|
||||
```js
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<button onClick={linkTo('Button', 'second')}>Go to "Second"</button>
|
||||
);
|
||||
export const second = () => (
|
||||
<button onClick={linkTo('Button', 'first')}>Go to "First"</button>
|
||||
);
|
||||
export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
|
||||
export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;
|
||||
```
|
||||
|
||||
Have a look at the linkTo function:
|
||||
|
||||
```js
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
linkTo('Toggle', 'off')
|
||||
linkTo(() => 'Toggle', () => 'off')
|
||||
linkTo('Toggle') // Links to the first story in the 'Toggle' kind
|
||||
linkTo('Toggle', 'off');
|
||||
linkTo(
|
||||
() => 'Toggle',
|
||||
() => 'off'
|
||||
);
|
||||
linkTo('Toggle'); // Links to the first story in the 'Toggle' kind
|
||||
```
|
||||
|
||||
With that, you can link an event in a component to any story in the Storybook.
|
||||
|
||||
- First parameter is the story kind name (what you named with `title`).
|
||||
- Second (optional) parameter is the story name (what you named with `exported name`).
|
||||
- Second (optional) parameter is the story name (what you named with `exported name`).
|
||||
If the second parameter is omitted, the link will point to the first story in the given kind.
|
||||
|
||||
You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:
|
||||
@ -63,22 +62,16 @@ export default {
|
||||
};
|
||||
|
||||
export const index = () => (
|
||||
<select value="Index" onChange={linkTo('Select', e => e.currentTarget.value)}>
|
||||
<select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
|
||||
<option>index</option>
|
||||
<option>first</option>
|
||||
<option>second</option>
|
||||
<option>third</option>
|
||||
</select>
|
||||
);
|
||||
export const first = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
);
|
||||
export const second = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
);
|
||||
export const third = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
</select>
|
||||
);
|
||||
export const first = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
export const second = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
export const third = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
```
|
||||
|
||||
## hrefTo function
|
||||
@ -106,7 +99,7 @@ export const log = () => {
|
||||
Here is an example in React, but it works with any framework:
|
||||
|
||||
```js
|
||||
import { withLinks } from '@storybook/addon-links'
|
||||
import { withLinks } from '@storybook/addon-links';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
@ -114,7 +107,9 @@ export default {
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<button data-sb-kind="OtherKind" data-sb-story="otherStory">Go to "OtherStory"</button>
|
||||
<button data-sb-kind="OtherKind" data-sb-story="otherStory">
|
||||
Go to "OtherStory"
|
||||
</button>
|
||||
);
|
||||
```
|
||||
|
||||
@ -130,12 +125,8 @@ export default {
|
||||
title: 'Link',
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<LinkTo story="second">Go to Second</LinkTo>
|
||||
);
|
||||
export const second = () => (
|
||||
<LinkTo story="first">Go to First</LinkTo>
|
||||
);
|
||||
export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
|
||||
export const second = () => <LinkTo story="first">Go to First</LinkTo>;
|
||||
```
|
||||
|
||||
It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.
|
||||
@ -146,8 +137,10 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
|
||||
story="off"
|
||||
target="_blank"
|
||||
title="link to second story"
|
||||
style={{color: '#1474f3'}}
|
||||
>Go to Second</LinkTo>
|
||||
style={{ color: '#1474f3' }}
|
||||
>
|
||||
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/addons/links/src/react/components/RoutedLink.js#L20-L24) 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/main/addons/links/src/react/components/RoutedLink.tsx) for reference.
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"organize"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/links",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/links",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.3.0-rc.8",
|
||||
"@storybook/router": "6.4.0-alpha.22",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.js`.
|
||||
// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.tsx`.
|
||||
// It's duplicated here because that copy has an explicit dependency on
|
||||
// React 16.3+, which breaks older versions of React running in the preview.
|
||||
// The proper DRY solution is to create a new package that doesn't depend
|
||||
|
||||
33
addons/measure/README.md
Normal file
33
addons/measure/README.md
Normal file
@ -0,0 +1,33 @@
|
||||
# Storybook Addon Measure
|
||||
|
||||
Storybook addon for inspecting layouts and visualizing the box model.
|
||||
|
||||
1. Press the <kbd>m</kbd> key to enable the addon:
|
||||
|
||||
2. Hover over a DOM node
|
||||
|
||||
3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-measure
|
||||
```
|
||||
|
||||
Add `"@storybook/addon-measure"` to the addons array in your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-measure'],
|
||||
};
|
||||
```
|
||||
|
||||
### Inspiration
|
||||
|
||||
- [Inspx](https://github.com/raunofreiberg/inspx) by Rauno Freiberg
|
||||
- [Aaron Westbrook's script](https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7)
|
||||
- [Visbug](https://visbug.web.app/) from the Chrome team
|
||||
82
addons/measure/package.json
Normal file
82
addons/measure/package.json
Normal file
@ -0,0 +1,82 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"essentials",
|
||||
"style",
|
||||
"CSS",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/measure",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/measure"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "winkerVSbecks",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"dist/ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/42671/119589951-dbcd9600-bda1-11eb-9227-078f3cfc1e74.png"
|
||||
}
|
||||
}
|
||||
12
addons/measure/preset.js
Normal file
12
addons/measure/preset.js
Normal file
@ -0,0 +1,12 @@
|
||||
function config(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/preset/addDecorator')];
|
||||
}
|
||||
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
1
addons/measure/register.js
Normal file
1
addons/measure/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/esm/register');
|
||||
39
addons/measure/src/Tool.tsx
Normal file
39
addons/measure/src/Tool.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useGlobals, useStorybookApi } from '@storybook/api';
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
import { TOOL_ID, ADDON_ID } from './constants';
|
||||
|
||||
export const Tool = () => {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
const { measureEnabled } = globals;
|
||||
const api = useStorybookApi();
|
||||
|
||||
const toggleMeasure = useCallback(
|
||||
() =>
|
||||
updateGlobals({
|
||||
measureEnabled: !measureEnabled,
|
||||
}),
|
||||
[updateGlobals, measureEnabled]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
api.setAddonShortcut(ADDON_ID, {
|
||||
label: 'Toggle Measure [M]',
|
||||
defaultShortcut: ['M'],
|
||||
actionName: 'measure',
|
||||
showInMenu: false,
|
||||
action: toggleMeasure,
|
||||
});
|
||||
}, [toggleMeasure, api]);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
key={TOOL_ID}
|
||||
active={measureEnabled}
|
||||
title="Enable measure"
|
||||
onClick={toggleMeasure}
|
||||
>
|
||||
<Icons icon="ruler" />
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
97
addons/measure/src/box-model/canvas.ts
Normal file
97
addons/measure/src/box-model/canvas.ts
Normal file
@ -0,0 +1,97 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import global from 'global';
|
||||
|
||||
interface Size {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface CanvasState {
|
||||
canvas?: HTMLCanvasElement;
|
||||
context?: CanvasRenderingContext2D;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
function getDocumentWidthAndHeight() {
|
||||
const container = global.document.documentElement;
|
||||
|
||||
const height = Math.max(container.scrollHeight, container.offsetHeight);
|
||||
const width = Math.max(container.scrollWidth, container.offsetWidth);
|
||||
return { width, height };
|
||||
}
|
||||
|
||||
function createCanvas(): CanvasState {
|
||||
const canvas = global.document.createElement('canvas');
|
||||
canvas.id = 'storybook-addon-measure';
|
||||
const context = canvas.getContext('2d');
|
||||
// Set canvas width & height
|
||||
const { width, height } = getDocumentWidthAndHeight();
|
||||
setCanvasWidthAndHeight(canvas, context, { width, height });
|
||||
// Position canvas
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.zIndex = '100000';
|
||||
// Disable any user interactions
|
||||
canvas.style.pointerEvents = 'none';
|
||||
global.document.body.appendChild(canvas);
|
||||
|
||||
return { canvas, context, width, height };
|
||||
}
|
||||
|
||||
function setCanvasWidthAndHeight(
|
||||
canvas: HTMLCanvasElement,
|
||||
context: CanvasRenderingContext2D,
|
||||
{ width, height }: Size
|
||||
) {
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
// Scale
|
||||
const scale = global.window.devicePixelRatio;
|
||||
canvas.width = Math.floor(width * scale);
|
||||
canvas.height = Math.floor(height * scale);
|
||||
|
||||
// Normalize coordinate system to use css pixels.
|
||||
context.scale(scale, scale);
|
||||
}
|
||||
|
||||
let state: CanvasState = {};
|
||||
|
||||
export function init() {
|
||||
if (!state.canvas) {
|
||||
state = createCanvas();
|
||||
}
|
||||
}
|
||||
|
||||
export function clear() {
|
||||
if (state.context) {
|
||||
state.context.clearRect(0, 0, state.width, state.height);
|
||||
}
|
||||
}
|
||||
|
||||
export function draw(callback: (context: CanvasRenderingContext2D) => void) {
|
||||
clear();
|
||||
callback(state.context);
|
||||
}
|
||||
|
||||
export function rescale() {
|
||||
// First reset so that the canvas size doesn't impact the container size
|
||||
setCanvasWidthAndHeight(state.canvas, state.context, { width: 0, height: 0 });
|
||||
|
||||
const { width, height } = getDocumentWidthAndHeight();
|
||||
setCanvasWidthAndHeight(state.canvas, state.context, { width, height });
|
||||
|
||||
// update state
|
||||
state.width = width;
|
||||
state.height = height;
|
||||
}
|
||||
|
||||
export function destroy() {
|
||||
if (state.canvas) {
|
||||
clear();
|
||||
state.canvas.parentNode.removeChild(state.canvas);
|
||||
state = {};
|
||||
}
|
||||
}
|
||||
308
addons/measure/src/box-model/labels.ts
Normal file
308
addons/measure/src/box-model/labels.ts
Normal file
@ -0,0 +1,308 @@
|
||||
/* eslint-disable operator-assignment */
|
||||
/* eslint-disable no-param-reassign */
|
||||
type LabelType = 'margin' | 'padding' | 'border' | 'content';
|
||||
type LabelPosition = 'top' | 'right' | 'bottom' | 'left' | 'center';
|
||||
type Direction = 'top' | 'right' | 'bottom' | 'left';
|
||||
|
||||
export interface Label {
|
||||
type: LabelType;
|
||||
text: number | string;
|
||||
position: LabelPosition;
|
||||
}
|
||||
|
||||
export type LabelStack = Label[];
|
||||
|
||||
interface RectSize {
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
interface Coordinate {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface Rect extends RectSize, Coordinate {}
|
||||
|
||||
interface RoundedRect extends Rect {
|
||||
r: number;
|
||||
}
|
||||
|
||||
const colors = {
|
||||
margin: '#f6b26b',
|
||||
border: '#ffe599',
|
||||
padding: '#93c47d',
|
||||
content: '#6fa8dc',
|
||||
text: '#232020',
|
||||
};
|
||||
|
||||
const labelPadding = 6;
|
||||
|
||||
function roundedRect(context: CanvasRenderingContext2D, { x, y, w, h, r }: RoundedRect) {
|
||||
x = x - w / 2;
|
||||
y = y - h / 2;
|
||||
|
||||
if (w < 2 * r) r = w / 2;
|
||||
if (h < 2 * r) r = h / 2;
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x + r, y);
|
||||
context.arcTo(x + w, y, x + w, y + h, r);
|
||||
context.arcTo(x + w, y + h, x, y + h, r);
|
||||
context.arcTo(x, y + h, x, y, r);
|
||||
context.arcTo(x, y, x + w, y, r);
|
||||
context.closePath();
|
||||
}
|
||||
|
||||
function positionCoordinate(
|
||||
position: LabelPosition,
|
||||
{ padding, border, width, height, top, left }: ElementMeasurements
|
||||
): Coordinate {
|
||||
const contentWidth = width - border.left - border.right - padding.left - padding.right;
|
||||
const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
|
||||
|
||||
let x = left + border.left + padding.left;
|
||||
let y = top + border.top + padding.top;
|
||||
|
||||
if (position === 'top') {
|
||||
x += contentWidth / 2;
|
||||
} else if (position === 'right') {
|
||||
x += contentWidth;
|
||||
y += contentHeight / 2;
|
||||
} else if (position === 'bottom') {
|
||||
x += contentWidth / 2;
|
||||
y += contentHeight;
|
||||
} else if (position === 'left') {
|
||||
y += contentHeight / 2;
|
||||
} else if (position === 'center') {
|
||||
x += contentWidth / 2;
|
||||
y += contentHeight / 2;
|
||||
}
|
||||
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
/**
|
||||
* Offset the label based on how many layers appear before it
|
||||
* For example:
|
||||
* margin labels will shift further outwards if there are
|
||||
* padding labels
|
||||
*/
|
||||
function offset(
|
||||
type: LabelType,
|
||||
position: LabelPosition,
|
||||
{ margin, border, padding }: ElementMeasurements,
|
||||
labelPaddingSize: number,
|
||||
external: boolean
|
||||
) {
|
||||
let shift = (dir: Direction) => 0;
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
|
||||
// If external labels then push them to the edge of the band
|
||||
// else keep them centred
|
||||
const locationMultiplier = external ? 1 : 0.5;
|
||||
// Account for padding within the label
|
||||
const labelPaddingShift = external ? labelPaddingSize * 2 : 0;
|
||||
|
||||
if (type === 'padding') {
|
||||
shift = (dir: Direction) => padding[dir] * locationMultiplier + labelPaddingShift;
|
||||
} else if (type === 'border') {
|
||||
shift = (dir: Direction) => padding[dir] + border[dir] * locationMultiplier + labelPaddingShift;
|
||||
} else if (type === 'margin') {
|
||||
shift = (dir: Direction) =>
|
||||
padding[dir] + border[dir] + margin[dir] * locationMultiplier + labelPaddingShift;
|
||||
}
|
||||
|
||||
if (position === 'top') {
|
||||
offsetY = -shift('top');
|
||||
} else if (position === 'right') {
|
||||
offsetX = shift('right');
|
||||
} else if (position === 'bottom') {
|
||||
offsetY = shift('bottom');
|
||||
} else if (position === 'left') {
|
||||
offsetX = -shift('left');
|
||||
}
|
||||
|
||||
return { offsetX, offsetY };
|
||||
}
|
||||
|
||||
function collide(a: Rect, b: Rect) {
|
||||
return (
|
||||
Math.abs(a.x - b.x) < Math.abs(a.w + b.w) / 2 && Math.abs(a.y - b.y) < Math.abs(a.h + b.h) / 2
|
||||
);
|
||||
}
|
||||
|
||||
function overlapAdjustment(position: LabelPosition, currentRect: Rect, prevRect: Rect) {
|
||||
if (position === 'top') {
|
||||
currentRect.y = prevRect.y - prevRect.h - labelPadding;
|
||||
} else if (position === 'right') {
|
||||
currentRect.x = prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2;
|
||||
} else if (position === 'bottom') {
|
||||
currentRect.y = prevRect.y + prevRect.h + labelPadding;
|
||||
} else if (position === 'left') {
|
||||
currentRect.x = prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2;
|
||||
}
|
||||
|
||||
return { x: currentRect.x, y: currentRect.y };
|
||||
}
|
||||
|
||||
function textWithRect(
|
||||
context: CanvasRenderingContext2D,
|
||||
type: LabelType,
|
||||
{ x, y, w, h }: Rect,
|
||||
text: number | string
|
||||
) {
|
||||
roundedRect(context, { x, y, w, h, r: 3 });
|
||||
context.fillStyle = `${colors[type]}dd`;
|
||||
context.fill();
|
||||
context.strokeStyle = colors[type];
|
||||
context.stroke();
|
||||
|
||||
context.fillStyle = colors.text;
|
||||
context.fillText(text as string, x, y);
|
||||
|
||||
roundedRect(context, { x, y, w, h, r: 3 });
|
||||
context.fillStyle = `${colors[type]}dd`;
|
||||
context.fill();
|
||||
context.strokeStyle = colors[type];
|
||||
context.stroke();
|
||||
|
||||
context.fillStyle = colors.text;
|
||||
context.fillText(text as string, x, y);
|
||||
|
||||
return { x, y, w, h };
|
||||
}
|
||||
|
||||
function configureText(context: CanvasRenderingContext2D, text: number | string): RectSize {
|
||||
context.font = '600 12px monospace';
|
||||
context.textBaseline = 'middle';
|
||||
context.textAlign = 'center';
|
||||
|
||||
const metrics = context.measureText(text as string);
|
||||
const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
|
||||
|
||||
const w = metrics.width + labelPadding * 2;
|
||||
const h = actualHeight + labelPadding * 2;
|
||||
|
||||
return { w, h };
|
||||
}
|
||||
|
||||
function drawLabel(
|
||||
context: CanvasRenderingContext2D,
|
||||
measurements: ElementMeasurements,
|
||||
{ type, position = 'center', text }: Label,
|
||||
prevRect: Rect,
|
||||
external = false
|
||||
) {
|
||||
let { x, y } = positionCoordinate(position, measurements);
|
||||
const { offsetX, offsetY } = offset(type, position, measurements, labelPadding + 1, external);
|
||||
|
||||
// Shift coordinate to center within
|
||||
// the band of measurement
|
||||
x += offsetX;
|
||||
y += offsetY;
|
||||
|
||||
const { w, h } = configureText(context, text);
|
||||
|
||||
// Adjust for overlap
|
||||
if (prevRect && collide({ x, y, w, h }, prevRect)) {
|
||||
const adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);
|
||||
x = adjusted.x;
|
||||
y = adjusted.y;
|
||||
}
|
||||
|
||||
return textWithRect(context, type, { x, y, w, h }, text);
|
||||
}
|
||||
|
||||
function floatingOffset(alignment: FloatingAlignment, { w, h }: RectSize) {
|
||||
const deltaW = w * 0.5 + labelPadding;
|
||||
const deltaH = h * 0.5 + labelPadding;
|
||||
|
||||
return {
|
||||
offsetX: (alignment.x === 'left' ? -1 : 1) * deltaW,
|
||||
offsetY: (alignment.y === 'top' ? -1 : 1) * deltaH,
|
||||
};
|
||||
}
|
||||
|
||||
export function drawFloatingLabel(
|
||||
context: CanvasRenderingContext2D,
|
||||
measurements: ElementMeasurements,
|
||||
{ type, text }: Label
|
||||
) {
|
||||
const { floatingAlignment, extremities } = measurements;
|
||||
|
||||
let x = extremities[floatingAlignment.x];
|
||||
let y = extremities[floatingAlignment.y];
|
||||
|
||||
const { w, h } = configureText(context, text);
|
||||
|
||||
const { offsetX, offsetY } = floatingOffset(floatingAlignment, {
|
||||
w,
|
||||
h,
|
||||
});
|
||||
|
||||
x += offsetX;
|
||||
y += offsetY;
|
||||
|
||||
return textWithRect(context, type, { x, y, w, h }, text);
|
||||
}
|
||||
|
||||
function drawStack(
|
||||
context: CanvasRenderingContext2D,
|
||||
measurements: ElementMeasurements,
|
||||
stack: LabelStack,
|
||||
external: boolean
|
||||
) {
|
||||
const rects: Rect[] = [];
|
||||
|
||||
stack.forEach((l, idx) => {
|
||||
// Move the centred label to floating in external mode
|
||||
const rect =
|
||||
external && l.position === 'center'
|
||||
? drawFloatingLabel(context, measurements, l)
|
||||
: drawLabel(context, measurements, l, rects[idx - 1], external);
|
||||
rects[idx] = rect;
|
||||
});
|
||||
}
|
||||
|
||||
interface GroupedLabelStacks {
|
||||
top?: LabelStack;
|
||||
right?: LabelStack;
|
||||
bottom?: LabelStack;
|
||||
left?: LabelStack;
|
||||
center?: LabelStack;
|
||||
}
|
||||
|
||||
export function labelStacks(
|
||||
context: CanvasRenderingContext2D,
|
||||
measurements: ElementMeasurements,
|
||||
labels: LabelStack,
|
||||
externalLabels: boolean
|
||||
) {
|
||||
const stacks = labels.reduce<GroupedLabelStacks>((acc, l) => {
|
||||
if (!Object.prototype.hasOwnProperty.call(acc, l.position)) {
|
||||
acc[l.position] = [];
|
||||
}
|
||||
|
||||
acc[l.position].push(l);
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
if (stacks.top) {
|
||||
drawStack(context, measurements, stacks.top, externalLabels);
|
||||
}
|
||||
if (stacks.right) {
|
||||
drawStack(context, measurements, stacks.right, externalLabels);
|
||||
}
|
||||
if (stacks.bottom) {
|
||||
drawStack(context, measurements, stacks.bottom, externalLabels);
|
||||
}
|
||||
if (stacks.left) {
|
||||
drawStack(context, measurements, stacks.left, externalLabels);
|
||||
}
|
||||
if (stacks.center) {
|
||||
drawStack(context, measurements, stacks.center, externalLabels);
|
||||
}
|
||||
}
|
||||
308
addons/measure/src/box-model/visualizer.ts
Normal file
308
addons/measure/src/box-model/visualizer.ts
Normal file
@ -0,0 +1,308 @@
|
||||
/* eslint-disable operator-assignment */
|
||||
/**
|
||||
* Based on https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7
|
||||
*/
|
||||
import global from 'global';
|
||||
import { draw } from './canvas';
|
||||
import { labelStacks, Label, LabelStack } from './labels';
|
||||
|
||||
const colors = {
|
||||
margin: '#f6b26ba8',
|
||||
border: '#ffe599a8',
|
||||
padding: '#93c47d8c',
|
||||
content: '#6fa8dca8',
|
||||
};
|
||||
|
||||
const SMALL_NODE_SIZE = 30;
|
||||
|
||||
function pxToNumber(px: string): number {
|
||||
return parseInt(px.replace('px', ''), 10);
|
||||
}
|
||||
|
||||
function round(value: number): number | string {
|
||||
return Number.isInteger(value) ? value : value.toFixed(2);
|
||||
}
|
||||
|
||||
function filterZeroValues(labels: LabelStack): LabelStack {
|
||||
return labels.filter((l) => l.text !== 0 && l.text !== '0');
|
||||
}
|
||||
|
||||
function floatingAlignment(extremities: Extremities): FloatingAlignment {
|
||||
const windowExtremities = {
|
||||
top: global.window.scrollY,
|
||||
bottom: global.window.scrollY + global.window.innerHeight,
|
||||
left: global.window.scrollX,
|
||||
right: global.window.scrollX + global.window.innerWidth,
|
||||
};
|
||||
|
||||
const distances = {
|
||||
top: Math.abs(windowExtremities.top - extremities.top),
|
||||
bottom: Math.abs(windowExtremities.bottom - extremities.bottom),
|
||||
left: Math.abs(windowExtremities.left - extremities.left),
|
||||
right: Math.abs(windowExtremities.right - extremities.right),
|
||||
};
|
||||
|
||||
return {
|
||||
x: distances.left > distances.right ? 'left' : 'right',
|
||||
y: distances.top > distances.bottom ? 'top' : 'bottom',
|
||||
};
|
||||
}
|
||||
|
||||
function measureElement(element: HTMLElement): ElementMeasurements {
|
||||
const style = global.getComputedStyle(element);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
|
||||
|
||||
const {
|
||||
marginTop,
|
||||
marginBottom,
|
||||
marginLeft,
|
||||
marginRight,
|
||||
paddingTop,
|
||||
paddingBottom,
|
||||
paddingLeft,
|
||||
paddingRight,
|
||||
borderBottomWidth,
|
||||
borderTopWidth,
|
||||
borderLeftWidth,
|
||||
borderRightWidth,
|
||||
} = style;
|
||||
|
||||
top = top + global.window.scrollY;
|
||||
left = left + global.window.scrollX;
|
||||
bottom = bottom + global.window.scrollY;
|
||||
right = right + global.window.scrollX;
|
||||
|
||||
const margin = {
|
||||
top: pxToNumber(marginTop),
|
||||
bottom: pxToNumber(marginBottom),
|
||||
left: pxToNumber(marginLeft),
|
||||
right: pxToNumber(marginRight),
|
||||
};
|
||||
|
||||
const padding = {
|
||||
top: pxToNumber(paddingTop),
|
||||
bottom: pxToNumber(paddingBottom),
|
||||
left: pxToNumber(paddingLeft),
|
||||
right: pxToNumber(paddingRight),
|
||||
};
|
||||
|
||||
const border = {
|
||||
top: pxToNumber(borderTopWidth),
|
||||
bottom: pxToNumber(borderBottomWidth),
|
||||
left: pxToNumber(borderLeftWidth),
|
||||
right: pxToNumber(borderRightWidth),
|
||||
};
|
||||
|
||||
const extremities = {
|
||||
top: top - margin.top,
|
||||
bottom: bottom + margin.bottom,
|
||||
left: left - margin.left,
|
||||
right: right + margin.right,
|
||||
};
|
||||
|
||||
return {
|
||||
margin,
|
||||
padding,
|
||||
border,
|
||||
top,
|
||||
left,
|
||||
bottom,
|
||||
right,
|
||||
width,
|
||||
height,
|
||||
extremities,
|
||||
floatingAlignment: floatingAlignment(extremities),
|
||||
};
|
||||
}
|
||||
|
||||
function drawMargin(
|
||||
context: CanvasRenderingContext2D,
|
||||
{ margin, width, height, top, left, bottom, right }: Dimensions
|
||||
): LabelStack {
|
||||
// Draw Margin
|
||||
const marginHeight = height + margin.bottom + margin.top;
|
||||
|
||||
context.fillStyle = colors.margin;
|
||||
// Top margin rect
|
||||
context.fillRect(left, top - margin.top, width, margin.top);
|
||||
// Right margin rect
|
||||
context.fillRect(right, top - margin.top, margin.right, marginHeight);
|
||||
// Bottom margin rect
|
||||
context.fillRect(left, bottom, width, margin.bottom);
|
||||
// Left margin rect
|
||||
context.fillRect(left - margin.left, top - margin.top, margin.left, marginHeight);
|
||||
|
||||
const marginLabels: LabelStack = [
|
||||
{
|
||||
type: 'margin',
|
||||
text: round(margin.top),
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
type: 'margin',
|
||||
text: round(margin.right),
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
type: 'margin',
|
||||
text: round(margin.bottom),
|
||||
position: 'bottom',
|
||||
},
|
||||
{
|
||||
type: 'margin',
|
||||
text: round(margin.left),
|
||||
position: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
return filterZeroValues(marginLabels);
|
||||
}
|
||||
|
||||
function drawPadding(
|
||||
context: CanvasRenderingContext2D,
|
||||
{ padding, border, width, height, top, left, bottom, right }: Dimensions
|
||||
): LabelStack {
|
||||
const paddingWidth = width - border.left - border.right;
|
||||
const paddingHeight = height - padding.top - padding.bottom - border.top - border.bottom;
|
||||
|
||||
context.fillStyle = colors.padding;
|
||||
// Top padding rect
|
||||
context.fillRect(left + border.left, top + border.top, paddingWidth, padding.top);
|
||||
// Right padding rect
|
||||
context.fillRect(
|
||||
right - padding.right - border.right,
|
||||
top + padding.top + border.top,
|
||||
padding.right,
|
||||
paddingHeight
|
||||
);
|
||||
// Bottom padding rect
|
||||
context.fillRect(
|
||||
left + border.left,
|
||||
bottom - padding.bottom - border.bottom,
|
||||
paddingWidth,
|
||||
padding.bottom
|
||||
);
|
||||
// Left padding rect
|
||||
context.fillRect(left + border.left, top + padding.top + border.top, padding.left, paddingHeight);
|
||||
|
||||
const paddingLabels: LabelStack = [
|
||||
{
|
||||
type: 'padding',
|
||||
text: padding.top,
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
type: 'padding',
|
||||
text: padding.right,
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
type: 'padding',
|
||||
text: padding.bottom,
|
||||
position: 'bottom',
|
||||
},
|
||||
{
|
||||
type: 'padding',
|
||||
text: padding.left,
|
||||
position: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
return filterZeroValues(paddingLabels);
|
||||
}
|
||||
|
||||
function drawBorder(
|
||||
context: CanvasRenderingContext2D,
|
||||
{ border, width, height, top, left, bottom, right }: Dimensions
|
||||
): Label[] {
|
||||
const borderHeight = height - border.top - border.bottom;
|
||||
|
||||
context.fillStyle = colors.border;
|
||||
// Top border rect
|
||||
context.fillRect(left, top, width, border.top);
|
||||
// Bottom border rect
|
||||
context.fillRect(left, bottom - border.bottom, width, border.bottom);
|
||||
// Left border rect
|
||||
context.fillRect(left, top + border.top, border.left, borderHeight);
|
||||
// Right border rect
|
||||
context.fillRect(right - border.right, top + border.top, border.right, borderHeight);
|
||||
|
||||
const borderLabels: LabelStack = [
|
||||
{
|
||||
type: 'border',
|
||||
text: border.top,
|
||||
position: 'top',
|
||||
},
|
||||
{
|
||||
type: 'border',
|
||||
text: border.right,
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
type: 'border',
|
||||
text: border.bottom,
|
||||
position: 'bottom',
|
||||
},
|
||||
{
|
||||
type: 'border',
|
||||
text: border.left,
|
||||
position: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
return filterZeroValues(borderLabels);
|
||||
}
|
||||
|
||||
function drawContent(
|
||||
context: CanvasRenderingContext2D,
|
||||
{ padding, border, width, height, top, left }: Dimensions
|
||||
): LabelStack {
|
||||
const contentWidth = width - border.left - border.right - padding.left - padding.right;
|
||||
const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
|
||||
|
||||
context.fillStyle = colors.content;
|
||||
// content rect
|
||||
context.fillRect(
|
||||
left + border.left + padding.left,
|
||||
top + border.top + padding.top,
|
||||
contentWidth,
|
||||
contentHeight
|
||||
);
|
||||
|
||||
// Dimension label
|
||||
return [
|
||||
{
|
||||
type: 'content',
|
||||
position: 'center',
|
||||
text: `${round(contentWidth)} x ${round(contentHeight)}`,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function drawBoxModel(element: HTMLElement) {
|
||||
return (context: CanvasRenderingContext2D) => {
|
||||
if (element && context) {
|
||||
const measurements = measureElement(element);
|
||||
|
||||
const marginLabels = drawMargin(context, measurements);
|
||||
const paddingLabels = drawPadding(context, measurements);
|
||||
const borderLabels = drawBorder(context, measurements);
|
||||
const contentLabels = drawContent(context, measurements);
|
||||
|
||||
const externalLabels =
|
||||
measurements.width <= SMALL_NODE_SIZE * 3 || measurements.height <= SMALL_NODE_SIZE;
|
||||
|
||||
labelStacks(
|
||||
context,
|
||||
measurements,
|
||||
[...contentLabels, ...paddingLabels, ...borderLabels, ...marginLabels],
|
||||
externalLabels
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function drawSelectedElement(element: HTMLElement) {
|
||||
draw(drawBoxModel(element));
|
||||
}
|
||||
9
addons/measure/src/constants.ts
Normal file
9
addons/measure/src/constants.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export const ADDON_ID = 'storybook/measure-addon';
|
||||
export const TOOL_ID = `${ADDON_ID}/tool`;
|
||||
export const PARAM_KEY = 'measureEnabled';
|
||||
|
||||
export const EVENTS = {
|
||||
RESULT: `${ADDON_ID}/result`,
|
||||
REQUEST: `${ADDON_ID}/request`,
|
||||
CLEAR: `${ADDON_ID}/clear`,
|
||||
};
|
||||
6
addons/measure/src/index.ts
Normal file
6
addons/measure/src/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
// make it work with --isolatedModules
|
||||
export default {};
|
||||
8
addons/measure/src/preset/addDecorator.tsx
Normal file
8
addons/measure/src/preset/addDecorator.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import { withMeasure } from '../withMeasure';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
|
||||
export const decorators = [withMeasure];
|
||||
|
||||
export const globals = {
|
||||
[PARAM_KEY]: false,
|
||||
};
|
||||
14
addons/measure/src/register.tsx
Normal file
14
addons/measure/src/register.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, TOOL_ID } from './constants';
|
||||
import { Tool } from './Tool';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(TOOL_ID, {
|
||||
type: types.TOOL,
|
||||
title: 'Measure',
|
||||
match: ({ viewMode }) => viewMode === 'story',
|
||||
render: () => <Tool />,
|
||||
});
|
||||
});
|
||||
51
addons/measure/src/typings.d.ts
vendored
Normal file
51
addons/measure/src/typings.d.ts
vendored
Normal file
@ -0,0 +1,51 @@
|
||||
declare module 'global';
|
||||
|
||||
interface Margin {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
}
|
||||
|
||||
interface Padding {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
}
|
||||
|
||||
interface Border {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
}
|
||||
|
||||
interface Dimensions {
|
||||
margin: Margin;
|
||||
padding: Padding;
|
||||
border: Border;
|
||||
width: number;
|
||||
height: number;
|
||||
top: number;
|
||||
left: number;
|
||||
bottom: number;
|
||||
right: number;
|
||||
}
|
||||
|
||||
interface Extremities {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
}
|
||||
|
||||
interface FloatingAlignment {
|
||||
x: 'left' | 'right';
|
||||
y: 'top' | 'bottom';
|
||||
}
|
||||
|
||||
interface ElementMeasurements extends Dimensions {
|
||||
extremities: Extremities;
|
||||
floatingAlignment: FloatingAlignment;
|
||||
}
|
||||
28
addons/measure/src/util.ts
Normal file
28
addons/measure/src/util.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import global from 'global';
|
||||
|
||||
export const deepElementFromPoint = (x: number, y: number) => {
|
||||
const element = global.document.elementFromPoint(x, y);
|
||||
|
||||
const crawlShadows = (node: Element): Element => {
|
||||
if (node && node.shadowRoot) {
|
||||
const nestedElement = node.shadowRoot.elementFromPoint(x, y);
|
||||
|
||||
// Nested node is same as the root one
|
||||
if (node.isEqualNode(nestedElement)) {
|
||||
return node;
|
||||
}
|
||||
// The nested node has shadow DOM too so continue crawling
|
||||
if (nestedElement.shadowRoot) {
|
||||
return crawlShadows(nestedElement);
|
||||
}
|
||||
// No more shadow DOM
|
||||
return nestedElement;
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
const shadowElement = crawlShadows(element);
|
||||
|
||||
return shadowElement || element;
|
||||
};
|
||||
63
addons/measure/src/withMeasure.ts
Normal file
63
addons/measure/src/withMeasure.ts
Normal file
@ -0,0 +1,63 @@
|
||||
/* eslint-env browser */
|
||||
import { StoryFn as StoryFunction, StoryContext, useEffect } from '@storybook/addons';
|
||||
import { drawSelectedElement } from './box-model/visualizer';
|
||||
import { init, rescale, destroy } from './box-model/canvas';
|
||||
import { deepElementFromPoint } from './util';
|
||||
|
||||
let nodeAtPointerRef;
|
||||
const pointer = { x: 0, y: 0 };
|
||||
|
||||
function findAndDrawElement(x: number, y: number) {
|
||||
nodeAtPointerRef = deepElementFromPoint(x, y);
|
||||
drawSelectedElement(nodeAtPointerRef);
|
||||
}
|
||||
|
||||
export const withMeasure = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
const { measureEnabled } = context.globals;
|
||||
|
||||
useEffect(() => {
|
||||
const onMouseMove = (event: MouseEvent) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
event.stopPropagation();
|
||||
pointer.x = event.clientX;
|
||||
pointer.y = event.clientY;
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onMouseOver = (event: MouseEvent) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
event.stopPropagation();
|
||||
findAndDrawElement(event.clientX, event.clientY);
|
||||
});
|
||||
};
|
||||
|
||||
const onResize = () => {
|
||||
window.requestAnimationFrame(() => {
|
||||
rescale();
|
||||
});
|
||||
};
|
||||
|
||||
if (measureEnabled) {
|
||||
document.addEventListener('mouseover', onMouseOver);
|
||||
init();
|
||||
window.addEventListener('resize', onResize);
|
||||
// Draw the element below the pointer when first enabled
|
||||
findAndDrawElement(pointer.x, pointer.y);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
destroy();
|
||||
};
|
||||
}, [measureEnabled]);
|
||||
|
||||
return StoryFn();
|
||||
};
|
||||
18
addons/measure/tsconfig.json
Normal file
18
addons/measure/tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
23
addons/outline/README.md
Normal file
23
addons/outline/README.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Storybook Addon Outline
|
||||
|
||||
Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in [Storybook](https://storybook.js.org). Based on [Pesticide](https://github.com/mrmrs/pesticide), it draws outlines around every single element in the preview pane.
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-outline
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-outline'],
|
||||
};
|
||||
```
|
||||
|
||||
You can now click on the outline button in the toolbar to toggle the outlines.
|
||||
87
addons/outline/package.json
Normal file
87
addons/outline/package.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"essentials",
|
||||
"outline",
|
||||
"css",
|
||||
"layout",
|
||||
"debug",
|
||||
"storybook-addon",
|
||||
"style"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/outline",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/outline"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "winkerVSbecks",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/ts3.9/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"dist/ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
"react-native"
|
||||
],
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991674-48355c80-3c7c-11eb-9686-f684e755fcdd.png"
|
||||
}
|
||||
}
|
||||
12
addons/outline/preset.js
Normal file
12
addons/outline/preset.js
Normal file
@ -0,0 +1,12 @@
|
||||
function config(entry = []) {
|
||||
return [...entry, require.resolve('./dist/esm/preset/addDecorator')];
|
||||
}
|
||||
|
||||
function managerEntries(entry = [], options) {
|
||||
return [...entry, require.resolve('./dist/esm/register')];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
managerEntries,
|
||||
config,
|
||||
};
|
||||
1
addons/outline/register.js
Normal file
1
addons/outline/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/esm/register');
|
||||
29
addons/outline/src/OutlineSelector.tsx
Normal file
29
addons/outline/src/OutlineSelector.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React, { memo, useCallback } from 'react';
|
||||
import { useGlobals } from '@storybook/api';
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
import { PARAM_KEY } from './constants';
|
||||
|
||||
export const OutlineSelector = memo(() => {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
|
||||
const isActive = globals[PARAM_KEY] || false;
|
||||
|
||||
const toggleOutline = useCallback(
|
||||
() =>
|
||||
updateGlobals({
|
||||
[PARAM_KEY]: !isActive,
|
||||
}),
|
||||
[isActive]
|
||||
);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
key="outline"
|
||||
active={isActive}
|
||||
title="Apply outlines to the preview"
|
||||
onClick={toggleOutline}
|
||||
>
|
||||
<Icons icon="outline" />
|
||||
</IconButton>
|
||||
);
|
||||
});
|
||||
2
addons/outline/src/constants.ts
Normal file
2
addons/outline/src/constants.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export const ADDON_ID = 'storybook/outline';
|
||||
export const PARAM_KEY = 'outline';
|
||||
27
addons/outline/src/helpers.ts
Normal file
27
addons/outline/src/helpers.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import global from 'global';
|
||||
|
||||
export const clearStyles = (selector: string | string[]) => {
|
||||
const selectors = Array.isArray(selector) ? selector : [selector];
|
||||
selectors.forEach(clearStyle);
|
||||
};
|
||||
|
||||
const clearStyle = (selector: string | string[]) => {
|
||||
const element = global.document.getElementById(selector);
|
||||
if (element && element.parentElement) {
|
||||
element.parentElement.removeChild(element);
|
||||
}
|
||||
};
|
||||
|
||||
export const addOutlineStyles = (selector: string, css: string) => {
|
||||
const existingStyle = global.document.getElementById(selector);
|
||||
if (existingStyle) {
|
||||
if (existingStyle.innerHTML !== css) {
|
||||
existingStyle.innerHTML = css;
|
||||
}
|
||||
} else {
|
||||
const style = global.document.createElement('style');
|
||||
style.setAttribute('id', selector);
|
||||
style.innerHTML = css;
|
||||
global.document.head.appendChild(style);
|
||||
}
|
||||
};
|
||||
6
addons/outline/src/index.ts
Normal file
6
addons/outline/src/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
// make it work with --isolatedModules
|
||||
export default {};
|
||||
403
addons/outline/src/outlineCSS.ts
Normal file
403
addons/outline/src/outlineCSS.ts
Normal file
@ -0,0 +1,403 @@
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
/*
|
||||
From pesticide v1.3.0 . @mrmrs . MIT
|
||||
*/
|
||||
export default function outlineCSS(selector: string) {
|
||||
return dedent/* css */ `
|
||||
${selector} body {
|
||||
outline: 1px solid #2980b9 !important;
|
||||
}
|
||||
|
||||
${selector} article {
|
||||
outline: 1px solid #3498db !important;
|
||||
}
|
||||
|
||||
${selector} nav {
|
||||
outline: 1px solid #0088c3 !important;
|
||||
}
|
||||
|
||||
${selector} aside {
|
||||
outline: 1px solid #33a0ce !important;
|
||||
}
|
||||
|
||||
${selector} section {
|
||||
outline: 1px solid #66b8da !important;
|
||||
}
|
||||
|
||||
${selector} header {
|
||||
outline: 1px solid #99cfe7 !important;
|
||||
}
|
||||
|
||||
${selector} footer {
|
||||
outline: 1px solid #cce7f3 !important;
|
||||
}
|
||||
|
||||
${selector} h1 {
|
||||
outline: 1px solid #162544 !important;
|
||||
}
|
||||
|
||||
${selector} h2 {
|
||||
outline: 1px solid #314e6e !important;
|
||||
}
|
||||
|
||||
${selector} h3 {
|
||||
outline: 1px solid #3e5e85 !important;
|
||||
}
|
||||
|
||||
${selector} h4 {
|
||||
outline: 1px solid #449baf !important;
|
||||
}
|
||||
|
||||
${selector} h5 {
|
||||
outline: 1px solid #c7d1cb !important;
|
||||
}
|
||||
|
||||
${selector} h6 {
|
||||
outline: 1px solid #4371d0 !important;
|
||||
}
|
||||
|
||||
${selector} main {
|
||||
outline: 1px solid #2f4f90 !important;
|
||||
}
|
||||
|
||||
${selector} address {
|
||||
outline: 1px solid #1a2c51 !important;
|
||||
}
|
||||
|
||||
${selector} div {
|
||||
outline: 1px solid #036cdb !important;
|
||||
}
|
||||
|
||||
${selector} p {
|
||||
outline: 1px solid #ac050b !important;
|
||||
}
|
||||
|
||||
${selector} hr {
|
||||
outline: 1px solid #ff063f !important;
|
||||
}
|
||||
|
||||
${selector} pre {
|
||||
outline: 1px solid #850440 !important;
|
||||
}
|
||||
|
||||
${selector} blockquote {
|
||||
outline: 1px solid #f1b8e7 !important;
|
||||
}
|
||||
|
||||
${selector} ol {
|
||||
outline: 1px solid #ff050c !important;
|
||||
}
|
||||
|
||||
${selector} ul {
|
||||
outline: 1px solid #d90416 !important;
|
||||
}
|
||||
|
||||
${selector} li {
|
||||
outline: 1px solid #d90416 !important;
|
||||
}
|
||||
|
||||
${selector} dl {
|
||||
outline: 1px solid #fd3427 !important;
|
||||
}
|
||||
|
||||
${selector} dt {
|
||||
outline: 1px solid #ff0043 !important;
|
||||
}
|
||||
|
||||
${selector} dd {
|
||||
outline: 1px solid #e80174 !important;
|
||||
}
|
||||
|
||||
${selector} figure {
|
||||
outline: 1px solid #ff00bb !important;
|
||||
}
|
||||
|
||||
${selector} figcaption {
|
||||
outline: 1px solid #bf0032 !important;
|
||||
}
|
||||
|
||||
${selector} table {
|
||||
outline: 1px solid #00cc99 !important;
|
||||
}
|
||||
|
||||
${selector} caption {
|
||||
outline: 1px solid #37ffc4 !important;
|
||||
}
|
||||
|
||||
${selector} thead {
|
||||
outline: 1px solid #98daca !important;
|
||||
}
|
||||
|
||||
${selector} tbody {
|
||||
outline: 1px solid #64a7a0 !important;
|
||||
}
|
||||
|
||||
${selector} tfoot {
|
||||
outline: 1px solid #22746b !important;
|
||||
}
|
||||
|
||||
${selector} tr {
|
||||
outline: 1px solid #86c0b2 !important;
|
||||
}
|
||||
|
||||
${selector} th {
|
||||
outline: 1px solid #a1e7d6 !important;
|
||||
}
|
||||
|
||||
${selector} td {
|
||||
outline: 1px solid #3f5a54 !important;
|
||||
}
|
||||
|
||||
${selector} col {
|
||||
outline: 1px solid #6c9a8f !important;
|
||||
}
|
||||
|
||||
${selector} colgroup {
|
||||
outline: 1px solid #6c9a9d !important;
|
||||
}
|
||||
|
||||
${selector} button {
|
||||
outline: 1px solid #da8301 !important;
|
||||
}
|
||||
|
||||
${selector} datalist {
|
||||
outline: 1px solid #c06000 !important;
|
||||
}
|
||||
|
||||
${selector} fieldset {
|
||||
outline: 1px solid #d95100 !important;
|
||||
}
|
||||
|
||||
${selector} form {
|
||||
outline: 1px solid #d23600 !important;
|
||||
}
|
||||
|
||||
${selector} input {
|
||||
outline: 1px solid #fca600 !important;
|
||||
}
|
||||
|
||||
${selector} keygen {
|
||||
outline: 1px solid #b31e00 !important;
|
||||
}
|
||||
|
||||
${selector} label {
|
||||
outline: 1px solid #ee8900 !important;
|
||||
}
|
||||
|
||||
${selector} legend {
|
||||
outline: 1px solid #de6d00 !important;
|
||||
}
|
||||
|
||||
${selector} meter {
|
||||
outline: 1px solid #e8630c !important;
|
||||
}
|
||||
|
||||
${selector} optgroup {
|
||||
outline: 1px solid #b33600 !important;
|
||||
}
|
||||
|
||||
${selector} option {
|
||||
outline: 1px solid #ff8a00 !important;
|
||||
}
|
||||
|
||||
${selector} output {
|
||||
outline: 1px solid #ff9619 !important;
|
||||
}
|
||||
|
||||
${selector} progress {
|
||||
outline: 1px solid #e57c00 !important;
|
||||
}
|
||||
|
||||
${selector} select {
|
||||
outline: 1px solid #e26e0f !important;
|
||||
}
|
||||
|
||||
${selector} textarea {
|
||||
outline: 1px solid #cc5400 !important;
|
||||
}
|
||||
|
||||
${selector} details {
|
||||
outline: 1px solid #33848f !important;
|
||||
}
|
||||
|
||||
${selector} summary {
|
||||
outline: 1px solid #60a1a6 !important;
|
||||
}
|
||||
|
||||
${selector} command {
|
||||
outline: 1px solid #438da1 !important;
|
||||
}
|
||||
|
||||
${selector} menu {
|
||||
outline: 1px solid #449da6 !important;
|
||||
}
|
||||
|
||||
${selector} del {
|
||||
outline: 1px solid #bf0000 !important;
|
||||
}
|
||||
|
||||
${selector} ins {
|
||||
outline: 1px solid #400000 !important;
|
||||
}
|
||||
|
||||
${selector} img {
|
||||
outline: 1px solid #22746b !important;
|
||||
}
|
||||
|
||||
${selector} iframe {
|
||||
outline: 1px solid #64a7a0 !important;
|
||||
}
|
||||
|
||||
${selector} embed {
|
||||
outline: 1px solid #98daca !important;
|
||||
}
|
||||
|
||||
${selector} object {
|
||||
outline: 1px solid #00cc99 !important;
|
||||
}
|
||||
|
||||
${selector} param {
|
||||
outline: 1px solid #37ffc4 !important;
|
||||
}
|
||||
|
||||
${selector} video {
|
||||
outline: 1px solid #6ee866 !important;
|
||||
}
|
||||
|
||||
${selector} audio {
|
||||
outline: 1px solid #027353 !important;
|
||||
}
|
||||
|
||||
${selector} source {
|
||||
outline: 1px solid #012426 !important;
|
||||
}
|
||||
|
||||
${selector} canvas {
|
||||
outline: 1px solid #a2f570 !important;
|
||||
}
|
||||
|
||||
${selector} track {
|
||||
outline: 1px solid #59a600 !important;
|
||||
}
|
||||
|
||||
${selector} map {
|
||||
outline: 1px solid #7be500 !important;
|
||||
}
|
||||
|
||||
${selector} area {
|
||||
outline: 1px solid #305900 !important;
|
||||
}
|
||||
|
||||
${selector} a {
|
||||
outline: 1px solid #ff62ab !important;
|
||||
}
|
||||
|
||||
${selector} em {
|
||||
outline: 1px solid #800b41 !important;
|
||||
}
|
||||
|
||||
${selector} strong {
|
||||
outline: 1px solid #ff1583 !important;
|
||||
}
|
||||
|
||||
${selector} i {
|
||||
outline: 1px solid #803156 !important;
|
||||
}
|
||||
|
||||
${selector} b {
|
||||
outline: 1px solid #cc1169 !important;
|
||||
}
|
||||
|
||||
${selector} u {
|
||||
outline: 1px solid #ff0430 !important;
|
||||
}
|
||||
|
||||
${selector} s {
|
||||
outline: 1px solid #f805e3 !important;
|
||||
}
|
||||
|
||||
${selector} small {
|
||||
outline: 1px solid #d107b2 !important;
|
||||
}
|
||||
|
||||
${selector} abbr {
|
||||
outline: 1px solid #4a0263 !important;
|
||||
}
|
||||
|
||||
${selector} q {
|
||||
outline: 1px solid #240018 !important;
|
||||
}
|
||||
|
||||
${selector} cite {
|
||||
outline: 1px solid #64003c !important;
|
||||
}
|
||||
|
||||
${selector} dfn {
|
||||
outline: 1px solid #b4005a !important;
|
||||
}
|
||||
|
||||
${selector} sub {
|
||||
outline: 1px solid #dba0c8 !important;
|
||||
}
|
||||
|
||||
${selector} sup {
|
||||
outline: 1px solid #cc0256 !important;
|
||||
}
|
||||
|
||||
${selector} time {
|
||||
outline: 1px solid #d6606d !important;
|
||||
}
|
||||
|
||||
${selector} code {
|
||||
outline: 1px solid #e04251 !important;
|
||||
}
|
||||
|
||||
${selector} kbd {
|
||||
outline: 1px solid #5e001f !important;
|
||||
}
|
||||
|
||||
${selector} samp {
|
||||
outline: 1px solid #9c0033 !important;
|
||||
}
|
||||
|
||||
${selector} var {
|
||||
outline: 1px solid #d90047 !important;
|
||||
}
|
||||
|
||||
${selector} mark {
|
||||
outline: 1px solid #ff0053 !important;
|
||||
}
|
||||
|
||||
${selector} bdi {
|
||||
outline: 1px solid #bf3668 !important;
|
||||
}
|
||||
|
||||
${selector} bdo {
|
||||
outline: 1px solid #6f1400 !important;
|
||||
}
|
||||
|
||||
${selector} ruby {
|
||||
outline: 1px solid #ff7b93 !important;
|
||||
}
|
||||
|
||||
${selector} rt {
|
||||
outline: 1px solid #ff2f54 !important;
|
||||
}
|
||||
|
||||
${selector} rp {
|
||||
outline: 1px solid #803e49 !important;
|
||||
}
|
||||
|
||||
${selector} span {
|
||||
outline: 1px solid #cc2643 !important;
|
||||
}
|
||||
|
||||
${selector} br {
|
||||
outline: 1px solid #db687d !important;
|
||||
}
|
||||
|
||||
${selector} wbr {
|
||||
outline: 1px solid #db175b !important;
|
||||
}`;
|
||||
}
|
||||
8
addons/outline/src/preset/addDecorator.tsx
Normal file
8
addons/outline/src/preset/addDecorator.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import { withOutline } from '../withOutline';
|
||||
import { PARAM_KEY } from '../constants';
|
||||
|
||||
export const decorators = [withOutline];
|
||||
|
||||
export const globals = {
|
||||
[PARAM_KEY]: false,
|
||||
};
|
||||
14
addons/outline/src/register.tsx
Normal file
14
addons/outline/src/register.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID } from './constants';
|
||||
import { OutlineSelector } from './OutlineSelector';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(ADDON_ID, {
|
||||
title: 'Outline',
|
||||
type: types.TOOL,
|
||||
match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
|
||||
render: () => <OutlineSelector />,
|
||||
});
|
||||
});
|
||||
1
addons/outline/src/typings.d.ts
vendored
Normal file
1
addons/outline/src/typings.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'global';
|
||||
33
addons/outline/src/withOutline.ts
Normal file
33
addons/outline/src/withOutline.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
|
||||
|
||||
import { clearStyles, addOutlineStyles } from './helpers';
|
||||
import { PARAM_KEY } from './constants';
|
||||
import outlineCSS from './outlineCSS';
|
||||
|
||||
export const withOutline = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
const { globals } = context;
|
||||
const isActive = globals[PARAM_KEY] === true;
|
||||
const isInDocs = context.viewMode === 'docs';
|
||||
|
||||
const outlineStyles = useMemo(() => {
|
||||
const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
|
||||
|
||||
return outlineCSS(selector);
|
||||
}, [context]);
|
||||
|
||||
useEffect(() => {
|
||||
const selectorId = isInDocs ? `addon-outline-docs-${context.id}` : `addon-outline`;
|
||||
|
||||
if (!isActive) {
|
||||
clearStyles(selectorId);
|
||||
} else {
|
||||
addOutlineStyles(selectorId, outlineStyles);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearStyles(selectorId);
|
||||
};
|
||||
}, [isActive, outlineStyles, context]);
|
||||
|
||||
return StoryFn();
|
||||
};
|
||||
18
addons/outline/tsconfig.json
Normal file
18
addons/outline/tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-core",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -45,10 +45,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/core": "6.3.0-rc.8",
|
||||
"@storybook/core-common": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -67,11 +67,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.3.0-rc.8",
|
||||
"@storybook/angular": "6.3.0-rc.8",
|
||||
"@storybook/react": "6.3.0-rc.8",
|
||||
"@storybook/vue": "6.3.0-rc.8",
|
||||
"@storybook/vue3": "6.3.0-rc.8",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.22",
|
||||
"@storybook/angular": "6.4.0-alpha.22",
|
||||
"@storybook/react": "6.4.0-alpha.22",
|
||||
"@storybook/vue": "6.4.0-alpha.22",
|
||||
"@storybook/vue3": "6.4.0-alpha.22",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -149,7 +149,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -177,7 +177,7 @@ Those can be customized with `setupTimeout` and `testTimeout` parameters.
|
||||
### Integrate Puppeteer storyshots with regular app
|
||||
|
||||
You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/master/examples/official-storybook) example.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/main/examples/official-storybook) example.
|
||||
|
||||
### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
|
||||
|
||||
@ -326,6 +326,7 @@ initStoryshots({
|
||||
`getScreenshotOptions` receives an object `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
|
||||
|
||||
To create a screenshot of just a single element (with its children), rather than the page or current viewport, an ElementHandle can be returned from `beforeScreenshot`:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-puppeteer",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -42,7 +42,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.3.0-beta.17",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.22",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b"
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010"
|
||||
}
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
- [Getting Started](#getting-started)
|
||||
- [Install using preset](#install-using-preset)
|
||||
@ -57,7 +57,8 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are
|
||||
## Theming
|
||||
|
||||
Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information.
|
||||
|
||||
|
||||
|
||||
|
||||
## Displaying full source
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"code"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storysource",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storysource",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -41,17 +41,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/router": "6.3.0-rc.8",
|
||||
"@storybook/source-loader": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/router": "6.4.0-alpha.22",
|
||||
"@storybook/source-loader": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^13.5.3",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u
|
||||
|
||||
- **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
|
||||
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs), or even in other addons.
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/main/addons/docs), or even in other addons.
|
||||
|
||||
* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-api": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"core-js": "^3.8.2"
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-api": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -67,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -8,7 +8,7 @@
|
||||
"style",
|
||||
"essentials"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/viewport",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/viewport",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/client-logger": "6.3.0-rc.8",
|
||||
"@storybook/components": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/theming": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/client-logger": "6.4.0-alpha.22",
|
||||
"@storybook/components": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/theming": "6.4.0-alpha.22",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b",
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Angular is a UI development environment for your Angular components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.3.0-rc.8",
|
||||
"version": "6.4.0-alpha.22",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/angular",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/angular",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -45,18 +45,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.8",
|
||||
"@storybook/api": "6.3.0-rc.8",
|
||||
"@storybook/core": "6.3.0-rc.8",
|
||||
"@storybook/core-common": "6.3.0-rc.8",
|
||||
"@storybook/core-events": "6.3.0-rc.8",
|
||||
"@storybook/node-logger": "6.3.0-rc.8",
|
||||
"@storybook/addons": "6.4.0-alpha.22",
|
||||
"@storybook/api": "6.4.0-alpha.22",
|
||||
"@storybook/core": "6.4.0-alpha.22",
|
||||
"@storybook/core-common": "6.4.0-alpha.22",
|
||||
"@storybook/core-events": "6.4.0-alpha.22",
|
||||
"@storybook/node-logger": "6.4.0-alpha.22",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
"fork-ts-checker-webpack-plugin": "^4.1.6",
|
||||
"global": "^4.4.0",
|
||||
"postcss": "^7.0.35",
|
||||
"postcss": "^7.0.36",
|
||||
"postcss-loader": "^4.2.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "16.14.0",
|
||||
@ -65,6 +65,7 @@
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sass-loader": "^10.1.0",
|
||||
"strip-json-comments": "3.1.1",
|
||||
"telejson": "^5.3.2",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"tsconfig-paths-webpack-plugin": "^3.3.0",
|
||||
@ -128,5 +129,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "a9256a360ce67dc2eab408046a4baa4e13430a8b"
|
||||
"gitHead": "1af5a50d379d84d33f9bbe798f18e8141d967010"
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import { stringify } from 'telejson';
|
||||
import { ICollection, StoryFnAngularReturnType } from '../types';
|
||||
import { Parameters } from '../types-6-0';
|
||||
import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
|
||||
@ -29,7 +30,6 @@ export abstract class AbstractRenderer {
|
||||
return new Promise<void>((resolve) => {
|
||||
if (platformRef && !platformRef.destroyed) {
|
||||
platformRef.onDestroy(async () => {
|
||||
await AbstractRenderer.resetCompiledComponents();
|
||||
resolve();
|
||||
});
|
||||
// Destroys the current Angular platform and all Angular applications on the page.
|
||||
@ -83,6 +83,8 @@ export abstract class AbstractRenderer {
|
||||
|
||||
protected abstract beforeFullRender(): Promise<void>;
|
||||
|
||||
protected abstract afterFullRender(): Promise<void>;
|
||||
|
||||
/**
|
||||
* Bootstrap main angular module with main component or send only new `props` with storyProps$
|
||||
*
|
||||
@ -136,6 +138,7 @@ export abstract class AbstractRenderer {
|
||||
createStorybookModule(moduleMetadata),
|
||||
parameters.bootstrapModuleOptions ?? undefined
|
||||
);
|
||||
await this.afterFullRender();
|
||||
}
|
||||
|
||||
protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) {
|
||||
@ -158,7 +161,7 @@ export abstract class AbstractRenderer {
|
||||
|
||||
const currentStoryRender = {
|
||||
storyFnAngular,
|
||||
moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
|
||||
moduleMetadataSnapshot: stringify(moduleMetadata),
|
||||
};
|
||||
|
||||
this.previousStoryRenderInfo = currentStoryRender;
|
||||
|
||||
@ -15,4 +15,8 @@ export class CanvasRenderer extends AbstractRenderer {
|
||||
async beforeFullRender(): Promise<void> {
|
||||
await CanvasRenderer.resetPlatformBrowserDynamic();
|
||||
}
|
||||
|
||||
async afterFullRender(): Promise<void> {
|
||||
await AbstractRenderer.resetCompiledComponents();
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,10 +26,21 @@ export class DocsRenderer extends AbstractRenderer {
|
||||
await DocsRenderer.resetPlatformBrowserDynamic();
|
||||
});
|
||||
|
||||
await super.render({ ...options, forced: false });
|
||||
/**
|
||||
* Destroy and recreate the PlatformBrowserDynamic of angular
|
||||
* when doc re render. Allows to call ngOnDestroy of angular
|
||||
* for previous component
|
||||
*/
|
||||
channel.once(Events.DOCS_RENDERED, async () => {
|
||||
await DocsRenderer.resetPlatformBrowserDynamic();
|
||||
});
|
||||
|
||||
await AbstractRenderer.resetCompiledComponents();
|
||||
await super.render({ ...options, forced: false });
|
||||
}
|
||||
|
||||
async beforeFullRender(): Promise<void> {}
|
||||
|
||||
async afterFullRender(): Promise<void> {
|
||||
await AbstractRenderer.resetCompiledComponents();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, getPlatform } from '@angular/core';
|
||||
import { Component, getPlatform, ɵresetJitOptions } from '@angular/core';
|
||||
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { Parameters } from '../types-6-0';
|
||||
@ -26,6 +26,10 @@ describe('RendererFactory', () => {
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
|
||||
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
|
||||
ɵresetJitOptions();
|
||||
});
|
||||
|
||||
describe('CanvasRenderer', () => {
|
||||
@ -65,7 +69,9 @@ describe('RendererFactory', () => {
|
||||
targetDOMNode: rootTargetDOMNode,
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<foo>🦊</foo>');
|
||||
expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe(
|
||||
'<foo>🦊</foo><!--container-->'
|
||||
);
|
||||
});
|
||||
|
||||
describe('when forced=true', () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ɵresetJitOptions } from '@angular/core';
|
||||
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { Parameters } from '../types-6-0';
|
||||
@ -18,6 +18,10 @@ describe('RendererService', () => {
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
|
||||
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
|
||||
ɵresetJitOptions();
|
||||
});
|
||||
|
||||
it('should initialize', () => {
|
||||
@ -53,10 +57,33 @@ describe('RendererService', () => {
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
|
||||
'<foo>🦊</foo>'
|
||||
'<foo>🦊</foo><!--container-->'
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle circular reference in moduleMetadata', async () => {
|
||||
class Thing {
|
||||
token: Thing;
|
||||
|
||||
constructor() {
|
||||
this.token = this;
|
||||
}
|
||||
}
|
||||
const token = new Thing();
|
||||
|
||||
await rendererService.render({
|
||||
storyFnAngular: {
|
||||
template: '🦊',
|
||||
props: {},
|
||||
moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
|
||||
},
|
||||
forced: false,
|
||||
parameters: {} as any,
|
||||
});
|
||||
|
||||
expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🦊');
|
||||
});
|
||||
|
||||
describe('when forced=true', () => {
|
||||
beforeEach(async () => {
|
||||
// Init first render
|
||||
|
||||
@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import { stringify } from 'telejson';
|
||||
import { ICollection, StoryFnAngularReturnType } from '../types';
|
||||
import { Parameters } from '../types-6-0';
|
||||
import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
|
||||
@ -154,7 +155,7 @@ export class RendererService {
|
||||
|
||||
this.currentStoryRender = {
|
||||
storyFnAngular,
|
||||
moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
|
||||
moduleMetadataSnapshot: stringify(moduleMetadata),
|
||||
};
|
||||
|
||||
if (
|
||||
|
||||
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