mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 07:21:17 +08:00
Merge branch 'next' into feat/support-custom-elements-manifest-v1
This commit is contained in:
Gaëtan Maisse
commit
14d14297a5
@ -176,7 +176,7 @@ jobs:
|
||||
condition:
|
||||
and:
|
||||
- not:
|
||||
equal: [master, << pipeline.git.branch >>]
|
||||
equal: [main, << pipeline.git.branch >>]
|
||||
- not:
|
||||
equal: [next, << pipeline.git.branch >>]
|
||||
steps:
|
||||
|
||||
@ -19,7 +19,7 @@ changeBuildType(RelativeId("TestWorkflow")) {
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:master
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
|
||||
4
.teamcity/settings.kts
vendored
4
.teamcity/settings.kts
vendored
@ -426,7 +426,7 @@ object Frontpage : BuildType({
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:.teamcity/**"
|
||||
branchFilter = "+:master"
|
||||
branchFilter = "+:main"
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -518,7 +518,7 @@ object TestWorkflow : BuildType({
|
||||
branchFilter = """
|
||||
+:<default>
|
||||
+:next
|
||||
+:master
|
||||
+:main
|
||||
+:pull/*
|
||||
""".trimIndent()
|
||||
}
|
||||
|
||||
102
CHANGELOG.md
102
CHANGELOG.md
@ -1,3 +1,105 @@
|
||||
## 6.4.0-alpha.7 (June 29, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF: Generate default titles based on file path ([#15376](https://github.com/storybookjs/storybook/pull/15376))
|
||||
|
||||
## 6.4.0-alpha.6 (June 29, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Fix decorator context update ([#15408](https://github.com/storybookjs/storybook/pull/15408))
|
||||
- Revert "Vue3: Update args without re-mounting component" ([#15409](https://github.com/storybookjs/storybook/pull/15409))
|
||||
|
||||
## 6.4.0-alpha.5 (June 29, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CSF: Add stories.json generation for CSF3 stories ([#15395](https://github.com/storybookjs/storybook/pull/15395))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Essentials: Update measure and outline. Fix alt+tab issues on windows. ([#15402](https://github.com/storybookjs/storybook/pull/15402))
|
||||
|
||||
## 6.3.1 (June 28, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Only use dotenv-webpack when a user has a dotenv file ([#15365](https://github.com/storybookjs/storybook/pull/15365))
|
||||
- Essentials: Update addon measure and outline ([#15354](https://github.com/storybookjs/storybook/pull/15354))
|
||||
- Actions: Don't override existing action args ([#15394](https://github.com/storybookjs/storybook/pull/15394))
|
||||
- Svelte: Fix argType.type.name extraction ([#15332](https://github.com/storybookjs/storybook/pull/15332))
|
||||
- CSF3: Genericize feature flagging and fix webpack5 ([#15375](https://github.com/storybookjs/storybook/pull/15375))
|
||||
- Webpack5: Fix warnings typo ([#15374](https://github.com/storybookjs/storybook/pull/15374))
|
||||
- UI: Fix navigation after no story error ([#15349](https://github.com/storybookjs/storybook/pull/15349))
|
||||
- CSF3: Rename setup to play ([#15358](https://github.com/storybookjs/storybook/pull/15358))
|
||||
- Upgrade dotenv-webpack to 7.0.x ([#15343](https://github.com/storybookjs/storybook/pull/15343))
|
||||
|
||||
## 6.4.0-alpha.4 (June 28, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Actions: Don't override existing action args ([#15394](https://github.com/storybookjs/storybook/pull/15394))
|
||||
|
||||
## 6.4.0-alpha.3 (June 26, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- CSF3: Genericize feature flagging and fix webpack5 ([#15375](https://github.com/storybookjs/storybook/pull/15375))
|
||||
- Webpack5: Fix warnings typo ([#15374](https://github.com/storybookjs/storybook/pull/15374))
|
||||
|
||||
## 6.4.0-alpha.2 (June 25, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Core: Only use dotenv-webpack when a user has a dotenv file ([#15365](https://github.com/storybookjs/storybook/pull/15365))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- CSF3: Rename setup to play ([#15358](https://github.com/storybookjs/storybook/pull/15358))
|
||||
|
||||
## 6.4.0-alpha.1 (June 25, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Essentials: Update addon measure and outline ([#15354](https://github.com/storybookjs/storybook/pull/15354))
|
||||
- UI: Fix navigation after no story error ([#15349](https://github.com/storybookjs/storybook/pull/15349))
|
||||
|
||||
## 6.4.0-alpha.0 (June 24, 2021)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Svelte: Fix argType.type.name extraction ([#15332](https://github.com/storybookjs/storybook/pull/15332))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
- Upgrade dotenv-webpack to 7.0.x ([#15343](https://github.com/storybookjs/storybook/pull/15343))
|
||||
|
||||
## 6.3.0 (June 23, 2021)
|
||||
|
||||
**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**
|
||||
|
||||
SB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:
|
||||
|
||||
- 📐 Layout debugging with Measure and Outline addons
|
||||
- 🔌 Reuse your stories in unit tests: Jest, Cypress & more
|
||||
- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components
|
||||
- 🛠 Builders: Webpack5 stable, Vite community
|
||||
- 📦 Packaging: Modern ESM
|
||||
|
||||
It also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions.
|
||||
|
||||
## 6.3.0-rc.12 (June 23, 2021)
|
||||
|
||||
### Features
|
||||
|
||||
- CLI: Update types in React typescript templates ([#15292](https://github.com/storybookjs/storybook/pull/15292))
|
||||
|
||||
### Maintenance
|
||||
|
||||
- Yarn: Disable unnecessary builds ([#15299](https://github.com/storybookjs/storybook/pull/15299))
|
||||
- Toolbars: Add missing `regenerator-runtime` dependency ([#15312](https://github.com/storybookjs/storybook/pull/15312))
|
||||
|
||||
## 6.3.0-rc.11 (June 18, 2021)
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<h1>Contributing to Storybook</h1>
|
||||
|
||||
- [Issues](#issues)
|
||||
- [Testing against `master`](#testing-against-master)
|
||||
- [Testing against `main`](#testing-against-main)
|
||||
- [1. Download the latest version of this project, and build it:](#1-download-the-latest-version-of-this-project-and-build-it)
|
||||
- [2a. Run unit tests](#2a-run-unit-tests)
|
||||
- [Core & Examples Tests](#core--examples-tests)
|
||||
@ -53,7 +53,7 @@ No software is bug-free. So, if you got an issue, follow these steps:
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
|
||||
### Testing against `master`
|
||||
### Testing against `main`
|
||||
|
||||
To test your project against the current latest version of storybook, you can clone the repository and link it with `yarn`. Try following these steps:
|
||||
|
||||
@ -145,7 +145,7 @@ Then run `yarn cypress open` if you want to see the tests run in the UI, or `yar
|
||||
|
||||
#### In the monorepo
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `main` branch.
|
||||
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
|
||||
@ -222,9 +222,9 @@ Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if
|
||||
|
||||
### Reviewing PRs
|
||||
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/main/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access then you can merge the PR after making those changes.
|
||||
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `master` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
> **_Note:_** Although the latest stable version of storybook corresponds to the `main` branch, nearly all Storybook development happens in the `next` branch. If you submit a PR, branch off `next` and target your PR to `next`.
|
||||
|
||||
**As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
|
||||
|
||||
@ -234,7 +234,7 @@ If you are looking for a way to help the project, triaging issues is a great pla
|
||||
|
||||
### Responding to issues
|
||||
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone who has a similar question. Also in the future if anyone has that same question they can easily find it by searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/main/CONTRIBUTING.md#reproductions).
|
||||
|
||||
### Triaging issues
|
||||
|
||||
@ -385,7 +385,7 @@ This section is for Storybook maintainers who will be creating releases. It assu
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Push the changelog to main or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the [GitHub release page](https://github.com/storybookjs/storybook/releases), and mark it as a (pre-) release
|
||||
|
||||
@ -428,8 +428,8 @@ open https://github.com/storybookjs/storybook/releases
|
||||
#### Full release:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout master
|
||||
# make sure you current with origin/main.
|
||||
git checkout main
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
|
||||
@ -58,9 +58,9 @@ This document outlines some of the processes that the maintainers should adhere
|
||||
| nx | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/) |
|
||||
| other | Storybook's miscellaneous issue or pull request |
|
||||
| P(n) | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent) |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the master branch |
|
||||
| patch | Bug fix and documentation pull request that will be picked to the main branch |
|
||||
| performance issue | Issue, bug or pull request that affects Storybook's performance |
|
||||
| picked | Patch PRs cherry-picked to the master branch |
|
||||
| picked | Patch PRs cherry-picked to the main branch |
|
||||
| presets | Issue, bug, or pull requests that affect Storybook's presets |
|
||||
| question / support | General question about Storybook |
|
||||
| run e2e extended test suite | Pull request that affects Storybook's testing suite |
|
||||
|
||||
@ -263,7 +263,7 @@ Several URL params to control the manager layout have been deprecated and will b
|
||||
- `panelRight=1`: use `panel=right` instead
|
||||
- `stories=0`: use `nav=false` instead
|
||||
|
||||
Additionally, support for legacy URLs using `selectedKind` and `selectedStory` will be removed in 7.0 . Use `path` instead.
|
||||
Additionally, support for legacy URLs using `selectedKind` and `selectedStory` will be removed in 7.0. Use `path` instead.
|
||||
|
||||
## From version 6.1.x to 6.2.0
|
||||
|
||||
|
||||
64
README.md
64
README.md
@ -19,9 +19,9 @@
|
||||
<img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" />
|
||||
</a>
|
||||
<a href="https://codecov.io/gh/storybookjs/storybook">
|
||||
<img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" />
|
||||
<img src="https://codecov.io/gh/storybookjs/storybook/branch/main/graph/badge.svg" alt="codecov" />
|
||||
</a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/LICENSE">
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" />
|
||||
</a>
|
||||
<br/>
|
||||
@ -46,12 +46,12 @@
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/media/storybook-intro.gif" width="100%" />
|
||||
</center>
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
</p>
|
||||
|
||||
@ -92,23 +92,23 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| ----------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.2.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.2.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.2.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.2.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.2.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.2.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.2.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.2.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.2.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.2.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](app/riot) | [v6.2.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](app/rax) | [v6.2.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.2.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.3.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.3.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.3.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.3.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](app/react-native) |
|
||||
| [HTML](app/html) | [v6.3.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.3.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.3.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.3.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v6.3.x](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v6.3.x](https://storybookjs.netlify.com/marko-cli/) | [](app/marko) |
|
||||
| [Riot](app/riot) | [v6.3.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [](app/riot) |
|
||||
| [Rax](app/rax) | [v6.3.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [](app/rax) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.3.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -118,7 +118,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
### Addons
|
||||
|
||||
| Addons | |
|
||||
|---------------------------------------------------------------------------|----------------------------------------------------------------------------|
|
||||
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
@ -139,13 +139,13 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
|
||||
|
||||
### Deprecated Addons
|
||||
|
||||
| Addons | |
|
||||
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------|
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI|
|
||||
| Addons | |
|
||||
| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| [info](https://github.com/storybookjs/deprecated-addons/tree/main/addons/info) | Annotate stories with extra component usage information |
|
||||
| [notes](https://github.com/storybookjs/deprecated-addons/tree/main/addons/notes) | Annotate Storybook stories with notes |
|
||||
| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/) | Addon for driving your components under dynamic contexts |
|
||||
| [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code |
|
||||
| [knobs](https://github.com/storybookjs/addon-knobs) | Interactively edit component prop data in the Storybook UI |
|
||||
|
||||
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
|
||||
|
||||
@ -157,10 +157,10 @@ If you're using contexts, we highly recommend you to migrate to [toolbars](https
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
|
||||
|
||||
|
||||
```md
|
||||
[](link to site)
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [brand repo](https://github.com/storybookjs/brand).
|
||||
@ -279,6 +279,6 @@ Support us with a monthly donation and help us continue our activities. \[[Becom
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/master/LICENSE)
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)
|
||||
|
||||
-the end-
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
A Storybook release process based on [Semver](http://semver.org/). In short:
|
||||
|
||||
1. Merge all PRs into `next`, which is the default branch. Cherry-pick bugfix PRs into `master`, which is the stable release.
|
||||
1. Merge all PRs into `next`, which is the default branch. Cherry-pick bugfix PRs into `main`, which is the stable release.
|
||||
|
||||
2. Every week: release patch releases off `master` to the NPM tag `latest`, and alpha releases off `next` to the NPM tag `next` (as e.g. `4.1.0-alpha.0`).
|
||||
2. Every week: release patch releases off `main` to the NPM tag `latest`, and alpha releases off `next` to the NPM tag `next` (as e.g. `4.1.0-alpha.0`).
|
||||
|
||||
3. Every month or two, merge `next` into `master` and release a minor/major version according to `semver`. We set minor release dates as soon as we have feature clarity and manage to those dates:
|
||||
3. Every month or two, merge `next` into `main` and release a minor/major version according to `semver`. We set minor release dates as soon as we have feature clarity and manage to those dates:
|
||||
- Date should be a Monday so if we slip we don't get pushed into the weekend
|
||||
- T-3wk:
|
||||
- Draft announcement and socialize
|
||||
@ -48,7 +48,7 @@ releases. We'll try our best to restrict breaking changes to MAJOR releases.
|
||||
Every bugfix should go out as soon as we've verified the fix, and based on the
|
||||
current rate of contribution, we should be issuing PATCH releases weekly.
|
||||
Eventually, we'll automate the process so that a release will go out every time a PR is
|
||||
merged into `master`, and we've already laid most of the groundwork for this.
|
||||
merged into `main`, and we've already laid most of the groundwork for this.
|
||||
|
||||
## MINOR releases
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -45,14 +45,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/channels": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/channels": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"axe-core": "^4.2.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,7 +81,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
|
||||
@ -8,6 +8,7 @@ describe('actions parameter enhancers', () => {
|
||||
|
||||
it('should add actions that match a pattern', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
@ -17,25 +18,41 @@ describe('actions parameter enhancers', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should override pre-existing argTypes', () => {
|
||||
it('should NOT override pre-existing args', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: 'pre-existing value' },
|
||||
argTypes,
|
||||
parameters,
|
||||
argTypes: {
|
||||
onClick: { defaultValue: 'pre-existing value' },
|
||||
},
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
});
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: null },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({ onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: { onClick: undefined },
|
||||
argTypes,
|
||||
parameters,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
const args = inferActionsFromArgTypesRegex(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters: {
|
||||
...parameters,
|
||||
actions: { ...parameters.actions, disable: true },
|
||||
},
|
||||
argTypes,
|
||||
} as unknown) as StoryContext);
|
||||
expect(args).toEqual({});
|
||||
});
|
||||
@ -48,16 +65,47 @@ describe('actions parameter enhancers', () => {
|
||||
};
|
||||
it('should add actions based on action.args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({ argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
addActionsFromArgTypes(({ args: {}, argTypes, parameters: {} } as unknown) as StoryContext)
|
||||
).toEqual({
|
||||
onClick: expect.any(Function),
|
||||
onBlur: expect.any(Function),
|
||||
});
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: 'pre-existing value' },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should NOT override pre-existing args, if null', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: null },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it('should override pre-existing args, if undefined', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
argTypes: { onClick: { action: 'clicked!' } },
|
||||
args: { onClick: undefined },
|
||||
parameters: {},
|
||||
} as unknown) as StoryContext)
|
||||
).toEqual({ onClick: expect.any(Function) });
|
||||
});
|
||||
|
||||
it('should do nothing if actions are disabled', () => {
|
||||
expect(
|
||||
addActionsFromArgTypes(({
|
||||
args: {},
|
||||
argTypes,
|
||||
parameters: { actions: { disable: true } },
|
||||
} as unknown) as StoryContext)
|
||||
|
||||
@ -14,8 +14,9 @@ import { action } from '../index';
|
||||
|
||||
export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
parameters: { actions },
|
||||
args,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
|
||||
return {};
|
||||
@ -27,7 +28,9 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
);
|
||||
|
||||
return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(name);
|
||||
if (typeof args[name] === 'undefined') {
|
||||
acc[name] = action(name);
|
||||
}
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
@ -37,6 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
|
||||
*/
|
||||
export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const {
|
||||
args,
|
||||
argTypes,
|
||||
parameters: { actions },
|
||||
} = context;
|
||||
@ -47,7 +51,9 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
|
||||
const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
|
||||
|
||||
return argTypesWithAction.reduce((acc, [name, argType]) => {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
if (typeof args[name] === 'undefined') {
|
||||
acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
|
||||
}
|
||||
return acc;
|
||||
}, {} as Args);
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
|
||||
@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to
|
||||
|
||||
### How do I migrate from addon-knobs?
|
||||
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) you should consider migrating to Controls.
|
||||
If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
|
||||
|
||||
You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
|
||||
|
||||
@ -90,7 +90,7 @@ export const Reflow = () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
|
||||
|
||||
@ -98,24 +98,24 @@ And again, as above, this can be rewritten using [fully custom args](https://sto
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
<>
|
||||
{[...Array(count)].map((_, i) => (
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
<Button key={i} label={`${label} ${i}`} {...args} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow'
|
||||
Reflow.args = {
|
||||
count: 3,
|
||||
label: 'reflow',
|
||||
};
|
||||
|
||||
Reflow.argTypes = {
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20
|
||||
}
|
||||
}
|
||||
count: {
|
||||
control: {
|
||||
type: 'range',
|
||||
min: 0,
|
||||
max: 20,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/hero.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs
|
||||
@ -34,7 +34,7 @@ When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage
|
||||
Click on the `Docs` tab to see it:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).
|
||||
@ -70,7 +70,7 @@ markdown documentation.
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,20 +63,20 @@
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/csf-tools": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/postinstall": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/csf-tools": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@storybook/postinstall": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"acorn": "^7.4.1",
|
||||
"acorn-jsx": "^5.3.1",
|
||||
"acorn-walk": "^7.2.0",
|
||||
@ -104,10 +104,10 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@emotion/core": "^10.1.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/angular": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/web-components": "6.3.0-rc.11",
|
||||
"@storybook/angular": "6.4.0-alpha.7",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@storybook/web-components": "6.4.0-alpha.7",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/doctrine": "^0.0.3",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
@ -137,10 +137,10 @@
|
||||
"zone.js": "^0.11.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/angular": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/vue3": "6.3.0-rc.11",
|
||||
"@storybook/web-components": "6.3.0-rc.11",
|
||||
"@storybook/angular": "6.4.0-alpha.7",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@storybook/vue3": "6.4.0-alpha.7",
|
||||
"@storybook/web-components": "6.4.0-alpha.7",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -191,7 +191,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
|
||||
@ -102,8 +102,8 @@ describe('Extracting Arguments', () => {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "boolean",
|
||||
"required": false,
|
||||
"summary": "boolean",
|
||||
},
|
||||
},
|
||||
"slot_default": Object {
|
||||
@ -134,8 +134,8 @@ describe('Extracting Arguments', () => {
|
||||
},
|
||||
},
|
||||
"type": Object {
|
||||
"name": "string",
|
||||
"required": false,
|
||||
"summary": "string",
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
|
||||
description: item.description,
|
||||
type: {
|
||||
required: hasKeyword('required', item.keywords),
|
||||
summary: item.type?.text,
|
||||
name: item.type?.text,
|
||||
},
|
||||
table: {
|
||||
type: {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,31 +39,31 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-measure": "^1.2.3",
|
||||
"@storybook/addon-toolbars": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-measure": "^2.0.0",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"storybook-addon-outline": "^1.3.3",
|
||||
"storybook-addon-outline": "^1.4.1",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/webpack-env": "^1.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/web-components": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@storybook/web-components": "6.4.0-alpha.7",
|
||||
"babel-loader": "^8.0.0",
|
||||
"lit-html": "^1.4.1 || ^2.0.0-rc.3",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -93,6 +93,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js"
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Brings Jest results in storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
@ -184,7 +184,7 @@ addDecorator(
|
||||
);
|
||||
```
|
||||
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/master/examples/angular-cli)
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/main/examples/angular-cli)
|
||||
|
||||
## TODO
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -47,11 +47,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
@ -76,7 +76,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -16,41 +16,40 @@ within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-links']
|
||||
}
|
||||
addons: ['@storybook/addon-links'],
|
||||
};
|
||||
```
|
||||
|
||||
Then you can import `linkTo` in your stories and use like this:
|
||||
|
||||
```js
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<button onClick={linkTo('Button', 'second')}>Go to "Second"</button>
|
||||
);
|
||||
export const second = () => (
|
||||
<button onClick={linkTo('Button', 'first')}>Go to "First"</button>
|
||||
);
|
||||
export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
|
||||
export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;
|
||||
```
|
||||
|
||||
Have a look at the linkTo function:
|
||||
|
||||
```js
|
||||
import { linkTo } from '@storybook/addon-links'
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
linkTo('Toggle', 'off')
|
||||
linkTo(() => 'Toggle', () => 'off')
|
||||
linkTo('Toggle') // Links to the first story in the 'Toggle' kind
|
||||
linkTo('Toggle', 'off');
|
||||
linkTo(
|
||||
() => 'Toggle',
|
||||
() => 'off'
|
||||
);
|
||||
linkTo('Toggle'); // Links to the first story in the 'Toggle' kind
|
||||
```
|
||||
|
||||
With that, you can link an event in a component to any story in the Storybook.
|
||||
|
||||
- First parameter is the story kind name (what you named with `title`).
|
||||
- Second (optional) parameter is the story name (what you named with `exported name`).
|
||||
- Second (optional) parameter is the story name (what you named with `exported name`).
|
||||
If the second parameter is omitted, the link will point to the first story in the given kind.
|
||||
|
||||
You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:
|
||||
@ -63,22 +62,16 @@ export default {
|
||||
};
|
||||
|
||||
export const index = () => (
|
||||
<select value="Index" onChange={linkTo('Select', e => e.currentTarget.value)}>
|
||||
<select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
|
||||
<option>index</option>
|
||||
<option>first</option>
|
||||
<option>second</option>
|
||||
<option>third</option>
|
||||
</select>
|
||||
);
|
||||
export const first = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
);
|
||||
export const second = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
);
|
||||
export const third = () => (
|
||||
<LinkTo story="index">Go back</LinkTo>
|
||||
</select>
|
||||
);
|
||||
export const first = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
export const second = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
export const third = () => <LinkTo story="index">Go back</LinkTo>;
|
||||
```
|
||||
|
||||
## hrefTo function
|
||||
@ -106,7 +99,7 @@ export const log = () => {
|
||||
Here is an example in React, but it works with any framework:
|
||||
|
||||
```js
|
||||
import { withLinks } from '@storybook/addon-links'
|
||||
import { withLinks } from '@storybook/addon-links';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
@ -114,7 +107,9 @@ export default {
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<button data-sb-kind="OtherKind" data-sb-story="otherStory">Go to "OtherStory"</button>
|
||||
<button data-sb-kind="OtherKind" data-sb-story="otherStory">
|
||||
Go to "OtherStory"
|
||||
</button>
|
||||
);
|
||||
```
|
||||
|
||||
@ -130,12 +125,8 @@ export default {
|
||||
title: 'Link',
|
||||
};
|
||||
|
||||
export const first = () => (
|
||||
<LinkTo story="second">Go to Second</LinkTo>
|
||||
);
|
||||
export const second = () => (
|
||||
<LinkTo story="first">Go to First</LinkTo>
|
||||
);
|
||||
export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
|
||||
export const second = () => <LinkTo story="first">Go to First</LinkTo>;
|
||||
```
|
||||
|
||||
It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.
|
||||
@ -146,8 +137,10 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
|
||||
story="off"
|
||||
target="_blank"
|
||||
title="link to second story"
|
||||
style={{color: '#1474f3'}}
|
||||
>Go to Second</LinkTo>
|
||||
style={{ color: '#1474f3' }}
|
||||
>
|
||||
Go to Second
|
||||
</LinkTo>
|
||||
```
|
||||
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/addons/links/src/react/components/RoutedLink.js#L20-L24) for reference.
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/main/addons/links/src/react/components/RoutedLink.js#L20-L24) for reference.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "6.3.0-rc.11",
|
||||
"@storybook/router": "6.4.0-alpha.7",
|
||||
"@types/qs": "^6.9.5",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,7 +72,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,10 +45,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -67,11 +67,11 @@
|
||||
"devDependencies": {
|
||||
"@angular/core": "^11.2.0",
|
||||
"@angular/platform-browser-dynamic": "^11.2.0",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/angular": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/vue3": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/angular": "6.4.0-alpha.7",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@storybook/vue3": "6.4.0-alpha.7",
|
||||
"babel-loader": "^8.2.2",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -149,7 +149,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -177,7 +177,7 @@ Those can be customized with `setupTimeout` and `testTimeout` parameters.
|
||||
### Integrate Puppeteer storyshots with regular app
|
||||
|
||||
You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/master/examples/official-storybook) example.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/main/examples/official-storybook) example.
|
||||
|
||||
### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
|
||||
|
||||
@ -326,6 +326,7 @@ initStoryshots({
|
||||
`getScreenshotOptions` receives an object `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
|
||||
|
||||
To create a screenshot of just a single element (with its children), rather than the page or current viewport, an ElementHandle can be returned from `beforeScreenshot`:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.1",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"core-js": "^3.8.2",
|
||||
"jest-image-snapshot": "^4.3.0",
|
||||
@ -53,7 +53,7 @@
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -64,5 +64,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef"
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a"
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/router": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/router": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -75,7 +75,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
|
||||
@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u
|
||||
|
||||
- **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
|
||||
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs), or even in other addons.
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/main/addons/docs), or even in other addons.
|
||||
|
||||
* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -45,12 +45,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"core-js": "^3.8.2"
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -67,7 +68,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/register.js",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
@ -69,7 +69,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/preview.js",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Angular is a UI development environment for your Angular components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -128,5 +128,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/ts3.9/builders/builders.json",
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef"
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Ember is a UI development environment for your Ember components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -43,8 +43,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^2.1.4",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -65,6 +65,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Storybook for HTML is a UI development environment for your plain HTML snippets.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,10 +45,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -68,6 +68,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Preact is a UI development environment for your Preact components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -46,9 +46,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for React is a UI development environment for your React components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -49,10 +49,10 @@
|
||||
"@babel/preset-flow": "^7.12.1",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.3c70e01.0",
|
||||
"@storybook/semver": "^7.3.2",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -71,7 +71,7 @@
|
||||
"webpack": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/prompts": "^2.0.9"
|
||||
},
|
||||
@ -94,6 +94,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,12 +45,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/api": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/api": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -72,6 +72,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Svelte is a UI development environment for your Svelte components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -73,6 +73,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Vue is a UI development environment for your Vue components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -81,6 +81,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Vue 3 is a UI development environment for your Vue 3 components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -45,9 +45,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"core-js": "^3.8.2",
|
||||
"global": "^4.4.0",
|
||||
@ -79,6 +79,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ function prepare(rawStory: StoryFnVueReturnType, innerStory?: ConcreteComponent)
|
||||
|
||||
return {
|
||||
render() {
|
||||
return h(story, this.$root.storyArgs);
|
||||
return h(story);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
import dedent from 'ts-dedent';
|
||||
import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue';
|
||||
import { Args } from '@storybook/addons';
|
||||
import { RenderContext, StoryFnVueReturnType } from './types';
|
||||
|
||||
const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
|
||||
|
||||
interface Root extends ComponentPublicInstance {
|
||||
storyArgs?: Args;
|
||||
}
|
||||
|
||||
let root: Root | null = null;
|
||||
let root: ComponentPublicInstance | null = null;
|
||||
|
||||
export const storybookApp = createApp({
|
||||
// If an end-user calls `unmount` on the app, we need to clear our root variable
|
||||
@ -17,12 +12,6 @@ export const storybookApp = createApp({
|
||||
root = null;
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
storyArgs: undefined,
|
||||
};
|
||||
},
|
||||
|
||||
setup() {
|
||||
return () => {
|
||||
if (!activeStoryComponent.value)
|
||||
@ -59,13 +48,9 @@ export default function render({
|
||||
|
||||
showMain();
|
||||
|
||||
if (!forceRender) {
|
||||
activeStoryComponent.value = element;
|
||||
}
|
||||
activeStoryComponent.value = element;
|
||||
|
||||
if (!root) {
|
||||
root = storybookApp.mount('#root');
|
||||
}
|
||||
|
||||
root.storyArgs = args;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Storybook for web-components is a UI development environment for your plain web-component snippets.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -50,10 +50,10 @@
|
||||
"@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.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-common": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-common": "6.4.0-alpha.7",
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1",
|
||||
"core-js": "^3.8.2",
|
||||
@ -76,6 +76,6 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "7e32d1d40524ba71bbdb84194aa1484ae02679ef",
|
||||
"gitHead": "dd38af8465305888c2a22cbe69f2826f8c20f66a",
|
||||
"sbmodern": "dist/modern/client/index.js"
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ The following table details how to use the API values:
|
||||
| **showPanel** | Boolean |Display panel that shows addon configurations |`true` |
|
||||
| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` |
|
||||
| **isToolshown** | String |Show/hide tool bar |`true` |
|
||||
| **isToolshown** | Boolean |Show/hide tool bar |`true` |
|
||||
| **theme** | Object |Storybook Theme, see next section |`undefined` |
|
||||
| **selectedPanel** | String |Id to select an addon panel |`storybook/actions/panel` |
|
||||
| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
|
||||
|
||||
@ -25,6 +25,9 @@ Storybook will inject these tags into the _preview iframe_ where your components
|
||||
|
||||
</div>
|
||||
|
||||
It's also possible to programmatically modify the preview head HTML using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
|
||||
|
||||
|
||||
## Adding to <body>
|
||||
|
||||
Sometimes, you may need to add different tags to the `<body>`. This is useful for adding some custom content roots.
|
||||
@ -58,3 +61,5 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
|
||||
Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
|
||||
|
||||
</div>
|
||||
|
||||
Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
```ts
|
||||
//Button.stories.ts
|
||||
|
||||
import { Story } from '@storybook/angular/types-6-0';
|
||||
import { Story, Meta } from '@storybook/angular/types-6-0';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: Story<Button> = (args) => ({
|
||||
|
||||
@ -7,10 +7,9 @@ module.exports = {
|
||||
name: '@storybook/preset-scss',
|
||||
options: {
|
||||
cssLoaderOptions: {
|
||||
modules: true,
|
||||
localIdentName: '[name]__[local]--[hash:base64:5]',
|
||||
}
|
||||
}
|
||||
modules: { localIdentName: '[name]__[local]--[hash:base64:5]' },
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
// Button.stories.js | Button.stories.jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Components/Button',
|
||||
};
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template = (args) => <Button {...args} />;
|
||||
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
```ts
|
||||
// Button.stories.tsx
|
||||
// Button.stories.ts | Button.stories.tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Story } from '@storybook/react';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Components/Button',
|
||||
} as Meta;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
// Button.stories.js | Button.stories.jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Components/Button',
|
||||
}
|
||||
|
||||
export const Primary = () => <Button primary>Button</Button>;
|
||||
```
|
||||
@ -1,9 +1,16 @@
|
||||
```ts
|
||||
// Button.stories.tsx
|
||||
// Button.stories.ts | Button.stories.tsx
|
||||
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { Meta } from '@storybook/react';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Components/Button',
|
||||
} as Meta;
|
||||
|
||||
export const Primary: React.VFC<{}> = () => <Button primary>Button</Button>;
|
||||
```
|
||||
@ -3,6 +3,11 @@
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
}
|
||||
|
||||
const Template = (args) => ({ Component: Button, props: args });
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
}
|
||||
|
||||
export const Primary = () => ({
|
||||
Component: Button,
|
||||
props: {
|
||||
|
||||
@ -5,6 +5,10 @@ import { html } from 'lit-html';
|
||||
|
||||
import './demo-button';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
};
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template = ({ primary, label }) =>
|
||||
html`<demo-button ?primary=${primary} .label=${label}></demo-button>`;
|
||||
|
||||
@ -5,5 +5,9 @@ import { html } from 'lit-html';
|
||||
|
||||
import './demo-button';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
};
|
||||
|
||||
export const Primary = () => html`<demo-button primary></demo-button>`;
|
||||
```
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":"6.2.5","info":{"plain":"### Bug Fixes\n\n- Core: Don't include args param in docs mode URL ([#14494](https://github.com/storybookjs/storybook/pull/14494))\n- Core: Restore previewHead/Body presets ([#14500](https://github.com/storybookjs/storybook/pull/14500))\n- Controls: Reset ArgsTable state when switching stories ([#14493](https://github.com/storybookjs/storybook/pull/14493))\n\n### Dependency Upgrades\n\n- Revert \"Upgrade `dotenv-webpack` to v6\" ([#14501](https://github.com/storybookjs/storybook/pull/14501))"}}
|
||||
{"version":"6.3.0","info":{"plain":"**[Optimized for UI development](https://github.com/storybookjs/storybook/issues/14397)**\n\nSB6.3 adds new UI development and testing features, while evolving with the JS ecosystem:\n\n- 📐 Layout debugging with Measure and Outline addons\n- 🔌 Reuse your stories in unit tests: Jest, Cypress & more\n- 🚀 Frameworks: Angular 12 Ivy, Lit2 web components\n- 🛠 Builders: Webpack5 stable, Vite community\n- 📦 Packaging: Modern ESM\n\nIt also contains hundreds more fixes, features, and tweaks. Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) matching `6.3.0-alpha.*`, `6.3.0-beta.*`, and `6.3.0-rc.*` for the full list of changes. See [Storybook 6 migration guide](https://storybook.js.org/blog/storybook-6-migration-guide/) to upgrade from `5.x` or [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) for detailed migration instructions."}}
|
||||
@ -1 +1 @@
|
||||
{"version":"6.3.0-rc.10","info":{"plain":"### Bug Fixes\n\n- Angular: Fix nx project with workspace.json ([#15267](https://github.com/storybookjs/storybook/pull/15267))\n- Angular: Fix some Ivy rendering glitches ([#15279](https://github.com/storybookjs/storybook/pull/15279))"}}
|
||||
{"version":"6.4.0-alpha.7","info":{"plain":"### Features\n\n- CSF: Generate default titles based on file path ([#15376](https://github.com/storybookjs/storybook/pull/15376))"}}
|
||||
@ -107,13 +107,19 @@ By default the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/add
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Use this table as a reference for manually specifying the framework.
|
||||
Use this list as a reference for manually specifying the framework.
|
||||
|
||||
| angular | html | preact |
|
||||
|----------------|------|--------------|
|
||||
| react | riot | react-native |
|
||||
| svelte | vue | vue3 |
|
||||
| web-components | rax | |
|
||||
- angular
|
||||
- html
|
||||
- preact
|
||||
- rax
|
||||
- react
|
||||
- react-native
|
||||
- riot
|
||||
- svelte
|
||||
- vue
|
||||
- vue3
|
||||
- web-components
|
||||
|
||||
<div class="aside">
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -37,18 +37,18 @@
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/elements": "^11.2.14",
|
||||
"@compodoc/compodoc": "^1.1.11",
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-jest": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/angular": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/angular": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@types/core-js": "^2.5.4",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "react-scripts test --env=jsdom"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "6.3.0-rc.11",
|
||||
"@storybook/client-logger": "6.4.0-alpha.7",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.14.0",
|
||||
@ -21,18 +21,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-jest": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-react15",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -18,13 +18,13 @@
|
||||
"react-scripts": "3.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"babel-core": "6",
|
||||
"babel-runtime": "6",
|
||||
"webpack": "4"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-essentials",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,11 +34,11 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/addon-essentials": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"webpack": "4"
|
||||
},
|
||||
"storybook": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-ts-kitchen-sink",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -34,14 +34,14 @@
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/preset-create-react-app": "^3.1.6",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@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.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/ember": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/ember": "6.4.0-alpha.7",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"babel-loader": "^8",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html-kitchen-sink",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -13,23 +13,23 @@
|
||||
"storybook": "start-storybook -p 9006"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-jest": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/client-api": "6.3.0-rc.11",
|
||||
"@storybook/core": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/html": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/client-api": "6.4.0-alpha.7",
|
||||
"@storybook/core": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/html": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"format-json": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -14,27 +14,27 @@
|
||||
"devDependencies": {
|
||||
"@packtracker/webpack-plugin": "^2.3.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-jest": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-toolbars": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/cli": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/core-events": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots-puppeteer": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-toolbars": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/cli": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/core-events": "6.4.0-alpha.7",
|
||||
"@storybook/design-system": "^5.4.7",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/user-event": "^13.1.9",
|
||||
"chromatic": "^5.6.0",
|
||||
|
||||
@ -35,3 +35,23 @@ All.decorators = [
|
||||
</>
|
||||
),
|
||||
];
|
||||
|
||||
export const PropOverride = (args, { prop1, prop2 }) => (
|
||||
<p>
|
||||
Story prop: <pre>{JSON.stringify({ prop1, prop2 })}</pre>
|
||||
</p>
|
||||
);
|
||||
PropOverride.decorators = [
|
||||
(Story) => (
|
||||
<>
|
||||
<p>First local Decorator</p>
|
||||
<Story prop1="prop1" />
|
||||
</>
|
||||
),
|
||||
(Story) => (
|
||||
<>
|
||||
<p>Second Local Decorator</p>
|
||||
<Story prop2="prop2" />
|
||||
</>
|
||||
),
|
||||
];
|
||||
|
||||
@ -9,8 +9,8 @@ export default {
|
||||
component: Input,
|
||||
};
|
||||
|
||||
export const WithSetup = {
|
||||
setup: async () => {
|
||||
export const WithPlay = {
|
||||
play: async () => {
|
||||
const inputs = screen.getAllByTestId('test-input');
|
||||
for (let i = 0; i < inputs.length; i += 1) {
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "preact-example",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"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.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/preact": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/preact": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@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.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -8,10 +8,10 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-essentials": "6.3.0-rc.11",
|
||||
"@storybook/builder-webpack4": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-essentials": "6.4.0-alpha.7",
|
||||
"@storybook/builder-webpack4": "6.4.0-alpha.7",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "^16.9.10",
|
||||
"prop-types": "15.7.2",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { StorybookConfig } from '@storybook/react/types';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['./src/*.stories.*'],
|
||||
stories: [{ directory: './src', titlePrefix: 'Demo' }],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-essentials',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-react-ts",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
|
||||
@ -8,11 +8,11 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-essentials": "6.3.0-rc.11",
|
||||
"@storybook/components": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/theming": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-essentials": "6.4.0-alpha.7",
|
||||
"@storybook/components": "6.4.0-alpha.7",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"@storybook/theming": "6.4.0-alpha.7",
|
||||
"@types/react": "^16.14.2",
|
||||
"@types/react-dom": "^16.9.10",
|
||||
"formik": "^2.2.9",
|
||||
|
||||
@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
|
||||
import { AccountForm, AccountFormProps } from './AccountForm';
|
||||
|
||||
export default {
|
||||
title: 'Demo/AccountForm',
|
||||
component: AccountForm,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
@ -22,33 +21,33 @@ export const Standard = {
|
||||
|
||||
export const StandardEmailFilled = {
|
||||
...Standard,
|
||||
setup: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
|
||||
play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
|
||||
};
|
||||
|
||||
export const StandardEmailFailed = {
|
||||
...Standard,
|
||||
setup: () => {
|
||||
userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
|
||||
userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
|
||||
userEvent.click(screen.getByTestId('submit'));
|
||||
play: async () => {
|
||||
await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
|
||||
await userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
|
||||
await userEvent.click(screen.getByTestId('submit'));
|
||||
},
|
||||
};
|
||||
|
||||
export const StandardPasswordFailed = {
|
||||
...Standard,
|
||||
setup: () => {
|
||||
StandardEmailFilled.setup();
|
||||
userEvent.type(screen.getByTestId('password1'), 'asdf');
|
||||
userEvent.click(screen.getByTestId('submit'));
|
||||
play: async () => {
|
||||
await StandardEmailFilled.play();
|
||||
await userEvent.type(screen.getByTestId('password1'), 'asdf');
|
||||
await userEvent.click(screen.getByTestId('submit'));
|
||||
},
|
||||
};
|
||||
|
||||
export const StandardFailHover = {
|
||||
...StandardPasswordFailed,
|
||||
setup: async () => {
|
||||
await StandardPasswordFailed.setup();
|
||||
play: async () => {
|
||||
await StandardPasswordFailed.play();
|
||||
await sleep(100);
|
||||
userEvent.hover(screen.getByTestId('password-error-info'));
|
||||
await userEvent.hover(screen.getByTestId('password-error-info'));
|
||||
},
|
||||
};
|
||||
|
||||
@ -58,20 +57,20 @@ export const Verification = {
|
||||
|
||||
export const VerificationPasssword1 = {
|
||||
...Verification,
|
||||
setup: () => {
|
||||
StandardEmailFilled.setup();
|
||||
userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
|
||||
userEvent.click(screen.getByTestId('submit'));
|
||||
play: async () => {
|
||||
await StandardEmailFilled.play();
|
||||
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
|
||||
await userEvent.click(screen.getByTestId('submit'));
|
||||
},
|
||||
};
|
||||
|
||||
export const VerificationPasswordMismatch = {
|
||||
...Verification,
|
||||
setup: () => {
|
||||
StandardEmailFilled.setup();
|
||||
userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
|
||||
userEvent.type(screen.getByTestId('password2'), 'asdf1234');
|
||||
userEvent.click(screen.getByTestId('submit'));
|
||||
play: async () => {
|
||||
await StandardEmailFilled.play();
|
||||
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
|
||||
await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
|
||||
await userEvent.click(screen.getByTestId('submit'));
|
||||
},
|
||||
};
|
||||
|
||||
@ -79,13 +78,13 @@ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
export const VerificationSuccess = {
|
||||
...Verification,
|
||||
setup: async () => {
|
||||
await StandardEmailFilled.setup();
|
||||
play: async () => {
|
||||
await StandardEmailFilled.play();
|
||||
await sleep(1000);
|
||||
await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
|
||||
await sleep(1000);
|
||||
await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 });
|
||||
await sleep(1000);
|
||||
userEvent.click(screen.getByTestId('submit'));
|
||||
await userEvent.click(screen.getByTestId('submit'));
|
||||
},
|
||||
};
|
||||
|
||||
@ -23,10 +23,10 @@ export const StoryNoRender = {
|
||||
args: { label: 'magic!' },
|
||||
};
|
||||
|
||||
export const StoryWithSetup = {
|
||||
args: { label: 'setup' },
|
||||
setup: () => {
|
||||
console.log('setup!!');
|
||||
export const StoryWithPlay = {
|
||||
args: { label: 'play' },
|
||||
play: () => {
|
||||
console.log('play!!');
|
||||
userEvent.click(screen.getByRole('button'));
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "server-kitchen-sink",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,13 +14,13 @@
|
||||
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/node-logger": "6.3.0-rc.11",
|
||||
"@storybook/server": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/node-logger": "6.4.0-alpha.7",
|
||||
"@storybook/server": "6.4.0-alpha.7",
|
||||
"concurrently": "^5.3.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "~4.17.1",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "standalone-preview",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"storybook": "parcel ./storybook.html --port 1337"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "6.3.0-rc.11",
|
||||
"@storybook/react": "6.4.0-alpha.7",
|
||||
"parcel": "^1.12.4",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svelte-example",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook -s public",
|
||||
@ -10,18 +10,18 @@
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/svelte": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/svelte": "6.4.0-alpha.7",
|
||||
"svelte-jester": "1.3.0",
|
||||
"svelte-preprocess": "4.6.8"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-3-cli-example",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -14,11 +14,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-essentials": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/vue3": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-essentials": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/vue3": "6.4.0-alpha.7",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
|
||||
56
examples/vue-3-cli/src/stories/Button.stories.mdx
Normal file
56
examples/vue-3-cli/src/stories/Button.stories.mdx
Normal file
@ -0,0 +1,56 @@
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
<Meta
|
||||
title="Example/ButtonMdx"
|
||||
component={MyButton}
|
||||
argTypes={{
|
||||
backgroundColor: { control: 'color' },
|
||||
size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
|
||||
onClick: {},
|
||||
}}
|
||||
/>
|
||||
|
||||
export const Template = (args) => ({
|
||||
components: { MyButton },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<my-button v-bind="args" />',
|
||||
});
|
||||
|
||||
# Button
|
||||
|
||||
Simple button component
|
||||
|
||||
## Primary
|
||||
|
||||
<Canvas withToolbar>
|
||||
<Story name="Primary" args={{ primary: true, label: 'Button' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Secondary
|
||||
|
||||
<Canvas>
|
||||
<Story name="Secondary" args={{ label: 'Button' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Large
|
||||
|
||||
<Canvas>
|
||||
<Story name="Large" args={{ size: 'large', label: 'Button' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Small
|
||||
|
||||
<Canvas>
|
||||
<Story name="Small" args={{ size: 'large', label: 'Button' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-cli-example",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
@ -15,11 +15,11 @@
|
||||
"vue-property-decorator": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-essentials": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-essentials": "6.4.0-alpha.7",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@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.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -14,18 +14,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "6.3.0-rc.11",
|
||||
"@storybook/addon-actions": "6.3.0-rc.11",
|
||||
"@storybook/addon-backgrounds": "6.3.0-rc.11",
|
||||
"@storybook/addon-controls": "6.3.0-rc.11",
|
||||
"@storybook/addon-docs": "6.3.0-rc.11",
|
||||
"@storybook/addon-links": "6.3.0-rc.11",
|
||||
"@storybook/addon-storyshots": "6.3.0-rc.11",
|
||||
"@storybook/addon-storysource": "6.3.0-rc.11",
|
||||
"@storybook/addon-viewport": "6.3.0-rc.11",
|
||||
"@storybook/addons": "6.3.0-rc.11",
|
||||
"@storybook/source-loader": "6.3.0-rc.11",
|
||||
"@storybook/vue": "6.3.0-rc.11",
|
||||
"@storybook/addon-a11y": "6.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "6.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "6.4.0-alpha.7",
|
||||
"@storybook/addon-controls": "6.4.0-alpha.7",
|
||||
"@storybook/addon-docs": "6.4.0-alpha.7",
|
||||
"@storybook/addon-links": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "6.4.0-alpha.7",
|
||||
"@storybook/addon-storysource": "6.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "6.4.0-alpha.7",
|
||||
"@storybook/addons": "6.4.0-alpha.7",
|
||||
"@storybook/source-loader": "6.4.0-alpha.7",
|
||||
"@storybook/vue": "6.4.0-alpha.7",
|
||||
"@vue/babel-preset-jsx": "^1.2.4",
|
||||
"babel-loader": "^8.2.2",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-components-kitchen-sink",
|
||||
"version": "6.3.0-rc.11",
|
||||
"version": "6.4.0-alpha.7",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "6.3.0-rc.11"
|
||||
"version": "6.4.0-alpha.7"
|
||||
}
|
||||
|
||||
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