mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 23:11:23 +08:00
Merge branch 'master' into master
This commit is contained in:
Punit Grover
GitHub
commit
928d8f711e
@ -97,7 +97,7 @@ module.exports = {
|
||||
'no-underscore-dangle': [
|
||||
error,
|
||||
{
|
||||
allow: ['__STORYBOOK_CLIENT_API__'],
|
||||
allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
94
CHANGELOG.md
94
CHANGELOG.md
@ -1,3 +1,80 @@
|
||||
# 3.4.0-rc.3
|
||||
|
||||
2018-March-19
|
||||
|
||||
#### Documentation
|
||||
|
||||
- Add example for @ngrx/store [#3233](https://github.com/storybooks/storybook/pull/3233)
|
||||
- Fix missing declaration in Angular example [#3213](https://github.com/storybooks/storybook/pull/3213)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
58 Updates
|
||||
</summary>
|
||||
|
||||
- Update node-sass in app/angular from 4.8.2 to 4.8.3 [#3239](https://github.com/storybooks/storybook/pull/3239)
|
||||
- Update postcss-loader in lib/core from 2.1.1 to 2.1.2 [#3234](https://github.com/storybooks/storybook/pull/3234)
|
||||
- Upgraded `eslint` in `/` from "4.18.2" to "4.19.0" [#3230](https://github.com/storybooks/storybook/pull/3230)
|
||||
- Upgraded `graphql` in `addons/graphql` from "0.13.1" to "0.13.2" [#3230](https://github.com/storybooks/storybook/pull/3230)
|
||||
- Update gatsby in /docs from 1.9.233 to 1.9.236 [#3229](https://github.com/storybooks/storybook/pull/3229)
|
||||
- Upgraded `gatsby-transformer-remark` in `/docs` from "1.7.36" to "1.7.37" [#3226](https://github.com/storybooks/storybook/pull/3226)
|
||||
- Upgraded `gatsby` in `/docs` from "1.9.232" to "1.9.233" [#3226](https://github.com/storybooks/storybook/pull/3226)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.2.3" to "1.2.4" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `puppeteer` in `addons/storyshots` from "1.1.1" to "1.2.0" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `enzyme-to-json` in `addons/storyshots` from "3.3.1" to "3.3.3" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `css-loader` in `lib/core` from "0.28.10" to "0.28.11" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.2.3" to "1.2.4" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/polymer` from "1.2.3" to "1.2.4" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.2.3" to "1.2.4" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.2.3" to "1.2.4" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `enzyme-to-json` in `examples/cra-kitchen-sink` from "3.3.1" to "3.3.3" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `enzyme-to-json` in `examples/official-storybook` from "3.3.1" to "3.3.3" [#3227](https://github.com/storybooks/storybook/pull/3227)
|
||||
- Upgraded `@angular/common` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/compiler` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/core` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/forms` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/platform-browser` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `/` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `danger` in `/` from "3.1.8" to "3.2.0" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `eslint-plugin-jest` in `/` from "21.14.1" to "21.15.0" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `jest-vue-preprocessor` in `/` from "1.3.1" to "1.4.0" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `react-chromatic` in `examples/official-storybook` from "0.7.10" to "0.7.11" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/common` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/core` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.2.8" to "5.2.9" [#3219](https://github.com/storybooks/storybook/pull/3219)
|
||||
- Upgraded `eslint-plugin-jest` in `/` from "21.14.0" to "21.14.1" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `jest-image-snapshot` in `/` from "2.3.0" to "2.4.0" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `nodemon` in `app/react` from "1.17.1" to "1.17.2" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `vue` in `addons/knobs` from "2.5.15" to "2.5.16" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `jest-image-snapshot` in `addons/storyshots` from "2.3.0" to "2.4.0" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.17.1" to "1.17.2" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `nodemon` in `app/polymer` from "1.17.1" to "1.17.2" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.17.1" to "1.17.2" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `vue` in `app/vue` from "2.5.15" to "2.5.16" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `vue-template-compiler` in `app/vue` from "2.5.15" to "2.5.16" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `vue` in `examples/vue-kitchen-sink` from "2.5.15" to "2.5.16" [#3210](https://github.com/storybooks/storybook/pull/3210)
|
||||
- Upgraded `tslint-config-prettier` in `/` from "1.9.0" to "1.10.0" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `app/react` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `addons/actions` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `lib/components` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `addons/a11y` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `addons/info` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `glamorous` in `addons/jest` from "4.12.0" to "4.12.1" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `react-modal` in `lib/ui` from "3.3.1" to "3.3.2" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `express` in `lib/core` from "4.16.2" to "4.16.3" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `node-sass` in `app/angular` from "4.8.1" to "4.8.2" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `express` in `app/react-native` from "4.16.2" to "4.16.3" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Upgraded `rxjs` in `examples/angular-cli` from "5.5.6" to "5.5.7" [#3201](https://github.com/storybooks/storybook/pull/3201)
|
||||
- Update gatsby in /docs from 1.9.231 to 1.9.232 [#3200](https://github.com/storybooks/storybook/pull/3200)
|
||||
|
||||
</details>
|
||||
|
||||
# 3.4.0-rc.2
|
||||
|
||||
2018-March-13
|
||||
@ -376,10 +453,17 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
|
||||
#### Features
|
||||
|
||||
- Addon-storysource: story source in addon pane [#2885](https://github.com/storybooks/storybook/pull/2885)
|
||||
- Addon Storysource improvements [#3040](https://github.com/storybooks/storybook/pull/3040)
|
||||
- Add moduleMetdata decorator for supplying common Angular metadata [#2959](https://github.com/storybooks/storybook/pull/2959)
|
||||
- `Addon Storysource` Add auto scrolling to the selected story [#3025](https://github.com/storybooks/storybook/pull/3025)
|
||||
- Enable groupId option for knobs to be organized into sub panels. [#2661](https://github.com/storybooks/storybook/pull/2661)
|
||||
- Added beforeScreenshot config option to addons/storyshots, to allow testing of components with mounting animations [#2972](https://github.com/storybooks/storybook/pull/2972)
|
||||
- Add GitHub flavored markdown notes [#2946](https://github.com/storybooks/storybook/pull/2946)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fix problem with RN on latest `master` build [#3045](https://github.com/storybooks/storybook/pull/3045)
|
||||
- Use @storybook/podda to fix npm engine version in podda [#3033](https://github.com/storybooks/storybook/pull/3033)
|
||||
|
||||
#### Documentation
|
||||
|
||||
@ -574,16 +658,6 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
|
||||
|
||||
</details>
|
||||
|
||||
#### Other
|
||||
|
||||
- Addon Storysource improvements [#3040](https://github.com/storybooks/storybook/pull/3040)
|
||||
- #3029 use @storybook/podda to fix npm engine version in podda [#3033](https://github.com/storybooks/storybook/pull/3033)
|
||||
- Add moduleMetdata decorator for supplying common Angular metadata [#2959](https://github.com/storybooks/storybook/pull/2959)
|
||||
- `Addon Storysource` Add auto scrolling to the selected story [#3025](https://github.com/storybooks/storybook/pull/3025)
|
||||
- add GitHub flavored markdown notes [#2946](https://github.com/storybooks/storybook/pull/2946)
|
||||
- Added beforeScreenshot config option to addons/storyshots, to allow testing of components with mounting animations [#2972](https://github.com/storybooks/storybook/pull/2972)
|
||||
- Enable groupId option for knobs to be organized into sub panels. [#2661](https://github.com/storybooks/storybook/pull/2661)
|
||||
|
||||
# 3.3.14
|
||||
|
||||
2018-February-21
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"axe-core": "^2.6.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamor": "^2.20.40",
|
||||
@ -33,7 +33,7 @@
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"faker": "^4.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"glamor": "^2.20.40",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook decorator to center components",
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,7 +29,7 @@
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2"
|
||||
"@storybook/react": "3.4.0-rc.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,8 +15,8 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/client-logger": "3.4.0-rc.3",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.12.1",
|
||||
@ -28,8 +28,8 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"react-test-renderer": "^16.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.12.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,7 +15,7 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -29,7 +29,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"raw-loader": "^0.5.1",
|
||||
"style-loader": "^0.20.3",
|
||||
"vue": "^2.5.16"
|
||||
|
||||
@ -2,17 +2,33 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
const styles = {
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'middle',
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
padding: '5px',
|
||||
color: '#444',
|
||||
common: {
|
||||
boxSizing: 'border-box',
|
||||
height: '25px',
|
||||
outline: 'none',
|
||||
border: '1px solid #f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 11,
|
||||
padding: '5px',
|
||||
color: '#444',
|
||||
},
|
||||
normal: {
|
||||
display: 'table-cell',
|
||||
width: '100%',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
range: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
rangeLabel: {
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
},
|
||||
rangeWrapper: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
};
|
||||
|
||||
class NumberType extends React.Component {
|
||||
@ -31,7 +47,7 @@ class NumberType extends React.Component {
|
||||
ref={c => {
|
||||
this.input = c;
|
||||
}}
|
||||
style={styles}
|
||||
style={{ ...styles.common, ...styles.normal }}
|
||||
value={knob.value}
|
||||
type="number"
|
||||
min={knob.min}
|
||||
@ -46,19 +62,23 @@ class NumberType extends React.Component {
|
||||
const { knob, onChange } = this.props;
|
||||
|
||||
return (
|
||||
<input
|
||||
id={knob.name}
|
||||
ref={c => {
|
||||
this.input = c;
|
||||
}}
|
||||
style={styles}
|
||||
value={knob.value}
|
||||
type="range"
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={() => onChange(parseFloat(this.input.value))}
|
||||
/>
|
||||
<div style={styles.rangeWrapper}>
|
||||
<span style={styles.rangeLabel}>{knob.min}</span>
|
||||
<input
|
||||
id={knob.name}
|
||||
ref={c => {
|
||||
this.input = c;
|
||||
}}
|
||||
style={{ ...styles.common, ...styles.range }}
|
||||
value={knob.value}
|
||||
type="range"
|
||||
min={knob.min}
|
||||
max={knob.max}
|
||||
step={knob.step}
|
||||
onChange={() => onChange(parseFloat(this.input.value))}
|
||||
/>
|
||||
<span style={styles.rangeLabel}>{`${knob.value} / ${knob.max}`}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -22,13 +22,13 @@
|
||||
"storybook": "start-storybook -p 9001"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"enzyme": "^3.3.0",
|
||||
"react": "^16.1.0",
|
||||
"react-dom": "^16.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -26,7 +26,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"@types/react": "^16.0.40"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -23,7 +23,7 @@
|
||||
"babel-runtime": "^6.26.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "3.4.0-rc.2"
|
||||
"@storybook/react": "3.4.0-rc.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "^3.3.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -16,8 +16,8 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "3.4.0-rc.2",
|
||||
"@storybook/node-logger": "3.4.0-rc.2",
|
||||
"@storybook/channels": "3.4.0-rc.3",
|
||||
"@storybook/node-logger": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glob": "^7.1.2",
|
||||
"global": "^4.3.2",
|
||||
@ -27,16 +27,16 @@
|
||||
"read-pkg-up": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"enzyme-to-json": "^3.3.3",
|
||||
"react": "^16.1.0",
|
||||
"react-dom": "^16.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"acorn": "^5.5.3",
|
||||
"acorn-es7": "^0.1.0",
|
||||
"acorn-jsx": "^4.1.1",
|
||||
|
||||
@ -16,7 +16,26 @@ or with yarn:
|
||||
|
||||
yarn add -D @storybook/addon-viewport
|
||||
|
||||
## Basic Usage
|
||||
|
||||
## Configuration
|
||||
|
||||
Import and use the `configure` function in your `config.js` file.
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/addon-viewport';
|
||||
```
|
||||
|
||||
### defaultViewport : String
|
||||
----
|
||||
Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area.
|
||||
|
||||
### viewports : Object
|
||||
----
|
||||
A key-value pair of viewport's key and properties for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Simply import the Storybook Viewport Addon in the `addons.js` file in your `.storybook` directory.
|
||||
|
||||
@ -26,12 +45,78 @@ import '@storybook/addon-viewport/register'
|
||||
|
||||
This will register the Viewport Addon to Storybook and will show up in the action area.
|
||||
|
||||
## FAQ
|
||||
|
||||
#### How do I add a new device?
|
||||
### Use Custom Set of Devices
|
||||
|
||||
Unfortunately, this is currently not supported.
|
||||
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configure` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
|
||||
|
||||
#### How can I make a custom screen size?
|
||||
```js
|
||||
import { configure } from '@storybook/addon-viewport';
|
||||
|
||||
Unfortunately, this is currently not supported.
|
||||
const newViewports = {
|
||||
kindleFire2: {
|
||||
name: 'Kindle Fire 2',
|
||||
styles: {
|
||||
width: '600px',
|
||||
height: '963px'
|
||||
}
|
||||
},
|
||||
kindleFireHD: {
|
||||
name: 'Kindle Fire HD',
|
||||
styles: {
|
||||
width: '533px',
|
||||
height: '801px'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
configure({
|
||||
viewports: newViewports
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Add New Device
|
||||
|
||||
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configure` function
|
||||
|
||||
```js
|
||||
import { configure, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
const newViewports = {
|
||||
kindleFire2: {
|
||||
name: 'Kindle Fire 2',
|
||||
styles: {
|
||||
width: '600px',
|
||||
height: '963px'
|
||||
}
|
||||
},
|
||||
kindleFireHD: {
|
||||
name: 'Kindle Fire HD',
|
||||
styles: {
|
||||
width: '533px',
|
||||
height: '801px'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
configure({
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
...newViewports
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Change The Default Viewport
|
||||
|
||||
This will make `iPhone 6` the default viewport for all stories.
|
||||
|
||||
```js
|
||||
import { configure } from '@storybook/addon-viewport';
|
||||
|
||||
configure({
|
||||
defaultViewport: 'iphone6'
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "register.js",
|
||||
"main": "preview.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "3.4.0-rc.2",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.1"
|
||||
|
||||
7
addons/viewport/preview.js
Normal file
7
addons/viewport/preview.js
Normal file
@ -0,0 +1,7 @@
|
||||
const preview = require('./dist/preview');
|
||||
|
||||
exports.configure = preview.configure;
|
||||
exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT;
|
||||
exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS;
|
||||
exports.withViewport = preview.withViewport;
|
||||
exports.Viewport = preview.Viewport;
|
||||
@ -1,119 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { baseFonts } from '@storybook/components';
|
||||
import { document } from 'global';
|
||||
|
||||
import { viewports, defaultViewport, resetViewport } from './viewportInfo';
|
||||
import { SelectViewport } from './SelectViewport';
|
||||
import { RotateViewport } from './RotateViewport';
|
||||
|
||||
import * as styles from './styles';
|
||||
|
||||
const storybookIframe = 'storybook-preview-iframe';
|
||||
const containerStyles = {
|
||||
padding: 15,
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
...baseFonts,
|
||||
};
|
||||
|
||||
export class Panel extends Component {
|
||||
static propTypes = {
|
||||
channel: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
};
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
viewport: defaultViewport,
|
||||
isLandscape: false,
|
||||
};
|
||||
|
||||
this.props.channel.on('addon:viewport:update', this.changeViewport);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.iframe = document.getElementById(storybookIframe);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.channel.removeListener('addon:viewport:update', this.changeViewport);
|
||||
}
|
||||
|
||||
iframe = undefined;
|
||||
|
||||
changeViewport = viewport => {
|
||||
const { viewport: previousViewport } = this.state;
|
||||
|
||||
if (previousViewport !== viewport) {
|
||||
this.setState(
|
||||
{
|
||||
viewport,
|
||||
isLandscape: false,
|
||||
},
|
||||
this.updateIframe
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
toggleLandscape = () => {
|
||||
const { isLandscape } = this.state;
|
||||
|
||||
this.setState({ isLandscape: !isLandscape }, this.updateIframe);
|
||||
};
|
||||
|
||||
updateIframe = () => {
|
||||
const { viewport: viewportKey, isLandscape } = this.state;
|
||||
const viewport = viewports[viewportKey] || resetViewport;
|
||||
|
||||
if (!this.iframe) {
|
||||
throw new Error('Cannot find Storybook iframe');
|
||||
}
|
||||
|
||||
Object.keys(viewport.styles).forEach(prop => {
|
||||
this.iframe.style[prop] = viewport.styles[prop];
|
||||
});
|
||||
|
||||
if (isLandscape) {
|
||||
this.iframe.style.height = viewport.styles.width;
|
||||
this.iframe.style.width = viewport.styles.height;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLandscape, viewport } = this.state;
|
||||
|
||||
const disableDefault = viewport === defaultViewport;
|
||||
const disabledStyles = disableDefault ? styles.disabled : {};
|
||||
|
||||
const buttonStyles = {
|
||||
...styles.button,
|
||||
...disabledStyles,
|
||||
marginTop: 30,
|
||||
padding: 20,
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={containerStyles}>
|
||||
<SelectViewport
|
||||
activeViewport={viewport}
|
||||
onChange={e => this.changeViewport(e.target.value)}
|
||||
/>
|
||||
|
||||
<RotateViewport
|
||||
onClick={this.toggleLandscape}
|
||||
disabled={disableDefault}
|
||||
active={isLandscape}
|
||||
/>
|
||||
|
||||
<button
|
||||
style={buttonStyles}
|
||||
onClick={() => this.changeViewport(defaultViewport)}
|
||||
disabled={disableDefault}
|
||||
>
|
||||
Reset Viewport
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { viewports, resetViewport, configuredStyles } from '../viewportInfo';
|
||||
|
||||
describe('Viewport/constants', () => {
|
||||
describe('viewports', () => {
|
||||
it('includes the default styles on every custom viewport', () => {
|
||||
const keys = Object.keys(viewports);
|
||||
|
||||
keys.forEach(key => {
|
||||
expect(viewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('resetViewport', () => {
|
||||
it('does not include the styles for a responsive iframe', () => {
|
||||
expect(resetViewport).not.toEqual(expect.objectContaining(configuredStyles));
|
||||
});
|
||||
});
|
||||
});
|
||||
204
addons/viewport/src/manager/components/Panel.js
Normal file
204
addons/viewport/src/manager/components/Panel.js
Normal file
@ -0,0 +1,204 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { baseFonts } from '@storybook/components';
|
||||
import { document } from 'global';
|
||||
|
||||
import { resetViewport, viewportsTransformer } from './viewportInfo';
|
||||
import { SelectViewport } from './SelectViewport';
|
||||
import { RotateViewport } from './RotateViewport';
|
||||
import {
|
||||
SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
|
||||
UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
|
||||
CONFIGURE_VIEWPORT_EVENT_ID,
|
||||
UPDATE_VIEWPORT_EVENT_ID,
|
||||
INITIAL_VIEWPORTS,
|
||||
DEFAULT_VIEWPORT,
|
||||
} from '../../shared';
|
||||
|
||||
import * as styles from './styles';
|
||||
|
||||
const storybookIframe = 'storybook-preview-iframe';
|
||||
const containerStyles = {
|
||||
padding: 15,
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
...baseFonts,
|
||||
};
|
||||
|
||||
const getDefaultViewport = (viewports, candidateViewport) =>
|
||||
candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
|
||||
|
||||
const getViewports = viewports =>
|
||||
Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
|
||||
|
||||
export class Panel extends Component {
|
||||
static propTypes = {
|
||||
channel: PropTypes.shape({}).isRequired,
|
||||
api: PropTypes.shape({}).isRequired,
|
||||
};
|
||||
|
||||
static defaultOptions = {
|
||||
viewports: INITIAL_VIEWPORTS,
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
};
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
viewport: DEFAULT_VIEWPORT,
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
viewports: viewportsTransformer(INITIAL_VIEWPORTS),
|
||||
isLandscape: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel, api } = this.props;
|
||||
|
||||
this.iframe = document.getElementById(storybookIframe);
|
||||
|
||||
channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
|
||||
channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
|
||||
channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
|
||||
channel.on(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);
|
||||
|
||||
this.unsubscribeFromOnStory = api.onStory(() => {
|
||||
this.changeViewport(this.state.defaultViewport);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
|
||||
if (this.unsubscribeFromOnStory) {
|
||||
this.unsubscribeFromOnStory();
|
||||
}
|
||||
|
||||
channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
|
||||
channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
|
||||
channel.removeListener(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
|
||||
channel.removeListener(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);
|
||||
}
|
||||
|
||||
setStoryDefaultViewport = viewport => {
|
||||
const { viewports } = this.state;
|
||||
const defaultViewport = getDefaultViewport(viewports, viewport);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
storyDefaultViewport: defaultViewport,
|
||||
viewport: defaultViewport,
|
||||
},
|
||||
this.updateIframe
|
||||
);
|
||||
};
|
||||
|
||||
unsetStoryDefaultViewport = () => {
|
||||
this.setState(
|
||||
{
|
||||
storyDefaultViewport: undefined,
|
||||
viewport: this.state.defaultViewport,
|
||||
},
|
||||
this.updateIframe
|
||||
);
|
||||
};
|
||||
|
||||
configure = (options = Panel.defaultOptions) => {
|
||||
const viewports = getViewports(options.viewports);
|
||||
const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
defaultViewport,
|
||||
viewport: defaultViewport,
|
||||
viewports: viewportsTransformer(viewports),
|
||||
},
|
||||
this.updateIframe
|
||||
);
|
||||
};
|
||||
|
||||
iframe = undefined;
|
||||
|
||||
changeViewport = viewport => {
|
||||
const { viewport: previousViewport } = this.state;
|
||||
|
||||
if (previousViewport !== viewport) {
|
||||
this.setState(
|
||||
{
|
||||
viewport,
|
||||
isLandscape: false,
|
||||
},
|
||||
this.updateIframe
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
toggleLandscape = () => {
|
||||
const { isLandscape } = this.state;
|
||||
|
||||
this.setState({ isLandscape: !isLandscape }, this.updateIframe);
|
||||
};
|
||||
|
||||
updateIframe = () => {
|
||||
const { viewports, viewport: viewportKey, isLandscape } = this.state;
|
||||
const viewport = viewports[viewportKey] || resetViewport;
|
||||
|
||||
if (!this.iframe) {
|
||||
throw new Error('Cannot find Storybook iframe');
|
||||
}
|
||||
|
||||
Object.keys(viewport.styles).forEach(prop => {
|
||||
this.iframe.style[prop] = viewport.styles[prop];
|
||||
});
|
||||
|
||||
if (isLandscape) {
|
||||
this.iframe.style.height = viewport.styles.width;
|
||||
this.iframe.style.width = viewport.styles.height;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
isLandscape,
|
||||
defaultViewport,
|
||||
storyDefaultViewport = defaultViewport,
|
||||
viewport,
|
||||
viewports,
|
||||
} = this.state;
|
||||
|
||||
const disableDefault = viewport === storyDefaultViewport;
|
||||
const disabledStyles = disableDefault ? styles.disabled : {};
|
||||
|
||||
const buttonStyles = {
|
||||
...styles.button,
|
||||
...disabledStyles,
|
||||
marginTop: 30,
|
||||
padding: 20,
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={containerStyles}>
|
||||
<SelectViewport
|
||||
viewports={viewports}
|
||||
defaultViewport={storyDefaultViewport}
|
||||
activeViewport={viewport}
|
||||
onChange={e => this.changeViewport(e.target.value)}
|
||||
/>
|
||||
|
||||
<RotateViewport
|
||||
onClick={this.toggleLandscape}
|
||||
disabled={disableDefault}
|
||||
active={isLandscape}
|
||||
/>
|
||||
|
||||
<button
|
||||
style={buttonStyles}
|
||||
onClick={() => this.changeViewport(storyDefaultViewport)}
|
||||
disabled={disableDefault}
|
||||
>
|
||||
Reset Viewport
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { viewports, defaultViewport } from './viewportInfo';
|
||||
import * as styles from './styles';
|
||||
|
||||
export function SelectViewport({ activeViewport, onChange }) {
|
||||
export function SelectViewport({ viewports, defaultViewport, activeViewport, onChange }) {
|
||||
return (
|
||||
<div style={styles.row}>
|
||||
<label htmlFor="device" style={styles.label}>
|
||||
Device
|
||||
</label>
|
||||
<select style={styles.action} id="device" value={activeViewport} onChange={onChange}>
|
||||
<option value={defaultViewport}>Default</option>
|
||||
{Object.keys(viewports).map(key => (
|
||||
<option value={key} key={key}>
|
||||
{viewports[key].name}
|
||||
</option>
|
||||
))}
|
||||
{Object.keys(viewports).map(key => {
|
||||
const { name } = viewports[key];
|
||||
return (
|
||||
<option value={key} key={key}>
|
||||
{key === defaultViewport ? `(Default) ${name}` : name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
@ -25,4 +26,6 @@ export function SelectViewport({ activeViewport, onChange }) {
|
||||
SelectViewport.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
activeViewport: PropTypes.string.isRequired,
|
||||
viewports: PropTypes.shape({}).isRequired,
|
||||
defaultViewport: PropTypes.string.isRequired,
|
||||
};
|
||||
@ -3,8 +3,11 @@ import { shallow } from 'enzyme';
|
||||
import { document } from 'global';
|
||||
|
||||
import { Panel } from '../Panel';
|
||||
import { viewports, defaultViewport, resetViewport } from '../viewportInfo';
|
||||
import { resetViewport, viewportsTransformer } from '../viewportInfo';
|
||||
import * as styles from '../styles';
|
||||
import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';
|
||||
|
||||
const initialViewportAt = index => Object.keys(INITIAL_VIEWPORTS)[index];
|
||||
|
||||
describe('Viewport/Panel', () => {
|
||||
const props = {
|
||||
@ -12,6 +15,9 @@ describe('Viewport/Panel', () => {
|
||||
on: jest.fn(),
|
||||
removeListener: jest.fn(),
|
||||
},
|
||||
api: {
|
||||
onStory: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
let subject;
|
||||
@ -23,17 +29,12 @@ describe('Viewport/Panel', () => {
|
||||
describe('construct', () => {
|
||||
it('creates the initial state', () => {
|
||||
expect(subject.instance().state).toEqual({
|
||||
viewport: defaultViewport,
|
||||
viewport: DEFAULT_VIEWPORT,
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
viewports: viewportsTransformer(INITIAL_VIEWPORTS),
|
||||
isLandscape: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('listens on the channel', () => {
|
||||
expect(props.channel.on).toHaveBeenCalledWith(
|
||||
'addon:viewport:update',
|
||||
subject.instance().changeViewport
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('componentDidMount', () => {
|
||||
@ -53,6 +54,34 @@ describe('Viewport/Panel', () => {
|
||||
it('gets the iframe', () => {
|
||||
expect(subject.instance().iframe).toEqual('iframe');
|
||||
});
|
||||
|
||||
it('listens on `configure` channel', () => {
|
||||
expect(props.channel.on).toHaveBeenCalledWith(
|
||||
'addon:viewport:configure',
|
||||
subject.instance().configure
|
||||
);
|
||||
});
|
||||
|
||||
it('listens on `update` channel', () => {
|
||||
expect(props.channel.on).toHaveBeenCalledWith(
|
||||
'addon:viewport:update',
|
||||
subject.instance().changeViewport
|
||||
);
|
||||
});
|
||||
|
||||
it('listens on `setStoryDefaultViewport` channel', () => {
|
||||
expect(props.channel.on).toHaveBeenCalledWith(
|
||||
'addon:viewport:setStoryDefaultViewport',
|
||||
subject.instance().setStoryDefaultViewport
|
||||
);
|
||||
});
|
||||
|
||||
it('listens on `unsetStoryDefaultViewport` channel', () => {
|
||||
expect(props.channel.on).toHaveBeenCalledWith(
|
||||
'addon:viewport:unsetStoryDefaultViewport',
|
||||
subject.instance().unsetStoryDefaultViewport
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('componentWillUnmount', () => {
|
||||
@ -60,12 +89,97 @@ describe('Viewport/Panel', () => {
|
||||
subject.instance().componentWillUnmount();
|
||||
});
|
||||
|
||||
it('removes the channel listener', () => {
|
||||
it('removes `update` channel listener', () => {
|
||||
expect(props.channel.removeListener).toHaveBeenCalledWith(
|
||||
'addon:viewport:update',
|
||||
subject.instance().changeViewport
|
||||
);
|
||||
});
|
||||
|
||||
it('removes `configure` channel listener', () => {
|
||||
expect(props.channel.removeListener).toHaveBeenCalledWith(
|
||||
'addon:viewport:configure',
|
||||
subject.instance().configure
|
||||
);
|
||||
});
|
||||
|
||||
it('removes `setStoryDefaultViewport` channel listener', () => {
|
||||
expect(props.channel.removeListener).toHaveBeenCalledWith(
|
||||
'addon:viewport:setStoryDefaultViewport',
|
||||
subject.instance().setStoryDefaultViewport
|
||||
);
|
||||
});
|
||||
|
||||
it('removes `unsetStoryDefaultViewport` channel listener', () => {
|
||||
expect(props.channel.removeListener).toHaveBeenCalledWith(
|
||||
'addon:viewport:unsetStoryDefaultViewport',
|
||||
subject.instance().unsetStoryDefaultViewport
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('configure', () => {
|
||||
const initialConfigs = {
|
||||
defaultViewport: 'bar',
|
||||
viewports: {
|
||||
foo: {
|
||||
styles: {
|
||||
width: '0',
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
styles: {
|
||||
width: '0',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
subject.instance().setState = jest.fn();
|
||||
subject.instance().updateIframe = jest.fn();
|
||||
subject.instance().configure(initialConfigs);
|
||||
});
|
||||
|
||||
it('sets the state with the new information', () => {
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
...initialConfigs,
|
||||
viewport: 'bar',
|
||||
viewports: viewportsTransformer(initialConfigs.viewports),
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
);
|
||||
});
|
||||
|
||||
it('makes first viewport default if default does not exist', () => {
|
||||
subject.instance().configure({
|
||||
...initialConfigs,
|
||||
defaultViewport: 'iphone6',
|
||||
});
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
defaultViewport: 'foo',
|
||||
viewport: 'foo',
|
||||
viewports: viewportsTransformer(initialConfigs.viewports),
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
);
|
||||
});
|
||||
|
||||
it('sets viewports to INITIAL_VIEWPORTS if viewports is empty', () => {
|
||||
subject.instance().configure({
|
||||
viewports: {},
|
||||
});
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
viewport: DEFAULT_VIEWPORT,
|
||||
viewports: viewportsTransformer(INITIAL_VIEWPORTS),
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('changeViewport', () => {
|
||||
@ -76,13 +190,13 @@ describe('Viewport/Panel', () => {
|
||||
|
||||
describe('new viewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.instance().changeViewport(viewports[0]);
|
||||
subject.instance().changeViewport(initialViewportAt(1));
|
||||
});
|
||||
|
||||
it('sets the state with the new information', () => {
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
viewport: viewports[0],
|
||||
viewport: initialViewportAt(1),
|
||||
isLandscape: false,
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
@ -92,7 +206,7 @@ describe('Viewport/Panel', () => {
|
||||
|
||||
describe('same as previous viewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.instance().changeViewport(defaultViewport);
|
||||
subject.instance().changeViewport(DEFAULT_VIEWPORT);
|
||||
});
|
||||
|
||||
it('doesnt update the state', () => {
|
||||
@ -101,6 +215,42 @@ describe('Viewport/Panel', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('setStoryDefaultViewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.instance().setState = jest.fn();
|
||||
subject.instance().updateIframe = jest.fn();
|
||||
subject.instance().setStoryDefaultViewport(initialViewportAt(1));
|
||||
});
|
||||
|
||||
it('sets the state with the new information', () => {
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
viewport: initialViewportAt(1),
|
||||
storyDefaultViewport: initialViewportAt(1),
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('unsetStoryDefaultViewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.instance().setState = jest.fn();
|
||||
subject.instance().updateIframe = jest.fn();
|
||||
subject.instance().unsetStoryDefaultViewport();
|
||||
});
|
||||
|
||||
it('resets the state', () => {
|
||||
expect(subject.instance().setState).toHaveBeenCalledWith(
|
||||
{
|
||||
viewport: DEFAULT_VIEWPORT,
|
||||
storyDefaultViewport: undefined,
|
||||
},
|
||||
subject.instance().updateIframe
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleLandscape', () => {
|
||||
beforeEach(() => {
|
||||
subject.setState({ isLandscape: false });
|
||||
@ -184,7 +334,7 @@ describe('Viewport/Panel', () => {
|
||||
|
||||
it('toggles the landscape on click', () => {
|
||||
resetBtn.simulate('click');
|
||||
expect(subject.instance().changeViewport).toHaveBeenCalledWith(defaultViewport);
|
||||
expect(subject.instance().changeViewport).toHaveBeenCalledWith(DEFAULT_VIEWPORT);
|
||||
});
|
||||
});
|
||||
|
||||
@ -199,7 +349,23 @@ describe('Viewport/Panel', () => {
|
||||
it('passes the activeViewport', () => {
|
||||
expect(select.props()).toEqual(
|
||||
expect.objectContaining({
|
||||
activeViewport: defaultViewport,
|
||||
activeViewport: DEFAULT_VIEWPORT,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('passes the defaultViewport', () => {
|
||||
expect(select.props()).toEqual(
|
||||
expect.objectContaining({
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('passes the INITIAL_VIEWPORTS', () => {
|
||||
expect(select.props()).toEqual(
|
||||
expect.objectContaining({
|
||||
viewports: viewportsTransformer(INITIAL_VIEWPORTS),
|
||||
})
|
||||
);
|
||||
});
|
||||
@ -226,7 +392,7 @@ describe('Viewport/Panel', () => {
|
||||
|
||||
describe('is on the default viewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.setState({ viewport: defaultViewport });
|
||||
subject.setState({ viewport: DEFAULT_VIEWPORT });
|
||||
});
|
||||
|
||||
it('sets the disabled property', () => {
|
||||
@ -234,7 +400,7 @@ describe('Viewport/Panel', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('is on a responsive viewport', () => {
|
||||
describe('is on a non-default viewport', () => {
|
||||
beforeEach(() => {
|
||||
subject.setState({ viewport: 'iphone6' });
|
||||
toggle = subject.find('RotateViewport');
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { SelectViewport } from '../SelectViewport';
|
||||
import { viewports, defaultViewport } from '../viewportInfo';
|
||||
import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../../../shared';
|
||||
import * as styles from '../styles';
|
||||
|
||||
describe('Viewport/SelectViewport', () => {
|
||||
@ -11,7 +11,9 @@ describe('Viewport/SelectViewport', () => {
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
onChange: jest.fn(),
|
||||
activeViewport: defaultViewport,
|
||||
activeViewport: DEFAULT_VIEWPORT,
|
||||
viewports: INITIAL_VIEWPORTS,
|
||||
defaultViewport: DEFAULT_VIEWPORT,
|
||||
};
|
||||
|
||||
subject = shallow(<SelectViewport {...props} />);
|
||||
@ -31,21 +33,23 @@ describe('Viewport/SelectViewport', () => {
|
||||
describe('select', () => {
|
||||
it('has a default option first', () => {
|
||||
const firstOption = subject.find('option').first();
|
||||
expect(firstOption.props().value).toEqual(defaultViewport);
|
||||
expect(firstOption.props().value).toEqual(DEFAULT_VIEWPORT);
|
||||
});
|
||||
|
||||
describe('dynamic options', () => {
|
||||
const viewportKeys = Object.keys(viewports);
|
||||
const viewportKeys = Object.keys(INITIAL_VIEWPORTS);
|
||||
it('has at least 1 option', () => {
|
||||
expect(viewportKeys.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
viewportKeys.forEach(key => {
|
||||
let option;
|
||||
const { name } = INITIAL_VIEWPORTS[key];
|
||||
const expectedText = key === DEFAULT_VIEWPORT ? `(Default) ${name}` : name;
|
||||
|
||||
it(`renders an option for ${viewports[key].name}`, () => {
|
||||
option = subject.find(`[value="${key}"]`);
|
||||
expect(option.text()).toEqual(viewports[key].name);
|
||||
it(`renders an option for ${name}`, () => {
|
||||
option = subject.find(`option[value="${key}"]`);
|
||||
expect(option.text()).toEqual(expectedText);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,61 @@
|
||||
import {
|
||||
resetViewport,
|
||||
configuredStyles,
|
||||
applyStyles,
|
||||
viewportsTransformer,
|
||||
} from '../viewportInfo';
|
||||
|
||||
describe('Viewport/constants', () => {
|
||||
describe('resetViewport', () => {
|
||||
it('does not include the styles for a responsive iframe', () => {
|
||||
expect(resetViewport).not.toEqual(expect.objectContaining(configuredStyles));
|
||||
});
|
||||
});
|
||||
|
||||
describe('applyStyles', () => {
|
||||
it('creates a new viewport with all given styles applied', () => {
|
||||
const viewport = {
|
||||
styles: {
|
||||
width: '50px',
|
||||
},
|
||||
};
|
||||
const styles = {
|
||||
foo: 'bar',
|
||||
john: 'doe',
|
||||
};
|
||||
const newViewport = applyStyles(viewport, styles);
|
||||
|
||||
expect(newViewport.styles).toEqual(
|
||||
expect.objectContaining({
|
||||
width: '50px',
|
||||
foo: 'bar',
|
||||
john: 'doe',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('viewportsTransformer', () => {
|
||||
it('includes the default styles on every viewport', () => {
|
||||
const viewports = {
|
||||
foo: {
|
||||
styles: {
|
||||
width: '50px',
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
styles: {
|
||||
width: '100px',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const transformedViewports = viewportsTransformer(viewports);
|
||||
const keys = Object.keys(transformedViewports);
|
||||
|
||||
keys.forEach(key => {
|
||||
expect(transformedViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
45
addons/viewport/src/manager/components/viewportInfo.js
Normal file
45
addons/viewport/src/manager/components/viewportInfo.js
Normal file
@ -0,0 +1,45 @@
|
||||
export const configuredStyles = {
|
||||
border: '1px solid #728099',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
|
||||
};
|
||||
|
||||
export const resetViewport = {
|
||||
name: 'Reset',
|
||||
styles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
display: 'block',
|
||||
margin: '0',
|
||||
boxShadow: 'none',
|
||||
},
|
||||
};
|
||||
|
||||
export function applyStyles(viewport, styles) {
|
||||
const mixedStyles = {
|
||||
...styles,
|
||||
...viewport.styles,
|
||||
};
|
||||
|
||||
return {
|
||||
...viewport,
|
||||
styles: mixedStyles,
|
||||
};
|
||||
}
|
||||
|
||||
export function applyDefaultStyles(viewport) {
|
||||
return applyStyles(viewport, configuredStyles);
|
||||
}
|
||||
|
||||
export const transformViewports = transformer => viewports =>
|
||||
Object.keys(viewports).reduce(
|
||||
(all, key) => ({
|
||||
...all,
|
||||
[key]: transformer(viewports[key]),
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
export const viewportsTransformer = transformViewports(applyDefaultStyles);
|
||||
@ -3,8 +3,7 @@ import addons from '@storybook/addons';
|
||||
|
||||
import { Panel } from './components/Panel';
|
||||
|
||||
const ADDON_ID = 'storybook-addon-viewport';
|
||||
const PANEL_ID = `${ADDON_ID}/addon-panel`;
|
||||
import { ADDON_ID, PANEL_ID } from '../shared';
|
||||
|
||||
const addChannel = api => {
|
||||
const channel = addons.getChannel();
|
||||
@ -1,5 +1,5 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { init, addChannel } from '../manager';
|
||||
import { init, addChannel } from '../';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
47
addons/viewport/src/preview/index.js
Normal file
47
addons/viewport/src/preview/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import addons from '@storybook/addons';
|
||||
import {
|
||||
CONFIGURE_VIEWPORT_EVENT_ID,
|
||||
SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
|
||||
UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
|
||||
} from '../shared';
|
||||
|
||||
export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
|
||||
|
||||
export function configure(configs = {}) {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
if (channel) {
|
||||
channel.emit(CONFIGURE_VIEWPORT_EVENT_ID, configs);
|
||||
}
|
||||
}
|
||||
|
||||
export function withViewport(name) {
|
||||
return getStory => <Viewport name={name}>{getStory()}</Viewport>;
|
||||
}
|
||||
|
||||
export class Viewport extends React.Component {
|
||||
static propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.channel = addons.getChannel();
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.props.name);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.channel.emit(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID);
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
64
addons/viewport/src/preview/tests/index.test.js
Normal file
64
addons/viewport/src/preview/tests/index.test.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { shallow } from 'enzyme';
|
||||
import { configure, Viewport } from '../';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
describe('Viewport preview', () => {
|
||||
const channel = {
|
||||
emit: jest.fn(),
|
||||
};
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
describe('configure', () => {
|
||||
it('publishes configure event with all passed configurations', () => {
|
||||
const configs = {
|
||||
foo: 'bar',
|
||||
john: 'Doe',
|
||||
};
|
||||
configure(configs);
|
||||
|
||||
expect(channel.emit).toHaveBeenCalledTimes(1);
|
||||
expect(channel.emit).toHaveBeenCalledWith('addon:viewport:configure', {
|
||||
foo: 'bar',
|
||||
john: 'Doe',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Viewport', () => {
|
||||
const props = {
|
||||
name: 'iphone6',
|
||||
children: '1337',
|
||||
};
|
||||
|
||||
let subject;
|
||||
|
||||
beforeEach(() => {
|
||||
subject = shallow(<Viewport {...props} />);
|
||||
});
|
||||
|
||||
describe('componentWillMount', () => {
|
||||
it('publishes `set` event with `iphone6`', () => {
|
||||
expect(channel.emit).toHaveBeenCalledTimes(1);
|
||||
expect(channel.emit).toHaveBeenCalledWith(
|
||||
'addon:viewport:setStoryDefaultViewport',
|
||||
'iphone6'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('componentWillUnmount', () => {
|
||||
beforeEach(() => {
|
||||
channel.emit.mockReset();
|
||||
subject.unmount();
|
||||
});
|
||||
|
||||
it('publishes `unset` event', () => {
|
||||
expect(channel.emit).toHaveBeenCalledTimes(1);
|
||||
expect(channel.emit).toHaveBeenCalledWith('addon:viewport:unsetStoryDefaultViewport');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,30 +1,26 @@
|
||||
export const configuredStyles = {
|
||||
border: '1px solid #728099',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
|
||||
};
|
||||
|
||||
export const defaultViewport = 'default';
|
||||
export const resetViewport = {
|
||||
name: 'Reset',
|
||||
styles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
display: 'block',
|
||||
margin: '0',
|
||||
boxShadow: 'none',
|
||||
export const ADDON_ID = 'storybook-addon-viewport';
|
||||
export const PANEL_ID = `${ADDON_ID}/addon-panel`;
|
||||
export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
|
||||
export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
|
||||
export const SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:setStoryDefaultViewport';
|
||||
export const UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:unsetStoryDefaultViewport';
|
||||
export const INITIAL_VIEWPORTS = {
|
||||
responsive: {
|
||||
name: 'Responsive',
|
||||
styles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
display: 'block',
|
||||
margin: '0',
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const viewports = {
|
||||
iphone5: {
|
||||
name: 'iPhone 5',
|
||||
styles: {
|
||||
height: '568px',
|
||||
width: '320px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
iphone6: {
|
||||
@ -32,7 +28,6 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '667px',
|
||||
width: '375px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
iphone6p: {
|
||||
@ -40,7 +35,6 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '736px',
|
||||
width: '414px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
ipad: {
|
||||
@ -48,7 +42,6 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '1024px',
|
||||
width: '768px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
galaxys5: {
|
||||
@ -56,7 +49,6 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '640px',
|
||||
width: '360px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
nexus5x: {
|
||||
@ -64,7 +56,6 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '660px',
|
||||
width: '412px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
nexus6p: {
|
||||
@ -72,7 +63,7 @@ export const viewports = {
|
||||
styles: {
|
||||
height: '732px',
|
||||
width: '412px',
|
||||
...configuredStyles,
|
||||
},
|
||||
},
|
||||
};
|
||||
export const DEFAULT_VIEWPORT = 'responsive';
|
||||
14
app/angular/index.d.ts
vendored
14
app/angular/index.d.ts
vendored
@ -11,7 +11,15 @@ export interface IStoribookSection {
|
||||
stories: IStorybookStory[];
|
||||
}
|
||||
|
||||
export type IGetStory = () => {
|
||||
export interface IStoryContext {
|
||||
kind: string;
|
||||
name: string;
|
||||
parameters: any;
|
||||
}
|
||||
|
||||
export type IGetStory = (
|
||||
IStoryContext
|
||||
) => {
|
||||
props?: ICollection;
|
||||
moduleMetadata?: Partial<NgModuleMetadata>;
|
||||
component?: any;
|
||||
@ -21,13 +29,15 @@ export type IGetStory = () => {
|
||||
export interface IApi {
|
||||
kind: string;
|
||||
addDecorator: (decorator: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory) => IApi;
|
||||
addParameters: (parameters: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi;
|
||||
}
|
||||
|
||||
declare module '@storybook/angular' {
|
||||
export function storiesOf(kind: string, module: NodeModule): IApi;
|
||||
export function setAddon(addon: any): void;
|
||||
export function addDecorator(decorator: any): IApi;
|
||||
export function addParameters(parameters: any): IApi;
|
||||
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
|
||||
export function getStorybook(): IStoribookSection[];
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
|
||||
"bugs": {
|
||||
@ -23,11 +23,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.2",
|
||||
"@storybook/core": "3.4.0-rc.2",
|
||||
"@storybook/node-logger": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.3",
|
||||
"@storybook/core": "3.4.0-rc.3",
|
||||
"@storybook/node-logger": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"babel-loader": "^7.1.4",
|
||||
@ -44,7 +44,7 @@
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"json5": "^0.5.1",
|
||||
"markdown-loader": "^2.0.2",
|
||||
"node-sass": "^4.8.2",
|
||||
"node-sass": "^4.8.3",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.0.0",
|
||||
"react-dev-utils": "^5.0.0",
|
||||
|
||||
9
app/angular/src/client/index.js
vendored
9
app/angular/src/client/index.js
vendored
@ -1,3 +1,10 @@
|
||||
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
||||
export { moduleMetadata } from './preview/angular/decorators';
|
||||
|
||||
@ -8,8 +8,7 @@ import { NoPreviewComponent } from './components/no-preview.component';
|
||||
import { STORY } from './app.token';
|
||||
import {
|
||||
NgModuleMetadata,
|
||||
IGetStoryWithContext,
|
||||
IContext,
|
||||
IGetStory,
|
||||
NgProvidedData,
|
||||
IRenderErrorFn,
|
||||
IRenderStoryFn,
|
||||
@ -78,11 +77,10 @@ const createComponentFromTemplate = (template: string, styles: string[]): Functi
|
||||
};
|
||||
|
||||
const initModule = (
|
||||
currentStory: IGetStoryWithContext,
|
||||
context: IContext,
|
||||
currentStory: IGetStory,
|
||||
reRender: boolean = false
|
||||
): Function => {
|
||||
const storyObj = currentStory(context);
|
||||
const storyObj = currentStory();
|
||||
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
|
||||
|
||||
let AnnotatedComponent;
|
||||
@ -154,6 +152,6 @@ export const renderNoPreview = debounce(() => {
|
||||
draw(Module);
|
||||
});
|
||||
|
||||
export const renderNgApp = debounce((story, context, reRender) => {
|
||||
draw(initModule(story, context, reRender), reRender);
|
||||
export const renderNgApp = debounce((story, reRender) => {
|
||||
draw(initModule(story, reRender), reRender);
|
||||
});
|
||||
|
||||
@ -26,15 +26,10 @@ export interface NgError {
|
||||
|
||||
export type NgProvidedData = NgStory | NgError;
|
||||
|
||||
export interface IContext {
|
||||
[p: string]: any;
|
||||
}
|
||||
|
||||
export type IGetStoryWithContext = (context: IContext) => NgStory;
|
||||
export type IGetStory = () => NgStory;
|
||||
|
||||
export type IRenderStoryFn = (
|
||||
story: IGetStoryWithContext,
|
||||
context: IContext,
|
||||
story: IGetStory,
|
||||
reRender?: boolean
|
||||
) => void;
|
||||
export type IRenderErrorFn = (error: Error) => void;
|
||||
|
||||
18
app/angular/src/client/preview/index.js
vendored
18
app/angular/src/client/preview/index.js
vendored
@ -25,11 +25,19 @@ const storyStore = new StoryStore();
|
||||
const reduxStore = createStore(reducer);
|
||||
const context = { storyStore, reduxStore };
|
||||
const clientApi = new ClientApi(context);
|
||||
export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
let channel;
|
||||
if (isBrowser) {
|
||||
// create preview channel
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
@ -40,9 +48,13 @@ if (isBrowser) {
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
window.onkeydown = handleKeyboardShortcuts(channel);
|
||||
}
|
||||
|
||||
// Provide access to external scripts
|
||||
// Provide access to external scripts if `window` is defined.
|
||||
// NOTE this is different to isBrowser, primarily for the JSDOM use case
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__STORYBOOK_CLIENT_API__ = clientApi;
|
||||
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
|
||||
}
|
||||
|
||||
const configApi = new ConfigApi({ ...context, clearDecorators });
|
||||
|
||||
8
app/angular/src/client/preview/render.js
vendored
8
app/angular/src/client/preview/render.js
vendored
@ -27,7 +27,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
|
||||
const { selectedKind, selectedStory } = data;
|
||||
|
||||
const story = storyStore.getStory(selectedKind, selectedStory);
|
||||
const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
|
||||
if (!story) {
|
||||
renderNoPreview();
|
||||
return null;
|
||||
@ -47,11 +47,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
previousKind = selectedKind;
|
||||
previousStory = selectedStory;
|
||||
}
|
||||
const context = {
|
||||
kind: selectedKind,
|
||||
story: selectedStory,
|
||||
};
|
||||
return renderNgApp(story, context, reRender);
|
||||
return renderNgApp(story, reRender);
|
||||
}
|
||||
|
||||
export default function renderPreview({ reduxStore, storyStore }, forceRender = false) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/polymer",
|
||||
"bugs": {
|
||||
@ -22,12 +22,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.2",
|
||||
"@storybook/client-logger": "3.4.0-rc.2",
|
||||
"@storybook/core": "3.4.0-rc.2",
|
||||
"@storybook/node-logger": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.3",
|
||||
"@storybook/client-logger": "3.4.0-rc.3",
|
||||
"@storybook/core": "3.4.0-rc.3",
|
||||
"@storybook/node-logger": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"@webcomponents/webcomponentsjs": "^1.1.0",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"babel-loader": "^7.1.4",
|
||||
|
||||
@ -1 +1,8 @@
|
||||
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
||||
@ -27,11 +27,19 @@ const reduxStore = createStore(reducer);
|
||||
const context = { storyStore, reduxStore };
|
||||
|
||||
const clientApi = new ClientApi(context);
|
||||
export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
let channel;
|
||||
if (isBrowser) {
|
||||
// setup preview channel
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
@ -42,9 +50,13 @@ if (isBrowser) {
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
window.onkeydown = handleKeyboardShortcuts(channel);
|
||||
}
|
||||
|
||||
// Provide access to external scripts
|
||||
// Provide access to external scripts if `window` is defined.
|
||||
// NOTE this is different to isBrowser, primarily for the JSDOM use case
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__STORYBOOK_CLIENT_API__ = clientApi;
|
||||
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
|
||||
}
|
||||
|
||||
const configApi = new ConfigApi({ clearDecorators, ...context });
|
||||
|
||||
@ -21,7 +21,7 @@ export function renderException(error) {
|
||||
export function renderMain(data, storyStore) {
|
||||
if (storyStore.size() === 0) return;
|
||||
const { selectedKind, selectedStory } = data;
|
||||
const story = storyStore.getStory(selectedKind, selectedStory);
|
||||
const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
|
||||
|
||||
if (selectedKind !== previousKind || previousStory !== selectedStory) {
|
||||
previousKind = selectedKind;
|
||||
@ -29,11 +29,7 @@ export function renderMain(data, storyStore) {
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
const context = {
|
||||
kind: selectedKind,
|
||||
story: selectedStory,
|
||||
};
|
||||
const component = story ? story(context) : nopreview;
|
||||
const component = story ? story() : nopreview;
|
||||
|
||||
if (!component) {
|
||||
renderError({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -25,12 +25,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/channel-websocket": "3.4.0-rc.2",
|
||||
"@storybook/core": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/channel-websocket": "3.4.0-rc.3",
|
||||
"@storybook/core": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-macros": "^2.2.0",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
|
||||
1
app/react-native/src/index.js
vendored
1
app/react-native/src/index.js
vendored
@ -11,6 +11,7 @@ const preview = new Preview();
|
||||
export const storiesOf = preview.storiesOf.bind(preview);
|
||||
export const setAddon = preview.setAddon.bind(preview);
|
||||
export const addDecorator = preview.addDecorator.bind(preview);
|
||||
export const addParameters = preview.addParameters.bind(preview);
|
||||
export const clearDecorators = preview.clearDecorators.bind(preview);
|
||||
export const configure = preview.configure.bind(preview);
|
||||
export const getStorybook = preview.getStorybook.bind(preview);
|
||||
|
||||
@ -44,10 +44,9 @@ export default class StoryView extends Component {
|
||||
return this.renderHelp();
|
||||
}
|
||||
const { kind, story } = this.state.selection;
|
||||
const context = { kind, story };
|
||||
return (
|
||||
<View key={`${kind}:::${story}`} style={style.main}>
|
||||
{this.state.storyFn(context)}
|
||||
{this.state.storyFn()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
11
app/react-native/src/preview/index.js
vendored
11
app/react-native/src/preview/index.js
vendored
@ -18,7 +18,14 @@ export default class Preview {
|
||||
this._stories = new StoryStore();
|
||||
this._clientApi = new ClientApi({ storyStore: this._stories });
|
||||
|
||||
['storiesOf', 'setAddon', 'addDecorator', 'clearDecorators', 'getStorybook'].forEach(method => {
|
||||
[
|
||||
'storiesOf',
|
||||
'setAddon',
|
||||
'addDecorator',
|
||||
'addParameters',
|
||||
'clearDecorators',
|
||||
'getStorybook',
|
||||
].forEach(method => {
|
||||
this[method] = this._clientApi[method].bind(this._clientApi);
|
||||
});
|
||||
}
|
||||
@ -87,7 +94,7 @@ export default class Preview {
|
||||
|
||||
_selectStory(selection) {
|
||||
const { kind, story } = selection;
|
||||
const storyFn = this._stories.getStory(kind, story);
|
||||
const storyFn = this._stories.getStoryWithContext(kind, story);
|
||||
this._events.emit('story', storyFn, selection);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
|
||||
"bugs": {
|
||||
@ -23,14 +23,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.2",
|
||||
"@storybook/client-logger": "3.4.0-rc.2",
|
||||
"@storybook/core": "3.4.0-rc.2",
|
||||
"@storybook/node-logger": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.3",
|
||||
"@storybook/client-logger": "3.4.0-rc.3",
|
||||
"@storybook/core": "3.4.0-rc.3",
|
||||
"@storybook/node-logger": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-macros": "^2.2.0",
|
||||
|
||||
@ -8,6 +8,7 @@ export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
|
||||
@ -27,11 +27,19 @@ const reduxStore = createStore(reducer);
|
||||
const context = { storyStore, reduxStore };
|
||||
|
||||
const clientApi = new ClientApi(context);
|
||||
export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
let channel;
|
||||
if (isBrowser) {
|
||||
// setup preview channel
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
@ -42,9 +50,13 @@ if (isBrowser) {
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
window.onkeydown = handleKeyboardShortcuts(channel);
|
||||
}
|
||||
|
||||
// Provide access to external scripts
|
||||
// Provide access to external scripts if `window` is defined.
|
||||
// NOTE this is different to isBrowser, primarily for the JSDOM use case
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__STORYBOOK_CLIENT_API__ = clientApi;
|
||||
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
|
||||
}
|
||||
|
||||
const configApi = new ConfigApi({ clearDecorators, ...context });
|
||||
|
||||
@ -47,7 +47,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
const { selectedKind, selectedStory } = data;
|
||||
|
||||
const revision = storyStore.getRevision();
|
||||
const story = storyStore.getStory(selectedKind, selectedStory);
|
||||
const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
|
||||
if (!story) {
|
||||
ReactDOM.render(noPreview, rootEl);
|
||||
return null;
|
||||
@ -77,12 +77,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
previousStory = selectedStory;
|
||||
ReactDOM.unmountComponentAtNode(rootEl);
|
||||
|
||||
const context = {
|
||||
kind: selectedKind,
|
||||
story: selectedStory,
|
||||
};
|
||||
|
||||
const element = story(context);
|
||||
const element = story();
|
||||
|
||||
if (!element) {
|
||||
const error = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
|
||||
"bugs": {
|
||||
@ -23,10 +23,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.2",
|
||||
"@storybook/core": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.3",
|
||||
"@storybook/core": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-macros": "^2.2.0",
|
||||
|
||||
@ -1 +1,8 @@
|
||||
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
||||
@ -44,11 +44,19 @@ const decorateStory = (getStory, decorators) =>
|
||||
);
|
||||
const context = { storyStore, reduxStore, decorateStory };
|
||||
const clientApi = new ClientApi(context);
|
||||
export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
let channel;
|
||||
if (isBrowser) {
|
||||
// create preview channel
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
@ -59,9 +67,13 @@ if (isBrowser) {
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
window.onkeydown = handleKeyboardShortcuts(channel);
|
||||
}
|
||||
|
||||
// Provide access to external scripts
|
||||
// Provide access to external scripts if `window` is defined.
|
||||
// NOTE this is different to isBrowser, primarily for the JSDOM use case
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__STORYBOOK_CLIENT_API__ = clientApi;
|
||||
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
|
||||
}
|
||||
|
||||
const configApi = new ConfigApi({ ...context, clearDecorators });
|
||||
|
||||
@ -19,7 +19,13 @@ function renderErrorDisplay(error) {
|
||||
return h(
|
||||
'div',
|
||||
{ attrs: { id: 'error-display' } },
|
||||
error ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })] : []
|
||||
error
|
||||
? [
|
||||
h(ErrorDisplay, {
|
||||
props: { message: error.message, stack: error.stack },
|
||||
}),
|
||||
]
|
||||
: []
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -54,7 +60,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
|
||||
const { selectedKind, selectedStory } = data;
|
||||
|
||||
const story = storyStore.getStory(selectedKind, selectedStory);
|
||||
const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
|
||||
|
||||
// Unmount the previous story only if selectedKind or selectedStory has changed.
|
||||
// renderMain() gets executed after each action. Actions will cause the whole
|
||||
@ -71,12 +77,7 @@ export function renderMain(data, storyStore, forceRender) {
|
||||
return;
|
||||
}
|
||||
|
||||
const context = {
|
||||
kind: selectedKind,
|
||||
story: selectedStory,
|
||||
};
|
||||
|
||||
const component = story ? story(context) : NoPreview;
|
||||
const component = story ? story() : NoPreview;
|
||||
|
||||
if (!component) {
|
||||
const error = {
|
||||
|
||||
@ -10,7 +10,7 @@ const Versions = {
|
||||
MAJOR: 'MAJOR',
|
||||
};
|
||||
|
||||
const branchVersion = Versions.PATCH;
|
||||
const branchVersion = Versions.MAJOR;
|
||||
|
||||
const checkRequiredLabels = labels => {
|
||||
const forbiddenLabels = flatten([
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -27,15 +27,15 @@
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.7.3",
|
||||
"@angular/compiler-cli": "^5.2.9",
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.2",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/angular": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.3",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/angular": "3.4.0-rc.3",
|
||||
"@types/jasmine": "~2.8.6",
|
||||
"@types/node": "~9.4.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<storybook-dynamic-app-root
|
||||
cfr={[Function CodegenComponentFactoryResolver]}
|
||||
data={[Function Object]}
|
||||
target={[Function ViewContainerRef_]}
|
||||
>
|
||||
<storybook-button-component
|
||||
_nghost-c8=""
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
_ngcontent-c8=""
|
||||
>
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
|
||||
</button>
|
||||
|
||||
|
||||
</storybook-button-component>
|
||||
</storybook-dynamic-app-root>
|
||||
`;
|
||||
@ -8,13 +8,13 @@ exports[`Storyshots Custom|Style Default 1`] = `
|
||||
>
|
||||
<ng-component>
|
||||
<storybook-button-component
|
||||
_nghost-c8=""
|
||||
_nghost-c9=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
_ngcontent-c8=""
|
||||
_ngcontent-c9=""
|
||||
>
|
||||
Button with custom styles
|
||||
</button>
|
||||
@ -32,17 +32,17 @@ exports[`Storyshots Custom|Style With Knobs 1`] = `
|
||||
target={[Function ViewContainerRef_]}
|
||||
>
|
||||
<ng-component
|
||||
_nghost-c9=""
|
||||
_nghost-c10=""
|
||||
>
|
||||
<storybook-button-component
|
||||
_ngcontent-c9=""
|
||||
_nghost-c10=""
|
||||
_ngcontent-c10=""
|
||||
_nghost-c11=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
_ngcontent-c10=""
|
||||
_ngcontent-c11=""
|
||||
>
|
||||
Button with custom styles
|
||||
</button>
|
||||
|
||||
22
examples/angular-cli/src/stories/core.stories.ts
Normal file
22
examples/angular-cli/src/stories/core.stories.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { storiesOf, addParameters } from '@storybook/angular';
|
||||
import { Button } from '@storybook/angular/demo';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters: { fileName, ...parameters } }) => ({
|
||||
component: Button,
|
||||
props: {
|
||||
text: `Parameters are ${JSON.stringify(parameters)}`,
|
||||
onClick: () => 0,
|
||||
},
|
||||
}),
|
||||
{ storyParameter }
|
||||
);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -17,21 +17,21 @@
|
||||
"react-dom": "^16.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-backgrounds": "3.4.0-rc.2",
|
||||
"@storybook/addon-centered": "3.4.0-rc.2",
|
||||
"@storybook/addon-events": "3.4.0-rc.2",
|
||||
"@storybook/addon-info": "3.4.0-rc.2",
|
||||
"@storybook/addon-jest": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/client-logger": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/addon-a11y": "3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-backgrounds": "3.4.0-rc.3",
|
||||
"@storybook/addon-centered": "3.4.0-rc.3",
|
||||
"@storybook/addon-events": "3.4.0-rc.3",
|
||||
"@storybook/addon-info": "3.4.0-rc.3",
|
||||
"@storybook/addon-jest": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/client-logger": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.1.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { storiesOf, addParameters } from '@storybook/react-native';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
@ -29,3 +29,19 @@ storiesOf('Button', module)
|
||||
storiesOf('Knobs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with knobs', knobsWrapper);
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters }) => <Text>Parameters are {JSON.stringify(parameters)}</Text>,
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { configure } from '@storybook/react';
|
||||
import { setOptions } from '@storybook/addon-options';
|
||||
import { configure as configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
import 'react-chromatic/storybook-addon';
|
||||
import addHeadWarning from './head-warning';
|
||||
import extraViewports from './extra-viewports.json';
|
||||
|
||||
addHeadWarning('Preview head not loaded', 'preview-head-not-loaded');
|
||||
addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded');
|
||||
@ -11,6 +13,13 @@ setOptions({
|
||||
hierarchyRootSeparator: /\|/,
|
||||
});
|
||||
|
||||
configureViewport({
|
||||
viewports: {
|
||||
...INITIAL_VIEWPORTS,
|
||||
...extraViewports,
|
||||
},
|
||||
});
|
||||
|
||||
function importAll(req) {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
}
|
||||
|
||||
16
examples/official-storybook/extra-viewports.json
Normal file
16
examples/official-storybook/extra-viewports.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"kindleFire2": {
|
||||
"name": "Kindle Fire 2",
|
||||
"styles": {
|
||||
"width": "600px",
|
||||
"height": "963px"
|
||||
}
|
||||
},
|
||||
"kindleFireHD": {
|
||||
"name": "Kindle Fire HD",
|
||||
"styles": {
|
||||
"width": "533px",
|
||||
"height": "801px"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook -c ./ -s built-storybooks",
|
||||
@ -11,22 +11,23 @@
|
||||
"storybook": "start-storybook -p 9011 -c ./ -s built-storybooks"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-backgrounds": "3.4.0-rc.2",
|
||||
"@storybook/addon-events": "3.4.0-rc.2",
|
||||
"@storybook/addon-info": "3.4.0-rc.2",
|
||||
"@storybook/addon-jest": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.2",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.2",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/node-logger": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/addon-a11y": "3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-backgrounds": "3.4.0-rc.3",
|
||||
"@storybook/addon-events": "3.4.0-rc.3",
|
||||
"@storybook/addon-info": "3.4.0-rc.3",
|
||||
"@storybook/addon-jest": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.3",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.3",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/components": "3.4.0-rc.3",
|
||||
"@storybook/node-logger": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"enzyme-to-json": "^3.3.3",
|
||||
"eventemitter3": "^3.0.1",
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons|Viewport default 1`] = `
|
||||
<div
|
||||
style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
|
||||
>
|
||||
I don't have problems being rendered using the default viewport.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
|
||||
<div
|
||||
style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
|
||||
>
|
||||
I've inherited
|
||||
<b>
|
||||
Kindle Fire 2
|
||||
</b>
|
||||
viewport from my parent.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden 1`] = `
|
||||
<div
|
||||
style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
|
||||
>
|
||||
I respect my parents but I should be looking good on
|
||||
<b>
|
||||
iPhone 6
|
||||
</b>
|
||||
.
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<div>
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { baseFonts } from '@storybook/components';
|
||||
|
||||
import { withViewport, Viewport } from '@storybook/addon-viewport';
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Panel = ({ children }) => <div style={baseFonts}>{children}</div>;
|
||||
|
||||
storiesOf('Addons|Viewport', module).add('default', () => (
|
||||
<Panel>I don't have problems being rendered using the default viewport.</Panel>
|
||||
));
|
||||
|
||||
storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
|
||||
.addDecorator(withViewport('kindleFire2'))
|
||||
.add('Inherited', () => (
|
||||
<Panel>
|
||||
I've inherited <b>Kindle Fire 2</b> viewport from my parent.
|
||||
</Panel>
|
||||
))
|
||||
.add('Overridden', () => (
|
||||
<Viewport name="iphone6">
|
||||
<Panel>
|
||||
I respect my parents but I should be looking good on <b>iPhone 6</b>.
|
||||
</Panel>
|
||||
</Viewport>
|
||||
));
|
||||
20
examples/official-storybook/stories/core.stories.js
Normal file
20
examples/official-storybook/stories/core.stories.js
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, addParameters } from '@storybook/react';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters: { fileName, ...parameters } }) => (
|
||||
<div>Parameters are {JSON.stringify(parameters)}</div>
|
||||
),
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "polymer-cli",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook",
|
||||
@ -9,14 +9,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@polymer/polymer": "^2.5.0",
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.2",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.2",
|
||||
"@storybook/polymer": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.3",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.3",
|
||||
"@storybook/polymer": "3.4.0-rc.3",
|
||||
"@webcomponents/webcomponentsjs": "^1.1.0",
|
||||
"global": "^4.3.2",
|
||||
"polymer-webpack-loader": "^2.0.2",
|
||||
|
||||
18
examples/polymer-cli/src/stories/core.stories.js
Normal file
18
examples/polymer-cli/src/stories/core.stories.js
Normal file
@ -0,0 +1,18 @@
|
||||
import { storiesOf, addParameters } from '@storybook/polymer';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters: { fileName, ...parameters } }) =>
|
||||
`<div>Parameters are ${JSON.stringify(parameters)}</div>`,
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }],
|
||||
"stage-0",
|
||||
"vue"
|
||||
],
|
||||
"env": {
|
||||
@ -9,4 +10,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -13,17 +13,17 @@
|
||||
"vuex": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-centered": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.2",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.2",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/vue": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-centered": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.3",
|
||||
"@storybook/addon-storysource": "3.4.0-rc.3",
|
||||
"@storybook/addon-viewport": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/vue": "3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<div>
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
|
||||
</div>
|
||||
`;
|
||||
19
examples/vue-kitchen-sink/src/stories/core.stories.js
Normal file
19
examples/vue-kitchen-sink/src/stories/core.stories.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { storiesOf, addParameters } from '@storybook/vue';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters: { fileName, ...parameters } }) => ({
|
||||
template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
|
||||
}),
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
@ -7,5 +7,5 @@
|
||||
}
|
||||
},
|
||||
"concurrency": 1,
|
||||
"version": "3.4.0-rc.2"
|
||||
"version": "3.4.0-rc.3"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -9,7 +9,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "3.4.0-rc.2",
|
||||
"@storybook/channels": "3.4.0-rc.3",
|
||||
"global": "^4.3.2",
|
||||
"json-stringify-safe": "^5.0.1"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -9,7 +9,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "3.4.0-rc.2",
|
||||
"@storybook/channels": "3.4.0-rc.3",
|
||||
"global": "^4.3.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -25,7 +25,7 @@
|
||||
"test-latest-cra": "cd test && ./test_latest_cra.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/codemod": "3.4.0-rc.2",
|
||||
"@storybook/codemod": "3.4.0-rc.3",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-register": "^6.26.0",
|
||||
@ -43,25 +43,25 @@
|
||||
"update-notifier": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-centered": "3.4.0-rc.2",
|
||||
"@storybook/addon-graphql": "3.4.0-rc.2",
|
||||
"@storybook/addon-info": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/addon-links": "3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "3.4.0-rc.2",
|
||||
"@storybook/addon-options": "3.4.0-rc.2",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.2",
|
||||
"@storybook/addons": "3.4.0-rc.2",
|
||||
"@storybook/angular": "3.4.0-rc.2",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.2",
|
||||
"@storybook/channel-websocket": "3.4.0-rc.2",
|
||||
"@storybook/channels": "3.4.0-rc.2",
|
||||
"@storybook/polymer": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2",
|
||||
"@storybook/react-native": "3.4.0-rc.2",
|
||||
"@storybook/ui": "3.4.0-rc.2",
|
||||
"@storybook/vue": "3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-centered": "3.4.0-rc.3",
|
||||
"@storybook/addon-graphql": "3.4.0-rc.3",
|
||||
"@storybook/addon-info": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/addon-links": "3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "3.4.0-rc.3",
|
||||
"@storybook/addon-options": "3.4.0-rc.3",
|
||||
"@storybook/addon-storyshots": "3.4.0-rc.3",
|
||||
"@storybook/addons": "3.4.0-rc.3",
|
||||
"@storybook/angular": "3.4.0-rc.3",
|
||||
"@storybook/channel-postmessage": "3.4.0-rc.3",
|
||||
"@storybook/channel-websocket": "3.4.0-rc.3",
|
||||
"@storybook/channels": "3.4.0-rc.3",
|
||||
"@storybook/polymer": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3",
|
||||
"@storybook/react-native": "3.4.0-rc.3",
|
||||
"@storybook/ui": "3.4.0-rc.3",
|
||||
"@storybook/vue": "3.4.0-rc.3",
|
||||
"check-node-version": "3.2.0",
|
||||
"npx": "9.7.1"
|
||||
}
|
||||
|
||||
@ -44,10 +44,10 @@
|
||||
"ts-node": "1.2.1",
|
||||
"tslint": "^4.3.0",
|
||||
"typescript": "~2.4.0",
|
||||
"@storybook/angular": "^3.4.0-rc.2",
|
||||
"@storybook/addon-notes": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2"
|
||||
"@storybook/angular": "^3.4.0-rc.3",
|
||||
"@storybook/addon-notes": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-1": "^6.24.1",
|
||||
"babel-root-slash-import": "^1.1.0",
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2"
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
"@polymer/polymer": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/polymer": "^3.4.0-rc.2",
|
||||
"@storybook/polymer": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"polymer-webpack-loader": "^2.0.2"
|
||||
|
||||
@ -20,10 +20,10 @@
|
||||
"rollup-plugin-commonjs": "^8.2.0",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-replace": "^1.1.1",
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0"
|
||||
}
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
"babel-preset-react-native": "3.0.1",
|
||||
"jest": "20.0.4",
|
||||
"react-test-renderer": "16.0.0-alpha.12",
|
||||
"@storybook/react-native": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react-native": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"react-dom": "16.0.0-alpha.12",
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
"react-native-scripts": "1.3.1",
|
||||
"jest-expo": "~20.0.0",
|
||||
"react-test-renderer": "16.0.0-alpha.12",
|
||||
"@storybook/react-native": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react-native": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"react-dom": "16.0.0-alpha.12",
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0"
|
||||
},
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
"build-storybook": "build-storybook -s public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0"
|
||||
}
|
||||
|
||||
@ -49,10 +49,10 @@
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"@storybook/vue": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/vue": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-preset-vue": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
"react-scripts": "0.9.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0"
|
||||
},
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
"rollup-plugin-serve": "^0.4.0",
|
||||
"rollup-plugin-vue": "^2.4.0",
|
||||
"rollup-watch": "^4.0.0",
|
||||
"@storybook/vue": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/vue": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-preset-vue": "^2.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,10 +17,10 @@
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"webpack": "^3.5.5",
|
||||
"@storybook/react": "^3.4.0-rc.2",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.2",
|
||||
"@storybook/addon-links": "^3.4.0-rc.2",
|
||||
"@storybook/addons": "^3.4.0-rc.2",
|
||||
"@storybook/react": "^3.4.0-rc.3",
|
||||
"@storybook/addon-actions": "^3.4.0-rc.3",
|
||||
"@storybook/addon-links": "^3.4.0-rc.3",
|
||||
"@storybook/addons": "^3.4.0-rc.3",
|
||||
"babel-runtime": "^6.26.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/client-logger",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/codemod",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "A collection of codemod scripts written with JSCodeshift",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/components",
|
||||
"version": "3.4.0-rc.2",
|
||||
"version": "3.4.0-rc.3",
|
||||
"description": "Core Storybook Components",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -24,8 +24,8 @@
|
||||
"react-dom": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "3.4.0-rc.2",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.2",
|
||||
"@storybook/react": "3.4.0-rc.2"
|
||||
"@storybook/addon-actions": "3.4.0-rc.3",
|
||||
"@storybook/addon-knobs": "3.4.0-rc.3",
|
||||
"@storybook/react": "3.4.0-rc.3"
|
||||
}
|
||||
}
|
||||
|
||||
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