mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Merge branch 'next' into 6975-ui-ts-migration-1
This commit is contained in:
Norbert de Langen
commit
4738e509a5
7
.github/ISSUE_TEMPLATE/bug_report.md
vendored
7
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -24,12 +24,7 @@ If applicable, add screenshots to help explain your problem.
|
||||
If applicable, add code samples to help explain your problem.
|
||||
|
||||
**System:**
|
||||
- OS: [e.g. iOS, Windows10, MacOS]
|
||||
- Device: [e.g. iPhoneX, Macbook Pro 2018]
|
||||
- Browser: [e.g. chrome, safari]
|
||||
- Framework: [e.g. react, vue, angular]
|
||||
- Addons: [if relevant]
|
||||
- Version: [e.g. 4.0.0]
|
||||
Please paste the results of `npx -p @storybook/cli@next sb info` here.
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -30,3 +30,4 @@ scripts/storage
|
||||
htpasswd
|
||||
/false
|
||||
storybook-out
|
||||
/addons/docs/common/config-*
|
||||
116
CHANGELOG.md
116
CHANGELOG.md
@ -1,3 +1,119 @@
|
||||
## 5.2.0-beta.18 (July 30, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Ensure getNotes/getInfo return string ([#7597](https://github.com/storybookjs/storybook/pull/7597))
|
||||
* React/Angular/HTML/Vue: Fix typings for `configure` ([#7598](https://github.com/storybookjs/storybook/pull/7598))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Typescript: Migrate Vue ([#7578](https://github.com/storybookjs/storybook/pull/7578))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Upgrade corejs-upgrade-webpack-plugin lazy-universal-dotenv ([#7592](https://github.com/storybookjs/storybook/pull/7592))
|
||||
|
||||
## 5.2.0-beta.17 (July 29, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* CLI: Fix storiesof-to-csf migration w/punctuation ([#7590](https://github.com/storybookjs/storybook/pull/7590))
|
||||
|
||||
## 5.2.0-beta.16 (July 29, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* Addon-docs: Configure jsx automagically ([#7581](https://github.com/storybookjs/storybook/pull/7581))
|
||||
* Addon-docs: Add DocsPage automagically ([#7579](https://github.com/storybookjs/storybook/pull/7579))
|
||||
|
||||
## 5.2.0-beta.15 (July 29, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* CRA: Add support for TSX in config folder ([#7566](https://github.com/storybookjs/storybook/pull/7566))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-info: only render Components in propTables ([#7477](https://github.com/storybookjs/storybook/pull/7477))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Update telejson dependency to 2.2.2 ([#7586](https://github.com/storybookjs/storybook/pull/7586))
|
||||
* Angular: Fix @angular-devkit/build-angular version ([#7585](https://github.com/storybookjs/storybook/pull/7585))
|
||||
|
||||
## 5.2.0-beta.14 (July 29, 2019)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 5.2.0-beta.13 (July 27, 2019)
|
||||
|
||||
This is a breaking change for anybody who used `load` on an earlier 5.2 pre-release. Simply rename `load` to `configure` in your storybook config and that should fix things.
|
||||
|
||||
If you're not using SB Docs, you probably don't have to worry about this.
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
* Core: Rename `load` to `configure` ([#7576](https://github.com/storybookjs/storybook/pull/7576))
|
||||
|
||||
## 5.2.0-beta.12 (July 27, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-knobs: Fix select knob default selection when using array values ([#7568](https://github.com/storybookjs/storybook/pull/7568))
|
||||
* Addon-knobs: Call onChanges only for changed props ([#6884](https://github.com/storybookjs/storybook/pull/6884))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Angular: Print error message if angular.json has no default project specified ([#7574](https://github.com/storybookjs/storybook/pull/7574))
|
||||
|
||||
## 5.2.0-beta.11 (July 26, 2019)
|
||||
|
||||
Failed release
|
||||
|
||||
## 5.2.0-beta.10 (July 26, 2019)
|
||||
|
||||
This is a breaking release that undoes an unintentional breaking change introduced in 5.1.0 (and will also be released as a 5.1.x patch)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
* Core: Remove project root `babel.config.js` loading ([#7573](https://github.com/storybookjs/storybook/pull/7573))
|
||||
|
||||
### Features
|
||||
|
||||
* React: Add hooks support to stories ([#7571](https://github.com/storybookjs/storybook/pull/7571))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Fix attribute warning on shortcut button click ([#7548](https://github.com/storybookjs/storybook/pull/7548))
|
||||
|
||||
## 5.2.0-beta.9 (July 26, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Angular: Fix automatic module metadata extraction for forRoot imports ([#7224](https://github.com/storybookjs/storybook/pull/7224))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Rename "Module" to Component Story Format ([#7564](https://github.com/storybookjs/storybook/pull/7564))
|
||||
|
||||
## 5.2.0-beta.8 (July 25, 2019)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
`source-loader` is now part of `addon-docs` preset. If you're using both the `addon-docs` preset and `source-loader` in your project, you need to update. You can remove `source-loader` and let the preset take care of it. Alternatively, you can disable `source-loader` in the preset by setting `sourceLoaderOptions` to `null`.
|
||||
|
||||
* Addon-docs: Add source-loader to preset ([#7547](https://github.com/storybookjs/storybook/pull/7547))
|
||||
* Core: Don't allow duplicate titles ([#7542](https://github.com/storybookjs/storybook/pull/7542))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-storysource: Add source-loader dep to avoid breaking change ([#7554](https://github.com/storybookjs/storybook/pull/7554))
|
||||
* Addon-contexts: Ensure nodes is Array ([#7393](https://github.com/storybookjs/storybook/pull/7393))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Angular: Log angular cli config errors ([#7484](https://github.com/storybookjs/storybook/pull/7484))
|
||||
|
||||
## 5.2.0-beta.7 (July 23, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
130
MIGRATION.md
130
MIGRATION.md
@ -1,66 +1,69 @@
|
||||
# Migration
|
||||
|
||||
- [Migration](#Migration)
|
||||
- [From version 5.1.x to 5.2.x](#From-version-51x-to-52x)
|
||||
- [Docs mode docgen](#Docs-mode-docgen)
|
||||
- [storySort option](#storySort-option)
|
||||
- [From version 5.0.x to 5.1.x](#From-version-50x-to-51x)
|
||||
- [React native server](#React-native-server)
|
||||
- [Angular 7](#Angular-7)
|
||||
- [CoreJS 3](#CoreJS-3)
|
||||
- [From version 5.0.1 to 5.0.2](#From-version-501-to-502)
|
||||
- [Deprecate webpack extend mode](#Deprecate-webpack-extend-mode)
|
||||
- [From version 4.1.x to 5.0.x](#From-version-41x-to-50x)
|
||||
- [sortStoriesByKind](#sortStoriesByKind)
|
||||
- [Webpack config simplification](#Webpack-config-simplification)
|
||||
- [Theming overhaul](#Theming-overhaul)
|
||||
- [Story hierarchy defaults](#Story-hierarchy-defaults)
|
||||
- [Options addon deprecated](#Options-addon-deprecated)
|
||||
- [Individual story decorators](#Individual-story-decorators)
|
||||
- [Addon backgrounds uses parameters](#Addon-backgrounds-uses-parameters)
|
||||
- [Addon cssresources name attribute renamed](#Addon-cssresources-name-attribute-renamed)
|
||||
- [Addon viewport uses parameters](#Addon-viewport-uses-parameters)
|
||||
- [Addon a11y uses parameters, decorator renamed](#Addon-a11y-uses-parameters-decorator-renamed)
|
||||
- [New keyboard shortcuts defaults](#New-keyboard-shortcuts-defaults)
|
||||
- [New URL structure](#New-URL-structure)
|
||||
- [Rename of the `--secure` cli parameter to `--https`](#Rename-of-the---secure-cli-parameter-to---https)
|
||||
- [Vue integration](#Vue-integration)
|
||||
- [From version 4.0.x to 4.1.x](#From-version-40x-to-41x)
|
||||
- [Private addon config](#Private-addon-config)
|
||||
- [React 15.x](#React-15x)
|
||||
- [From version 3.4.x to 4.0.x](#From-version-34x-to-40x)
|
||||
- [React 16.3+](#React-163)
|
||||
- [Generic addons](#Generic-addons)
|
||||
- [Knobs select ordering](#Knobs-select-ordering)
|
||||
- [Knobs URL parameters](#Knobs-URL-parameters)
|
||||
- [Keyboard shortcuts moved](#Keyboard-shortcuts-moved)
|
||||
- [Removed addWithInfo](#Removed-addWithInfo)
|
||||
- [Removed RN packager](#Removed-RN-packager)
|
||||
- [Removed RN addons](#Removed-RN-addons)
|
||||
- [Storyshots Changes](#Storyshots-Changes)
|
||||
- [Webpack 4](#Webpack-4)
|
||||
- [Babel 7](#Babel-7)
|
||||
- [Create-react-app](#Create-react-app)
|
||||
- [Upgrade CRA1 to babel 7](#Upgrade-CRA1-to-babel-7)
|
||||
- [Migrate CRA1 while keeping babel 6](#Migrate-CRA1-while-keeping-babel-6)
|
||||
- [Migration](#migration)
|
||||
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
|
||||
- [Grid toolbar-feature](#grid-toolbar-feature)
|
||||
- [Docs mode docgen](#docs-mode-docgen)
|
||||
- [storySort option](#storysort-option)
|
||||
- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
|
||||
- [babel.config.js support](#babelconfigjs-support)
|
||||
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
|
||||
- [React native server](#react-native-server)
|
||||
- [Angular 7](#angular-7)
|
||||
- [CoreJS 3](#corejs-3)
|
||||
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
|
||||
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
|
||||
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
|
||||
- [sortStoriesByKind](#sortstoriesbykind)
|
||||
- [Webpack config simplification](#webpack-config-simplification)
|
||||
- [Theming overhaul](#theming-overhaul)
|
||||
- [Story hierarchy defaults](#story-hierarchy-defaults)
|
||||
- [Options addon deprecated](#options-addon-deprecated)
|
||||
- [Individual story decorators](#individual-story-decorators)
|
||||
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
|
||||
- [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
|
||||
- [Addon viewport uses parameters](#addon-viewport-uses-parameters)
|
||||
- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
|
||||
- [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
|
||||
- [New URL structure](#new-url-structure)
|
||||
- [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
|
||||
- [Vue integration](#vue-integration)
|
||||
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
|
||||
- [Private addon config](#private-addon-config)
|
||||
- [React 15.x](#react-15x)
|
||||
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
|
||||
- [React 16.3+](#react-163)
|
||||
- [Generic addons](#generic-addons)
|
||||
- [Knobs select ordering](#knobs-select-ordering)
|
||||
- [Knobs URL parameters](#knobs-url-parameters)
|
||||
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
|
||||
- [Removed addWithInfo](#removed-addwithinfo)
|
||||
- [Removed RN packager](#removed-rn-packager)
|
||||
- [Removed RN addons](#removed-rn-addons)
|
||||
- [Storyshots Changes](#storyshots-changes)
|
||||
- [Webpack 4](#webpack-4)
|
||||
- [Babel 7](#babel-7)
|
||||
- [Create-react-app](#create-react-app)
|
||||
- [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
|
||||
- [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
|
||||
- [start-storybook opens browser](#start-storybook-opens-browser)
|
||||
- [CLI Rename](#CLI-Rename)
|
||||
- [Addon story parameters](#Addon-story-parameters)
|
||||
- [From version 3.3.x to 3.4.x](#From-version-33x-to-34x)
|
||||
- [From version 3.2.x to 3.3.x](#From-version-32x-to-33x)
|
||||
- [CLI Rename](#cli-rename)
|
||||
- [Addon story parameters](#addon-story-parameters)
|
||||
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
|
||||
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
|
||||
- [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
|
||||
- [Base webpack config now contains vital plugins (#1775)](#Base-webpack-config-now-contains-vital-plugins-1775)
|
||||
- [Refactored Knobs](#Refactored-Knobs)
|
||||
- [From version 3.1.x to 3.2.x](#From-version-31x-to-32x)
|
||||
- [Moved TypeScript addons definitions](#Moved-TypeScript-addons-definitions)
|
||||
- [Updated Addons API](#Updated-Addons-API)
|
||||
- [From version 3.0.x to 3.1.x](#From-version-30x-to-31x)
|
||||
- [Moved TypeScript definitions](#Moved-TypeScript-definitions)
|
||||
- [Deprecated head.html](#Deprecated-headhtml)
|
||||
- [From version 2.x.x to 3.x.x](#From-version-2xx-to-3xx)
|
||||
- [Webpack upgrade](#Webpack-upgrade)
|
||||
- [Packages renaming](#Packages-renaming)
|
||||
- [Deprecated embedded addons](#Deprecated-embedded-addons)
|
||||
- [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
|
||||
- [Refactored Knobs](#refactored-knobs)
|
||||
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
|
||||
- [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
|
||||
- [Updated Addons API](#updated-addons-api)
|
||||
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
|
||||
- [Moved TypeScript definitions](#moved-typescript-definitions)
|
||||
- [Deprecated head.html](#deprecated-headhtml)
|
||||
- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
|
||||
- [Webpack upgrade](#webpack-upgrade)
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 5.1.x to 5.2.x
|
||||
|
||||
@ -84,11 +87,18 @@ For example, here's how to sort by story ID using `storySort`:
|
||||
```js
|
||||
addParameters({
|
||||
options: {
|
||||
storySort: (a, b) => a[1].id.localeCompare(b[1].id),
|
||||
storySort: (a, b) =>
|
||||
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## From version 5.1.x to 5.1.10
|
||||
|
||||
### babel.config.js support
|
||||
|
||||
SB 5.1.0 added [support for project root `babel.config.js` files](https://github.com/storybookjs/storybook/pull/6634), which was an [unintentional breaking change](https://github.com/storybookjs/storybook/issues/7058#issuecomment-515398228). 5.1.10 fixes this, but if you relied on project root `babel.config.js` support, this bugfix is a breaking change. The workaround is to copy the file into your `.storybook` config directory. We may add back project-level support in 6.0.
|
||||
|
||||
## From version 5.0.x to 5.1.x
|
||||
|
||||
### React native server
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
<a href="https://now-examples-slackin-rrirkqohko.now.sh/"><img src="https://now-examples-slackin-rrirkqohko.now.sh/badge.svg?logo=slack" alt="Storybook Slack" /></a>
|
||||
<a href="#backers"><img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" /></a>
|
||||
<a href="#sponsors"><img src="https://opencollective.com/storybook/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
|
||||
<a href="https://twitter.com/intent/follow?screen_name=storybookjs"><img src="https://img.shields.io/twitter/follow/storybookjs.svg?style=social&label=Follow" alt="Official Twitter Handle" /></a>
|
||||
</p>
|
||||
|
||||
---
|
||||
@ -27,9 +28,9 @@ It allows you to browse a component library, view the different states of each c
|
||||
</center>
|
||||
|
||||
<p align="center">
|
||||
README for:<br/>
|
||||
<a href="https://img.shields.io/npm/v/@storybook/core/latest.svg" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://img.shields.io/npm/v/@storybook/core/next.svg" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
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/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
</p>
|
||||
|
||||
Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -26,12 +26,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"axe-core": "^3.2.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,12 +21,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,12 +25,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
Real world users expects your application being customizable, that is why often your components are **polymorphic**:
|
||||
they simply need to adapt themselves under different contextual environments. Imagine your components can speak
|
||||
Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make
|
||||
sure a component look great in all scenario.
|
||||
sure a component looks great in all scenarios.
|
||||
|
||||
A good practice to write maintainable components is separate the presentation and its business logic. Storybook is
|
||||
a great place for exercising the visualization and interaction of your components, which may depend on some contexts.
|
||||
Often enough, you will find it become very tedious to wrap each component deeply with its contextual environments
|
||||
before you can really write the main story. You even start to write extra components or factory functions just to
|
||||
make your life easier. How about changing the context of your story dynamically?! There were simply having no good
|
||||
way so you ended up writing stories like an accountant.
|
||||
make your life easier. How about changing the context of your story dynamically?! There was simply no good way so
|
||||
you ended up writing stories like an accountant.
|
||||
|
||||
That is why you need this. An elegant way to wrap your component stories and change their contextual environment
|
||||
directly and dynamically in Storybook UI! Kind of like a dependency injection, eh! The best bit is **you define it
|
||||
@ -26,17 +26,17 @@ once then apply it everywhere**.
|
||||
1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories
|
||||
declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable.
|
||||
2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into
|
||||
different environments (e.g. languages or themes ) to understand how your component is going to response.
|
||||
different environments (e.g. languages or themes ) to understand how your component is going to respond.
|
||||
3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even
|
||||
use it to bridge with your favorite routing, state-management solutions, or even your own
|
||||
[React Context](https://reactjs.org/docs/context.html) provider.
|
||||
4. Offer chainable and granular configurations. It is even possible to fine-tune at per story level.
|
||||
5. Visual regression friendly. You can use this addon to driving the same story under different contexts to smoke
|
||||
testing important visual states.
|
||||
5. Visual regression friendly. You can use this addon to drive the same story under different contexts to smoke
|
||||
test important visual states.
|
||||
|
||||
## 🧰 Requirements
|
||||
|
||||
Make sure the version of your Storybook is above v5. For the full list the current supported framework, see
|
||||
Make sure the version of your Storybook is above v5. For the full list of the current supported frameworks, see
|
||||
[Addon / Framework Support Table](../../ADDONS_SUPPORT.md).
|
||||
|
||||
## 🎬 Getting started
|
||||
@ -54,7 +54,7 @@ under the storybook config directory of your project):
|
||||
import '@storybook/addon-contexts/register';
|
||||
```
|
||||
|
||||
To load your contextual setups for your stories globally, adding the following lines into `config.js` file (you should
|
||||
To load your contextual setups for your stories globally, add the following lines into `config.js` file (you should
|
||||
see it near your `addon.js` file):
|
||||
|
||||
```js
|
||||
@ -132,8 +132,8 @@ export const contexts = [
|
||||
#### `withContexts(contexts) : function`
|
||||
|
||||
A decorating function for wrapping your stories under your predefined `contexts`. This means multiple contextual
|
||||
environments are supported. They are going to be loaded layer by layer and wraped in a descending oder (top -> down
|
||||
-> story). The `contexts` is an array of object that should has the following properties:
|
||||
environments are supported. They are going to be loaded layer by layer and wrapped in a descending oder (top -> down
|
||||
-> story). The `contexts` is an array of objects that should have the following properties:
|
||||
|
||||
---
|
||||
|
||||
@ -141,10 +141,10 @@ environments are supported. They are going to be loaded layer by layer and wrape
|
||||
|
||||
(default `undefined`)
|
||||
|
||||
A icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for
|
||||
each contextual environment individually. Take a look from what are currently supported
|
||||
An icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for
|
||||
each contextual environment individually. Take a look at the currently supported
|
||||
[icon lists](https://storybooks-official.netlify.com/?path=/story/basics-icon--labels) from the official Storybook
|
||||
story. You must define an icon first if you want to take advantage on switching props dynamically in your Storybook
|
||||
story. You must define an icon first if you want to take advantage of switching props dynamically in your Storybook
|
||||
toolbar.
|
||||
|
||||
---
|
||||
@ -153,7 +153,7 @@ toolbar.
|
||||
|
||||
(required)
|
||||
|
||||
An unique name of a contextual environment; if duplicated names provided, the later is going to be ignored.
|
||||
A unique name of a contextual environment; if duplicate names are provided, the latter is going to be ignored.
|
||||
|
||||
---
|
||||
|
||||
@ -161,10 +161,10 @@ An unique name of a contextual environment; if duplicated names provided, the la
|
||||
|
||||
(required)
|
||||
|
||||
An array of components that is going to be injected to wrap stories. This means this addon allow multiple wrapping
|
||||
components coexisted. The wrapping sequence is from the left to right (parent -> children -> story). This nested
|
||||
An array of components that is going to be injected to wrap stories. This means this addon allows multiple wrapping
|
||||
components to coexist. The wrapping sequence is from the left to right (parent -> children -> story). This nested
|
||||
wrapping behaviour can be useful in some cases; for instance, in the above example, we are wrapping stories under
|
||||
`styled-componnets` and `material-ui` theme providers. Also, you can use this addon to wrap any valid HTML tags.
|
||||
`styled-components` and `material-ui` theme providers. Also, you can use this addon to wrap any valid HTML tags.
|
||||
|
||||
---
|
||||
|
||||
@ -178,13 +178,13 @@ An array of params contains a set of predefined `props` for `components`. This o
|
||||
|
||||
(required)
|
||||
|
||||
An unique name for representing the props.
|
||||
A unique name for representing the props.
|
||||
|
||||
#### `params.props : object | null:`
|
||||
|
||||
(required)
|
||||
|
||||
The `props` that is accepted by the wrapping component(s).
|
||||
The `props` that are accepted by the wrapping component(s).
|
||||
|
||||
#### `params.default : true?`
|
||||
|
||||
@ -220,16 +220,16 @@ be shown at first in the toolbar menu in your Storybook.
|
||||
|
||||
## 📔 Notes
|
||||
|
||||
1. You can use this addon to inject any valid components, that is why `icon`, and `params` can be just optional.
|
||||
1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional.
|
||||
2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are
|
||||
passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`.
|
||||
3. Additional `params` can be "appended" into an existed setups at the story level too (make sure it goes with the
|
||||
3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the
|
||||
correct `title`); however, they are never be able to overridden the default setups. So it is important to have
|
||||
non-collided names.
|
||||
non-colliding names.
|
||||
4. The addon will persist the selected params (the addon state) between stories at run-time (similar to other
|
||||
addons). If the active param were gone after story switching, it fallback to the default then the first. As a
|
||||
rule of thumbs, whenever collisions made possible, always the first wins.
|
||||
5. Query parameters are supported for pre-selecting contexts param, which comes handy for visual regression testing.
|
||||
addons). If the active params were gone after story switching, it falls back to the default then the first. As a
|
||||
rule of thumb, whenever collisions are possible, the first always wins.
|
||||
5. Query parameters are supported for pre-selecting contexts param, which comes in handy for visual regression testing.
|
||||
You can do this by appending `&contexts=[name of contexts]=[name of param]` in the URL under iframe mode. Use `,`
|
||||
to separate multiple contexts (e.g. `&contexts=Theme=Forests,Language=Fr`).
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -28,10 +28,10 @@
|
||||
"dev:check-types": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -21,7 +21,7 @@ export const ContextsManager: ContextsManager = ({ api }) => {
|
||||
);
|
||||
|
||||
// from preview
|
||||
useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes), []);
|
||||
useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes || []), []);
|
||||
|
||||
// to preview
|
||||
useEffect(() => api.emit(REBOOT_MANAGER), []);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,10 +25,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,12 +27,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -33,41 +33,61 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs
|
||||
```
|
||||
|
||||
The add the following line to your `.storybook/presets.js` file:
|
||||
The add the following to your `.storybook/presets.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = ['@storybook/addon-docs/react/preset'];
|
||||
module.exports = ['@storybook/addon-docs/common/preset'];
|
||||
```
|
||||
|
||||
Finally, import your stories and MDX files in `.storybook/config.js`:
|
||||
Finally, update your Storybook configuration `.storybook/config.js`. Add `DocsPage` to auto-generate docs for your existing stories, and load MDX files.
|
||||
|
||||
```js
|
||||
import { load } from '@storybook/react';
|
||||
import { load, addDecorator } from '@storybook/react';
|
||||
import { DocsPage } from '@storybook/addon-docs/blocks';
|
||||
|
||||
// standard configuration here
|
||||
// ...
|
||||
addDecorator({ docs: DocsPage });
|
||||
|
||||
// wherever your story files are located
|
||||
load(require.context('../src', true, /\.stories\.js$/), module);
|
||||
load(require.context('../src', true, /\.stories\.mdx$/), module);
|
||||
load(require.context('../src', true, /\.stories\.(js|ts|tsx|mdx)$/), module);
|
||||
```
|
||||
|
||||
## Preset options
|
||||
|
||||
The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
|
||||
|
||||
```js
|
||||
module.exports = [
|
||||
{
|
||||
name: '@storybook/addon-docs/common/preset',
|
||||
options: {
|
||||
configureJSX: true,
|
||||
babelOptions: {},
|
||||
sourceLoaderOptions: null,
|
||||
},
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
|
||||
|
||||
`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `webpack.config.js`.
|
||||
|
||||
## Manual configuration
|
||||
|
||||
Docs uses Storybook presets as a configuration shortcut. To configure "the long way", first register the addon in `.storybook/addons.js`:
|
||||
If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/addons.js`:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-docs/register';
|
||||
```
|
||||
|
||||
Then configure Storybook's webpack loader to understand MDX files in `.storybook/webpack.config.js`:
|
||||
Then configure Storybook's webpack loader in `.storybook/webpack.config.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
|
||||
|
||||
```js
|
||||
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
|
||||
|
||||
module.exports = async ({ config }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.mdx$/,
|
||||
test: /\.(stories|story)\.mdx$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
@ -82,6 +102,12 @@ module.exports = async ({ config }) => {
|
||||
},
|
||||
],
|
||||
});
|
||||
config.module.rules.push({
|
||||
test: /\.(stories|story)\.[tj]sx?$/,
|
||||
loader: require.resolve('@storybook/source-loader'),
|
||||
exclude: [/node_modules/],
|
||||
enforce: 'pre',
|
||||
});
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
@ -504,6 +504,9 @@ function MDXContent({ components, ...props }) {
|
||||
<Story name=\\"hello story\\" mdxType=\\"Story\\">
|
||||
<Button mdxType=\\"Button\\">Hello button</Button>
|
||||
</Story>
|
||||
<Story name=\\"w/punctuation\\" mdxType=\\"Story\\">
|
||||
<Button mdxType=\\"Button\\">with punctuation</Button>
|
||||
</Story>
|
||||
</MDXLayout>
|
||||
);
|
||||
}
|
||||
@ -519,7 +522,12 @@ helloStory.story = {};
|
||||
helloStory.story.name = 'hello story';
|
||||
helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
|
||||
export const wPunctuation = () => <Button>with punctuation</Button>;
|
||||
wPunctuation.story = {};
|
||||
wPunctuation.story.name = 'w/punctuation';
|
||||
wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };
|
||||
|
||||
const mdxKind = componentMeta.title || componentMeta.displayName;
|
||||
const WrappedMDXContent = ({ context }) => (
|
||||
|
||||
7
addons/docs/angular/config.js
vendored
Normal file
7
addons/docs/angular/config.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const { addParameters } = require('@storybook/angular');
|
||||
const { DocsPage } = require('@storybook/addon-docs/blocks');
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
});
|
||||
2
addons/docs/angular/preset.js
vendored
2
addons/docs/angular/preset.js
vendored
@ -1 +1 @@
|
||||
module.exports = require('../common/preset');
|
||||
module.exports = require('../common/makePreset')('angular');
|
||||
|
||||
20
addons/docs/common/makePreset.js
Normal file
20
addons/docs/common/makePreset.js
Normal file
@ -0,0 +1,20 @@
|
||||
const fs = require('fs');
|
||||
const common = require('./preset');
|
||||
|
||||
module.exports = framework => {
|
||||
const frameworkConfig = `${__dirname}/../${framework}/config.js`;
|
||||
const preConfig = fs.existsSync(frameworkConfig) ? [frameworkConfig] : [];
|
||||
function config(entry = []) {
|
||||
return [...preConfig, ...entry];
|
||||
}
|
||||
|
||||
const configureJSX = framework !== 'react';
|
||||
const webpack = (webpackConfig, options) =>
|
||||
common.webpack(webpackConfig, { configureJSX, ...options });
|
||||
|
||||
return {
|
||||
...common,
|
||||
webpack,
|
||||
config,
|
||||
};
|
||||
};
|
||||
@ -5,12 +5,13 @@ function createBabelOptions({ babelOptions, configureJSX }) {
|
||||
return babelOptions;
|
||||
}
|
||||
|
||||
const babelPlugins = (babelOptions && babelOptions.plugins) || [];
|
||||
return {
|
||||
...babelOptions,
|
||||
// for frameworks that are not working with react, we need to configure
|
||||
// the jsx to transpile mdx, for now there will be a flag for that
|
||||
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
|
||||
plugins: [...babelOptions.plugins, '@babel/plugin-transform-react-jsx'],
|
||||
plugins: [...babelPlugins, '@babel/plugin-transform-react-jsx'],
|
||||
};
|
||||
}
|
||||
|
||||
@ -18,7 +19,19 @@ function webpack(webpackConfig = {}, options = {}) {
|
||||
const { module = {} } = webpackConfig;
|
||||
// it will reuse babel options that are already in use in storybook
|
||||
// also, these babel options are chained with other presets.
|
||||
const { babelOptions, configureJSX } = options;
|
||||
const { babelOptions, configureJSX, sourceLoaderOptions = {} } = options;
|
||||
|
||||
// set `sourceLoaderOptions` to `null` to disable for manual configuration
|
||||
const sourceLoader = sourceLoaderOptions
|
||||
? [
|
||||
{
|
||||
test: /\.(stories|story)\.[tj]sx?$/,
|
||||
loader: require.resolve('@storybook/source-loader'),
|
||||
options: sourceLoaderOptions,
|
||||
enforce: 'pre',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
return {
|
||||
...webpackConfig,
|
||||
@ -54,6 +67,7 @@ function webpack(webpackConfig = {}, options = {}) {
|
||||
},
|
||||
],
|
||||
},
|
||||
...sourceLoader,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -12,3 +12,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
|
||||
<Story name="hello story">
|
||||
<Button>Hello button</Button>
|
||||
</Story>
|
||||
|
||||
<Story name="w/punctuation">
|
||||
<Button>with punctuation</Button>
|
||||
</Story>
|
||||
|
||||
7
addons/docs/html/config.js
Normal file
7
addons/docs/html/config.js
Normal file
@ -0,0 +1,7 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const { addParameters } = require('@storybook/html');
|
||||
const { DocsPage } = require('@storybook/addon-docs/blocks');
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
});
|
||||
@ -1 +1 @@
|
||||
module.exports = require('../common/preset');
|
||||
module.exports = require('../common/makePreset')('html');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,12 @@
|
||||
"@mdx-js/loader": "^1.1.0",
|
||||
"@mdx-js/mdx": "^1.1.0",
|
||||
"@mdx-js/react": "^1.0.27",
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/router": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/router": "5.2.0-beta.18",
|
||||
"@storybook/source-loader": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"js-string-escape": "^1.0.1",
|
||||
|
||||
7
addons/docs/react/config.js
Normal file
7
addons/docs/react/config.js
Normal file
@ -0,0 +1,7 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const { addParameters } = require('@storybook/react');
|
||||
const { DocsPage } = require('@storybook/addon-docs/blocks');
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
});
|
||||
@ -1 +1 @@
|
||||
module.exports = require('../common/preset');
|
||||
module.exports = require('../common/makePreset')('react');
|
||||
|
||||
@ -21,9 +21,9 @@ interface DescriptionProps {
|
||||
}
|
||||
|
||||
const getNotes = (notes?: Notes) =>
|
||||
notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text);
|
||||
(notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text)) || '';
|
||||
|
||||
const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : info.text);
|
||||
const getInfo = (info?: Info) => (info && (typeof info === 'string' ? info : info.text)) || '';
|
||||
|
||||
const getDocgen = (component?: Component) =>
|
||||
(component && component.__docgenInfo && component.__docgenInfo.description) || '';
|
||||
|
||||
7
addons/docs/vue/config.js
Normal file
7
addons/docs/vue/config.js
Normal file
@ -0,0 +1,7 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
const { addParameters } = require('@storybook/vue');
|
||||
const { DocsPage } = require('@storybook/addon-docs/blocks');
|
||||
|
||||
addParameters({
|
||||
docs: DocsPage,
|
||||
});
|
||||
@ -1 +1 @@
|
||||
module.exports = require('../common/preset');
|
||||
module.exports = require('../common/makePreset')('vue');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,11 +24,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-api": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-api": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,8 +22,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.13.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,10 +22,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
|
||||
@ -311,7 +311,7 @@ class Story extends Component {
|
||||
const { stylesheet } = this.state;
|
||||
const types = new Map();
|
||||
|
||||
if (propTables === null) {
|
||||
if (!propTables) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -319,11 +319,9 @@ class Story extends Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (propTables) {
|
||||
propTables.forEach(type => {
|
||||
types.set(type, true);
|
||||
});
|
||||
}
|
||||
propTables.forEach(type => {
|
||||
types.set(type, true);
|
||||
});
|
||||
|
||||
// depth-first traverse and collect types
|
||||
const extract = innerChildren => {
|
||||
@ -348,6 +346,8 @@ class Story extends Component {
|
||||
if (
|
||||
typeof innerChildren === 'string' ||
|
||||
typeof innerChildren.type === 'string' ||
|
||||
(propTables.length > 0 && // if propTables is set and has items in it
|
||||
!propTables.includes(innerChildren.type)) || // ignore types that are missing from propTables
|
||||
(Array.isArray(propTablesExclude) && // also ignore excluded types
|
||||
~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
|
||||
) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons, { Parameters } from '@storybook/addons';
|
||||
import addons, { Parameters, DecoratorFunction, StoryFn } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { normalize, sep } from 'upath';
|
||||
import { ADD_TESTS } from './shared';
|
||||
@ -48,16 +48,19 @@ const emitAddTests = ({ kind, story, testFiles, options }: EmitAddTestsArg) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const withTests = (userOptions: { results: any; filesExt?: string }) => {
|
||||
export const withTests = (userOptions: {
|
||||
results: any;
|
||||
filesExt?: string;
|
||||
}): DecoratorFunction<unknown> => {
|
||||
const defaultOptions = {
|
||||
filesExt: '((\\.specs?)|(\\.tests?))?(\\.[jt]sx?)?$',
|
||||
};
|
||||
const options = { ...defaultOptions, ...userOptions };
|
||||
|
||||
return (...args: [(string | (() => void)), { kind: string; parameters: AddonParameters }]) => {
|
||||
return (...args) => {
|
||||
if (typeof args[0] === 'string') {
|
||||
return deprecate((storyFn: () => void, { kind }: { kind: string }) => {
|
||||
emitAddTests({ kind, story: storyFn, testFiles: args as string[], options });
|
||||
return deprecate((storyFn: StoryFn<unknown>, { kind }: Parameters) => {
|
||||
emitAddTests({ kind, story: storyFn, testFiles: (args as any) as string[], options });
|
||||
|
||||
return storyFn();
|
||||
}, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
|
||||
|
||||
@ -363,12 +363,14 @@ Allows you to get a value from a file input from the user.
|
||||
import { files } from '@storybook/addon-knobs';
|
||||
|
||||
const label = 'Images';
|
||||
const accept = '.xlsx, .pdf';
|
||||
const defaultValue = [];
|
||||
|
||||
const value = files(label, accept, defaultValue);
|
||||
```
|
||||
|
||||
> Multiple files can be selected, and will be returned as an array of [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
|
||||
> You can optionally specify a [list of file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) which the file input should accept.
|
||||
> Multiple files can be selected, and will be returned as an array of [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
|
||||
|
||||
### date
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,12 +22,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-api": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-api": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
|
||||
@ -24,6 +24,21 @@ describe('Select', () => {
|
||||
expect(green.text()).toEqual('Green');
|
||||
expect(green.prop('value')).toEqual('Green');
|
||||
});
|
||||
|
||||
it('should set the default value for array-values correctly', () => {
|
||||
knob = {
|
||||
name: 'Array values',
|
||||
options: {
|
||||
'100 x 100': [100, 100],
|
||||
'200 x 200': [200, 200],
|
||||
},
|
||||
value: [200, 200],
|
||||
};
|
||||
|
||||
const wrapper = shallow(<SelectType knob={knob} />);
|
||||
const value = wrapper.prop('value');
|
||||
expect(value).toEqual('200 x 200');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Array values', () => {
|
||||
|
||||
@ -34,7 +34,12 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
|
||||
? options.reduce<Record<string, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
|
||||
: (options as Record<string, SelectTypeKnobValue>);
|
||||
|
||||
const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
|
||||
const selectedKey = Object.keys(entries).find(k => {
|
||||
if (Array.isArray(knob.value)) {
|
||||
return JSON.stringify(entries[k]) === JSON.stringify(knob.value);
|
||||
}
|
||||
return entries[k] === knob.value;
|
||||
});
|
||||
|
||||
return (
|
||||
<Form.Select
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,9 +22,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/router": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/router": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,13 +23,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/router": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/router": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.9.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -19,13 +19,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.2.0-beta.7"
|
||||
"@storybook/addon-actions": "5.2.0-beta.18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -32,7 +32,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "5.2.0-alpha.23",
|
||||
"@storybook/addon-knobs": "5.2.0-beta.13",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,7 +22,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,12 +23,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,7 +25,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -31,11 +31,14 @@ const createComponentFromTemplate = (template: string) => {
|
||||
})(componentClass);
|
||||
};
|
||||
const extractNgModuleMetadata = (importItem: any): NgModule => {
|
||||
const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
|
||||
const decoratorKey = '__annotations__';
|
||||
const decorators: any[] =
|
||||
Reflect && Reflect.getOwnPropertyDescriptor
|
||||
? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
|
||||
: importItem[decoratorKey];
|
||||
Reflect &&
|
||||
Reflect.getOwnPropertyDescriptor &&
|
||||
Reflect.getOwnPropertyDescriptor(target, decoratorKey)
|
||||
? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
|
||||
: target[decoratorKey];
|
||||
|
||||
if (!decorators || decorators.length === 0) {
|
||||
return null;
|
||||
@ -86,7 +89,7 @@ export const initModuleData = (storyObj: NgStory): any => {
|
||||
? createComponentFromTemplate(template)
|
||||
: component;
|
||||
|
||||
const componentRequiesDeclaration =
|
||||
const componentRequiresDeclaration =
|
||||
isCreatingComponentFromTemplate ||
|
||||
!getExistenceOfComponentInModules(
|
||||
component,
|
||||
@ -94,7 +97,7 @@ export const initModuleData = (storyObj: NgStory): any => {
|
||||
moduleMetadata.imports
|
||||
);
|
||||
|
||||
const componentDeclarations = componentRequiesDeclaration
|
||||
const componentDeclarations = componentRequiresDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,8 +22,8 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.2.0-beta.7",
|
||||
"@storybook/router": "5.2.0-beta.7",
|
||||
"@storybook/node-logger": "5.2.0-beta.18",
|
||||
"@storybook/router": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
@ -32,7 +32,7 @@
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.2.0-alpha.40",
|
||||
"@storybook/addon-storyshots": "5.2.0-beta.13",
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1 +1,6 @@
|
||||
const deprecate = require('util-deprecate');
|
||||
|
||||
deprecate(() => {},
|
||||
'@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.')();
|
||||
|
||||
module.exports = require('@storybook/source-loader');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,20 +22,21 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/router": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/router": "5.2.0-beta.18",
|
||||
"@storybook/source-loader": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"prettier": "^1.16.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^8.0.1",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/source-loader": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,12 +21,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/client-logger": "5.2.0-beta.7",
|
||||
"@storybook/components": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/theming": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"@storybook/components": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/theming": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,9 +26,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/node-logger": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@storybook/node-logger": "5.2.0-beta.18",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
@ -44,7 +44,7 @@
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/build-angular": ">=6.0.0",
|
||||
"@angular-devkit/build-angular": ">=0.8.9",
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
"@angular/compiler": ">=6.0.0",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
export { moduleMetadata } from './preview/angular/decorators';
|
||||
|
||||
@ -31,6 +31,8 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('target', { read: ViewContainerRef })
|
||||
target: ViewContainerRef;
|
||||
|
||||
readonly previousValues: { [key: string]: any } = {};
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(
|
||||
@ -81,7 +83,16 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
instance[key] = value;
|
||||
if (hasNgOnChangesHook) {
|
||||
changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
|
||||
const previousValue = this.previousValues[key];
|
||||
|
||||
if (previousValue !== value) {
|
||||
changes[key] = new SimpleChange(
|
||||
previousValue,
|
||||
value,
|
||||
!Object.prototype.hasOwnProperty.call(this.previousValues, key)
|
||||
);
|
||||
this.previousValues[key] = value;
|
||||
}
|
||||
}
|
||||
} else if (typeof value === 'function' && key !== 'ngModelChange') {
|
||||
instanceProperty.subscribe(value);
|
||||
|
||||
@ -55,11 +55,14 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
|
||||
};
|
||||
|
||||
const extractNgModuleMetadata = (importItem: any): NgModule => {
|
||||
const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
|
||||
const decoratorKey = '__annotations__';
|
||||
const decorators: any[] =
|
||||
Reflect && Reflect.getOwnPropertyDescriptor
|
||||
? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
|
||||
: importItem[decoratorKey];
|
||||
Reflect &&
|
||||
Reflect.getOwnPropertyDescriptor &&
|
||||
Reflect.getOwnPropertyDescriptor(target, decoratorKey)
|
||||
? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
|
||||
: target[decoratorKey];
|
||||
|
||||
if (!decorators || decorators.length === 0) {
|
||||
return null;
|
||||
@ -111,7 +114,7 @@ const initModule = (storyFn: StoryFn<StoryFnAngularReturnType>) => {
|
||||
? createComponentFromTemplate(template, styles)
|
||||
: component;
|
||||
|
||||
const componentRequiesDeclaration =
|
||||
const componentRequiresDeclaration =
|
||||
isCreatingComponentFromTemplate ||
|
||||
!getExistenceOfComponentInModules(
|
||||
component,
|
||||
@ -119,7 +122,7 @@ const initModule = (storyFn: StoryFn<StoryFnAngularReturnType>) => {
|
||||
moduleMetadata.imports
|
||||
);
|
||||
|
||||
const componentDeclarations = componentRequiesDeclaration
|
||||
const componentDeclarations = componentRequiresDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { start } from '@storybook/core/client';
|
||||
import { ClientStoryApi } from '@storybook/addons';
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
@ -10,7 +10,7 @@ const framework = 'angular';
|
||||
|
||||
interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
|
||||
setAddon(addon: any): void;
|
||||
configure(loaders: () => void, module: NodeModule): void;
|
||||
configure(loader: Loadable, module: NodeModule): void;
|
||||
getStorybook(): IStorybookSection[];
|
||||
clearDecorators(): void;
|
||||
forceReRender(): void;
|
||||
@ -26,12 +26,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
|
||||
export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
|
||||
export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
|
||||
export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
|
||||
export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
|
||||
export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
|
||||
export const configure: ClientApi['configure'] = api.configApi.configure;
|
||||
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
|
||||
export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
|
||||
export const raw: ClientApi['raw'] = api.clientApi.raw;
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
getCommonConfig,
|
||||
getStylesConfig,
|
||||
} from '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
import { RuleSetRule, Configuration } from 'webpack';
|
||||
|
||||
@ -64,6 +65,8 @@ export function getAngularCliParts(cliWebpackConfigOptions: any) {
|
||||
cliStyleConfig: getStylesConfig(cliWebpackConfigOptions),
|
||||
};
|
||||
} catch (e) {
|
||||
logger.warn("Failed to load the Angular CLI config. Using Storybook's default config instead.");
|
||||
logger.warn(e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -24,7 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
const { configure: coreConfigure, clientApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
@ -16,7 +16,6 @@ export const {
|
||||
|
||||
const framework = 'ember';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
export const configure = (...args) => coreConfigure(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,8 +26,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { start } from '@storybook/core/client';
|
||||
import { ClientStoryApi } from '@storybook/addons';
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
@ -10,12 +10,11 @@ const framework = 'html';
|
||||
|
||||
interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
|
||||
setAddon(addon: any): void;
|
||||
configure(loaders: () => void, module: NodeModule): void;
|
||||
configure(loader: Loadable, module: NodeModule): void;
|
||||
getStorybook(): IStorybookSection[];
|
||||
clearDecorators(): void;
|
||||
forceReRender(): void;
|
||||
raw: () => any; // todo add type
|
||||
load: (req: any, m: NodeModule, framework: string) => void;
|
||||
}
|
||||
|
||||
const api = start(render);
|
||||
@ -26,12 +25,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
|
||||
export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
|
||||
export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
|
||||
export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
|
||||
export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
|
||||
export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
|
||||
export const configure: ClientApi['configure'] = api.configApi.configure;
|
||||
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
|
||||
export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
|
||||
export const raw: ClientApi['raw'] = api.clientApi.raw;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^1.2.0",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@storybook/client-logger": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
const { configure: coreConfigure, clientApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
@ -16,7 +16,6 @@ export const {
|
||||
|
||||
const framework = 'marko';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
export const configure = (...args) => coreConfigure(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { document } from 'global';
|
||||
import { stripIndents } from 'common-tags';
|
||||
|
||||
import { logger } from '@storybook/client-logger';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
let activeComponent = null; // currently loaded marko component.
|
||||
let activeTemplate = null; // template for the currently loaded component.
|
||||
@ -28,7 +30,7 @@ export default function renderMain({
|
||||
return;
|
||||
}
|
||||
if (config.appendTo) {
|
||||
console.warn(
|
||||
logger.warn(
|
||||
'@storybook/marko: returning a rendered component for a story is deprecated, return an object with `{ component, input }` instead.'
|
||||
);
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
const { configure: coreConfigure, clientApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
@ -16,7 +16,6 @@ export const {
|
||||
|
||||
const framework = 'mithril';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
export const configure = (...args) => coreConfigure(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
const { configure: coreConfigure, clientApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
@ -16,7 +16,6 @@ export const {
|
||||
|
||||
const framework = 'polymer';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
export const configure = (...args) => coreConfigure(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -16,7 +16,7 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -27,7 +27,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -37,6 +38,7 @@
|
||||
"preact": "^8.4.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "7.0.1",
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"preact": "^8.4.2"
|
||||
},
|
||||
|
||||
@ -7,5 +7,4 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
@ -1,22 +0,0 @@
|
||||
import { start } from '@storybook/core/client';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'preact';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
24
app/preact/src/client/preview/index.ts
Normal file
24
app/preact/src/client/preview/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { start } from '@storybook/core/client';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
import { ClientApi } from './types';
|
||||
|
||||
const framework = 'preact';
|
||||
const api = start(render);
|
||||
|
||||
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
|
||||
framework,
|
||||
});
|
||||
};
|
||||
|
||||
export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
|
||||
export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
|
||||
export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
|
||||
export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
|
||||
export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
|
||||
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
|
||||
export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
|
||||
export const raw: ClientApi['raw'] = api.clientApi.raw;
|
||||
@ -1,8 +1,9 @@
|
||||
import { h, render } from 'preact';
|
||||
import { document } from 'global';
|
||||
import { stripIndents } from 'common-tags';
|
||||
import { RenderMainArgs } from './types';
|
||||
|
||||
let renderedStory;
|
||||
let renderedStory: Element;
|
||||
const rootElement = document ? document.getElementById('root') : null;
|
||||
|
||||
export default function renderMain({
|
||||
@ -11,8 +12,7 @@ export default function renderMain({
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
}: RenderMainArgs) {
|
||||
const element = storyFn();
|
||||
|
||||
if (!element) {
|
||||
37
app/preact/src/client/preview/types.ts
Normal file
37
app/preact/src/client/preview/types.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
export type StoryFnPreactReturnType = string | Node;
|
||||
|
||||
export interface ShowErrorArgs {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface RenderMainArgs {
|
||||
storyFn: () => StoryFn<StoryFnPreactReturnType>;
|
||||
selectedKind: string;
|
||||
selectedStory: string;
|
||||
showMain: () => void;
|
||||
showError: (args: ShowErrorArgs) => void;
|
||||
forceRender: boolean;
|
||||
}
|
||||
|
||||
export interface IStorybookStory {
|
||||
name: string;
|
||||
render: () => any;
|
||||
}
|
||||
|
||||
export interface IStorybookSection {
|
||||
kind: string;
|
||||
stories: IStorybookStory[];
|
||||
}
|
||||
|
||||
export interface ClientApi extends ClientStoryApi<StoryFnPreactReturnType> {
|
||||
setAddon(addon: any): void;
|
||||
configure(loader: Loadable, module: NodeModule): void;
|
||||
getStorybook(): IStorybookSection[];
|
||||
clearDecorators(): void;
|
||||
forceReRender(): void;
|
||||
raw: () => any; // todo add type
|
||||
load: (...args: any[]) => void;
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
export function babelDefault(config) {
|
||||
import { TransformOptions } from '@babel/core';
|
||||
|
||||
export function babelDefault(config: TransformOptions) {
|
||||
return {
|
||||
...config,
|
||||
plugins: [
|
||||
@ -1,4 +1,4 @@
|
||||
import packageJson from '../../package.json';
|
||||
const packageJson = require('../../package.json');
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
2
app/preact/src/typings.d.ts
vendored
Normal file
2
app/preact/src/typings.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare module '@storybook/core/*';
|
||||
declare module 'global';
|
||||
14
app/preact/tsconfig.json
Normal file
14
app/preact/tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"],
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.test.*"
|
||||
]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -27,7 +27,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
|
||||
@ -7,5 +7,4 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
const { configure: coreConfigure, clientApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
setAddon,
|
||||
@ -16,7 +16,6 @@ export const {
|
||||
|
||||
const framework = 'rax';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
export const configure = (...args) => coreConfigure(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native-server",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -24,12 +24,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/api": "5.2.0-beta.7",
|
||||
"@storybook/channel-websocket": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/ui": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/api": "5.2.0-beta.18",
|
||||
"@storybook/channel-websocket": "5.2.0-beta.18",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"@storybook/ui": "5.2.0-beta.18",
|
||||
"commander": "^2.19.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -24,11 +24,11 @@
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.14",
|
||||
"@emotion/native": "^10.0.14",
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/channel-websocket": "5.2.0-beta.7",
|
||||
"@storybook/channels": "5.2.0-beta.7",
|
||||
"@storybook/client-api": "5.2.0-beta.7",
|
||||
"@storybook/core-events": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/channel-websocket": "5.2.0-beta.18",
|
||||
"@storybook/channels": "5.2.0-beta.18",
|
||||
"@storybook/client-api": "5.2.0-beta.18",
|
||||
"@storybook/core-events": "5.2.0-beta.18",
|
||||
"core-js": "^3.0.1",
|
||||
"emotion-theming": "^10.0.14",
|
||||
"react-native-swipe-gestures": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "5.2.0-beta.7",
|
||||
"version": "5.2.0-beta.18",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,9 +29,9 @@
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@storybook/addons": "5.2.0-beta.7",
|
||||
"@storybook/core": "5.2.0-beta.7",
|
||||
"@storybook/node-logger": "5.2.0-beta.7",
|
||||
"@storybook/addons": "5.2.0-beta.18",
|
||||
"@storybook/core": "5.2.0-beta.18",
|
||||
"@storybook/node-logger": "5.2.0-beta.18",
|
||||
"@svgr/webpack": "^4.0.3",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
|
||||
@ -7,7 +7,6 @@ export {
|
||||
getStorybook,
|
||||
raw,
|
||||
forceReRender,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable prefer-destructuring */
|
||||
import { start } from '@storybook/core/client';
|
||||
import { ClientStoryApi } from '@storybook/addons';
|
||||
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
@ -10,12 +10,11 @@ const framework = 'react';
|
||||
|
||||
interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
|
||||
setAddon(addon: any): void;
|
||||
configure(loaders: () => void, module: NodeModule): void;
|
||||
configure(loader: Loadable, module: NodeModule): void;
|
||||
getStorybook(): IStorybookSection[];
|
||||
clearDecorators(): void;
|
||||
forceReRender(): void;
|
||||
raw: () => any; // todo add type
|
||||
load: (...args: any[]) => void;
|
||||
}
|
||||
|
||||
const api = start(render);
|
||||
@ -26,12 +25,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
|
||||
export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
|
||||
export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
|
||||
export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
|
||||
export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
|
||||
export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
|
||||
export const configure: ClientApi['configure'] = api.configApi.configure;
|
||||
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
|
||||
export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
|
||||
export const raw: ClientApi['raw'] = api.clientApi.raw;
|
||||
|
||||
@ -15,14 +15,14 @@ function render(node: React.ReactElement, el: Element) {
|
||||
}
|
||||
|
||||
export default function renderMain({
|
||||
storyFn,
|
||||
storyFn: StoryFn,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain,
|
||||
showError,
|
||||
forceRender,
|
||||
}: RenderMainArgs) {
|
||||
const element = storyFn();
|
||||
const element = <StoryFn />;
|
||||
|
||||
if (!element) {
|
||||
showError({
|
||||
|
||||
@ -16,10 +16,6 @@ export interface RenderMainArgs {
|
||||
|
||||
export type StoryFnReactReturnType = React.ReactElement<unknown>;
|
||||
|
||||
export interface ICollection {
|
||||
[p: string]: any;
|
||||
}
|
||||
|
||||
export interface IStorybookStory {
|
||||
name: string;
|
||||
render: () => any;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default [
|
||||
{ parser: { requireEnsure: false } },
|
||||
{
|
||||
test: /\.(js|mjs|jsx)$/,
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
enforce: 'pre',
|
||||
use: [
|
||||
{
|
||||
@ -10,7 +10,6 @@ export default [
|
||||
eslintPath: '/mock_folder/node_modules/eslint/lib/api.js',
|
||||
baseConfig: {
|
||||
extends: ['/mock_folder/node_modules/eslint-config-react-app/index.js'],
|
||||
settings: { react: { version: '999.999.999' } },
|
||||
},
|
||||
ignore: false,
|
||||
useEslintrc: false,
|
||||
@ -44,7 +43,7 @@ export default [
|
||||
{
|
||||
loaderMap: {
|
||||
svg: {
|
||||
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
|
||||
ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
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