mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 02:41:08 +08:00
Merge branch 'next' into fix/e2e-cra
# Conflicts: # addons/docs/package.json # addons/essentials/package.json # lib/cli/src/versions.ts # lib/core/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
e2334565be
@ -195,7 +195,7 @@ jobs:
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
|
||||
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
@ -221,7 +221,7 @@ jobs:
|
||||
name: Run E2E tests
|
||||
# Do not test CRA here because it's done in PnP part
|
||||
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
|
||||
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2
|
||||
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
|
||||
no_output_timeout: 5m
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
|
||||
19
.eslintrc.js
19
.eslintrc.js
@ -9,6 +9,18 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
// this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
|
||||
files: [
|
||||
'**/lib/theming/**/*',
|
||||
'**/lib/router/**/*',
|
||||
'**/lib/ui/**/*',
|
||||
'**/lib/components/**/*',
|
||||
],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/**',
|
||||
@ -72,12 +84,5 @@ module.exports = {
|
||||
'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones
|
||||
},
|
||||
},
|
||||
{
|
||||
// this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
|
||||
files: ['**/lib/theming/**/*', '**/lib/router/**/*', '**/lib/ui/**/*'],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -10,7 +10,7 @@ on:
|
||||
jobs:
|
||||
build:
|
||||
name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
|
||||
if: github.event_name == 'push' || github.event.label.name == 'ci:matrix'
|
||||
if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:matrix')
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Web Components](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
|
||||
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :------------------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
|
||||
| [a11y](addons/a11y) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [actions](addons/actions) | + | +\* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [design assets](addons/design-assets) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [docs](addons/docs) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [events](addons/events) | + | | + | + | + | + | + | + | | | + | + | + |
|
||||
| [google-analytics](addons/google-analytics) | + | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [graphql](addons/graphql) | + | | | | | | | | | | | | |
|
||||
| [jest](addons/jest) | + | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [knobs](addons/knobs) | + | +\* | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [links](addons/links) | + | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [options](addons/options) | + | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [query params](addons/queryparams) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [storyshots](addons/storyshots) | + | + | + | + | | + | + | | + | + | | + | + |
|
||||
| [storysource](addons/storysource) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [viewport](addons/viewport) | + | | + | + | + | + | + | + | + | + | + | + | + |
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
## Deprecated Addons
|
||||
|
||||
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
|
||||
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | + | | | | | | | | | | | |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + |
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
63
CHANGELOG.md
63
CHANGELOG.md
@ -1,3 +1,62 @@
|
||||
## 6.5.0-alpha.39 (February 11, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Add addon-interactions to angular template ([#17437](https://github.com/storybookjs/storybook/pull/17437))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Rename `generated-stories-entry` to `cjs` extension so require works ([#17486](https://github.com/storybookjs/storybook/pull/17486))
|
||||
- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))
|
||||
- Controls: Fix Boolean control parsing ([#17456](https://github.com/storybookjs/storybook/pull/17456))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Fix `ci:matrix` label in CI ([#17457](https://github.com/storybookjs/storybook/pull/17457))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Bump vue-docgen-api to 4.44.15 ([#17465](https://github.com/storybookjs/storybook/pull/17465))
|
||||
|
||||
## 6.5.0-alpha.38 (February 8, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434))
|
||||
- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327))
|
||||
- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Web-components: Upgrade kitchen sink lockfile ([#17424](https://github.com/storybookjs/storybook/pull/17424))
|
||||
|
||||
## 6.5.0-alpha.37 (February 8, 2022)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 6.5.0-alpha.36 (February 4, 2022)
|
||||
|
||||
### Maintenance
|
||||
|
||||
- UI: Prebundle `@storybook/components` ([#17304](https://github.com/storybookjs/storybook/pull/17304))
|
||||
|
||||
## 6.5.0-alpha.35 (February 4, 2022)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345))
|
||||
- CSF3: Handle auto-title redundant filename ([#17421](https://github.com/storybookjs/storybook/pull/17421))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404))
|
||||
- Core: Apply Docs mode to composed storybooks ([#17292](https://github.com/storybookjs/storybook/pull/17292))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Core: Move CSF-related logic to its own folder ([#17381](https://github.com/storybookjs/storybook/pull/17381))
|
||||
- Improve style handling in angular example in monorepo ([#17343](https://github.com/storybookjs/storybook/pull/17343))
|
||||
|
||||
## 6.4.18 (February 2, 2022)
|
||||
|
||||
### Bug Fixes
|
||||
@ -8,11 +67,11 @@
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Mock channel if not present ([#17382](https://github.com/storybookjs/storybook/pull/17382))
|
||||
- Core: Mock channel if not present ([#17382](https://github.com/storybookjs/storybook/pull/17382))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* CLI: Pin version of `@mdx-js/react` to 1.x.x until we are compatible ([#17395](https://github.com/storybookjs/storybook/pull/17395))
|
||||
- CLI: Pin version of `@mdx-js/react` to 1.x.x until we are compatible ([#17395](https://github.com/storybookjs/storybook/pull/17395))
|
||||
|
||||
## 6.5.0-alpha.33 (February 1, 2022)
|
||||
|
||||
|
||||
19
MIGRATION.md
19
MIGRATION.md
@ -1,5 +1,7 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename)
|
||||
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
|
||||
- [Automigrate](#automigrate)
|
||||
- [CRA5 upgrade](#cra5-upgrade)
|
||||
@ -188,6 +190,23 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### CSF3 auto-title redundant filename
|
||||
|
||||
SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`.
|
||||
|
||||
The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.
|
||||
|
||||
To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name (case insensitive) or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button`.
|
||||
|
||||
Since CSF3 is experimental, we are introducing this technically breaking change in a minor release. If you desire the old structure, you can manually specify the title in file. For example:
|
||||
|
||||
```js
|
||||
// atoms/Button/Button.stories.js
|
||||
export default { title: 'Atoms/Button/Button' };
|
||||
```
|
||||
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/channels": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/channels": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -41,12 +41,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -79,7 +79,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -77,7 +77,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -73,7 +73,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -77,19 +77,10 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
|
||||
|
||||
## Framework support
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
| | React | Vue | Angular | Ember | Web Components | Marko | HTML | Svelte | Preact | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :---: | :--: | :----: | :----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | WIP | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | WIP | | | | | | |
|
||||
| Props controls | + | + | + | | | WIP | | | | | | |
|
||||
| Description | + | + | + | + | + | WIP | | | | | | |
|
||||
| Inline stories | + | + | + | | + | WIP | + | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -64,21 +64,21 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/csf-tools": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/postinstall": "6.5.0-alpha.34",
|
||||
"@storybook/preview-web": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/csf-tools": "6.5.0-alpha.39",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/postinstall": "6.5.0-alpha.39",
|
||||
"@storybook/preview-web": "6.5.0-alpha.39",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -107,11 +107,11 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.3.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.5.0-alpha.34",
|
||||
"@storybook/html": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/web-components": "6.5.0-alpha.34",
|
||||
"@storybook/angular": "6.5.0-alpha.39",
|
||||
"@storybook/html": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@storybook/web-components": "6.5.0-alpha.39",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -141,16 +141,16 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack5": "6.5.0-alpha.34",
|
||||
"@storybook/html": "6.5.0-alpha.34",
|
||||
"@storybook/manager-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/manager-webpack5": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/vue3": "6.5.0-alpha.34",
|
||||
"@storybook/web-components": "6.5.0-alpha.34",
|
||||
"@storybook/angular": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack5": "6.5.0-alpha.39",
|
||||
"@storybook/html": "6.5.0-alpha.39",
|
||||
"@storybook/manager-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/manager-webpack5": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@storybook/vue3": "6.5.0-alpha.39",
|
||||
"@storybook/web-components": "6.5.0-alpha.39",
|
||||
"lit": "^2.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -219,7 +219,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,35 +39,35 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.34",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.34",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-measure": "6.5.0-alpha.39",
|
||||
"@storybook/addon-outline": "6.5.0-alpha.39",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack5": "6.5.0-alpha.34",
|
||||
"@storybook/manager-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/manager-webpack5": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/web-components": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack5": "6.5.0-alpha.39",
|
||||
"@storybook/manager-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/manager-webpack5": "6.5.0-alpha.39",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@storybook/web-components": "6.5.0-alpha.39",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -109,6 +109,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -41,14 +41,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/instrumenter": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.0.5",
|
||||
@ -74,7 +74,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook addon for inspecting Jest unit test results.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,11 +41,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/router": "6.5.0-alpha.34",
|
||||
"@storybook/router": "6.5.0-alpha.39",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
2
addons/links/react.d.ts
vendored
2
addons/links/react.d.ts
vendored
@ -1,2 +1,2 @@
|
||||
export * from './dist/ts3.9/react';
|
||||
export { default as LinkTo } from './dist/ts3.9/react';
|
||||
export { default } from './dist/ts3.9/react';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -44,11 +44,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0"
|
||||
@ -71,7 +71,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-client": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-client": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
@ -69,11 +69,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/angular": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/vue3": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/angular": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@storybook/vue3": "6.5.0-alpha.39",
|
||||
"babel-loader": "^8.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -151,7 +151,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,7 +42,7 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119"
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93"
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,13 +41,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/router": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/router": "6.5.0-alpha.39",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -57,7 +57,7 @@
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-syntax-highlighter": "^11.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
@ -67,7 +67,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -42,12 +42,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,16 +45,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -64,8 +66,8 @@
|
||||
"postcss": "^7.0.36",
|
||||
"postcss-loader": "^4.2.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"sass-loader": "^10.1.0",
|
||||
@ -129,5 +131,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119"
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember",
|
||||
"bugs": {
|
||||
@ -43,9 +43,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^2.1.4",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -66,6 +66,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,13 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/preview-web": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -75,6 +75,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,14 +49,14 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
@ -73,7 +73,7 @@
|
||||
"webpack": ">=4.43.0 <6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@types/prompts": "^2.0.9",
|
||||
"webpack": "4"
|
||||
},
|
||||
@ -112,6 +112,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,15 +45,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/preview-web": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/preview-web": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,11 +46,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -60,7 +60,7 @@
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"vue-docgen-api": "^4.38.0",
|
||||
"vue-docgen-api": "^4.44.15",
|
||||
"vue-docgen-loader": "^1.5.0",
|
||||
"webpack": "4"
|
||||
},
|
||||
@ -83,6 +83,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,11 +45,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
@ -60,7 +60,7 @@
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"ts-loader": "^8.0.14",
|
||||
"vue-docgen-api": "^4.38.0",
|
||||
"vue-docgen-api": "^4.44.15",
|
||||
"vue-docgen-loader": "^1.5.0",
|
||||
"vue-loader": "^16.0.0",
|
||||
"webpack": "4"
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,13 +50,13 @@
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-common": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-common": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/preview-web": "6.5.0-alpha.34",
|
||||
"@storybook/store": "6.5.0-alpha.34",
|
||||
"@storybook/preview-web": "6.5.0-alpha.39",
|
||||
"@storybook/store": "6.5.0-alpha.39",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
@ -80,6 +80,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
33
cypress/generated/addon-interactions.spec.ts
Normal file
33
cypress/generated/addon-interactions.spec.ts
Normal file
@ -0,0 +1,33 @@
|
||||
/* eslint-disable jest/no-identical-title */
|
||||
import { onlyOn } from '@cypress/skip-test';
|
||||
|
||||
describe('addon-interactions', () => {
|
||||
before(() => {
|
||||
cy.visitStorybook();
|
||||
});
|
||||
|
||||
const test = () => {
|
||||
// click on the button
|
||||
cy.navigateToStory('example-page', 'logged-in');
|
||||
|
||||
cy.viewAddonPanel('Interactions');
|
||||
|
||||
cy.getStoryElement().find('.welcome').should('contain.text', 'Welcome, Jane Doe!');
|
||||
|
||||
cy.get('#tabbutton-interactions').contains(/(1)/).should('be.visible');
|
||||
cy.get('#storybook-panel-root')
|
||||
.contains(/userEvent.click/)
|
||||
.should('be.visible');
|
||||
cy.get('[data-testid=icon-done]').should('be.visible');
|
||||
};
|
||||
|
||||
// Having multiple of onlyOn for the same test is a workaround instead
|
||||
// of having to use skipOn a long list of frameworks
|
||||
onlyOn('angular', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
|
||||
onlyOn('react', () => {
|
||||
it('should have interactions', test);
|
||||
});
|
||||
});
|
||||
@ -194,7 +194,7 @@ If it doesn't exist yet, create a file `.storybook/main.js`:
|
||||
|
||||
### Preview/Manager templates
|
||||
|
||||
It's also possible to to programmatically modify the preview head/body HTML using a preset, similar to the way `preview-head.html`/`preview-body.html` can be used to [configure story rendering](../configure/story-rendering.md). The `previewHead` and `previewBody` functions accept a string, which is the existing head/body, and return a modified string.
|
||||
It's also possible to programmatically modify the preview head/body HTML using a preset, similar to the way `preview-head.html`/`preview-body.html` can be used to [configure story rendering](../configure/story-rendering.md). The `previewHead` and `previewBody` functions accept a string, which is the existing head/body, and return a modified string.
|
||||
|
||||
For example, the following snippet adds a style tag to the preview head programatically:
|
||||
|
||||
|
||||
42
docs/configure/css-troubleshooting/angular.mdx
Normal file
42
docs/configure/css-troubleshooting/angular.mdx
Normal file
@ -0,0 +1,42 @@
|
||||
With Angular, you'll need to take special care of handling CSS.
|
||||
|
||||
### Working with previous versions
|
||||
|
||||
If you're working with an older version of Angular, in addition to providing a custom Webpack configuration, you can also use an inline loader to load your CSS safely. For example:
|
||||
|
||||
```js
|
||||
import '!style-loader!css-loader!./styles.css';
|
||||
```
|
||||
|
||||
### With Angular 13
|
||||
|
||||
With Angular version 13 and above, you should use a builder configuration to import your CSS, for example:
|
||||
|
||||
```json
|
||||
{
|
||||
"my-project": {
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"styles": ["src/styles.css", "src/styles.scss"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Additionally, if you need Storybook specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles:
|
||||
|
||||
```json
|
||||
{
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "my-default-project:build",
|
||||
"styles": [".storybook/custom-styles.scss"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -30,11 +30,27 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as
|
||||
- `addons` - a list of the [addons](/addons) you are using.
|
||||
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
|
||||
- `babel` - custom [babel configuration](./babel.md).
|
||||
- `framework` - framework specific configurations to help the loading and building process.
|
||||
|
||||
<div class="aside">
|
||||
💡 Tip: Customize your default story by referencing it first in the `stories` array.
|
||||
</div>
|
||||
|
||||
See all the [available](#using-storybook-api) fields below if you need further customization.
|
||||
|
||||
### Feature flags
|
||||
|
||||
Additionally, you can also provide additional feature flags to your Storybook configuration. Below is an abridged list of available features that are currently available.
|
||||
|
||||
| Configuration element | Description |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `storyStoreV7` | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up. <br/> `features: { storyStoreV7: true }` |
|
||||
| `buildStoriesJson` | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }` <br/> Requires `storyStoreV7`. |
|
||||
| `emotionAlias` | Provides backwards compatibility for Emotion. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility) for context.<br/> `features: { emotionAlias: false }` |
|
||||
| `babelModeV7` | Enables the new [Babel configuration](./babel.md#v7-mode) mode for Storybook. <br/> `features: { babelModeV7: true }` |
|
||||
| `postcss` | Disables the implicit PostCSS warning. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader) for context. <br/> `features: { postcss: false }` |
|
||||
| `modernInlineRender` | Enables Storybook's modern inline rendering mode. <br/> `features: { modernInlineRender: false }` |
|
||||
|
||||
## Configure story loading
|
||||
|
||||
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.*`. The intention is you colocate a story file with the component it documents.
|
||||
@ -46,7 +62,7 @@ By default, Storybook will load stories from your project based on a glob (patte
|
||||
└── Button.stories.js
|
||||
```
|
||||
|
||||
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).
|
||||
If you want to use a different naming convention, you can alter the glob using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).
|
||||
|
||||
For example, if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
|
||||
|
||||
@ -62,7 +78,7 @@ For example, if you wanted to pull both `.md` and `.js` files from the `my-proje
|
||||
|
||||
### With a configuration object
|
||||
|
||||
Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following:
|
||||
Additionally, you can customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -92,7 +108,7 @@ You can also simplify your Storybook configuration and load the stories based on
|
||||
|
||||
### With a custom implementation
|
||||
|
||||
You can also adjust your Storybook configuration and implement your own custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
|
||||
You can also adjust your Storybook configuration and implement your custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -127,6 +143,49 @@ This feature is experimental, and it has some limitations on what you can and ca
|
||||
- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not.
|
||||
- Custom`storySort` functions are allowed based on a restricted API.
|
||||
|
||||
## Configure your project with TypeScript
|
||||
|
||||
If you need, you can also configure your Storybook using TypeScript. To get started, add a `.babelrc` file inside your project and include the following Babel presets:
|
||||
|
||||
Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-ts-config-babelrc.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Using Storybook API
|
||||
|
||||
You can also use Storybook's API to configure your project with TypeScript. Under the hood, it mirrors the exact configuration you get by default. Below is an abridged Storybook configuration with TypeScript and additional information about each configuration element.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-default-setup.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Configuration element | Description |
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
|
||||
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
|
||||
| `addons` | Sets the list of [addons](/addons) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
|
||||
| `core` | Sets Storybook's Webpack configuration <br/> `core:{ builder: 'webpack5'}` |
|
||||
| `features` | Enables Storybook's additional features <br/>. See table below for a list of available features `features: { storyStoreV7: true }` |
|
||||
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
|
||||
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
To control the way stories are rendered and add global [decorators](../writing-stories/decorators.md#global-decorators) and [parameters](../writing-stories/parameters.md#global-parameters), create a `.storybook/preview.js` file. This is loaded in the Canvas tab, the “preview” iframe that renders your components in isolation. Use `preview.js` for global code (such as [CSS imports](../get-started/setup.md#render-component-styles) or JavaScript mocks) that applies to all stories.
|
||||
@ -143,4 +202,4 @@ If you’re looking to change how to order your stories, read about [sorting sto
|
||||
|
||||
To control the behavior of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file.
|
||||
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
|
||||
@ -10,23 +10,9 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
|
||||
|
||||
### Importing CSS files
|
||||
|
||||
If your component files import their CSS, Storybook’s webpack config will work unmodified with some exceptions:
|
||||
If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack#extending-storybooks-webpack-config) and include the appropriate loader.
|
||||
|
||||
- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config).
|
||||
- In Angular, you'll need to take special care of how you handle CSS:
|
||||
|
||||
- Either [customize your webpack config](./webpack#extending-storybooks-webpack-config)
|
||||
- Or use syntax to use a inline loader:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'angular/storybook-angular-inline-css-loader.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />
|
||||
|
||||
To use your CSS in all stories, you import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering)
|
||||
|
||||
|
||||
@ -14,9 +14,14 @@ In the interest of fostering an open and welcoming environment, we as contributo
|
||||
- [**Docs**](./documentation-updates.md): Typos, clarifications
|
||||
- [**Integrations**](./../api/new-frameworks): Integrate Storybook with your favorite library
|
||||
- [**Addons**](./../addons/introduction): Build an addon and share it with the community
|
||||
- [**Examples**](https://github.com/storybookjs/storybook/tree/next/examples/official-storybook): Add an example/test for a feature
|
||||
|
||||
## Not sure how to get started?
|
||||
|
||||
- [Chat in Discord #contributing](https://discord.gg/storybook)
|
||||
- [Browse "good first issues" to fix](https://github.com/storybookjs/storybook/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
|
||||
- [Submit a bug report or feature request](https://github.com/storybookjs/storybook/issues)
|
||||
|
||||
## Additional resources
|
||||
|
||||
- [**Official Storybook**](https://next--storybookjs.netlify.app/official-storybook/): The Storybook we use to build Storybook
|
||||
|
||||
@ -14,7 +14,7 @@ A major strength of Storybook are [addons](/addons/) that extend Storybook’s U
|
||||
|
||||
### Installation
|
||||
|
||||
If you ran `sb init` to include Storybook in your project, the Essentials addon (`@storybook/addon-essentials`) is already installed and configured for you. You can skip the rest of this section.
|
||||
If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
|
||||
|
||||
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
|
||||
|
||||
@ -26,21 +26,67 @@ npm install -D @storybook/addon-essentials
|
||||
yarn add -D @storybook/addon-essentials
|
||||
```
|
||||
|
||||
Update your Storybook configuration (in `.storybook/main.js`) to include the Essentials addon.
|
||||
Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-register-individual-actions-addon.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Configuration
|
||||
|
||||
Essentials is "zero-config”. It comes with a recommended configuration out of the box.
|
||||
|
||||
If you need to reconfigure any of the individual essential addons, install them manually by following its installation instructions and adjusting its configuration to suit your needs.
|
||||
If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
|
||||
|
||||
```shell
|
||||
#With npm
|
||||
npm install -D @storybook/addon-actions
|
||||
|
||||
|
||||
#With yarn
|
||||
yarn add -D @storybook/addon-actions
|
||||
```
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-register-individual-actions-addon.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Below is an abridged configuration and table with all the available options for each addon.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-full-individual-essentials-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
| Addon | Configuration element | Description |
|
||||
| ------------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `@storybook/addon-actions` | N/A | N/A |
|
||||
| `@storybook/addon-viewport` | N/A | N/A |
|
||||
| `@storybook/addon-docs` | `configureJSX` | Enables JSX support in MDX for projects that aren't configured to handle the format. <br/> `configureJSX: true` |
|
||||
| | `babelOptions` | Provides additional Babel configurations for file transpilation. <br/> `babelOptions: { plugins: [], presets: []}` <br/> Extends `configureJSX`. |
|
||||
| | `sourceLoaderOptions` | Provides additional configuration for Storybook's source loader. <br/> `sourceLoaderOptions: null` . <br/> Required for [`@storybook/addon-storysource`](https://storybook.js.org/addons/@storybook/addon-storysource). |
|
||||
| | `transcludeMarkdown` | Enables Markdown file support into MDX and render them as components. <br/> `transcludeMarkdown: true` |
|
||||
| `@storybook/addon-controls` | N/A | N/A |
|
||||
| `@storybook/addon-backgrounds` | N/A | N/A |
|
||||
| `@storybook/addon-toolbars` | N/A | N/A |
|
||||
| `@storybook/addon-measure` | N/A | N/A |
|
||||
|
||||
When you start Storybook, your custom configuration will override the default.
|
||||
|
||||
@ -64,4 +110,4 @@ For example, if you wanted to disable the [backgrounds addon](./backgrounds.md),
|
||||
|
||||
💡 You can use the following keys for each individual addon: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`, `measure`, `outline`.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
title: 'Example Storybooks'
|
||||
---
|
||||
|
||||
Storybook is the world’s most popular component explorer. It's widely adopted by industry giants, startups, and open source projects alike.
|
||||
|
||||
This is a curated list of Storybooks for your inspiration.
|
||||
|
||||
## Storybook team
|
||||
|
||||
- [Official Storybook](https://next--storybookjs.netlify.app/official-storybook/): Storybook application UI
|
||||
- [Storybook Design System](https://master--5ccbc373887ca40020446347.chromatic.com/): Reusable components that adhere to Storybook's design language
|
||||
- [Marketing and docs](https://master--5be26744d2f6250024a9117d.chromatic.com/): Main website that has stories for components and pages.
|
||||
- [Storybook tutorials](https://master--5cf841a3f3e3d200208ffc74.chromatic.com/): Tutorial site that has stories for components and pages.
|
||||
|
||||
## Websites
|
||||
|
||||
See how to build UIs using a [component driven](https://www.componentdriven.org/) methodology.
|
||||
|
||||
- [BBC Psammead](https://bbc.github.io/psammead/?path=/story/components-brand--without-brand-link)
|
||||
- [The Guardian](https://master--5dfcbf3012392c0020e7140b.chromatic.com)
|
||||
- [UN World Food Program](https://uikit.wfp.org/)
|
||||
|
||||
<!--
|
||||
|
||||
NOTE for contributors: This is a curated list. Here's what qualifies:
|
||||
- Website or app Storybook that illustrates how to build UIs from small components to pages
|
||||
- Used in production by a medium/large company or large open source community
|
||||
- Must be developed actively
|
||||
|
||||
-->
|
||||
|
||||
## Design systems and component libraries
|
||||
|
||||
Learn how leading teams build design systems.
|
||||
|
||||
- [Workday Canvas](https://workday.github.io/canvas-kit/?path=/story/welcome-getting-started--page)
|
||||
- [Salesforce Lightning](https://design-system-react-components.herokuapp.com/?path=/story/sldsaccordion--base)
|
||||
- [IBM Carbon](https://react.carbondesignsystem.com/?path=/story/accordion--accordion)
|
||||
- [Shopify Polaris](https://main--5d559397bae39100201eedc1.chromatic.com)
|
||||
- [Airbnb Dates](https://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default)
|
||||
- [Lonely Planet](http://lonelyplanet.github.io/backpack-ui/?path=/story/styles--design-tokens)
|
||||
- [Wix Style](https://www.wix-style-react.com/?path=/story/introduction-getting-started--getting-started)
|
||||
- [Chakra UI](https://chakra-ui.netlify.app/?path=/story/*)
|
||||
- [Grommet](https://storybook.grommet.io/?path=/story/all--all)
|
||||
- [Reaviz](https://reaviz.io/?path=/story/docs-intro--page)
|
||||
- [ShareGate Orbit](https://orbit.sharegate.design)
|
||||
- [AppNexus Lucid](https://appnexus.github.io/lucid/?path=/docs/documentation-introduction--introduction)
|
||||
- [AnyVision UI](http://storybook.anyvision.co/)
|
||||
- [Skyscanner Backpack](https://backpack.github.io/storybook/)
|
||||
- [GitLab UI](https://gitlab-org.gitlab.io/gitlab-ui)
|
||||
- [Grafana UI](https://developers.grafana.com/ui/latest/index.html)
|
||||
- [PX Blue](https://pxblue-components.github.io/)
|
||||
- [Audi](https://react.ui.audi/)
|
||||
- [Telefónica Mística UI](https://mistica-web.vercel.app/?path=/story/welcome-welcome--mistica)
|
||||
- [Codecademy Gamut](https://gamut.codecademy.com)
|
||||
- [Talend Coral](https://design.talend.com)
|
||||
- [Vibe Design by monday.com](https://style.monday.com)
|
||||
- [Reactstrap UI](https://reactstrap.github.io)
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
NOTE for contributors: This is a curated list. Here's what qualifies:
|
||||
- Design system or component library
|
||||
- Used in production by a medium/large company or large open source community (Grommet, Chakra)
|
||||
- Must have greater than 20+ contributors OR 1k+ GitHub stars OR show exceptional use of SB features
|
||||
|
||||
-->
|
||||
@ -52,6 +52,7 @@ Depending on your framework, first, build your app and then check that everythin
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'angular/storybook-run-dev.with-builder.js.mdx',
|
||||
'common/storybook-run-dev.npm.js.mdx',
|
||||
'common/storybook-run-dev.yarn.js.mdx',
|
||||
]}
|
||||
|
||||
@ -1,8 +1,28 @@
|
||||
Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
- Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
|
||||
|
||||
```shell
|
||||
# Add Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
- Update your `angular.json` file to include Storybook's custom builder:
|
||||
|
||||
```json
|
||||
{
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build",
|
||||
"port": 6006
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -12,6 +12,28 @@
|
||||
|
||||
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
|
||||
|
||||
- If you're using the custom Storybook builder, Storybook will not automatically open a browser window or tab. It's is a known issue that we plan to fix in future releases.
|
||||
|
||||
- When adding Storybook to your Angular project, check if you're running the install command from the root directory. Or in a monorepo environment inside the directory where the `angular.json` file is located.
|
||||
|
||||
- If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
|
||||
|
||||
| Configuration element | Description |
|
||||
|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `"browserTarget"` | Build target to be served using the following format. <br/> `"example-project:builder:config"` |
|
||||
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`. |
|
||||
| `"port"` | Port used by Storybook. <br/> `"port": 6006` |
|
||||
| `"host"` | Set up a custom host for Storybook. <br/> `"host": "http://my-custom-host"` |
|
||||
| `"configDir"` | Storybook configuration directory location. <br/> `"configDir": ".storybook"` |
|
||||
| `"https"` | Starts Storybook with HTTPS enabled. <br/> `"https": true` <br/> Requires custom certificate information. |
|
||||
| `"sslCa"` | Provides an SSL certificate authority. <br/> `"sslCa": "your-custom-certificate-authority"` <br/> Optional usage with `"https"` |
|
||||
| `"sslCert"` | Provides an SSL certificate. <br/> `"sslCert": "your-custom-certificate"` <br/> Required for `https` |
|
||||
| `"sslKey"` | Provides an SSL key to serve Storybook. <br/> `"sslKey": "your-ssl-key"` |
|
||||
| `"smokeTest"` | Exit Storybook after successful start. <br/> `"smokeTest": true` |
|
||||
| `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br/> `"ci": true` |
|
||||
| `"quiet"` | Filters Storybook verbose build output. <br/> `"quiet": true` |
|
||||
| `"docsMode"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.md#preview-storybooks-documentation). <br/> `"docsMode": true` |
|
||||
| `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.md#importing-css-files) to be used with Storybook. <br/> `"styles": ["src/styles.css", "src/styles.scss"]` <br/> |
|
||||
| `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br/> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` |
|
||||
|
||||
- For other installation issues, check the [Angular README](../../app/angular/README.md) for additional instructions.
|
||||
@ -13,15 +13,19 @@ Teams publish Storybook online to review and collaborate on works in progress. T
|
||||
|
||||
## Build Storybook as a static web application
|
||||
|
||||
First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured. Run the following command inside your project's root directory:
|
||||
First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured for most supported frameworks. Others require a bit of customization (e.g., Angular). Run the following command inside your project's root directory:
|
||||
|
||||
```shell
|
||||
# With yarn
|
||||
yarn build-storybook
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
# With npm
|
||||
npm run build-storybook
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'angular/custom-build-script-production.script-for-builder.js.mdx',
|
||||
'angular/build-storybook-production-mode.with-builder.js.mdx',
|
||||
'common/build-storybook-production-mode.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
@ -133,4 +137,4 @@ This level of service can serve published Storybooks but has no further integrat
|
||||
|
||||
Examples: [Netlify](https://www.netlify.com/), [S3](https://aws.amazon.com/en/s3/)
|
||||
|
||||
</details>
|
||||
</details>
|
||||
@ -0,0 +1,5 @@
|
||||
```ts
|
||||
// src/polyfills.ts
|
||||
|
||||
import '@angular/localize/init';
|
||||
```
|
||||
@ -0,0 +1,6 @@
|
||||
```shell
|
||||
# Builds Storybook with Angular's custom builder
|
||||
# See https://storybook.js.org/docs/angular/get-started/install
|
||||
# to learn how to create the custom builder
|
||||
ng run my-project:build-storybook
|
||||
```
|
||||
@ -0,0 +1,7 @@
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build-storybook": "ng run my-project:build-storybook"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,3 +0,0 @@
|
||||
```js
|
||||
import '!style-loader!css-loader!./styles.css';
|
||||
```
|
||||
@ -0,0 +1,21 @@
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import docJson from '../documentation.json';
|
||||
|
||||
import '../src/polyfills';
|
||||
|
||||
setCompodocJson(docJson);
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
docs: { inlineStories: true },
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
ng run my-project:storybook
|
||||
```
|
||||
@ -0,0 +1,7 @@
|
||||
```shell
|
||||
# With yarn
|
||||
yarn build-storybook
|
||||
|
||||
# With npm
|
||||
npm run build-storybook
|
||||
```
|
||||
@ -0,0 +1,7 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -2,7 +2,17 @@
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
babel: async (options) => ({
|
||||
// Update your babel configuration here
|
||||
...options,
|
||||
}),
|
||||
framework: '@storybook/react',
|
||||
stories: ['../src/**/*.stories.@(js|mdx)'],
|
||||
addons: ['@storybook/addon-essentials']
|
||||
}
|
||||
```
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
// Make whatever fine-grained changes you need
|
||||
// Return the altered config
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
40
docs/snippets/common/storybook-main-default-setup.ts.mdx
Normal file
40
docs/snippets/common/storybook-main-default-setup.ts.mdx
Normal file
@ -0,0 +1,40 @@
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
|
||||
// Imports the Storybook's configuration API
|
||||
import type { StorybookConfig } from '@storybook/core-common';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
staticDirs: ['../public'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/preset-create-react-app',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
typescript: {
|
||||
check: false,
|
||||
checkOptions: {},
|
||||
reactDocgen: 'react-docgen-typescript',
|
||||
reactDocgenTypescriptOptions: {
|
||||
shouldExtractLiteralValuesFromEnum: true,
|
||||
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
|
||||
},
|
||||
},
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: 'webpack4',
|
||||
},
|
||||
features: {
|
||||
postcss: false,
|
||||
},
|
||||
refs: {
|
||||
'design-system': {
|
||||
title: 'Storybook Design System',
|
||||
url: 'https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com',
|
||||
},
|
||||
},
|
||||
};
|
||||
module.exports = config;
|
||||
```
|
||||
@ -0,0 +1,26 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-viewport',
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
configureJSX: true,
|
||||
babelOptions: {},
|
||||
sourceLoaderOptions: null,
|
||||
transcludeMarkdown: true,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-backgrounds',
|
||||
'@storybook/addon-toolbars',
|
||||
'@storybook/addon-measure',
|
||||
'@storybook/addon-outline',
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,8 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-actions'],
|
||||
};
|
||||
```
|
||||
10
docs/snippets/common/storybook-ts-config-babelrc.js.mdx
Normal file
10
docs/snippets/common/storybook-ts-config-babelrc.js.mdx
Normal file
@ -0,0 +1,10 @@
|
||||
```js
|
||||
// .babelrc
|
||||
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-typescript"
|
||||
]
|
||||
}
|
||||
```
|
||||
30
docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx
Normal file
30
docs/snippets/react/button-story.mdx-with-hooks.mdx.mdx
Normal file
@ -0,0 +1,30 @@
|
||||
```md
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta title="Button" component={Button} />
|
||||
|
||||
<Canvas>
|
||||
<Story name="Primary">
|
||||
{() => {
|
||||
const [value, setValue] = useState('Secondary');
|
||||
const [isPrimary, setIsPrimary] = useState(false);
|
||||
// Sets a click handler to change the label's value
|
||||
const handleOnChange = () => {
|
||||
if (!isPrimary) {
|
||||
setIsPrimary(true);
|
||||
setValue("Primary");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button primary={isPrimary} onClick={handleOnChange} label={value} />
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -13,7 +13,7 @@ export const Template = (args) => <LoginForm {...args} />;
|
||||
|
||||
<Canvas>
|
||||
<Story name="Empty Form">
|
||||
{Template.bind({)}}
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@ -34,4 +34,4 @@ export const Template = (args) => <LoginForm {...args} />;
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
component: Page,
|
||||
};
|
||||
|
||||
const Template = (args) => (args) => (
|
||||
const Template = (args) => (
|
||||
<Page {...args}>
|
||||
<footer>{args.footer}</footer>
|
||||
</Page>
|
||||
@ -24,4 +24,4 @@ export const CustomFooter= Template.bind({});
|
||||
CustomFooter.args = {
|
||||
footer: 'Built with Storybook',
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
@ -41,11 +41,6 @@ module.exports = {
|
||||
type: 'bullet-link',
|
||||
description: 'Take your Storybook skills to the next level',
|
||||
},
|
||||
{
|
||||
title: '📚 Examples',
|
||||
pathSegment: 'examples',
|
||||
type: 'link',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":"6.5.0-alpha.34","info":{"plain":"### Features\n\n* Core: Mock channel if not present ([#17382](https://github.com/storybookjs/storybook/pull/17382))\n\n### Bug Fixes\n\n* CLI: Pin version of `@mdx-js/react` to 1.x.x until we are compatible ([#17395](https://github.com/storybookjs/storybook/pull/17395))"}}
|
||||
{"version":"6.5.0-alpha.39","info":{"plain":"### Features\n\n- CLI: Add addon-interactions to angular template ([#17437](https://github.com/storybookjs/storybook/pull/17437))\n\n### Bug Fixes\n\n- Core: Rename `generated-stories-entry` to `cjs` extension so require works ([#17486](https://github.com/storybookjs/storybook/pull/17486))\n- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))\n- Controls: Fix Boolean control parsing ([#17456](https://github.com/storybookjs/storybook/pull/17456))\n\n### Maintenance\n\n- Fix `ci:matrix` label in CI ([#17457](https://github.com/storybookjs/storybook/pull/17457))\n\n### Dependency Upgrades\n\n- Bump vue-docgen-api to 4.44.15 ([#17465](https://github.com/storybookjs/storybook/pull/17465))"}}
|
||||
@ -38,9 +38,9 @@ Some components require a “harness” to render in a useful way. For instance,
|
||||
|
||||
## “Context” for mocking
|
||||
|
||||
Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fortawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue) may require additional configuration to render correctly in Storybook.
|
||||
Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fortawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue, Angular's [localize](https://angular.io/api/localize)) may require additional configuration to render correctly in Storybook.
|
||||
|
||||
For example, if you're working with Styled Components and your components use a theme, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to provide it. Or with Vue, extend Storybook's application and register your library:
|
||||
For example, if you're working with React's Styled Components and your components use themes, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to enable them. With Vue, extend Storybook's application and register your library. Or with Angular, add the package into your `polyfills.ts` and import it:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -54,12 +54,14 @@ For example, if you're working with Styled Components and your components use a
|
||||
'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
|
||||
'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
|
||||
'vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx',
|
||||
'angular/add-localize-package-to-polyfills.ts.mdx',
|
||||
'angular/storybook-preview-with-angular-polyfills.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In the example above, the values provided are hardcoded. Still, you may want to vary them, either on a per-story basis (i.e., if the values you're providing are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
|
||||
In the example above, the values provided are hardcoded. Still, you may want to vary them, either per-story basis (i.e., if the values you're adding are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
|
||||
|
||||
The second argument to a decorator function is the **story context** which in particular contains the keys:
|
||||
|
||||
@ -87,9 +89,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story-decorator.js.mdx',
|
||||
'react/button-story-decorator.ts.mdx',
|
||||
'react/button-story-decorator.story-function.js.mdx',
|
||||
'react/button-story-decorator.story-function-ts.ts.mdx',
|
||||
'react/button-story-decorator.mdx.mdx',
|
||||
'vue/button-story-decorator.js.mdx',
|
||||
'vue/button-story-decorator.mdx.mdx',
|
||||
@ -156,4 +156,4 @@ All decorators relevant to a story will run in the following order once the stor
|
||||
|
||||
- Global decorators, in the order they are defined
|
||||
- Component decorators, in the order they are defined
|
||||
- Story decorators, in the order they are defined.
|
||||
- Story decorators, in the order they are defined
|
||||
@ -50,7 +50,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
|
||||
paths={[
|
||||
'react/button-story.js.mdx',
|
||||
'react/button-story.ts.mdx',
|
||||
'react/button-story.with-hooks.js.mdx',
|
||||
'vue/button-story.js.mdx',
|
||||
'angular/button-story.ts.mdx',
|
||||
'svelte/button-story.js.mdx',
|
||||
@ -61,10 +60,23 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Working with React Hooks
|
||||
|
||||
[React Hooks](https://reactjs.org/docs/hooks-intro.html) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/button-story.with-hooks.js.mdx',
|
||||
'react/button-story.mdx-with-hooks.mdx.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We <strong>recommend</strong> using [args](./args.md) as much as possible when writing your own stories.
|
||||
|
||||
💡 The recommendation mentioned above also applies to other frameworks not only React.
|
||||
</div>
|
||||
|
||||
### Rename stories
|
||||
@ -322,4 +334,4 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
|
||||
|
||||
💡 Note that there are disadvantages in writing stories like this as you cannot take full advantage of the args mechanism and composing args as you build even more complex composite components. For more discussion, see the [multi component stories](../writing-stories/stories-for-multiple-components.md) workflow documentation.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -10,7 +10,7 @@ Ideal for verifying what the user sees: layout, color, size, and contrast. Story
|
||||
|
||||
There are [many tools](https://github.com/mojoaxel/awesome-regression-testing) for visual testing. We recommend [Chromatic](https://www.chromatic.com) by Storybook maintainers to run visual tests in a lightning-fast cloud browser environment.
|
||||
|
||||
For a self-managed alternative to Chromatic, we offer [StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots). It allows you to run visual tests on stories by integrating with [jest-image-snapshot](https://github.com/storybookjs/storybook/tree/master/addons/storyshots#configure-storyshots-for-image-snapshots).
|
||||
For a self-managed alternative to Chromatic, we offer [StoryShots](https://github.com/storybookjs/storybook/tree/main/addons/storyshots). It allows you to run visual tests on stories by integrating with [jest-image-snapshot](https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-puppeteer#imagesnapshots).
|
||||
|
||||
## Setup Chromatic addon
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -39,21 +39,21 @@
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/elements": "^11.2.14",
|
||||
"@compodoc/compodoc": "^1.1.18",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/angular": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/angular": "6.5.0-alpha.39",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
|
||||
@ -112,12 +112,7 @@ exports[`Storyshots Addons/Interactions Filled 1`] = `
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
hidden=""
|
||||
role="status"
|
||||
/>
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -296,12 +291,7 @@ exports[`Storyshots Addons/Interactions Invalid Fields 1`] = `
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
hidden=""
|
||||
role="status"
|
||||
/>
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -480,12 +470,7 @@ exports[`Storyshots Addons/Interactions Standard 1`] = `
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
hidden=""
|
||||
role="status"
|
||||
/>
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -664,12 +649,7 @@ exports[`Storyshots Addons/Interactions Submitted 1`] = `
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
hidden=""
|
||||
role="status"
|
||||
/>
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -848,12 +828,7 @@ exports[`Storyshots Addons/Interactions Submitted And Edited After 1`] = `
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
hidden=""
|
||||
role="status"
|
||||
/>
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,270 @@
|
||||
@import url('https://unpkg.com/bootstrap@4.4/dist/css/bootstrap.min.css');
|
||||
|
||||
.ng-valid[required], .ng-valid.required {
|
||||
border-left: 5px solid #42A948;
|
||||
.ng-valid[required],
|
||||
.ng-valid.required {
|
||||
border-left: 5px solid #42a948;
|
||||
}
|
||||
|
||||
.ng-invalid:not(form) {
|
||||
.ng-invalid:not(form) {
|
||||
border-left: 5px solid #a94442;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.container,
|
||||
.container-sm {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
.form-control:focus {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-success.disabled,
|
||||
.btn-success:disabled {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
.btn-primary {
|
||||
margin-top: 0.37rem;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.25em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: spinner-border 0.75s linear infinite;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
.spinner-border-sm {
|
||||
margin-left: 0.5rem !important;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.2em;
|
||||
}
|
||||
@keyframes spinner-border {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.font-weight-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.col,
|
||||
.col-1,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-auto,
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-auto,
|
||||
.col-md,
|
||||
.col-md-1,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-auto,
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-auto,
|
||||
.col-xl,
|
||||
.col-xl-1,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-auto {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm-3 {
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-sm-9 {
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">
|
||||
Submit
|
||||
<span [hidden]="!submitting" class="spinner-border spinner-border-sm ml-2" role="status" aria-hidden="true"></span>
|
||||
<span *ngIf="submitting" class="spinner-border spinner-border-sm ml-2" role="status" aria-hidden="true"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,19 +21,19 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-react15",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -19,14 +19,14 @@
|
||||
"react-scripts": "3.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"babel-core": "6",
|
||||
"babel-runtime": "6",
|
||||
"webpack": "4"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -25,8 +25,8 @@
|
||||
"dependencies": {
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "16.9.10",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
@ -34,12 +34,12 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.34",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.39",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -25,8 +25,8 @@
|
||||
"dependencies": {
|
||||
"@types/jest": "25.2.3",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/react": "16.14.2",
|
||||
"@types/react-dom": "16.9.10",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
@ -34,15 +34,15 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.9.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "ember build --output-path ember-output",
|
||||
@ -17,18 +17,18 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/ember": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/ember": "6.5.0-alpha.39",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"babel-loader": "^8.0.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -13,23 +13,23 @@
|
||||
"storybook": "start-storybook -p 9006 --no-manager-cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/client-api": "6.5.0-alpha.34",
|
||||
"@storybook/core": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/html": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/client-api": "6.5.0-alpha.39",
|
||||
"@storybook/core": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/html": "6.5.0-alpha.39",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"format-json": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -14,31 +14,31 @@
|
||||
"devDependencies": {
|
||||
"@packtracker/webpack-plugin": "^2.3.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/cli": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-jest": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-toolbars": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/cli": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/design-system": "^5.4.7",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/router": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/router": "6.5.0-alpha.39",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"chromatic": "^6.0.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "preact-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -15,16 +15,16 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-transform-runtime": "^7.12.10",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/preact": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/preact": "6.5.0-alpha.39",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": "^17",
|
||||
"@types/react-dom": "^17",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts-webpack4",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -8,12 +8,12 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.34",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "^16.9.10",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.39",
|
||||
"@storybook/builder-webpack4": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"prop-types": "15.7.2",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
|
||||
@ -18,18 +18,18 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/cli": "6.5.0-alpha.34",
|
||||
"@storybook/components": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/cli": "6.5.0-alpha.39",
|
||||
"@storybook/components": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"@types/babel__preset-env": "^7",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "^16.9.10",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"cross-env": "^7.0.3",
|
||||
"typescript": "^3.9.7",
|
||||
"webpack": "4"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "server-kitchen-sink",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,13 +14,13 @@
|
||||
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/node-logger": "6.5.0-alpha.34",
|
||||
"@storybook/server": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/node-logger": "6.5.0-alpha.39",
|
||||
"@storybook/server": "6.5.0-alpha.39",
|
||||
"concurrently": "^5.3.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "~4.17.1",
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "standalone-preview",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
|
||||
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/cli": "6.5.0-alpha.34",
|
||||
"@storybook/react": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/cli": "6.5.0-alpha.39",
|
||||
"@storybook/react": "6.5.0-alpha.39",
|
||||
"cross-env": "^7.0.3",
|
||||
"parcel": "2.0.1",
|
||||
"react": "16.14.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svelte-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook",
|
||||
@ -10,20 +10,20 @@
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/svelte": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/svelte": "6.5.0-alpha.39",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"svelte-jester": "1.3.0",
|
||||
"svelte-preprocess": "4.6.8"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-3-cli-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -14,14 +14,14 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.34",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.39",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/vue3": "6.5.0-alpha.34",
|
||||
"@storybook/vue3": "6.5.0-alpha.39",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-cli-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -15,11 +15,11 @@
|
||||
"vue-property-decorator": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-essentials": "6.5.0-alpha.39",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@vue/cli-plugin-babel": "~4.3.1",
|
||||
"@vue/cli-plugin-typescript": "~4.3.1",
|
||||
"@vue/cli-service": "~4.3.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -14,21 +14,21 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.34",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.34",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.34",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.34",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.34",
|
||||
"@storybook/addon-links": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.34",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.34",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.34",
|
||||
"@storybook/addons": "6.5.0-alpha.34",
|
||||
"@storybook/addon-a11y": "6.5.0-alpha.39",
|
||||
"@storybook/addon-actions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "6.5.0-alpha.39",
|
||||
"@storybook/addon-controls": "6.5.0-alpha.39",
|
||||
"@storybook/addon-docs": "6.5.0-alpha.39",
|
||||
"@storybook/addon-interactions": "6.5.0-alpha.39",
|
||||
"@storybook/addon-links": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "6.5.0-alpha.39",
|
||||
"@storybook/addon-storysource": "6.5.0-alpha.39",
|
||||
"@storybook/addon-viewport": "6.5.0-alpha.39",
|
||||
"@storybook/addons": "6.5.0-alpha.39",
|
||||
"@storybook/jest": "^0.0.5",
|
||||
"@storybook/source-loader": "6.5.0-alpha.34",
|
||||
"@storybook/source-loader": "6.5.0-alpha.39",
|
||||
"@storybook/testing-library": "^0.0.7",
|
||||
"@storybook/vue": "6.5.0-alpha.34",
|
||||
"@storybook/vue": "6.5.0-alpha.39",
|
||||
"@vue/babel-preset-jsx": "^1.2.4",
|
||||
"babel-loader": "^8.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-components-kitchen-sink",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "6.5.0-alpha.34"
|
||||
"version": "6.5.0-alpha.39"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -40,13 +40,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/api": "6.5.0-alpha.34",
|
||||
"@storybook/channels": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/api": "6.5.0-alpha.39",
|
||||
"@storybook/channels": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/router": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/router": "6.5.0-alpha.39",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -59,6 +59,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/public_api.js"
|
||||
}
|
||||
|
||||
57
lib/addons/src/hooks.test.js
Normal file
57
lib/addons/src/hooks.test.js
Normal file
@ -0,0 +1,57 @@
|
||||
import { useParameter, useStoryContext } from './hooks';
|
||||
|
||||
const { window: globalWindow } = global;
|
||||
|
||||
describe('addons/hooks', () => {
|
||||
beforeEach(() => {
|
||||
globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
|
||||
});
|
||||
|
||||
describe('useStoryContext', () => {
|
||||
test('should throw', () => {
|
||||
expect(() => useStoryContext()).toThrowError(
|
||||
'Storybook preview hooks can only be called inside decorators and story functions.'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('useParameter', () => {
|
||||
beforeEach(() => {
|
||||
globalWindow.STORYBOOK_HOOKS_CONTEXT = {
|
||||
currentContext: {
|
||||
parameters: {
|
||||
'undefined key': undefined,
|
||||
'null key': null,
|
||||
'false key': false,
|
||||
'zero key': 0,
|
||||
'object key': { defined: true },
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
test('undefined key', () => {
|
||||
expect(useParameter('undefined key', 'undefined default')).toEqual('undefined default');
|
||||
});
|
||||
|
||||
test('null key', () => {
|
||||
expect(useParameter('null key', 'null default')).toEqual('null default');
|
||||
});
|
||||
|
||||
test('false key', () => {
|
||||
expect(useParameter('false key', 'false default')).toEqual(false);
|
||||
});
|
||||
|
||||
test('zero key', () => {
|
||||
expect(useParameter('zero key', 'zero default')).toEqual(0);
|
||||
});
|
||||
|
||||
test('object key', () => {
|
||||
expect(useParameter('object key', 'object default')).toMatchObject({ defined: true });
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -418,7 +418,7 @@ export function useStoryContext<TFramework extends AnyFramework>(): StoryContext
|
||||
export function useParameter<S>(parameterKey: string, defaultValue?: S): S | undefined {
|
||||
const { parameters } = useStoryContext();
|
||||
if (parameterKey) {
|
||||
return parameters[parameterKey] || (defaultValue as S);
|
||||
return parameters[parameterKey] ?? (defaultValue as S);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/api",
|
||||
"version": "6.5.0-alpha.34",
|
||||
"version": "6.5.0-alpha.39",
|
||||
"description": "Core Storybook API & Context",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -38,13 +38,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "6.5.0-alpha.34",
|
||||
"@storybook/client-logger": "6.5.0-alpha.34",
|
||||
"@storybook/core-events": "6.5.0-alpha.34",
|
||||
"@storybook/channels": "6.5.0-alpha.39",
|
||||
"@storybook/client-logger": "6.5.0-alpha.39",
|
||||
"@storybook/core-events": "6.5.0-alpha.39",
|
||||
"@storybook/csf": "0.0.2--canary.87bc651.0",
|
||||
"@storybook/router": "6.5.0-alpha.34",
|
||||
"@storybook/router": "6.5.0-alpha.39",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@storybook/theming": "6.5.0-alpha.34",
|
||||
"@storybook/theming": "6.5.0-alpha.39",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -71,6 +71,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
|
||||
"gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
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