mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-16 05:03:11 +08:00
Merge branch 'next' into pr/12863
This commit is contained in:
Michael Shilman
commit
79b3f27b7e
@ -31,7 +31,7 @@ executors:
|
||||
jobs:
|
||||
build:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
@ -41,8 +41,8 @@ jobs:
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
- build-yarn-cache-v1--
|
||||
- build-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
- build-yarn-cache-v4--
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
|
||||
@ -51,7 +51,7 @@ jobs:
|
||||
command: yarn bootstrap --core
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: build-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
key: build-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
- persist_to_workspace:
|
||||
@ -63,21 +63,21 @@ jobs:
|
||||
- lib
|
||||
install-examples-deps:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- install-examples-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
- install-examples-deps-yarn-cache-v1--
|
||||
- install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
- install-examples-deps-yarn-cache-v4--
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: install-examples-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
key: install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
- persist_to_workspace:
|
||||
@ -87,7 +87,7 @@ jobs:
|
||||
- node_modules
|
||||
install-e2e-deps:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
@ -97,14 +97,14 @@ jobs:
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- install-e2e-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
- install-e2e-deps-yarn-cache-v1--
|
||||
- install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
- install-e2e-deps-yarn-cache-v4--
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: install-e2e-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
|
||||
key: install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
- persist_to_workspace:
|
||||
@ -114,7 +114,7 @@ jobs:
|
||||
- node_modules
|
||||
chromatic:
|
||||
executor: sb_node
|
||||
parallelism: 11
|
||||
parallelism: 4
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -138,9 +138,9 @@ jobs:
|
||||
yarn packtracker
|
||||
examples:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
parallelism: 11
|
||||
parallelism: 4
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -155,7 +155,7 @@ jobs:
|
||||
- built-storybooks
|
||||
publish:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
@ -170,10 +170,10 @@ jobs:
|
||||
- .verdaccio-cache
|
||||
examples-v2:
|
||||
executor:
|
||||
class: large
|
||||
class: medium
|
||||
name: sb_node
|
||||
working_directory: /tmp/storybook
|
||||
parallelism: 10
|
||||
parallelism: 4
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -231,38 +231,6 @@ jobs:
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-angular:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12
|
||||
working_directory: /tmp/storybook
|
||||
parallelism: 2
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set registry http://localhost:6000/
|
||||
- run:
|
||||
name: Test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: Install Cypress binary
|
||||
command: yarn cypress install
|
||||
- run:
|
||||
name: Run e2e tests
|
||||
command: yarn test:e2e-framework angular@latest angular@v9-lts
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-yarn-2:
|
||||
executor:
|
||||
class: medium
|
||||
@ -390,10 +358,6 @@ jobs:
|
||||
executor: sb_node
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: Restore core dependencies cache
|
||||
keys:
|
||||
- core-dependencies-v5-{{ checksum "yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn bootstrap --install
|
||||
@ -475,12 +439,10 @@ workflows:
|
||||
requires:
|
||||
- install-e2e-deps
|
||||
- build
|
||||
- examples-v2:
|
||||
requires:
|
||||
- publish
|
||||
- examples-v2-angular:
|
||||
requires:
|
||||
- publish
|
||||
# too slow/expensive. disabling for now
|
||||
# - examples-v2:
|
||||
# requires:
|
||||
# - publish
|
||||
- examples-v2-yarn-2:
|
||||
requires:
|
||||
- publish
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,7 +5,7 @@ node_modules
|
||||
*.sw*
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
ts3.5
|
||||
ts3.4
|
||||
.tern-port
|
||||
*.DS_Store
|
||||
.cache
|
||||
|
||||
86
.teamcity/settings.kts
vendored
86
.teamcity/settings.kts
vendored
@ -46,8 +46,6 @@ project {
|
||||
buildType(E2E)
|
||||
buildType(SmokeTests)
|
||||
buildType(Frontpage)
|
||||
buildType(Docs)
|
||||
buildType(Lint)
|
||||
buildType(Test)
|
||||
buildType(Coverage)
|
||||
|
||||
@ -59,8 +57,6 @@ project {
|
||||
RelativeId("E2E"),
|
||||
RelativeId("SmokeTests"),
|
||||
RelativeId("Frontpage"),
|
||||
RelativeId("Docs"),
|
||||
RelativeId("Lint"),
|
||||
RelativeId("Test"),
|
||||
RelativeId("Coverage")
|
||||
)
|
||||
@ -437,87 +433,6 @@ object Frontpage : BuildType({
|
||||
}
|
||||
})
|
||||
|
||||
object Docs : BuildType({
|
||||
name = "Docs"
|
||||
type = Type.DEPLOYMENT
|
||||
|
||||
steps {
|
||||
script {
|
||||
workingDir = "docs"
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install
|
||||
yarn build
|
||||
""".trimIndent()
|
||||
dockerImage = "node:10"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
triggers {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:master
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object Lint : BuildType({
|
||||
name = "Lint"
|
||||
|
||||
dependencies {
|
||||
dependency(Build) {
|
||||
snapshot {
|
||||
onDependencyFailure = FailureAction.CANCEL
|
||||
}
|
||||
artifacts {
|
||||
artifactRules = "dist.tar.gz!** => ."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
scriptContent = """
|
||||
#!/bin/bash
|
||||
set -e -x
|
||||
|
||||
yarn install
|
||||
|
||||
# TODO remove after merging
|
||||
mkdir temp-eslint-teamcity
|
||||
cd temp-eslint-teamcity
|
||||
yarn init -y
|
||||
yarn add -D eslint-teamcity
|
||||
cd ..
|
||||
|
||||
yarn lint:js --format ./temp-eslint-teamcity/node_modules/eslint-teamcity/index.js .
|
||||
yarn lint:md .
|
||||
""".trimIndent()
|
||||
dockerImage = "node:10"
|
||||
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
|
||||
}
|
||||
}
|
||||
|
||||
failureConditions {
|
||||
failOnMetricChange {
|
||||
metric = BuildFailureOnMetric.MetricType.INSPECTION_ERROR_COUNT
|
||||
threshold = 0
|
||||
units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
|
||||
comparison = BuildFailureOnMetric.MetricComparison.MORE
|
||||
compareTo = value()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
object Test : BuildType({
|
||||
name = "Test"
|
||||
|
||||
@ -594,7 +509,6 @@ object TestWorkflow : BuildType({
|
||||
dependencies {
|
||||
snapshot(E2E) {}
|
||||
snapshot(SmokeTests) {}
|
||||
snapshot(Lint) {}
|
||||
snapshot(Coverage) {}
|
||||
}
|
||||
|
||||
|
||||
249
CHANGELOG.md
249
CHANGELOG.md
@ -1,3 +1,252 @@
|
||||
## 6.2.0-alpha.0 (December 1, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix type aliases and enum types from Angular Compodoc JSON ([#12665](https://github.com/storybookjs/storybook/pull/12665))
|
||||
- Core: Ensure node `name` does not contain leading/trailing whitespace ([#13275](https://github.com/storybookjs/storybook/pull/13275))
|
||||
- Angular: Run setProps in the NgZone ([#12382](https://github.com/storybookjs/storybook/pull/12382))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Make @babel/core an optional peer dependency ([#13329](https://github.com/storybookjs/storybook/pull/13329))
|
||||
- Core: Replace preset-env polyfills with babel-polyfills ([#13055](https://github.com/storybookjs/storybook/pull/13055))
|
||||
- CLI: use Jest to test CLI commands and remove outdated fixtures ([#12936](https://github.com/storybookjs/storybook/pull/12936))
|
||||
|
||||
## 6.1.9 (November 29, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-backgrounds: Fix grid offset always using default value ([#13260](https://github.com/storybookjs/storybook/pull/13260))
|
||||
- UI: Fix keybindings on non-US keyboard layouts ([#13319](https://github.com/storybookjs/storybook/pull/13319))
|
||||
- Addon-Docs: Handle class attributes in Dynamic Source Rendering for Vue.js ([#13327](https://github.com/storybookjs/storybook/pull/13327))
|
||||
|
||||
## 6.1.8 (November 27, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix preview URL dropped hashes ([#13308](https://github.com/storybookjs/storybook/pull/13308))
|
||||
- Core: Fix template script tag support ([#13271](https://github.com/storybookjs/storybook/pull/13271))
|
||||
- Addon-docs: Fix Vue source snippets for function attributes ([#13288](https://github.com/storybookjs/storybook/pull/13288))
|
||||
- Components: Fix Zoom for IE11 ([#13302](https://github.com/storybookjs/storybook/pull/13302))
|
||||
- React: Don't add FastRefresh if already enabled ([#13303](https://github.com/storybookjs/storybook/pull/13303))
|
||||
- CLI: Fix storybook-deployer upgrade warning ([#13306](https://github.com/storybookjs/storybook/pull/13306))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- React: Expose StorybookConfig types ([#13309](https://github.com/storybookjs/storybook/pull/13309))
|
||||
- React: Fix unit tests for react preset ([#13315](https://github.com/storybookjs/storybook/pull/13315))
|
||||
|
||||
## 6.1.7 (November 27, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CLI: Fix not printing managerTotalTime when using cached manager ([#13294](https://github.com/storybookjs/storybook/pull/13294))
|
||||
- Core: Only apply `express.json()` middleware to /runtime-error route ([#13295](https://github.com/storybookjs/storybook/pull/13295))
|
||||
- Core: Don't use prebuilt or cached manager when running smoke test ([#13266](https://github.com/storybookjs/storybook/pull/13266))
|
||||
- Core: Detect arg inference for cyclic args and warn ([#13263](https://github.com/storybookjs/storybook/pull/13263))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Remove unused dependency @svgr/webpack ([#13281](https://github.com/storybookjs/storybook/pull/13281))
|
||||
|
||||
## 6.1.6 (November 25, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-controls: Fix ensureDocsBeforeControls support for paths ([#13204](https://github.com/storybookjs/storybook/pull/13204))
|
||||
- CLI: Add core-js to Preact generator ([#13138](https://github.com/storybookjs/storybook/pull/13138))
|
||||
- Core: Improve handling of --static-dir option ([#13245](https://github.com/storybookjs/storybook/pull/13245))
|
||||
- Core: Fix webpack5 compatibility check for ProgressPlugin ([#13239](https://github.com/storybookjs/storybook/pull/13239))
|
||||
|
||||
## 6.1.5 (November 24, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Resolve react and react-dom from core ([#13195](https://github.com/storybookjs/storybook/pull/13195))
|
||||
|
||||
## 6.1.4 (November 24, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Clear manager cache on runtime error ([#13230](https://github.com/storybookjs/storybook/pull/13230))
|
||||
|
||||
## 6.1.3 (November 23, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Replace 'trash' with 'fs.remove' ([#13211](https://github.com/storybookjs/storybook/pull/13211))
|
||||
- UI: Fix overflow scrolling on layout:centered ([#13217](https://github.com/storybookjs/storybook/pull/13217))
|
||||
- CLI: Don't install babel-loader for CRA ([#13220](https://github.com/storybookjs/storybook/pull/13220))
|
||||
- Addon-docs: Fix lineheight in typeset component ([#13205](https://github.com/storybookjs/storybook/pull/13205))
|
||||
|
||||
## 6.1.2 (November 21, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Storyshots: Fix `beforeScreenshot` and `afterScreenshot` return types ([#13198](https://github.com/storybookjs/storybook/pull/13198))
|
||||
- UI: Target only IE10/IE11 for our CSS vertical centering hack ([#13192](https://github.com/storybookjs/storybook/pull/13192))
|
||||
|
||||
## 6.1.1 (November 20, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-backgrounds: Fix grid disable ([#13175](https://github.com/storybookjs/storybook/pull/13175))
|
||||
|
||||
## 6.1.0 (November 19, 2020)
|
||||
|
||||
6.1 is the first in a series of performance-oriented Storybook releases. It includes:
|
||||
|
||||
- [Fast search and navigation](https://storybook.js.org/blog/new-component-finder-and-sidebar/)
|
||||
- Manager caching for faster startup [#12707](https://github.com/storybookjs/storybook/pull/12707)
|
||||
- Asynchronous loaders [#12699](https://github.com/storybookjs/storybook/pull/12699)
|
||||
- React improvements
|
||||
|
||||
- React 17 support [#12972](https://github.com/storybookjs/storybook/pull/12972) [#12975](https://github.com/storybookjs/storybook/pull/12975)
|
||||
- Fast refresh [#12470](https://github.com/storybookjs/storybook/pull/12470) [#12535](https://github.com/storybookjs/storybook/pull/12535)
|
||||
- Strict mode [#12781](https://github.com/storybookjs/storybook/pull/12781)
|
||||
|
||||
6.1 contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.1.0-alpha.*`, `6.1.0-beta.*`, and `6.1.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to upgrade from `5.3` or earlier.
|
||||
|
||||
## 6.1.0-rc.6 (November 19, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix using cached manager on the 2nd run ([#13165](https://github.com/storybookjs/storybook/pull/13165))
|
||||
- Addon-docs: Fix Preview scaling with transform instead of zoom ([#12845](https://github.com/storybookjs/storybook/pull/12845))
|
||||
|
||||
## 6.1.0-rc.5 (November 19, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: CSS escape hatches for sidebar styling ([#13155](https://github.com/storybookjs/storybook/pull/13155))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix CSS for IE11 ([#13159](https://github.com/storybookjs/storybook/pull/13159))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Update example and app to Angular 11 ([#13141](https://github.com/storybookjs/storybook/pull/13141))
|
||||
|
||||
## 6.1.0-rc.4 (November 17, 2020)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Fix Yarn 2 E2E tests ([#13129](https://github.com/storybookjs/storybook/pull/13129))
|
||||
- UI: Reduce rerenders when changing the selected story ([#13107](https://github.com/storybookjs/storybook/pull/13107))
|
||||
- Build: Update example to Angular 10 ([#13048](https://github.com/storybookjs/storybook/pull/13048))
|
||||
|
||||
## 6.1.0-rc.3 (November 16, 2020)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Addon-docs: Export SourceContainer context ([#13118](https://github.com/storybookjs/storybook/pull/13118))
|
||||
- UI: Fix loading UI when EventSource isn't defined ([#13123](https://github.com/storybookjs/storybook/pull/13123))
|
||||
- Build: Remove some dependencies and improve E2E workflow ([#13115](https://github.com/storybookjs/storybook/pull/13115))
|
||||
|
||||
## 6.1.0-rc.2 (November 13, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix Meta prop types ([#13101](https://github.com/storybookjs/storybook/pull/13101))
|
||||
- UI: preventDefault for certain keyboard shortcuts ([#13097](https://github.com/storybookjs/storybook/pull/13097))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump `@emotion/core` to 10.1.1 ([#13102](https://github.com/storybookjs/storybook/pull/13102))
|
||||
|
||||
## 6.1.0-rc.1 (November 13, 2020)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Angular: Support Angular 11 ([#13096](https://github.com/storybookjs/storybook/pull/13096))
|
||||
- UI: Tree highlight performance ([#13095](https://github.com/storybookjs/storybook/pull/13095))
|
||||
|
||||
## 6.1.0-rc.0 (November 12, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fix kebab-case CSS property error ([#13090](https://github.com/storybookjs/storybook/pull/13090))
|
||||
- UI: Fix single story hoisting at the root ([#13089](https://github.com/storybookjs/storybook/pull/13089))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- UI: Disable instant-on manager for now ([#13084](https://github.com/storybookjs/storybook/pull/13084))
|
||||
|
||||
## 6.1.0-beta.7 (November 11, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- React: Don't create a new story function on every render ([#13069](https://github.com/storybookjs/storybook/pull/13069))
|
||||
- UI: Fix search field styling in Safari 13 ([#13070](https://github.com/storybookjs/storybook/pull/13070))
|
||||
- Addon-docs: Fix spurious warnings ([#13075](https://github.com/storybookjs/storybook/pull/13075))
|
||||
- UI: Fix Escape key handling perf ([#13073](https://github.com/storybookjs/storybook/pull/13073))
|
||||
- Storyshots: Fix compatibility for jest-preset-angular 8.3+ ([#13060](https://github.com/storybookjs/storybook/pull/13060))
|
||||
|
||||
## 6.1.0-beta.6 (November 9, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Angular: Fix storyData handling on module update ([#13037](https://github.com/storybookjs/storybook/pull/13037))
|
||||
- Args: Default to type 'object' when there is a null arg ([#13051](https://github.com/storybookjs/storybook/pull/13051))
|
||||
- Core: Fix duplicate argTypeEnhancers on HMR ([#13050](https://github.com/storybookjs/storybook/pull/13050))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump react-dogen-typescript-plugin to 0.6.2 ([#13052](https://github.com/storybookjs/storybook/pull/13052))
|
||||
|
||||
## 6.1.0-beta.5 (November 8, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- UI: Single story hoisting in sidebar ([#13039](https://github.com/storybookjs/storybook/pull/13039))
|
||||
|
||||
## 6.1.0-beta.4 (November 6, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- UI: Fixes for Sidebar and Search ([#13027](https://github.com/storybookjs/storybook/pull/13027))
|
||||
- Core: Make sure cache is available before trying to use it ([#13012](https://github.com/storybookjs/storybook/pull/13012))
|
||||
- Core: Fix possible "write after end" exception for response stream ([#13007](https://github.com/storybookjs/storybook/pull/13007))
|
||||
|
||||
## 6.1.0-beta.3 (November 6, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
- Core: Add STORYBOOK environment variable ([#12997](https://github.com/storybookjs/storybook/pull/12997))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Args: Fix args inference for null values ([#13029](https://github.com/storybookjs/storybook/pull/13029))
|
||||
- Core: Dedupe default ArgTypes enhancers ([#13030](https://github.com/storybookjs/storybook/pull/13030))
|
||||
- Core: Add catch to end process ([#13018](https://github.com/storybookjs/storybook/pull/13018))
|
||||
- UI: Fix icon for addon panel orientation button ([#13026](https://github.com/storybookjs/storybook/pull/13026))
|
||||
- Addon-docs: Fix test for Angular type inference ([#13009](https://github.com/storybookjs/storybook/pull/13009))
|
||||
- CLI: Fix deprecation check ([#12981](https://github.com/storybookjs/storybook/pull/12981))
|
||||
- UI: Restrict layout styles to only apply to a rendered preview area ([#13014](https://github.com/storybookjs/storybook/pull/13014))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Build: Add chokidar2 for yarn dev ([#13028](https://github.com/storybookjs/storybook/pull/13028))
|
||||
- Build: Remove more enzyme ([#13005](https://github.com/storybookjs/storybook/pull/13005))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump webpack to 4.41.24 ([#13019](https://github.com/storybookjs/storybook/pull/13019))
|
||||
|
||||
## 6.1.0-beta.2 (November 4, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Hide React default props in source block ([#13003](https://github.com/storybookjs/storybook/pull/13003))
|
||||
- Addon-docs: Angular empty string now infers to "string" instead of "void" ([#12994](https://github.com/storybookjs/storybook/pull/12994))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Components: Add outline icon ([#13002](https://github.com/storybookjs/storybook/pull/13002))
|
||||
- Core: Migrate core to TypeScript ([#12839](https://github.com/storybookjs/storybook/pull/12839))
|
||||
- Addon-docs: Exclude testfixtures from package ([#12998](https://github.com/storybookjs/storybook/pull/12998))
|
||||
|
||||
## 6.1.0-beta.1 (November 3, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
27
MIGRATION.md
27
MIGRATION.md
@ -1,6 +1,7 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
|
||||
- [Single story hoisting](#single-story-hoisting)
|
||||
- [6.1 deprecations](#61-deprecations)
|
||||
- [Deprecated DLL flags](#deprecated-dll-flags)
|
||||
- [Deprecated storyFn](#deprecated-storyfn)
|
||||
@ -138,6 +139,30 @@
|
||||
|
||||
## From version 6.0.x to 6.1.0
|
||||
|
||||
### Single story hoisting
|
||||
|
||||
Stories which have **no siblings** (i.e. the component has only one story) and which name **exactly matches** the component name will now be hoisted up to replace their parent component in the sidebar. This means you can have a hierarchy like this:
|
||||
|
||||
```
|
||||
DESIGN SYSTEM [root]
|
||||
- Atoms [group]
|
||||
- Button [component]
|
||||
- Button [story]
|
||||
- Checkbox [component]
|
||||
- Checkbox [story]
|
||||
```
|
||||
|
||||
This will then be visually presented in the sidebar like this:
|
||||
|
||||
```
|
||||
DESIGN SYSTEM [root]
|
||||
- Atoms [group]
|
||||
- Button [story]
|
||||
- Checkbox [story]
|
||||
```
|
||||
|
||||
See [Naming components and hierarchy](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting) for details.
|
||||
|
||||
### 6.1 deprecations
|
||||
|
||||
#### Deprecated DLL flags
|
||||
@ -165,6 +190,8 @@ console.log(unboundStoryFn(context));
|
||||
|
||||
If you're not using loaders, `storyFn` will work as before. If you are, you'll need to use the new approach.
|
||||
|
||||
> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in 6.2. You can track the issue at https://github.com/storybookjs/storybook/issues/13074.
|
||||
|
||||
#### Deprecated onBeforeRender
|
||||
|
||||
The `@storybook/addon-docs` previously accepted a `jsx` option called `onBeforeRender`, which was unfortunately named as it was called after the render.
|
||||
|
||||
23
README.md
23
README.md
@ -55,7 +55,6 @@ It allows you to browse a component library, view the different states of each c
|
||||
<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>
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
- 🚀 [Getting Started](#getting-started)
|
||||
@ -95,19 +94,19 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
|
||||
| Framework | Demo | |
|
||||
| ----------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.0.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [React](app/react) | [v6.1.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v6.0.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.0.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Vue](app/vue) | [v6.1.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.1.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.0.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.0.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v6.0.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v6.0.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v6.0.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v6.0.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v6.0.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Rax](app/rax) | [v6.0.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Mithril](app/mithril) | [v6.1.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.1.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v6.1.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v6.1.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v6.1.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v6.1.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v6.1.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Rax](app/rax) | [v6.1.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -22,6 +22,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -33,14 +40,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/channels": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/channels": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"axe-core": "^4.0.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -52,7 +59,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^10.0.4",
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -69,12 +76,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -28,12 +35,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"global": "^4.3.2",
|
||||
@ -49,7 +56,7 @@
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.150",
|
||||
"@types/uuid": "^7.0.3",
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -66,12 +73,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,6 +21,13 @@
|
||||
"author": "jbaxleyiii",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -32,12 +39,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -46,7 +53,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -63,12 +70,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export const GridSelector: FunctionComponent = memo(() => {
|
||||
grid: { disable: false },
|
||||
});
|
||||
|
||||
if (grid.disable) {
|
||||
if (grid?.disable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -33,8 +33,8 @@ export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
|
||||
const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
|
||||
// 16px offset in the grid to account for padded layout
|
||||
const defaultOffset = isLayoutPadded ? 16 : 0;
|
||||
const offsetX = gridParameters.offsetX || isInDocs ? 20 : defaultOffset;
|
||||
const offsetY = gridParameters.offsetY || isInDocs ? 20 : defaultOffset;
|
||||
const offsetX = gridParameters.offsetX ?? (isInDocs ? 20 : defaultOffset);
|
||||
const offsetY = gridParameters.offsetY ?? (isInDocs ? 20 : defaultOffset);
|
||||
|
||||
const gridStyles = useMemo(() => {
|
||||
const selector =
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Controls for component properties",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -54,5 +54,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9"
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ describe.each([
|
||||
|
||||
describe.each([
|
||||
[['@storybook/addon-docs', '@storybook/addon-controls']],
|
||||
[['@storybook/addon-docs', 'foo/node_modules/@storybook/addon-controls']],
|
||||
[[{ name: '@storybook/addon-docs' }, '@storybook/addon-controls']],
|
||||
[['@storybook/addon-essentials', '@storybook/addon-controls']],
|
||||
[['@storybook/addon-essentials']],
|
||||
|
||||
@ -8,7 +8,7 @@ type Entry = string | OptionsEntry;
|
||||
const findIndex = (addon: string, addons: Entry[]) =>
|
||||
addons.findIndex((entry) => {
|
||||
const name = (entry as OptionsEntry).name || (entry as string);
|
||||
return name && name.startsWith(addon);
|
||||
return name && name.includes(addon);
|
||||
});
|
||||
|
||||
const indexOfAddonOrEssentials = (addon: string, addons: Entry[]) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,6 +21,13 @@
|
||||
"author": "nm123github",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -32,17 +39,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -59,12 +66,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,6 +23,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -34,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
@ -61,12 +68,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,6 +19,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"angular/**/*",
|
||||
@ -48,18 +55,18 @@
|
||||
"@mdx-js/loader": "^1.6.19",
|
||||
"@mdx-js/mdx": "^1.6.19",
|
||||
"@mdx-js/react": "^1.6.19",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/postinstall": "6.1.0-beta.1",
|
||||
"@storybook/source-loader": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@storybook/postinstall": "6.2.0-alpha.0",
|
||||
"@storybook/source-loader": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -81,13 +88,13 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/core": "^9.1.0",
|
||||
"@angular/core": "^11.0.0",
|
||||
"@babel/core": "^7.12.3",
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@emotion/styled": "^10.0.17",
|
||||
"@storybook/react": "6.1.0-beta.1",
|
||||
"@storybook/vue": "6.1.0-beta.1",
|
||||
"@storybook/web-components": "6.1.0-beta.1",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.23",
|
||||
"@storybook/react": "6.2.0-alpha.0",
|
||||
"@storybook/vue": "6.2.0-alpha.0",
|
||||
"@storybook/web-components": "6.2.0-alpha.0",
|
||||
"@types/cross-spawn": "^6.0.1",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.3",
|
||||
@ -111,12 +118,12 @@
|
||||
"tmp": "^0.2.1",
|
||||
"tslib": "^2.0.0",
|
||||
"web-component-analyzer": "^1.0.3",
|
||||
"webpack": "^4.33.0",
|
||||
"zone.js": "^0.10.2"
|
||||
"webpack": "^4.44.2",
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.11.5",
|
||||
"@storybook/vue": "6.1.0-beta.1",
|
||||
"@storybook/vue": "6.2.0-alpha.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
@ -147,12 +154,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import { document } from 'global';
|
||||
import { Args, ArgTypes, Parameters } from '@storybook/addons';
|
||||
import { Anchor } from './Anchor';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { getDocsStories } from './utils';
|
||||
@ -12,7 +13,9 @@ interface MetaProps {
|
||||
component?: Component;
|
||||
subcomponents?: Record<string, Component>;
|
||||
decorators?: [Decorator];
|
||||
parameters?: any;
|
||||
parameters?: Parameters;
|
||||
args?: Args;
|
||||
argTypes: ArgTypes;
|
||||
}
|
||||
|
||||
function getFirstStoryId(docsContext: DocsContextProps): string {
|
||||
|
||||
@ -52,15 +52,9 @@ const getStoryContext = (storyId: StoryId, docsContext: DocsContextProps): Story
|
||||
|
||||
const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): string => {
|
||||
const { sources } = sourceContext;
|
||||
|
||||
const source = sources?.[storyId];
|
||||
|
||||
if (!source) {
|
||||
logger.warn(`Unable to find source for story ID '${storyId}'`);
|
||||
return '';
|
||||
}
|
||||
|
||||
return source;
|
||||
// source rendering is async so source is unavailable at the start of the render cycle,
|
||||
// so we fail gracefully here without warning
|
||||
return sources?.[storyId] || '';
|
||||
};
|
||||
|
||||
const getSnippet = (snippet: string, storyContext?: StoryContext): string => {
|
||||
|
||||
@ -14,6 +14,7 @@ export * from './Preview';
|
||||
export * from './Primary';
|
||||
export * from './Props';
|
||||
export * from './Source';
|
||||
export * from './SourceContainer';
|
||||
export * from './Stories';
|
||||
export * from './Story';
|
||||
export * from './Subheading';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { extractType } from './compodoc';
|
||||
import { Decorator } from './types';
|
||||
import { extractType, setCompodocJson } from './compodoc';
|
||||
import { CompodocJson, Decorator } from './types';
|
||||
|
||||
const makeProperty = (compodocType?: string) => ({
|
||||
type: compodocType,
|
||||
@ -8,11 +8,98 @@ const makeProperty = (compodocType?: string) => ({
|
||||
optional: true,
|
||||
});
|
||||
|
||||
const getDummyCompodocJson = () => {
|
||||
return {
|
||||
miscellaneous: {
|
||||
typealiases: [
|
||||
{
|
||||
name: 'EnumAlias',
|
||||
ctype: 'miscellaneous',
|
||||
subtype: 'typealias',
|
||||
rawtype: 'EnumNumeric',
|
||||
file: 'src/stories/component-with-enums/enums.component.ts',
|
||||
description: '',
|
||||
kind: 161,
|
||||
},
|
||||
{
|
||||
name: 'TypeAlias',
|
||||
ctype: 'miscellaneous',
|
||||
subtype: 'typealias',
|
||||
rawtype: '"Type Alias 1" | "Type Alias 2" | "Type Alias 3"',
|
||||
file: 'src/stories/component-with-enums/enums.component.ts',
|
||||
description: '',
|
||||
kind: 168,
|
||||
},
|
||||
],
|
||||
enumerations: [
|
||||
{
|
||||
name: 'EnumNumeric',
|
||||
childs: [
|
||||
{
|
||||
name: 'FIRST',
|
||||
},
|
||||
{
|
||||
name: 'SECOND',
|
||||
},
|
||||
{
|
||||
name: 'THIRD',
|
||||
},
|
||||
],
|
||||
ctype: 'miscellaneous',
|
||||
subtype: 'enum',
|
||||
description: '<p>Button Priority</p>\n',
|
||||
file: 'src/stories/component-with-enums/enums.component.ts',
|
||||
},
|
||||
{
|
||||
name: 'EnumNumericInitial',
|
||||
childs: [
|
||||
{
|
||||
name: 'UNO',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: 'DOS',
|
||||
},
|
||||
{
|
||||
name: 'TRES',
|
||||
},
|
||||
],
|
||||
ctype: 'miscellaneous',
|
||||
subtype: 'enum',
|
||||
description: '',
|
||||
file: 'src/stories/component-with-enums/enums.component.ts',
|
||||
},
|
||||
{
|
||||
name: 'EnumStringValues',
|
||||
childs: [
|
||||
{
|
||||
name: 'PRIMARY',
|
||||
value: 'PRIMARY',
|
||||
},
|
||||
{
|
||||
name: 'SECONDARY',
|
||||
value: 'SECONDARY',
|
||||
},
|
||||
{
|
||||
name: 'TERTIARY',
|
||||
value: 'TERTIARY',
|
||||
},
|
||||
],
|
||||
ctype: 'miscellaneous',
|
||||
subtype: 'enum',
|
||||
description: '',
|
||||
file: 'src/stories/component-with-enums/enums.component.ts',
|
||||
},
|
||||
],
|
||||
},
|
||||
} as CompodocJson;
|
||||
};
|
||||
|
||||
describe('extractType', () => {
|
||||
describe('with compodoc type', () => {
|
||||
setCompodocJson(getDummyCompodocJson());
|
||||
it.each([
|
||||
['string', { name: 'string' }],
|
||||
['', { name: 'string' }],
|
||||
['boolean', { name: 'boolean' }],
|
||||
['number', { name: 'number' }],
|
||||
['object', { name: 'object' }],
|
||||
@ -22,6 +109,10 @@ describe('extractType', () => {
|
||||
['T[]', { name: 'object' }],
|
||||
['[]', { name: 'object' }],
|
||||
['"primary" | "secondary"', { name: 'enum', value: ['primary', 'secondary'] }],
|
||||
['TypeAlias', { name: 'enum', value: ['Type Alias 1', 'Type Alias 2', 'Type Alias 3'] }],
|
||||
['EnumNumeric', { name: 'object' }],
|
||||
['EnumNumericInitial', { name: 'object' }],
|
||||
['EnumStringValues', { name: 'enum', value: ['PRIMARY', 'SECONDARY', 'TERTIARY'] }],
|
||||
])('%s', (compodocType, expected) => {
|
||||
expect(extractType(makeProperty(compodocType), null)).toEqual(expected);
|
||||
});
|
||||
@ -30,6 +121,7 @@ describe('extractType', () => {
|
||||
describe('without compodoc type', () => {
|
||||
it.each([
|
||||
['string', { name: 'string' }],
|
||||
['', { name: 'string' }],
|
||||
[false, { name: 'boolean' }],
|
||||
[10, { name: 'number' }],
|
||||
[['abc'], { name: 'object' }],
|
||||
|
||||
@ -25,7 +25,7 @@ export const setCompodocJson = (compodocJson: CompodocJson) => {
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
|
||||
export const getCompodocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
|
||||
|
||||
export const checkValidComponentOrDirective = (component: Component | Directive) => {
|
||||
if (!component.name) {
|
||||
@ -90,7 +90,7 @@ const getComponentData = (component: Component | Directive) => {
|
||||
return null;
|
||||
}
|
||||
checkValidComponentOrDirective(component);
|
||||
const compodocJson = getCompdocJson();
|
||||
const compodocJson = getCompodocJson();
|
||||
checkValidCompodocJson(compodocJson);
|
||||
const { name } = component;
|
||||
const metadata = findComponentByName(name, compodocJson);
|
||||
@ -113,6 +113,13 @@ const extractTypeFromValue = (defaultValue: any) => {
|
||||
};
|
||||
|
||||
const extractEnumValues = (compodocType: any) => {
|
||||
const compodocJson = getCompodocJson();
|
||||
const enumType = compodocJson?.miscellaneous.enumerations.find((x) => x.name === compodocType);
|
||||
|
||||
if (enumType?.childs.every((x) => x.value)) {
|
||||
return enumType.childs.map((x) => x.value);
|
||||
}
|
||||
|
||||
if (typeof compodocType !== 'string' || compodocType.indexOf('|') === -1) {
|
||||
return null;
|
||||
}
|
||||
@ -135,7 +142,8 @@ export const extractType = (property: Property, defaultValue: any) => {
|
||||
case null:
|
||||
return { name: 'void' };
|
||||
default: {
|
||||
const enumValues = extractEnumValues(compodocType);
|
||||
const resolvedType = resolveTypealias(compodocType);
|
||||
const enumValues = extractEnumValues(resolvedType);
|
||||
return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' };
|
||||
}
|
||||
}
|
||||
@ -152,6 +160,12 @@ const extractDefaultValue = (property: Property) => {
|
||||
}
|
||||
};
|
||||
|
||||
const resolveTypealias = (compodocType: string): string => {
|
||||
const compodocJson = getCompodocJson();
|
||||
const typeAlias = compodocJson?.miscellaneous.typealiases.find((x) => x.name === compodocType);
|
||||
return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType;
|
||||
};
|
||||
|
||||
export const extractArgTypesFromData = (componentData: Class | Directive | Injectable | Pipe) => {
|
||||
const sectionToItems: Record<string, ArgType[]> = {};
|
||||
const compodocClasses = ['component', 'directive'].includes(componentData.type)
|
||||
|
||||
@ -66,10 +66,40 @@ export interface Decorator {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface TypeAlias {
|
||||
name: string;
|
||||
ctype: string;
|
||||
subtype: string;
|
||||
rawtype: string;
|
||||
file: string;
|
||||
kind: number;
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface EnumType {
|
||||
name: string;
|
||||
childs: EnumTypeChild[];
|
||||
ctype: string;
|
||||
subtype: string;
|
||||
file: string;
|
||||
description?: string;
|
||||
rawdescription?: string;
|
||||
}
|
||||
|
||||
export interface EnumTypeChild {
|
||||
name: string;
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export interface CompodocJson {
|
||||
directives: Directive[];
|
||||
components: Component[];
|
||||
pipes: Pipe[];
|
||||
injectables: Injectable[];
|
||||
classes: Class[];
|
||||
miscellaneous?: {
|
||||
typealiases?: TypeAlias[];
|
||||
enumerations?: EnumType[];
|
||||
};
|
||||
}
|
||||
|
||||
@ -148,9 +148,9 @@ describe('renderJsx', () => {
|
||||
};
|
||||
|
||||
expect(renderJsx(<Container>yo dude</Container>, {})).toMatchInlineSnapshot(`
|
||||
<div>
|
||||
<Container className="super-container">
|
||||
yo dude
|
||||
</div>
|
||||
</Container>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
@ -30,9 +30,69 @@ describe('vnodeToString', () => {
|
||||
).toMatchInlineSnapshot(`<button >Button</button>`);
|
||||
});
|
||||
|
||||
it('static class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button class="foo bar">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
|
||||
});
|
||||
|
||||
it('string dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="'foo'">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
|
||||
});
|
||||
|
||||
it('non-string dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="1">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button >Button</button>`);
|
||||
});
|
||||
|
||||
it('array dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="['foo', null, false, 0, {bar: true, baz: false}]">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
|
||||
});
|
||||
|
||||
it('object dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="{foo: true, bar: false}">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
|
||||
});
|
||||
|
||||
it('merge dynamic and static classes', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button class="foo" :class="{bar: null, baz: 1}">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo baz">Button</button>`);
|
||||
});
|
||||
|
||||
it('attributes', () => {
|
||||
const MyComponent: ComponentOptions<any, any, any> = {
|
||||
props: ['propA', 'propB', 'propC', 'propD'],
|
||||
props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'],
|
||||
template: '<div/>',
|
||||
};
|
||||
|
||||
@ -49,6 +109,13 @@ describe('vnodeToString', () => {
|
||||
propD: {
|
||||
foo: 'bar',
|
||||
},
|
||||
propE: true,
|
||||
propF() {
|
||||
const foo = 'bar';
|
||||
|
||||
return foo;
|
||||
},
|
||||
propG: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -56,7 +123,7 @@ describe('vnodeToString', () => {
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(
|
||||
`<my-component :propD='{"foo":"bar"}' :propC="null" :propB="1" propA="propA"/>`
|
||||
`<my-component propE :propD='{"foo":"bar"}' :propC="null" :propB="1" propA="propA"/>`
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -76,6 +76,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
|
||||
export function vnodeToString(vnode: Vue.VNode): string {
|
||||
const attrString = [
|
||||
...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []),
|
||||
['class', stringifyClassAttribute(vnode)],
|
||||
...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []),
|
||||
...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),
|
||||
]
|
||||
@ -122,8 +123,45 @@ export function vnodeToString(vnode: Vue.VNode): string {
|
||||
.join('')}</${tag}>`;
|
||||
}
|
||||
|
||||
function stringifyClassAttribute(vnode: Vue.VNode): string | undefined {
|
||||
if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
[...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)]
|
||||
.filter(Boolean)
|
||||
.join(' ') || undefined
|
||||
);
|
||||
}
|
||||
|
||||
// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
|
||||
function normalizeClassBinding(binding: unknown): readonly string[] {
|
||||
if (!binding) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (typeof binding === 'string') {
|
||||
return [binding];
|
||||
}
|
||||
|
||||
if (binding instanceof Array) {
|
||||
// To handle an object-in-array binding smartly, we use recursion
|
||||
return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);
|
||||
}
|
||||
|
||||
if (typeof binding === 'object') {
|
||||
return Object.entries(binding)
|
||||
.filter(([, active]) => !!active)
|
||||
.map(([className]) => className);
|
||||
}
|
||||
|
||||
// Unknown class binding
|
||||
return [];
|
||||
}
|
||||
|
||||
function stringifyAttr(attrName: string, value?: any): string | null {
|
||||
if (typeof value === 'undefined') {
|
||||
if (typeof value === 'undefined' || typeof value === 'function') {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,6 +19,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -28,28 +35,28 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.1.0-beta.1",
|
||||
"@storybook/addon-backgrounds": "6.1.0-beta.1",
|
||||
"@storybook/addon-controls": "6.1.0-beta.1",
|
||||
"@storybook/addon-docs": "6.1.0-beta.1",
|
||||
"@storybook/addon-toolbars": "6.1.0-beta.1",
|
||||
"@storybook/addon-viewport": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/addon-actions": "6.2.0-alpha.0",
|
||||
"@storybook/addon-backgrounds": "6.2.0-alpha.0",
|
||||
"@storybook/addon-controls": "6.2.0-alpha.0",
|
||||
"@storybook/addon-docs": "6.2.0-alpha.0",
|
||||
"@storybook/addon-toolbars": "6.2.0-alpha.0",
|
||||
"@storybook/addon-viewport": "6.2.0-alpha.0",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.1.0-beta.1",
|
||||
"@storybook/vue": "6.2.0-alpha.0",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.1.0-beta.1",
|
||||
"@storybook/vue": "6.2.0-alpha.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0",
|
||||
@ -72,12 +79,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,6 +20,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -31,11 +38,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
@ -45,7 +52,7 @@
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -62,12 +69,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
Then, set an environment variable
|
||||
Then, set an environment variable in `.storybook/manager.js`
|
||||
|
||||
```
|
||||
window.STORYBOOK_GA_ID = UA-000000-01
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7",
|
||||
@ -42,5 +42,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9"
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -31,9 +38,9 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.3",
|
||||
"@babel/plugin-transform-classes": "^7.12.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@types/webpack": "^4.41.9",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@types/webpack": "^4.41.24",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -41,7 +48,7 @@
|
||||
"graphql": "^15.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"webpack": "^4.43.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -58,12 +65,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,6 +24,13 @@
|
||||
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -35,11 +42,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-sizeme": "^2.5.2",
|
||||
@ -47,7 +54,7 @@
|
||||
"upath": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -64,12 +71,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -29,13 +36,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/channels": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/channels": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -55,7 +62,7 @@
|
||||
"@types/react-color": "^3.0.1",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^3.0.12",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"enzyme": "^3.11.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -73,12 +80,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import KnobManager from './KnobManager';
|
||||
|
||||
jest.mock('global', () => ({
|
||||
@ -27,13 +26,14 @@ describe('KnobManager', () => {
|
||||
testManager.knobStore = {
|
||||
set: jest.fn(),
|
||||
update: jest.fn(),
|
||||
get: () => ({
|
||||
defaultValue: 'default value',
|
||||
name: 'foo',
|
||||
type: 'string',
|
||||
value: 'current value',
|
||||
}),
|
||||
};
|
||||
get: () =>
|
||||
({
|
||||
defaultValue: 'default value',
|
||||
name: 'foo',
|
||||
type: 'string',
|
||||
value: 'current value',
|
||||
} as any),
|
||||
} as any;
|
||||
});
|
||||
|
||||
it('should return the existing knob value when types match', () => {
|
||||
@ -41,7 +41,7 @@ describe('KnobManager', () => {
|
||||
name: 'foo',
|
||||
type: 'string',
|
||||
value: 'default value',
|
||||
};
|
||||
} as any;
|
||||
const knob = testManager.knob('foo', defaultKnob);
|
||||
expect(knob).toEqual('current value');
|
||||
expect(testManager.knobStore.set).not.toHaveBeenCalled();
|
||||
@ -53,8 +53,8 @@ describe('KnobManager', () => {
|
||||
type: 'string',
|
||||
value: 'default value',
|
||||
foo: 'foo',
|
||||
};
|
||||
const knob = testManager.knob('foo', defaultKnob);
|
||||
} as any;
|
||||
testManager.knob('foo', defaultKnob);
|
||||
expect(testManager.knobStore.update).toHaveBeenCalledWith(
|
||||
'foo',
|
||||
expect.objectContaining({ foo: 'foo' })
|
||||
@ -66,7 +66,7 @@ describe('KnobManager', () => {
|
||||
name: 'foo',
|
||||
value: true,
|
||||
type: 'boolean',
|
||||
};
|
||||
} as any;
|
||||
testManager.knob('foo', defaultKnob);
|
||||
|
||||
const newKnob = {
|
||||
@ -86,9 +86,9 @@ describe('KnobManager', () => {
|
||||
testManager.knobStore = {
|
||||
set: jest.fn(),
|
||||
get: jest.fn(),
|
||||
};
|
||||
} as any;
|
||||
|
||||
testManager.knobStore.get
|
||||
(testManager.knobStore as any).get
|
||||
.mockImplementationOnce(() => undefined)
|
||||
.mockImplementationOnce(() => 'normal value');
|
||||
});
|
||||
@ -97,7 +97,7 @@ describe('KnobManager', () => {
|
||||
const defaultKnob = {
|
||||
name: 'foo',
|
||||
value: 'normal value',
|
||||
};
|
||||
} as any;
|
||||
testManager.knob('foo', defaultKnob);
|
||||
|
||||
const newKnob = {
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import ArrayType from '../types/Array';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('Array', () => {
|
||||
it('should subscribe to setKnobs event of channel', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = shallow(
|
||||
<ArrayType
|
||||
onChange={onChange}
|
||||
knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper.simulate('change', { target: { value: 'Fishing,Skiing,Dancing' } });
|
||||
jest.runAllTimers();
|
||||
expect(onChange).toHaveBeenCalledWith(['Fishing', 'Skiing', 'Dancing']);
|
||||
});
|
||||
|
||||
it('deserializes an Array to an Array', () => {
|
||||
const array = ['a', 'b', 'c'];
|
||||
const deserialized = ArrayType.deserialize(array);
|
||||
|
||||
expect(deserialized).toEqual(['a', 'b', 'c']);
|
||||
});
|
||||
|
||||
it('deserializes an Object to an Array', () => {
|
||||
const object = { 1: 'one', 0: 'zero', 2: 'two' };
|
||||
|
||||
const deserialized = ArrayType.deserialize(object);
|
||||
|
||||
expect(deserialized).toEqual(['zero', 'one', 'two']);
|
||||
});
|
||||
|
||||
it('should change to an empty array when emptied', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = shallow(
|
||||
<ArrayType
|
||||
onChange={onChange}
|
||||
knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper.simulate('change', { target: { value: '' } });
|
||||
jest.runAllTimers();
|
||||
expect(onChange).toHaveBeenCalledWith([]);
|
||||
});
|
||||
});
|
||||
54
addons/knobs/src/components/types/Array.test.tsx
Normal file
54
addons/knobs/src/components/types/Array.test.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import ArrayType from './Array';
|
||||
|
||||
describe('Array', () => {
|
||||
it('should subscribe to setKnobs event of channel', () => {
|
||||
const onChange = jest.fn();
|
||||
render(
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<ArrayType
|
||||
onChange={onChange}
|
||||
knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
|
||||
/>{' '}
|
||||
</ThemeProvider>
|
||||
);
|
||||
const input = screen.getByRole('textbox');
|
||||
expect(input).toHaveValue('Fishing,Skiing');
|
||||
userEvent.type(input, ',');
|
||||
expect(onChange).toHaveBeenLastCalledWith(['Fishing', 'Skiing', '']);
|
||||
});
|
||||
|
||||
it('deserializes an Array to an Array', () => {
|
||||
const array = ['a', 'b', 'c'];
|
||||
const deserialized = ArrayType.deserialize(array);
|
||||
|
||||
expect(deserialized).toEqual(['a', 'b', 'c']);
|
||||
});
|
||||
|
||||
it('deserializes an Object to an Array', () => {
|
||||
const object = { 1: 'one', 0: 'zero', 2: 'two' };
|
||||
|
||||
const deserialized = ArrayType.deserialize(object);
|
||||
|
||||
expect(deserialized).toEqual(['zero', 'one', 'two']);
|
||||
});
|
||||
|
||||
it('should change to an empty array when emptied', () => {
|
||||
const onChange = jest.fn();
|
||||
render(
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<ArrayType
|
||||
onChange={onChange}
|
||||
knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
|
||||
/>{' '}
|
||||
</ThemeProvider>
|
||||
);
|
||||
const input = screen.getByRole('textbox');
|
||||
expect(input).toHaveValue('Fishing,Skiing');
|
||||
userEvent.clear(input);
|
||||
expect(onChange).toHaveBeenLastCalledWith([]);
|
||||
});
|
||||
});
|
||||
@ -38,12 +38,12 @@ export default class ArrayType extends Component<ArrayTypeProps> {
|
||||
|
||||
static serialize = (value: ArrayTypeKnobValue) => value;
|
||||
|
||||
static deserialize = (value: string[]) => {
|
||||
static deserialize = (value: string[] | Record<string, string>) => {
|
||||
if (Array.isArray(value)) return value;
|
||||
|
||||
return Object.keys(value)
|
||||
.sort()
|
||||
.reduce((array, key) => [...array, value[key]], []);
|
||||
.reduce((array, key) => [...array, value[key]], [] as string[]);
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps: Readonly<ArrayTypeProps>) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"],
|
||||
"types": ["webpack-env", "jest", "@testing-library/jest-dom"],
|
||||
"strict": true,
|
||||
"noUnusedLocals": true
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -29,11 +36,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.1.0-beta.1",
|
||||
"@storybook/router": "6.2.0-alpha.0",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -43,8 +50,7 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"enzyme": "^3.11.0"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -61,12 +67,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import { linkTo, hrefTo } from './preview';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
jest.mock('global', () => ({
|
||||
// @ts-ignore
|
||||
document: global.document,
|
||||
__STORYBOOK_STORY_STORE__: {
|
||||
getSelection: jest.fn(() => ({
|
||||
@ -17,6 +18,7 @@ jest.mock('global', () => ({
|
||||
kind: 'kind',
|
||||
})),
|
||||
},
|
||||
// @ts-ignore
|
||||
window: global,
|
||||
__STORYBOOK_CLIENT_API__: {
|
||||
raw: jest.fn(() => [
|
||||
@ -32,12 +34,16 @@ jest.mock('global', () => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const mockAddons = (addons as unknown) as jest.Mocked<typeof addons>;
|
||||
|
||||
describe('preview', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
beforeAll(() => {
|
||||
mockAddons.getChannel.mockReturnValue(channel as any);
|
||||
});
|
||||
beforeEach(channel.emit.mockReset);
|
||||
describe('linkTo()', () => {
|
||||
it('should select the kind and story provided', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const handler = linkTo('kind', 'name');
|
||||
handler();
|
||||
|
||||
@ -48,9 +54,7 @@ describe('preview', () => {
|
||||
});
|
||||
|
||||
it('should select the kind (only) provided', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) => null);
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((): any => null);
|
||||
|
||||
const handler = linkTo('kind');
|
||||
handler();
|
||||
@ -62,10 +66,8 @@ describe('preview', () => {
|
||||
});
|
||||
|
||||
it('should select the story (only) provided', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
// simulate a currently selected, but not found as ID
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) =>
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input: any) =>
|
||||
!input
|
||||
? {
|
||||
kind: 'kind',
|
||||
@ -84,9 +86,7 @@ describe('preview', () => {
|
||||
});
|
||||
|
||||
it('should select the id provided', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) =>
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input: any) =>
|
||||
input === 'kind--story'
|
||||
? {
|
||||
story: 'name',
|
||||
@ -105,11 +105,10 @@ describe('preview', () => {
|
||||
});
|
||||
|
||||
it('should handle functions returning strings', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input) => null);
|
||||
__STORYBOOK_STORY_STORE__.fromId.mockImplementation((input: any): any => null);
|
||||
|
||||
const handler = linkTo(
|
||||
// @ts-expect-error
|
||||
(a, b) => a + b,
|
||||
(a, b) => b + a
|
||||
);
|
||||
@ -1,50 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.js`.
|
||||
// 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
|
||||
// on a specific react version. However, that's a heavy-handed solution for
|
||||
// one trivial file.
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
|
||||
const isPlainLeftClick = (e) =>
|
||||
e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
|
||||
|
||||
export default class RoutedLink extends React.Component {
|
||||
onClick = (e) => {
|
||||
const { onClick } = this.props;
|
||||
|
||||
if (isPlainLeftClick(e)) {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { href, children, onClick, className, style } = this.props;
|
||||
const props = onClick
|
||||
? { href, className, style, onClick: this.onClick }
|
||||
: { href, className, style };
|
||||
return <a {...props}>{children}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
RoutedLink.defaultProps = {
|
||||
onClick: null,
|
||||
href: '#',
|
||||
children: null,
|
||||
className: undefined,
|
||||
style: undefined,
|
||||
};
|
||||
|
||||
RoutedLink.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
href: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
style: PropTypes.object,
|
||||
};
|
||||
32
addons/links/src/react/components/RoutedLink.tsx
Normal file
32
addons/links/src/react/components/RoutedLink.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.js`.
|
||||
// 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
|
||||
// on a specific react version. However, that's a heavy-handed solution for
|
||||
// one trivial file.
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
|
||||
const isPlainLeftClick = (e: React.MouseEvent) =>
|
||||
e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
|
||||
|
||||
const RoutedLink: React.FC<React.DetailedHTMLProps<
|
||||
React.AnchorHTMLAttributes<HTMLAnchorElement>,
|
||||
HTMLAnchorElement
|
||||
>> = ({ href = '#', children, onClick, className, style }) => {
|
||||
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (isPlainLeftClick(e)) {
|
||||
e.preventDefault();
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
const props = onClick
|
||||
? { href, className, style, onClick: handleClick }
|
||||
: { href, className, style };
|
||||
return <a {...props}>{children}</a>;
|
||||
};
|
||||
|
||||
export default RoutedLink;
|
||||
@ -1,8 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LinkTo render should render a link 1`] = `
|
||||
<a
|
||||
href="originpathname?search=&id=foo--bar"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
`;
|
||||
@ -1,64 +0,0 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import { SELECT_STORY } from '@storybook/core-events';
|
||||
import LinkTo from './link';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
jest.mock('global', () => ({
|
||||
document: {
|
||||
location: {
|
||||
origin: 'origin',
|
||||
pathname: 'pathname',
|
||||
search: 'search',
|
||||
},
|
||||
},
|
||||
window: global,
|
||||
__STORYBOOK_STORY_STORE__: {
|
||||
getSelection: jest.fn(() => ({ id: 1 })),
|
||||
fromId: jest.fn(() => ({})),
|
||||
},
|
||||
}));
|
||||
|
||||
const mockChannel = () => {
|
||||
return {
|
||||
emit: jest.fn(),
|
||||
on: jest.fn(),
|
||||
once: jest.fn(),
|
||||
};
|
||||
};
|
||||
|
||||
describe('LinkTo', () => {
|
||||
describe('render', () => {
|
||||
it('should render a link', async () => {
|
||||
const channel = mockChannel();
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const wrapper = shallow(<LinkTo kind="foo" story="bar" />);
|
||||
await wrapper.instance().updateHref(wrapper.props());
|
||||
wrapper.update();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
it('should select the kind and story on click', () => {
|
||||
const channel = {
|
||||
emit: jest.fn(),
|
||||
on: jest.fn(),
|
||||
};
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const wrapper = shallow(<LinkTo kind="foo" story="bar" />);
|
||||
wrapper.simulate('click', { button: 0, preventDefault: () => {} });
|
||||
expect(channel.emit.mock.calls).toContainEqual([
|
||||
SELECT_STORY,
|
||||
{
|
||||
kind: 'foo',
|
||||
story: 'bar',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
86
addons/links/src/react/components/link.test.tsx
Normal file
86
addons/links/src/react/components/link.test.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SELECT_STORY } from '@storybook/core-events';
|
||||
import LinkTo from './link';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
jest.mock('global', () => ({
|
||||
document: {
|
||||
location: {
|
||||
origin: 'origin',
|
||||
pathname: 'pathname',
|
||||
search: 'search',
|
||||
},
|
||||
},
|
||||
// @ts-ignore
|
||||
window: global,
|
||||
__STORYBOOK_STORY_STORE__: {
|
||||
getSelection: jest.fn(() => ({ id: 1 })),
|
||||
fromId: jest.fn(() => ({})),
|
||||
},
|
||||
}));
|
||||
|
||||
const mockChannel = () => {
|
||||
return {
|
||||
emit: jest.fn(),
|
||||
on: jest.fn(),
|
||||
once: jest.fn(),
|
||||
};
|
||||
};
|
||||
const mockAddons = (addons as unknown) as jest.Mocked<typeof addons>;
|
||||
|
||||
describe('LinkTo', () => {
|
||||
describe('render', () => {
|
||||
it('should render a link', async () => {
|
||||
const channel = mockChannel() as any;
|
||||
mockAddons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const { container } = render(
|
||||
<LinkTo kind="foo" story="bar">
|
||||
link
|
||||
</LinkTo>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('link')).toHaveAttribute(
|
||||
'href',
|
||||
'originpathname?search=&id=foo--bar'
|
||||
);
|
||||
});
|
||||
expect(container.firstChild).toMatchInlineSnapshot(`
|
||||
<a
|
||||
href="originpathname?search=&id=foo--bar"
|
||||
>
|
||||
link
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
it('should select the kind and story on click', () => {
|
||||
const channel = {
|
||||
emit: jest.fn(),
|
||||
on: jest.fn(),
|
||||
} as any;
|
||||
mockAddons.getChannel.mockReturnValue(channel);
|
||||
|
||||
render(
|
||||
<LinkTo kind="foo" story="bar">
|
||||
link
|
||||
</LinkTo>
|
||||
);
|
||||
userEvent.click(screen.getByText('link'));
|
||||
|
||||
expect(channel.emit).toHaveBeenLastCalledWith(
|
||||
SELECT_STORY,
|
||||
expect.objectContaining({
|
||||
kind: 'foo',
|
||||
story: 'bar',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -2,7 +2,7 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
"types": ["webpack-env", "@testing-library/jest-dom"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,6 +19,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -30,12 +37,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
@ -43,7 +50,7 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2"
|
||||
"@types/webpack-env": "^1.15.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -60,12 +67,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -33,9 +40,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.0.0",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -51,13 +58,13 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "6.1.0-beta.1",
|
||||
"@storybook/react": "6.1.0-beta.1",
|
||||
"@storybook/addon-docs": "6.2.0-alpha.0",
|
||||
"@storybook/react": "6.2.0-alpha.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
"jest-preset-angular": "^8.2.0",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"jest-vue-preprocessor": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -91,12 +98,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -17,7 +17,11 @@ function setupAngularJestPreset() {
|
||||
// is running inside jest - one of the things that `jest-preset-angular/build/setupJest` does is
|
||||
// extending the `window.Reflect` with all the needed metadata functions, that are required
|
||||
// for emission of the TS decorations like 'design:paramtypes'
|
||||
jest.requireActual('jest-preset-angular/build/setupJest');
|
||||
try {
|
||||
jest.requireActual('jest-preset-angular/build/setupJest');
|
||||
} catch(e) {
|
||||
jest.requireActual('jest-preset-angular/build/setup-jest');
|
||||
}
|
||||
}
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
|
||||
<AsyncTestComponent>
|
||||
<h1>
|
||||
THIS IS SO DONE
|
||||
</h1>
|
||||
</AsyncTestComponent>
|
||||
<h1>
|
||||
THIS IS SO DONE
|
||||
</h1>
|
||||
`;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import path from 'path';
|
||||
import { mount } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import initStoryshots, { Stories2SnapsConverter } from '../dist';
|
||||
import { TIMEOUT, EXPECTED_VALUE } from './required_with_context/Async.stories';
|
||||
|
||||
@ -22,19 +21,17 @@ initStoryshots({
|
||||
const storyElement = story.render();
|
||||
|
||||
// Mount the component
|
||||
let wrapper = mount(storyElement);
|
||||
const { container } = render(storyElement);
|
||||
|
||||
// The Async component should not contain the expected value
|
||||
expect(wrapper.find('AsyncTestComponent').contains(EXPECTED_VALUE)).toBe(false);
|
||||
expect(screen.queryByText(EXPECTED_VALUE)).toBeFalsy();
|
||||
|
||||
// wait until the "Async" component is updated
|
||||
setTimeout(() => {
|
||||
// Update the wrapper with the changes in the underlying component
|
||||
wrapper = wrapper.update();
|
||||
|
||||
// Assert the expected value and the corresponding snapshot
|
||||
expect(wrapper.find('AsyncTestComponent').contains(EXPECTED_VALUE)).toBe(true);
|
||||
expect(toJson(wrapper)).toMatchSpecificSnapshot(snapshotFilename);
|
||||
setTimeout(async () => {
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(EXPECTED_VALUE)).toBeInTheDocument();
|
||||
expect(container.firstChild).toMatchSpecificSnapshot(snapshotFilename);
|
||||
});
|
||||
|
||||
// finally mark test as done
|
||||
done();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -30,7 +37,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
@ -42,7 +49,7 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.1.0-beta.1",
|
||||
"@storybook/addon-storyshots": "6.2.0-alpha.0",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -53,12 +60,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -39,8 +39,8 @@ export interface PuppeteerTestConfig extends CommonConfig {
|
||||
export interface ImageSnapshotConfig extends CommonConfig {
|
||||
getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
|
||||
getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
|
||||
beforeScreenshot: (page: Page, options: Options) => void | ElementHandle;
|
||||
afterScreenshot: (options: { image: string; context: Context }) => void;
|
||||
beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
|
||||
afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
|
||||
}
|
||||
|
||||
const noop: () => undefined = () => undefined;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -29,13 +36,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/router": "6.1.0-beta.1",
|
||||
"@storybook/source-loader": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/router": "6.2.0-alpha.0",
|
||||
"@storybook/source-loader": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -63,12 +70,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook toolbars addon",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,10 +30,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -51,5 +51,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9"
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,6 +18,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/preview.js",
|
||||
"types": "dist/preview.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
@ -29,12 +36,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -56,12 +63,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,10 +41,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^4.0.3",
|
||||
@ -51,17 +58,18 @@
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"ts-loader": "^6.0.1",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.43.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.901.0",
|
||||
"@angular-devkit/core": "^9.1.0",
|
||||
"@angular/common": "^9.1.0",
|
||||
"@angular/compiler": "^9.1.0",
|
||||
"@angular/core": "^9.1.0",
|
||||
"@angular/forms": "^9.1.0",
|
||||
"@angular/platform-browser": "^9.1.0",
|
||||
"@angular/platform-browser-dynamic": "^9.1.0",
|
||||
"@angular-devkit/build-angular": "~0.1100.1",
|
||||
"@angular-devkit/core": "^11.0.1",
|
||||
"@angular/common": "^11.0.0",
|
||||
"@angular/compiler": "^11.0.0",
|
||||
"@angular/compiler-cli": "^11.0.0",
|
||||
"@angular/core": "^11.0.0",
|
||||
"@angular/forms": "^11.0.0",
|
||||
"@angular/platform-browser": "^11.0.0",
|
||||
"@angular/platform-browser-dynamic": "^11.0.0",
|
||||
"@types/autoprefixer": "^9.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -69,6 +77,7 @@
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
"@angular/compiler": ">=6.0.0",
|
||||
"@angular/compiler-cli": ">=6.0.0",
|
||||
"@angular/core": ">=6.0.0",
|
||||
"@angular/forms": ">=6.0.0",
|
||||
"@angular/platform-browser": ">=6.0.0",
|
||||
@ -76,7 +85,7 @@
|
||||
"@babel/core": "*",
|
||||
"rxjs": "^6.0.0",
|
||||
"typescript": "^3.4.0 || >=4.0.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0"
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
@ -84,12 +93,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
// @ts-ignore
|
||||
import { document } from 'global';
|
||||
import { enableProdMode, NgModule, Component, NgModuleRef, Type } from '@angular/core';
|
||||
import { enableProdMode, NgModule, Component, NgModuleRef, Type, NgZone } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { ReplaySubject } from 'rxjs';
|
||||
import { Observable, ReplaySubject, Subscriber } from 'rxjs';
|
||||
import { StoryFn } from '@storybook/addons';
|
||||
import { AppComponent } from './components/app.component';
|
||||
import { STORY } from './app.token';
|
||||
@ -18,13 +18,26 @@ declare global {
|
||||
|
||||
let platform: any = null;
|
||||
let promises: Promise<NgModuleRef<any>>[] = [];
|
||||
let storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
|
||||
|
||||
const moduleClass = class DynamicModule {};
|
||||
const componentClass = class DynamicComponent {};
|
||||
|
||||
type DynamicComponentType = typeof componentClass;
|
||||
|
||||
const storyData = new ReplaySubject(1);
|
||||
function storyDataFactory<T>(data: Observable<T>) {
|
||||
return (ngZone: NgZone) => new Observable((subscriber: Subscriber<T>) => {
|
||||
const sub = data.subscribe(
|
||||
(v: T) => { ngZone.run(() => subscriber.next(v)); },
|
||||
(err) => { ngZone.run(() => subscriber.error(err)); },
|
||||
() => { ngZone.run(() => subscriber.complete()); }
|
||||
);
|
||||
|
||||
return () => {
|
||||
sub.unsubscribe();
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const getModule = (
|
||||
declarations: (Type<any> | any[])[],
|
||||
@ -33,12 +46,18 @@ const getModule = (
|
||||
data: StoryFnAngularReturnType,
|
||||
moduleMetadata: NgModuleMetadata
|
||||
) => {
|
||||
// Complete last ReplaySubject and create a new one for the current module
|
||||
storyData.complete();
|
||||
storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
|
||||
storyData.next(data);
|
||||
|
||||
const moduleMeta = {
|
||||
declarations: [...declarations, ...(moduleMetadata.declarations || [])],
|
||||
imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
|
||||
providers: [{ provide: STORY, useValue: storyData }, ...(moduleMetadata.providers || [])],
|
||||
providers: [
|
||||
{ provide: STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [ NgZone ] },
|
||||
...(moduleMetadata.providers || [])
|
||||
],
|
||||
entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
|
||||
schemas: [...(moduleMetadata.schemas || [])],
|
||||
bootstrap: [...bootstrap],
|
||||
|
||||
@ -8,14 +8,28 @@ import {
|
||||
Path,
|
||||
getSystemPath,
|
||||
} from '@angular-devkit/core';
|
||||
import {
|
||||
getCommonConfig,
|
||||
getStylesConfig,
|
||||
} from '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
import { RuleSetRule, Configuration } from 'webpack';
|
||||
|
||||
// We need to dynamically require theses functions as they are not part of the public api and so their paths
|
||||
// aren't the same in all versions of Angular
|
||||
let angularWebpackConfig: {
|
||||
getCommonConfig: (config: unknown) => Configuration;
|
||||
getStylesConfig: (config: unknown) => Configuration;
|
||||
};
|
||||
try {
|
||||
// First we look for webpack config according to directory structure of Angular 11
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
|
||||
} catch (e) {
|
||||
// We fallback on directory structure of Angular 10 (and below)
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
|
||||
}
|
||||
|
||||
const { getCommonConfig, getStylesConfig } = angularWebpackConfig;
|
||||
|
||||
function isDirectory(assetPath: string) {
|
||||
try {
|
||||
return fs.statSync(assetPath).isDirectory();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/aurelia",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,17 +27,17 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@aurelia/webpack-loader": "^0.7.0",
|
||||
"@storybook/addon-knobs": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/addon-knobs": "6.2.0-alpha.0",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"fork-ts-checker-webpack-plugin": "^4.0.3",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"ts-loader": "^6.0.1",
|
||||
"url-loader": "^4.1.0",
|
||||
"webpack": "^4.33.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.0.10",
|
||||
@ -52,7 +52,7 @@
|
||||
"sass-loader": "^8.0.0",
|
||||
"style-loader": "^0.23.0",
|
||||
"typescript": "^3.9.3",
|
||||
"webpack": "^4.33.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"aurelia": "*"
|
||||
@ -60,5 +60,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9"
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -14,6 +14,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -32,7 +39,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.7.0",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -52,12 +59,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,10 +41,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^1.0.0",
|
||||
@ -55,12 +62,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marionette",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -49,5 +49,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9"
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -16,6 +16,13 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,8 +41,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^6.2.8",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -46,7 +53,7 @@
|
||||
"peerDependencies": {
|
||||
"@babel/core": "*",
|
||||
"marko": "^4.15.2 || ^5.0.0-next || ^5",
|
||||
"webpack": "^4"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
@ -54,12 +61,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -36,10 +43,10 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.3",
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/mithril": "^2.0.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -60,12 +67,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -35,9 +42,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -58,12 +65,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"rax",
|
||||
@ -17,6 +17,13 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,7 +41,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"core-js": "^3.0.1",
|
||||
"driver-dom": "^2.0.0",
|
||||
@ -54,12 +61,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,6 +25,7 @@
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"types/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
@ -37,12 +38,11 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.1",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
@ -51,29 +51,34 @@
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dev-utils": "^10.0.0",
|
||||
"react-docgen-typescript-plugin": "^0.6.0",
|
||||
"react-docgen-typescript-plugin": "^0.6.2",
|
||||
"react-refresh": "^0.8.3",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"webpack": "^4.43.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@types/node": "^14.0.10",
|
||||
"@types/webpack": "^4.41.12"
|
||||
"@types/webpack": "^4.41.24"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.11.5",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"types-6-0": [
|
||||
|
||||
@ -2,7 +2,7 @@ import { document, FRAMEWORK_OPTIONS } from 'global';
|
||||
import React, { Component, FunctionComponent, ReactElement, StrictMode, Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { RenderContext } from './types';
|
||||
import { StoryContext, RenderContext } from './types';
|
||||
|
||||
const rootEl = document ? document.getElementById('root') : null;
|
||||
|
||||
@ -46,17 +46,17 @@ class ErrorBoundary extends Component<{
|
||||
const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
|
||||
|
||||
export default async function renderMain({
|
||||
storyFn,
|
||||
storyContext,
|
||||
unboundStoryFn,
|
||||
showMain,
|
||||
showException,
|
||||
forceRender,
|
||||
}: RenderContext) {
|
||||
// storyFn has context bound in by now so can be treated as a function component with no args
|
||||
const StoryFn = storyFn as FunctionComponent;
|
||||
const Story = unboundStoryFn as FunctionComponent<StoryContext>;
|
||||
|
||||
const content = (
|
||||
<ErrorBoundary showMain={showMain} showException={showException}>
|
||||
<StoryFn />
|
||||
<Story {...storyContext} />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { ReactElement } from 'react';
|
||||
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
export { RenderContext } from '@storybook/client-api';
|
||||
export { StoryContext } from '@storybook/addons';
|
||||
|
||||
export interface ShowErrorArgs {
|
||||
title: string;
|
||||
|
||||
@ -43,7 +43,7 @@ describe('framework-preset-react', () => {
|
||||
it('should return a config with fast refresh plugin when fast refresh is enabled', async () => {
|
||||
const config = await preset.babel(babelConfigMock, storybookOptions as StorybookOptions);
|
||||
|
||||
expect(config.plugins).toEqual([reactRefreshPath]);
|
||||
expect(config.plugins).toEqual([[reactRefreshPath, {}, 'storybook-react-refresh']]);
|
||||
});
|
||||
|
||||
it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => {
|
||||
|
||||
@ -18,7 +18,10 @@ export async function babel(config: TransformOptions, options: StorybookOptions)
|
||||
|
||||
return {
|
||||
...config,
|
||||
plugins: [require.resolve('react-refresh/babel'), ...(config.plugins || [])],
|
||||
plugins: [
|
||||
[require.resolve('react-refresh/babel'), {}, 'storybook-react-refresh'],
|
||||
...(config.plugins || []),
|
||||
],
|
||||
};
|
||||
}
|
||||
const storybookReactDirName = path.dirname(require.resolve('@storybook/react/package.json'));
|
||||
@ -58,10 +61,18 @@ export async function webpackFinal(config: Configuration, options: StorybookOpti
|
||||
if (!fastRefreshEnabled) {
|
||||
return config;
|
||||
}
|
||||
// matches the name of the plugin in CRA.
|
||||
const hasReactRefresh = config.plugins.find((p) => p.constructor.name === 'ReactRefreshPlugin');
|
||||
|
||||
if (hasReactRefresh) {
|
||||
logger.warn("=> React refresh is already set. You don't need to set the option");
|
||||
return config;
|
||||
}
|
||||
|
||||
logger.info('=> Using React fast refresh');
|
||||
|
||||
return {
|
||||
...config,
|
||||
plugins: [...(config.plugins || []), new ReactRefreshWebpackPlugin()],
|
||||
plugins: [...config.plugins, new ReactRefreshWebpackPlugin()],
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -16,6 +16,13 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,7 +41,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^4.0.1",
|
||||
@ -63,12 +70,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/node-logger": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@storybook/node-logger": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -57,12 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,8 +41,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -45,7 +52,7 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"svelte": "^3.18.1",
|
||||
"svelte-loader": "^2.13.4"
|
||||
},
|
||||
@ -60,12 +67,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,6 +17,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -34,9 +41,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "16.13.1",
|
||||
@ -46,11 +53,11 @@
|
||||
"ts-loader": "^6.2.2",
|
||||
"vue-docgen-api": "^4.33.1",
|
||||
"vue-docgen-loader": "^1.5.0",
|
||||
"webpack": "^4.43.0"
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.0.10",
|
||||
"@types/webpack": "^4.41.12",
|
||||
"@types/webpack": "^4.41.24",
|
||||
"vue": "^2.6.8",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-template-compiler": "^2.6.8"
|
||||
@ -70,12 +77,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -19,6 +19,13 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -39,10 +46,10 @@
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.1",
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/core": "6.1.0-beta.1",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/core": "6.2.0-alpha.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -65,12 +72,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
"ts3.4/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-decorator",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "decorator addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,15 +24,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-parameter",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,12 +24,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -38,7 +38,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-preview-wrapper",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "preview wrapper addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-roundtrip",
|
||||
"version": "6.1.0-beta.1",
|
||||
"version": "6.2.0-alpha.0",
|
||||
"description": "roundtrip addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,13 +24,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.1.0-beta.1",
|
||||
"@storybook/api": "6.1.0-beta.1",
|
||||
"@storybook/client-api": "6.1.0-beta.1",
|
||||
"@storybook/client-logger": "6.1.0-beta.1",
|
||||
"@storybook/components": "6.1.0-beta.1",
|
||||
"@storybook/core-events": "6.1.0-beta.1",
|
||||
"@storybook/theming": "6.1.0-beta.1",
|
||||
"@storybook/addons": "6.2.0-alpha.0",
|
||||
"@storybook/api": "6.2.0-alpha.0",
|
||||
"@storybook/client-api": "6.2.0-alpha.0",
|
||||
"@storybook/client-logger": "6.2.0-alpha.0",
|
||||
"@storybook/components": "6.2.0-alpha.0",
|
||||
"@storybook/core-events": "6.2.0-alpha.0",
|
||||
"@storybook/theming": "6.2.0-alpha.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -39,7 +39,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "763c233efc86849979db1c4c795035bd58f1ced9",
|
||||
"gitHead": "c44dc96274577a6f1c4006c88b0f9db524e821c4",
|
||||
"typesVersions": {
|
||||
"<3.8": {
|
||||
"*": [
|
||||
|
||||
@ -64,7 +64,7 @@ For example, here is how Storybook automatically adopts `create-react-app`'s con
|
||||
|
||||
- `webpack` is applied to the preview config after it has been initialized by storybook
|
||||
- `webpackFinal` is applied to the preview config after all user presets have been applied
|
||||
- `webpackManager` is applied to the manager config
|
||||
- `managerWebpack` is applied to the manager config
|
||||
|
||||
### Manager entries
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ We have added ES2016 support with Babel for transpiling your JS code.
|
||||
|
||||
In addition to that, we've added a few additional features, like object spreading and async await.
|
||||
|
||||
Check out our [source](https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/common/babel.js) to learn more about these plugins.
|
||||
Check out our [source](https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/common/babel.ts) to learn more about these plugins.
|
||||
|
||||
### Custom config file
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ yarn storybook --debug-webpack
|
||||
|
||||
To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./overview.md#configure-story-rendering).
|
||||
|
||||
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, this will have information about where config came from, whether we're in production of development mode etc.
|
||||
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, this will have information about where config came from, whether we're in production or development mode etc.
|
||||
|
||||
For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support:
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
By adding the the configuration element `right`, the text will displayed on the right side in the toolbar menu, once you connect it to a decorator.
|
||||
By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu, once you connect it to a decorator.
|
||||
|
||||
Here's a list of the configuration options available.
|
||||
|
||||
|
||||
43
docs/snippets/angular/button-implementation.ts.mdx
Normal file
43
docs/snippets/angular/button-implementation.ts.mdx
Normal file
@ -0,0 +1,43 @@
|
||||
```ts
|
||||
// Button.component.ts
|
||||
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'button',
|
||||
template: `the component implementation markup`,
|
||||
})
|
||||
export default class ButtonComponent {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
@Input()
|
||||
primary = false;
|
||||
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
@Input()
|
||||
backgroundColor?: string;
|
||||
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
@Input()
|
||||
size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/**
|
||||
* Button contents
|
||||
*
|
||||
* @required
|
||||
*/
|
||||
@Input()
|
||||
label = 'Button';
|
||||
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
@Output()
|
||||
onClick = new EventEmitter<Event>();
|
||||
}
|
||||
```
|
||||
24
docs/snippets/angular/list-story-with-subcomponents.ts.mdx
Normal file
24
docs/snippets/angular/list-story-with-subcomponents.ts.mdx
Normal file
@ -0,0 +1,24 @@
|
||||
```ts
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { ListItemComponent } from './list-item.component';
|
||||
import { ListComponent } from './list.component';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
component: ListComponent,
|
||||
subcomponents: { ListItemComponent },
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<ListComponent> = (args: ListComponent) => ({
|
||||
component: ListComponent,
|
||||
props: args,
|
||||
moduleMetadata: {
|
||||
declarations: [ListComponent, ListItemComponent],
|
||||
},
|
||||
});
|
||||
|
||||
export const OneItem = Template.bind({});
|
||||
OneItem.args = {
|
||||
items: [ListItemComponent],
|
||||
};
|
||||
```
|
||||
@ -13,7 +13,7 @@ const ThemePanel = props => {
|
||||
{theme ? (
|
||||
<Spaced row={3} outer={1}>
|
||||
<Title>{theme.name}</Title>
|
||||
<p>The full theme object/p>
|
||||
<p>The full theme object</p>
|
||||
<Source code={JSON.stringify(theme, null, 2)} language="js" copyable padded showLineNumbers />
|
||||
</Spaced>
|
||||
) : (
|
||||
@ -22,4 +22,4 @@ const ThemePanel = props => {
|
||||
</AddonPanel>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
48
docs/snippets/common/badge-story-custom-argtypes.js.mdx
Normal file
48
docs/snippets/common/badge-story-custom-argtypes.js.mdx
Normal file
@ -0,0 +1,48 @@
|
||||
```js
|
||||
// Badge.stories.js
|
||||
|
||||
export default {
|
||||
component: Badge,
|
||||
title: 'CSF/Badge',
|
||||
argTypes: {
|
||||
status: {
|
||||
name: 'Badge Status',
|
||||
description: 'Available options available to the Badge',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
},
|
||||
table: {
|
||||
defaultValue: {
|
||||
summary: 'positive'
|
||||
},
|
||||
type: {
|
||||
summary: 'Shows options to the Badge',
|
||||
detail: 'Listing of available options'
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
name: 'Badge Content',
|
||||
description: 'Text shown by Badge',
|
||||
control: {
|
||||
type: 'text'
|
||||
},
|
||||
table: {
|
||||
type: {
|
||||
summary: 'The label contents',
|
||||
detail: 'Text displayed by the Badge'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
58
docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
Normal file
58
docs/snippets/common/badge-story-custom-argtypes.mdx.mdx
Normal file
@ -0,0 +1,58 @@
|
||||
```md
|
||||
<!-- Badge.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Badge } from './Badge';
|
||||
|
||||
<Meta
|
||||
title="MDX/Badge"
|
||||
argTypes={{
|
||||
status: {
|
||||
name: 'Badge Status',
|
||||
description: 'Available options available to the Badge',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'positive',
|
||||
'negative',
|
||||
'warning',
|
||||
'error',
|
||||
'error',
|
||||
'neutral'
|
||||
],
|
||||
},
|
||||
table: {
|
||||
defaultValue: {
|
||||
summary: 'positive'
|
||||
},
|
||||
type: {
|
||||
summary: 'Shows options to the Badge',
|
||||
detail: 'Listing of available options'
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
name: 'Badge Content',
|
||||
description: 'Text shown by Badge',
|
||||
control: {
|
||||
type: 'text'
|
||||
},
|
||||
table: {
|
||||
type: {
|
||||
summary: 'The label contents',
|
||||
detail: 'Text displayed by the Badge'
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
### Badge
|
||||
|
||||
Let's define a story for our `Badge` component
|
||||
|
||||
<ArgsTable of={Badge} />
|
||||
|
||||
<!-- remainder story implementation -->
|
||||
```
|
||||
@ -0,0 +1,40 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
// assigns the argTypes to the Colors category
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
category: 'Colors'
|
||||
}
|
||||
},
|
||||
primary: {
|
||||
table: {
|
||||
category: 'Colors'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Text category
|
||||
label: {
|
||||
table: {
|
||||
category: 'Text'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Events category
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Sizes category
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,44 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
// assigns the argTypes to the Colors category
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
category: 'Colors',
|
||||
// assigns the argTypes to a specific subcategory
|
||||
subcategory: 'Button colors'
|
||||
}
|
||||
},
|
||||
primary: {
|
||||
table: {
|
||||
category: 'Colors',
|
||||
subcategory: 'Button style'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
table: {
|
||||
category: 'Text',
|
||||
subcategory: 'Button contents'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Events category
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events',
|
||||
subcategory: 'Button Events'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Sizes category
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
21
docs/snippets/common/button-story-docs-code-type.js.mdx
Normal file
21
docs/snippets/common/button-story-docs-code-type.js.mdx
Normal file
@ -0,0 +1,21 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
source: {
|
||||
type: 'code'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// remainder story implementation
|
||||
|
||||
```
|
||||
10
docs/snippets/common/button-story-hoisted.js.mdx
Normal file
10
docs/snippets/common/button-story-hoisted.js.mdx
Normal file
@ -0,0 +1,10 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
title: 'Design System/Atoms/Button',
|
||||
};
|
||||
|
||||
// This is the only named export in the file, and it matches the component name
|
||||
export const Button = ...
|
||||
```
|
||||
@ -5,13 +5,15 @@
|
||||
export default {
|
||||
title: 'Button',
|
||||
parameters: {
|
||||
grid: {
|
||||
cellSize: 20,
|
||||
opacity: 0.5,
|
||||
cellAmount: 5,
|
||||
offsetX: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
||||
offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
||||
backgrounds: {
|
||||
grid: {
|
||||
cellSize: 20,
|
||||
opacity: 0.5,
|
||||
cellAmount: 5,
|
||||
offsetX: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
||||
offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
@ -8,5 +8,4 @@ export const parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
36
docs/snippets/react/button-implementation.js.mdx
Normal file
36
docs/snippets/react/button-implementation.js.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
```js
|
||||
// Button.js
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
|
||||
// the component implementation
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary: PropTypes.bool,
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor: PropTypes.string,
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: PropTypes.string.isRequired,
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
```
|
||||
42
docs/snippets/react/button-implementation.ts.mdx
Normal file
42
docs/snippets/react/button-implementation.ts.mdx
Normal file
@ -0,0 +1,42 @@
|
||||
```ts
|
||||
// Button.ts
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export interface ButtonProps {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: string;
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
primary = false,
|
||||
size = 'medium',
|
||||
backgroundColor,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
// the component implementation
|
||||
};
|
||||
|
||||
```
|
||||
35
docs/snippets/react/button-story-default-docs-code.js.mdx
Normal file
35
docs/snippets/react/button-story-default-docs-code.js.mdx
Normal file
@ -0,0 +1,35 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
// some function to demonstrate the behavior
|
||||
const someFunction = (someValue) => {
|
||||
return `i am a ${someValue}`;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' }
|
||||
},
|
||||
};
|
||||
|
||||
export const ExampleStory = (args) => {
|
||||
// destructure the label from the args object
|
||||
const { label } = args;
|
||||
//
|
||||
// assigns the function result to a variable and pass it as a prop into the component
|
||||
const functionResult = someFunction(label);
|
||||
return <Button {...args} label={functionResult} />;
|
||||
};
|
||||
|
||||
ExampleStory.args = {
|
||||
primary: true,
|
||||
size: 'small',
|
||||
label: 'button'
|
||||
};
|
||||
```
|
||||
36
docs/snippets/react/button-story-default-docs-code.ts.mdx
Normal file
36
docs/snippets/react/button-story-default-docs-code.ts.mdx
Normal file
@ -0,0 +1,36 @@
|
||||
```ts
|
||||
// Button.stories.tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Story, Meta } from '@storybook/react/types-6-0';
|
||||
|
||||
import { Button, ButtonProps } from './Button';
|
||||
|
||||
// some function to demonstrate the behavior
|
||||
const someFunction = (someValue: String) => {
|
||||
return `i am a ${someValue}`;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const ExampleStory: Story<ButtonProps> = (args) => {
|
||||
// destructure the label from the args object
|
||||
const { label } = args;
|
||||
//
|
||||
// assigns the function result to a variable and pass it as a prop into the component
|
||||
const functionResult = someFunction(label);
|
||||
return <Button {...args} label={functionResult} />;
|
||||
};
|
||||
ExampleStory.args = {
|
||||
primary: true,
|
||||
size: 'small',
|
||||
label: 'button'
|
||||
};
|
||||
```
|
||||
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