mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 13:01:07 +08:00
Merge remote-tracking branch 'origin/master' into abrahamgnz-master
# Conflicts: # addons/info/src/components/types/OneOf.js
This commit is contained in:
Hypnosphi
commit
d65ea18536
@ -18,6 +18,11 @@ module.exports = {
|
||||
settings: {
|
||||
'import/core-modules': ['enzyme'],
|
||||
'import/ignore': ['node_modules\\/(?!@storybook)'],
|
||||
'import/resolver': {
|
||||
node: {
|
||||
extensions: ['.js', '.ts'],
|
||||
},
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
strict: [error, 'never'],
|
||||
|
||||
123
CHANGELOG.md
123
CHANGELOG.md
@ -1,3 +1,126 @@
|
||||
# 3.4.0-alpha.7
|
||||
|
||||
2018-February-03
|
||||
|
||||
#### Features
|
||||
|
||||
- Storyshots: env.NODE_PATH support [#2873](https://github.com/storybooks/storybook/pull/2873)
|
||||
- Knobs: Select knob key/value ordering [#1745](https://github.com/storybooks/storybook/pull/1745)
|
||||
- Angular: Add option to pass custom styles for ng components [#2856](https://github.com/storybooks/storybook/pull/2856)
|
||||
- Core: Add watch mode for build-storybook [#2866](https://github.com/storybooks/storybook/pull/2866)
|
||||
- Core: Add `__dirname` support [#2791](https://github.com/storybooks/storybook/pull/2791)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- UI: remove zero on story loading [#2857](https://github.com/storybooks/storybook/pull/2857)
|
||||
|
||||
#### Documentation
|
||||
|
||||
- StoryShots: Document ref mocking [#2869](https://github.com/storybooks/storybook/pull/2869)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Typescript distribution [#2846](https://github.com/storybooks/storybook/pull/2846)
|
||||
- Use UTC timezone in formatting too for knobs test [#2861](https://github.com/storybooks/storybook/pull/2861)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
76 Upgrades
|
||||
</summary>
|
||||
|
||||
- Upgraded `eslint-plugin-prettier` in `/` from "2.5.0" to "2.6.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `nodemon` in `/` from "1.14.11" to "1.14.12" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `lib/core` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `app/angular` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.11" to "1.14.12" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `app/polymer` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `nodemon` in `app/polymer` from "1.14.11" to "1.14.12" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `app/react-native` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `app/react` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.11" to "1.14.12" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `postcss-loader` in `app/vue` from "2.0.10" to "2.1.0" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.11" to "1.14.12" [#2910](https://github.com/storybooks/storybook/pull/2910)
|
||||
- Upgraded `@angular/common` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/compiler` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/core` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/forms` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/platform-browser` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `/` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `tslint-config-prettier` in `/` from "1.6.0" to "1.7.0" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `react-split-pane` in `lib/ui` from "0.1.74" to "0.1.75" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/animations` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/common` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/core` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/http` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/router` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/cli` in `examples/angular-cli` from "1.6.6" to "1.6.7" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `@angular/language-service` in `examples/angular-cli` from "5.2.2" to "5.2.3" [#2901](https://github.com/storybooks/storybook/pull/2901)
|
||||
- Upgraded `babel-plugin-macros` in `/` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-plugin-macros` in `app/angular` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `typescript` in `app/angular` from "2.6.2" to "2.7.1" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-plugin-macros` in `app/polymer` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-preset-minify` in `app/polymer` from "0.2.0" to "0.3.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-plugin-macros` in `app/react-native` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-preset-minify` in `app/react-native` from "0.2.0" to "0.3.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-plugin-macros` in `app/react` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-preset-minify` in `app/react` from "0.2.0" to "0.3.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-plugin-macros` in `app/vue` from "2.0.0" to "2.1.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `babel-preset-minify` in `app/vue` from "0.2.0" to "0.3.0" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `vue-style-loader` in `app/vue` from "3.1.1" to "3.1.2" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `vue-loader` in `app/vue` from "13.7.0" to "13.7.1" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `typescript` in `examples/angular-cli` from "2.6.2" to "2.7.1" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.7.0" to "13.7.1" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `vue-style-loader` in `examples/vue-kitchen-sink` from "3.1.1" to "3.1.2" [#2891](https://github.com/storybooks/storybook/pull/2891)
|
||||
- Upgraded `gatsby-source-filesystem` in `/docs` from "1.5.15" to "1.5.16" [#2875](https://github.com/storybooks/storybook/pull/2875)
|
||||
- Upgraded `gatsby` in `/docs` from "1.9.172" to "1.9.174" [#2875](https://github.com/storybooks/storybook/pull/2875)
|
||||
- Upgraded `@types/lodash` in `/` from "4.14.97" to "4.14.98" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `jest-enzyme` in `/` from "4.0.2" to "4.1.0" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.6" to "1.1.7" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.6" to "1.1.7" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.6" to "1.1.7" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.6" to "1.1.7" [#2876](https://github.com/storybooks/storybook/pull/2876)
|
||||
- Upgraded `gatsby-link` in `/docs` from "1.6.34" to "1.6.35" [#2858](https://github.com/storybooks/storybook/pull/2858)
|
||||
- Upgraded `gatsby-transformer-remark` in `/docs` from "1.7.29" to "1.7.30" [#2858](https://github.com/storybooks/storybook/pull/2858)
|
||||
- Upgraded `gatsby` in `/docs` from "1.9.169" to "1.9.171" [#2858](https://github.com/storybooks/storybook/pull/2858)
|
||||
- Make dependencies in polymer & angular up to date with other apps [#2852](https://github.com/storybooks/storybook/pull/2852)
|
||||
- Upgraded `@types/lodash` in `/` from "4.14.96" to "4.14.97" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `react-datetime` in `addons/knobs` from "2.11.1" to "2.12.0" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `addons/knobs` from "0.19.1" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `lib/core` from "0.19.1" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `app/angular` from "0.18.2" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `app/polymer` from "0.18.2" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `app/react-native` from "0.19.1" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `app/react` from "0.19.1" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `style-loader` in `app/vue` from "0.19.1" to "0.20.1" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `@polymer/polymer` in `examples/polymer-cli` from "2.3.1" to "2.4.0" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `@types/jasmine` in `examples/angular-cli` from "2.8.5" to "2.8.6" [#2850](https://github.com/storybooks/storybook/pull/2850)
|
||||
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.10" to "3.3.11" [#2849](https://github.com/storybooks/storybook/pull/2849)
|
||||
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.10" to "3.3.11" [#2849](https://github.com/storybooks/storybook/pull/2849)
|
||||
- Upgraded `@storybook/addons` in `/docs` from "3.3.10" to "3.3.11" [#2849](https://github.com/storybooks/storybook/pull/2849)
|
||||
- Upgraded `@storybook/react` in `/docs` from "3.3.10" to "3.3.11" [#2849](https://github.com/storybooks/storybook/pull/2849)
|
||||
- Update url-loader from 0.5.8 to 0.6.2 in app/angular [#2847](https://github.com/storybooks/storybook/pull/2847)
|
||||
|
||||
</details>
|
||||
|
||||
# 3.3.12
|
||||
|
||||
2018-February-02
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fix browser navigation again [#2870](https://github.com/storybooks/storybook/pull/2870)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Update url-loader from 0.5.8 to 0.6.2 in app/angular [#2847](https://github.com/storybooks/storybook/pull/2847)
|
||||
|
||||
# 3.4.0-alpha.6
|
||||
|
||||
2018-January-27
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"axe-core": "^2.6.1",
|
||||
"glamorous": "^4.11.4",
|
||||
"prop-types": "^15.6.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -22,7 +22,7 @@
|
||||
"dependencies": {
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
"make-error": "^1.3.2",
|
||||
"make-error": "^1.3.3",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-inspector": "^2.2.2",
|
||||
"uuid": "^3.2.1"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamorous": "^4.11.4",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
import PrettyPropType from './PrettyPropType';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const ArrayOf = ({ propType }) => (
|
||||
<span>
|
||||
<span>[</span>
|
||||
<span>
|
||||
<PrettyPropType propType={propType.value} />
|
||||
<PrettyPropType propType={getPropTypes(propType)} />
|
||||
</span>
|
||||
<span>]</span>
|
||||
</span>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import React from 'react';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const Enum = ({ propType }) => <span>{propType.value.map(({ value }) => value).join(' | ')}</span>;
|
||||
const Enum = ({ propType }) => (
|
||||
<span>
|
||||
{getPropTypes(propType)
|
||||
.map(({ value }) => value)
|
||||
.join(' | ')}
|
||||
</span>
|
||||
);
|
||||
|
||||
Enum.propTypes = {
|
||||
propType: TypeInfo.isRequired,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const InstanceOf = ({ propType }) => <span>{propType.value}</span>;
|
||||
const InstanceOf = ({ propType }) => <span>{getPropTypes(propType)}</span>;
|
||||
|
||||
InstanceOf.propTypes = {
|
||||
propType: TypeInfo.isRequired,
|
||||
|
||||
10
addons/info/src/components/types/Literal.js
Normal file
10
addons/info/src/components/types/Literal.js
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import { TypeInfo } from './proptypes';
|
||||
|
||||
const Literal = ({ propType }) => <span>{propType.value}</span>;
|
||||
|
||||
Literal.propTypes = {
|
||||
propType: TypeInfo.isRequired,
|
||||
};
|
||||
|
||||
export default Literal;
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import PrettyPropType from './PrettyPropType';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const ObjectOf = ({ propType }) => (
|
||||
<span>
|
||||
{'{[<key>]: '}
|
||||
<PrettyPropType propType={propType.value} />
|
||||
<PrettyPropType propType={getPropTypes(propType)} />
|
||||
{'}'}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const joinValues = propType => propType.value.map(({ value }) => value).join(' | ');
|
||||
const joinValues = propTypes => propTypes.map(({ value }) => value).join(' | ');
|
||||
|
||||
const OneOf = ({ propType }) => (
|
||||
<span>{`oneOf ${Array.isArray(propType.value) ? joinValues(propType) : propType.value}`}</span>
|
||||
);
|
||||
const OneOf = ({ propType }) => {
|
||||
const propTypes = getPropTypes(propType);
|
||||
return <span>{`oneOf ${Array.isArray(propTypes) ? joinValues(propTypes) : propTypes}`}</span>;
|
||||
};
|
||||
|
||||
OneOf.propTypes = {
|
||||
propType: TypeInfo.isRequired,
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import PrettyPropType from './PrettyPropType';
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const OneOfType = ({ propType }) => {
|
||||
const { length } = propType.value;
|
||||
const propTypes = getPropTypes(propType);
|
||||
return (
|
||||
<span>
|
||||
{propType.value
|
||||
{propTypes
|
||||
.map((value, i) => {
|
||||
const key = `${value.name}${value.value ? `-${value.value}` : ''}`;
|
||||
return [
|
||||
<PrettyPropType key={key} propType={value} />,
|
||||
i < length - 1 ? <span key={`${key}-separator`}> | </span> : null,
|
||||
i < propTypes.length - 1 ? <span key={`${key}-separator`}> | </span> : null,
|
||||
];
|
||||
})
|
||||
.reduce((acc, tuple) => acc.concat(tuple), [])}
|
||||
|
||||
@ -9,6 +9,7 @@ import ObjectOf from './ObjectOf';
|
||||
import OneOf from './OneOf';
|
||||
import InstanceOf from './InstanceOf';
|
||||
import Signature from './Signature';
|
||||
import Literal from './Literal';
|
||||
|
||||
import { TypeInfo } from './proptypes';
|
||||
|
||||
@ -20,6 +21,7 @@ const propTypeComponentMap = new Map([
|
||||
['objectOf', ObjectOf],
|
||||
// Might be overkill to have below proptypes as separate components *shrug*
|
||||
['object', ObjectType],
|
||||
['literal', Literal],
|
||||
['enum', OneOf],
|
||||
['instanceOf', InstanceOf],
|
||||
['signature', Signature],
|
||||
|
||||
@ -5,7 +5,7 @@ import { HighlightButton } from '@storybook/components';
|
||||
import PrettyPropType from './PrettyPropType';
|
||||
import PropertyLabel from './PropertyLabel';
|
||||
|
||||
import { TypeInfo } from './proptypes';
|
||||
import { TypeInfo, getPropTypes } from './proptypes';
|
||||
|
||||
const MARGIN_SIZE = 15;
|
||||
|
||||
@ -33,6 +33,7 @@ class Shape extends React.Component {
|
||||
|
||||
render() {
|
||||
const { propType, depth } = this.props;
|
||||
const propTypes = getPropTypes(propType);
|
||||
return (
|
||||
<span>
|
||||
<HighlightButton
|
||||
@ -45,13 +46,13 @@ class Shape extends React.Component {
|
||||
</HighlightButton>
|
||||
<HighlightButton onClick={this.handleToggle}>...</HighlightButton>
|
||||
{!this.state.minimized &&
|
||||
Object.keys(propType.value).map(childProperty => (
|
||||
Object.keys(propTypes).map(childProperty => (
|
||||
<div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
|
||||
<PropertyLabel
|
||||
property={childProperty}
|
||||
required={propType.value[childProperty].required}
|
||||
required={propTypes[childProperty].required}
|
||||
/>
|
||||
<PrettyPropType depth={depth + 1} propType={propType.value[childProperty]} />
|
||||
<PrettyPropType depth={depth + 1} propType={propTypes[childProperty]} />
|
||||
,
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -7,3 +7,5 @@ export const TypeInfo = oneOfType([
|
||||
}),
|
||||
PropTypes.string,
|
||||
]);
|
||||
|
||||
export const getPropTypes = propType => propType.value || propType.elements;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.4",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -247,6 +247,26 @@ const value = select(label, options, defaultValue);
|
||||
|
||||
> You can also provide options as an array like this: `['red', 'blue', 'yellow']`
|
||||
|
||||
### selectV2
|
||||
|
||||
In v4 this will replace `select`. The value from the select now uses the values from the `options` object.
|
||||
|
||||
```js
|
||||
import { selectV2 } from '@storybook/addon-knobs';
|
||||
|
||||
const label = 'Colors';
|
||||
const options = {
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: null,
|
||||
};
|
||||
const defaultValue = 'Red';
|
||||
|
||||
const value = selectV2(label, options, defaultValue)
|
||||
```
|
||||
|
||||
### date
|
||||
|
||||
Allow you to get date (and time) from the user.
|
||||
@ -264,7 +284,7 @@ const value = date(label, defaultValue);
|
||||
The `date` knob returns the selected date as stringified Unix timestamp (e.g. `"1510913096516"`).
|
||||
If your component needs the date in a different form you can wrap the `date` function:
|
||||
|
||||
```
|
||||
```js
|
||||
function myDateKnob(name, defaultValue) {
|
||||
const stringTimestamp = date(name, defaultValue)
|
||||
return new Date(stringTimestamp)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
3
addons/knobs/src/angular/index.js
vendored
3
addons/knobs/src/angular/index.js
vendored
@ -12,11 +12,12 @@ import {
|
||||
array,
|
||||
date,
|
||||
select,
|
||||
selectV2,
|
||||
button,
|
||||
manager,
|
||||
} from '../base';
|
||||
|
||||
export { knob, text, boolean, number, color, object, array, date, select, button };
|
||||
export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
|
||||
|
||||
export const angularHandler = (channel, knobStore) => getStory => context =>
|
||||
prepareComponent({ getStory, context, channel, knobStore });
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
import KnobManager from './KnobManager';
|
||||
|
||||
export const manager = new KnobManager();
|
||||
@ -45,8 +46,13 @@ export function object(name, value) {
|
||||
return manager.knob(name, { type: 'object', value });
|
||||
}
|
||||
|
||||
export function select(name, options, value) {
|
||||
return manager.knob(name, { type: 'select', options, value });
|
||||
export const select = deprecate(
|
||||
(name, options, value) => manager.knob(name, { type: 'select', options, value }),
|
||||
'in v4 keys/values of the options argument are reversed'
|
||||
);
|
||||
|
||||
export function selectV2(name, options, value) {
|
||||
return manager.knob(name, { type: 'select', selectV2: true, options, value });
|
||||
}
|
||||
|
||||
export function array(name, value, separator = ',') {
|
||||
|
||||
40
addons/knobs/src/components/__tests__/Select.js
Normal file
40
addons/knobs/src/components/__tests__/Select.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme'; // eslint-disable-line
|
||||
import SelectType from '../types/Select';
|
||||
|
||||
describe('Select', () => {
|
||||
let knob;
|
||||
|
||||
beforeEach(() => {
|
||||
knob = {
|
||||
name: 'Colors',
|
||||
value: '#00ff00',
|
||||
options: {
|
||||
Green: '#00ff00',
|
||||
Red: '#ff0000',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
it('displays value', () => {
|
||||
const wrapper = shallow(<SelectType knob={knob} />);
|
||||
|
||||
const green = wrapper.find('option').first();
|
||||
expect(green.text()).toEqual('#00ff00');
|
||||
expect(green.prop('value')).toEqual('Green');
|
||||
});
|
||||
|
||||
describe('selectV2', () => {
|
||||
beforeEach(() => {
|
||||
knob.selectV2 = true;
|
||||
});
|
||||
|
||||
it('correctly maps option keys and values', () => {
|
||||
const wrapper = shallow(<SelectType knob={knob} />);
|
||||
|
||||
const green = wrapper.find('option').first();
|
||||
expect(green.text()).toEqual('Green');
|
||||
expect(green.prop('value')).toEqual('#00ff00');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -18,20 +18,27 @@ const styles = {
|
||||
};
|
||||
|
||||
class SelectType extends React.Component {
|
||||
_makeOpt(key, val) {
|
||||
_makeOpt(key, value, selectV2) {
|
||||
const opts = {
|
||||
key,
|
||||
value: key,
|
||||
};
|
||||
|
||||
return <option {...opts}>{val}</option>;
|
||||
let display = value;
|
||||
|
||||
if (selectV2) {
|
||||
opts.value = value;
|
||||
display = key;
|
||||
}
|
||||
|
||||
return <option {...opts}>{display}</option>;
|
||||
}
|
||||
_options(values) {
|
||||
_options({ options, selectV2 }) {
|
||||
let data = [];
|
||||
if (Array.isArray(values)) {
|
||||
data = values.map(val => this._makeOpt(val, val));
|
||||
if (Array.isArray(options)) {
|
||||
data = options.map(val => this._makeOpt(val, val));
|
||||
} else {
|
||||
data = Object.keys(values).map(key => this._makeOpt(key, values[key]));
|
||||
data = Object.keys(options).map(key => this._makeOpt(key, options[key], selectV2));
|
||||
}
|
||||
|
||||
return data;
|
||||
@ -49,7 +56,7 @@ class SelectType extends React.Component {
|
||||
value={knob.value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
>
|
||||
{this._options(knob.options)}
|
||||
{this._options(knob)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
@ -64,6 +71,8 @@ SelectType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
selectV2: PropTypes.bool,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
@ -16,10 +16,11 @@ import {
|
||||
number,
|
||||
object,
|
||||
select,
|
||||
selectV2,
|
||||
text,
|
||||
} from './base';
|
||||
|
||||
export { knob, text, boolean, number, color, object, array, date, button, select };
|
||||
export { knob, text, boolean, number, color, object, array, date, button, select, selectV2 };
|
||||
|
||||
deprecate(() => {},
|
||||
'Using @storybook/addon-knobs directly is discouraged, please use @storybook/addon-knobs/{{framework}}');
|
||||
|
||||
@ -13,11 +13,12 @@ import {
|
||||
array,
|
||||
date,
|
||||
select,
|
||||
selectV2,
|
||||
button,
|
||||
manager,
|
||||
} from '../base';
|
||||
|
||||
export { knob, text, boolean, number, color, object, array, date, select, button };
|
||||
export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
|
||||
|
||||
export const reactHandler = (channel, knobStore) => getStory => context => {
|
||||
const initialContent = getStory(context);
|
||||
|
||||
@ -10,11 +10,12 @@ import {
|
||||
array,
|
||||
date,
|
||||
select,
|
||||
selectV2,
|
||||
button,
|
||||
manager,
|
||||
} from '../base';
|
||||
|
||||
export { knob, text, boolean, number, color, object, array, date, select, button };
|
||||
export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
|
||||
|
||||
export const vueHandler = (channel, knobStore) => getStory => context => ({
|
||||
data() {
|
||||
|
||||
@ -105,7 +105,7 @@ A React implementation of such a component can be imported from `@storybook/addo
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { LinkTo } from '@storybook/addon-links';
|
||||
import LinkTo from '@storybook/addon-links/react';
|
||||
|
||||
storiesOf('Link', module)
|
||||
.add('First', () => (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -22,7 +22,7 @@
|
||||
"storybook": "start-storybook -p 9001"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -16,7 +16,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.4.0-alpha.6",
|
||||
"@storybook/channels": "^3.4.0-alpha.7",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glob": "^7.1.2",
|
||||
"global": "^4.3.2",
|
||||
@ -27,8 +27,8 @@
|
||||
"read-pkg-up": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-jest": "^20.0.3",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
@ -42,7 +42,7 @@
|
||||
"react-dom": "^16.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0"
|
||||
}
|
||||
}
|
||||
|
||||
2
addons/storyshots/src/angular/renderTree.js
vendored
2
addons/storyshots/src/angular/renderTree.js
vendored
@ -9,7 +9,7 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { addSerializer } from 'jest-specific-snapshot';
|
||||
import { initModuleData } from './helpers.ts';
|
||||
import { initModuleData } from './helpers';
|
||||
|
||||
addSerializer(HTMLCommentSerializer);
|
||||
addSerializer(AngularSnapshotSerializer);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { process } from 'global';
|
||||
import vm from 'vm';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
@ -40,6 +41,14 @@ function isRelativeRequest(request) {
|
||||
);
|
||||
}
|
||||
|
||||
function getFullPath(dirname, request) {
|
||||
if (isRelativeRequest(request) || !process.env.NODE_PATH) {
|
||||
return path.resolve(dirname, request);
|
||||
}
|
||||
|
||||
return path.resolve(process.env.NODE_PATH, request);
|
||||
}
|
||||
|
||||
export default function runWithRequireContext(content, options) {
|
||||
const { filename, dirname } = options;
|
||||
|
||||
@ -57,7 +66,8 @@ export default function runWithRequireContext(content, options) {
|
||||
newRequire.cache = require.cache;
|
||||
|
||||
newRequire.context = (directory, useSubdirectories = false, regExp = /^\.\//) => {
|
||||
const fullPath = path.resolve(dirname, directory);
|
||||
const fullPath = getFullPath(dirname, directory);
|
||||
|
||||
const keys = {};
|
||||
requireModules(keys, fullPath, '.', regExp, useSubdirectories);
|
||||
|
||||
|
||||
10
addons/storyshots/tsconfig.json
Normal file
10
addons/storyshots/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src"
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -11,7 +11,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
|
||||
4
app/angular/demo.js
vendored
4
app/angular/demo.js
vendored
@ -1,5 +1,5 @@
|
||||
/* eslint-disable global-require */
|
||||
module.exports = {
|
||||
Welcome: require('./dist/demo/welcome.component.ts').default,
|
||||
Button: require('./dist/demo/button.component.ts').default,
|
||||
Welcome: require('./dist/demo/welcome.component').default,
|
||||
Button: require('./dist/demo/button.component').default,
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
|
||||
"bugs": {
|
||||
@ -23,13 +23,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.6",
|
||||
"@storybook/core": "^3.4.0-alpha.6",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.7",
|
||||
"@storybook/core": "^3.4.0-alpha.7",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"autoprefixer": "^7.2.5",
|
||||
@ -43,8 +43,6 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.0.0",
|
||||
"chalk": "^2.1.0",
|
||||
"commander": "^2.13.0",
|
||||
"common-tags": "^1.7.2",
|
||||
"configstore": "^3.1.0",
|
||||
"core-js": "^2.4.1",
|
||||
@ -64,29 +62,24 @@
|
||||
"markdown-loader": "^2.0.2",
|
||||
"node-sass": "^4.7.2",
|
||||
"postcss-flexbugs-fixes": "^3.3.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"qs": "^6.5.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.0.0",
|
||||
"react-dev-utils": "^5.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-modal": "^3.1.11",
|
||||
"react-modal": "^3.1.12",
|
||||
"redux": "^3.6.0",
|
||||
"request": "^2.81.0",
|
||||
"rxjs": "^5.4.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"serve-favicon": "^2.4.3",
|
||||
"shelljs": "^0.8.1",
|
||||
"style-loader": "^0.20.1",
|
||||
"ts-loader": "^2.2.2",
|
||||
"uglifyjs-webpack-plugin": "^1.1.7",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.2.1",
|
||||
"webpack": "^2.5.1 || ^3.0.0",
|
||||
"webpack-dev-middleware": "^1.10.2",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"zone.js": "^0.8.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -95,7 +88,7 @@
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"codelyzer": "^3.1.2",
|
||||
"mock-fs": "^4.3.0",
|
||||
"nodemon": "^1.14.11",
|
||||
"nodemon": "^1.14.12",
|
||||
"typescript": "^2.7.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
2
app/angular/src/client/preview/render.js
vendored
2
app/angular/src/client/preview/render.js
vendored
@ -1,4 +1,4 @@
|
||||
import { renderNgApp, renderNgError, renderNoPreview } from './angular/helpers.ts';
|
||||
import { renderNgApp, renderNgError, renderNoPreview } from './angular/helpers';
|
||||
|
||||
const logger = console;
|
||||
let previousKind = '';
|
||||
|
||||
93
app/angular/src/server/build.js
vendored
93
app/angular/src/server/build.js
vendored
@ -1,93 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import webpack from 'webpack';
|
||||
import program from 'commander';
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import packageJson from '../../package.json';
|
||||
import getBaseConfig from './config/webpack.config.prod';
|
||||
import loadConfig from './config';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
|
||||
.option('-o, --output-dir [dir-name]', 'Directory where to store built files')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option('-w, --watch', 'Enable watch mode')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
outputDir: 'SBCONFIG_OUTPUT_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildStatic({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
const configDir = program.configDir || './.storybook';
|
||||
const outputDir = program.outputDir || './storybook-static';
|
||||
|
||||
// create output directory if not exists
|
||||
shelljs.mkdir('-p', path.resolve(outputDir));
|
||||
// clear the static dir
|
||||
shelljs.rm('-rf', path.resolve(outputDir, 'static'));
|
||||
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
|
||||
config.output.path = path.resolve(outputDir);
|
||||
|
||||
// copy all static files
|
||||
if (program.staticDir) {
|
||||
program.staticDir.forEach(dir => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
logger.error(`Error: no such directory to load static files: ${dir}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.info(`=> Copying static files from: ${dir}`);
|
||||
shelljs.cp('-r', `${dir}/*`, outputDir);
|
||||
});
|
||||
}
|
||||
|
||||
// compile all resources with webpack and write them to the disk.
|
||||
logger.info('Building storybook ...');
|
||||
const webpackCb = (err, stats) => {
|
||||
if (err || stats.hasErrors()) {
|
||||
logger.error('Failed to build the storybook');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
err && logger.error(err.message);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
|
||||
process.exitCode = 1;
|
||||
}
|
||||
logger.info('Building storybook completed.');
|
||||
};
|
||||
const compiler = webpack(config);
|
||||
if (program.watch) {
|
||||
compiler.watch({}, webpackCb);
|
||||
} else {
|
||||
compiler.run(webpackCb);
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@ import Dotenv from 'dotenv-webpack';
|
||||
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { WatchMissingNodeModulesPlugin } from '@storybook/core/server';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
@ -79,7 +79,7 @@ export default function(configDir) {
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'raw-loader',
|
||||
exclude: /\.async\.css$/,
|
||||
exclude: /\.async\.html$/,
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
|
||||
@ -97,6 +97,17 @@ export default function(configDir) {
|
||||
test: /\.scss$/,
|
||||
loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
169
app/angular/src/server/index.js
vendored
169
app/angular/src/server/index.js
vendored
@ -1,165 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import express from 'express';
|
||||
import https from 'https';
|
||||
import favicon from 'serve-favicon';
|
||||
import program from 'commander';
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import storybook, { webpackValid } from './middleware';
|
||||
import packageJson from '../../package.json';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt)
|
||||
.option('-h, --host [string]', 'Host to run Storybook')
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option(
|
||||
'--https',
|
||||
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
|
||||
)
|
||||
.option(
|
||||
'--ssl-ca <ca>',
|
||||
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
|
||||
parseList
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
port: 'SBCONFIG_PORT',
|
||||
host: 'SBCONFIG_HOSTNAME',
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildDev({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
if (!program.port) {
|
||||
logger.error('Error: port to run Storybook is required!\n');
|
||||
program.help();
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
// Used with `app.listen` below
|
||||
const listenAddr = [program.port];
|
||||
|
||||
if (program.host) {
|
||||
listenAddr.push(program.host);
|
||||
}
|
||||
|
||||
const app = express();
|
||||
let server = app;
|
||||
|
||||
if (program.https) {
|
||||
if (!program.sslCert) {
|
||||
logger.error('Error: --ssl-cert is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
if (!program.sslKey) {
|
||||
logger.error('Error: --ssl-key is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
const sslOptions = {
|
||||
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
|
||||
cert: fs.readFileSync(program.sslCert, 'utf-8'),
|
||||
key: fs.readFileSync(program.sslKey, 'utf-8'),
|
||||
};
|
||||
|
||||
server = https.createServer(sslOptions, app);
|
||||
}
|
||||
|
||||
let hasCustomFavicon = false;
|
||||
|
||||
if (program.staticDir) {
|
||||
program.staticDir = parseList(program.staticDir);
|
||||
program.staticDir.forEach(dir => {
|
||||
const staticPath = path.resolve(dir);
|
||||
if (!fs.existsSync(staticPath)) {
|
||||
logger.error(`Error: no such directory to load static files: ${staticPath}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.info(`=> Loading static files from: ${staticPath} .`);
|
||||
app.use(express.static(staticPath, { index: false }));
|
||||
|
||||
const faviconPath = path.resolve(staticPath, 'favicon.ico');
|
||||
if (fs.existsSync(faviconPath)) {
|
||||
hasCustomFavicon = true;
|
||||
app.use(favicon(faviconPath));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!hasCustomFavicon) {
|
||||
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
|
||||
}
|
||||
|
||||
const configDir = program.configDir || './.storybook';
|
||||
|
||||
// The repository info is sent to the storybook while running on
|
||||
// development mode so it'll be easier for tools to integrate.
|
||||
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
|
||||
process.env.STORYBOOK_GIT_ORIGIN =
|
||||
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
|
||||
process.env.STORYBOOK_GIT_BRANCH =
|
||||
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
|
||||
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
// `getBaseConfig` function which is called inside the middleware
|
||||
app.use(storybook(configDir));
|
||||
|
||||
let serverResolve = () => {};
|
||||
let serverReject = () => {};
|
||||
const serverListening = new Promise((resolve, reject) => {
|
||||
serverResolve = resolve;
|
||||
serverReject = reject;
|
||||
});
|
||||
server.listen(...listenAddr, error => {
|
||||
if (error) {
|
||||
serverReject(error);
|
||||
} else {
|
||||
serverResolve();
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const address = `http://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error instanceof Error) {
|
||||
logger.error(error);
|
||||
}
|
||||
if (program.smokeTest) {
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
26
app/angular/src/server/utils.js
vendored
26
app/angular/src/server/utils.js
vendored
@ -5,10 +5,6 @@ import deprecate from 'util-deprecate';
|
||||
const fallbackHeadUsage = deprecate(() => {},
|
||||
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html');
|
||||
|
||||
export function parseList(str) {
|
||||
return str.split(',');
|
||||
}
|
||||
|
||||
export function getPreviewHeadHtml(configDirPath) {
|
||||
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
|
||||
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
|
||||
@ -32,25 +28,3 @@ export function getManagerHeadHtml(configDirPath) {
|
||||
|
||||
return scriptHtml;
|
||||
}
|
||||
|
||||
export function getEnvConfig(program, configEnv) {
|
||||
Object.keys(configEnv).forEach(fieldName => {
|
||||
const envVarName = configEnv[fieldName];
|
||||
const envVarValue = process.env[envVarName];
|
||||
if (envVarValue) {
|
||||
program[fieldName] = envVarValue; // eslint-disable-line
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getMiddleware(configDir) {
|
||||
const middlewarePath = path.resolve(configDir, 'middleware.js');
|
||||
if (fs.existsSync(middlewarePath)) {
|
||||
let middlewareModule = require(middlewarePath); // eslint-disable-line
|
||||
if (middlewareModule.__esModule) { // eslint-disable-line
|
||||
middlewareModule = middlewareModule.default;
|
||||
}
|
||||
return middlewareModule;
|
||||
}
|
||||
return () => {};
|
||||
}
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"noImplicitAny": true,
|
||||
"lib": [
|
||||
"es2016",
|
||||
"dom"
|
||||
]
|
||||
"rootDir": "./src"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.6",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/core": "^3.4.0-alpha.6",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.7",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/core": "^3.4.0-alpha.7",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"@webcomponents/webcomponentsjs": "^1.1.0",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"autoprefixer": "^7.1.6",
|
||||
@ -45,8 +45,6 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"chalk": "^2.3.0",
|
||||
"commander": "^2.11.0",
|
||||
"common-tags": "^1.4.0",
|
||||
"configstore": "^3.1.1",
|
||||
"copy-webpack-plugin": "^4.2.0",
|
||||
@ -64,27 +62,23 @@
|
||||
"lodash.pick": "^4.4.0",
|
||||
"polymer-webpack-loader": "2.0.1",
|
||||
"postcss-flexbugs-fixes": "^3.3.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"qs": "^6.5.1",
|
||||
"react": "^16.0.0",
|
||||
"react-dev-utils": "^5.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-modal": "^3.1.11",
|
||||
"react-modal": "^3.1.12",
|
||||
"redux": "^3.7.2",
|
||||
"request": "^2.83.0",
|
||||
"serve-favicon": "^2.4.5",
|
||||
"shelljs": "^0.8.1",
|
||||
"style-loader": "^0.20.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.7",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.2.1",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-middleware": "^1.12.0",
|
||||
"webpack-hot-middleware": "^2.20.0"
|
||||
"webpack": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"nodemon": "^1.12.1"
|
||||
"nodemon": "^1.14.12"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,93 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import webpack from 'webpack';
|
||||
import program from 'commander';
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import packageJson from '../../package.json';
|
||||
import getBaseConfig from './config/webpack.config.prod';
|
||||
import loadConfig from './config';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
|
||||
.option('-o, --output-dir [dir-name]', 'Directory where to store built files')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option('-w, --watch', 'Enable watch mode')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
outputDir: 'SBCONFIG_OUTPUT_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildStatic({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
const configDir = program.configDir || './.storybook';
|
||||
const outputDir = program.outputDir || './storybook-static';
|
||||
|
||||
// create output directory if not exists
|
||||
shelljs.mkdir('-p', path.resolve(outputDir));
|
||||
// clear the static dir
|
||||
shelljs.rm('-rf', path.resolve(outputDir, 'static'));
|
||||
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
|
||||
config.output.path = path.resolve(outputDir);
|
||||
|
||||
// copy all static files
|
||||
if (program.staticDir) {
|
||||
program.staticDir.forEach(dir => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
logger.error(`Error: no such directory to load static files: ${dir}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.log(`=> Copying static files from: ${dir}`);
|
||||
shelljs.cp('-r', `${dir}/*`, outputDir);
|
||||
});
|
||||
}
|
||||
|
||||
// compile all resources with webpack and write them to the disk.
|
||||
logger.info('Building storybook ...');
|
||||
const webpackCb = (err, stats) => {
|
||||
if (err || stats.hasErrors()) {
|
||||
logger.error('Failed to build the storybook');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
err && logger.error(err.message);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
|
||||
process.exitCode = 1;
|
||||
}
|
||||
logger.info('Building storybook completed.');
|
||||
};
|
||||
const compiler = webpack(config);
|
||||
if (program.watch) {
|
||||
compiler.watch({}, webpackCb);
|
||||
} else {
|
||||
compiler.run(webpackCb);
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
// @remove-on-eject-end
|
||||
|
||||
// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
|
||||
// We’re not sure why this isn't Webpack's default behavior.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/186.
|
||||
|
||||
function WatchMissingNodeModulesPlugin(nodeModulesPath) {
|
||||
this.nodeModulesPath = nodeModulesPath;
|
||||
}
|
||||
|
||||
WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
|
||||
compiler.plugin('emit', (compilation, callback) => {
|
||||
const missingDeps = compilation.missingDependencies;
|
||||
const { nodeModulesPath } = this;
|
||||
|
||||
// If any missing files are expected to appear in node_modules...
|
||||
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
|
||||
// ...tell webpack to watch node_modules recursively until they appear.
|
||||
compilation.contextDependencies.push(nodeModulesPath);
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = WatchMissingNodeModulesPlugin;
|
||||
@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
|
||||
'process.env': env,
|
||||
};
|
||||
}
|
||||
|
||||
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
|
||||
|
||||
@ -5,22 +5,15 @@ import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||
import { WatchMissingNodeModulesPlugin } from '@storybook/core/server';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import {
|
||||
getConfigDir,
|
||||
includePaths,
|
||||
excludePaths,
|
||||
nodeModulesPaths,
|
||||
loadEnv,
|
||||
nodePaths,
|
||||
} from './utils';
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
import { version } from '../../../package.json';
|
||||
|
||||
export default function() {
|
||||
export default function(configDir) {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
@ -42,7 +35,7 @@ export default function() {
|
||||
filename: 'index.html',
|
||||
chunks: ['manager'],
|
||||
data: {
|
||||
managerHead: getManagerHeadHtml(getConfigDir()),
|
||||
managerHead: getManagerHeadHtml(configDir),
|
||||
version,
|
||||
},
|
||||
template: require.resolve('../index.html.ejs'),
|
||||
@ -51,7 +44,7 @@ export default function() {
|
||||
filename: 'iframe.html',
|
||||
excludeChunks: ['manager'],
|
||||
data: {
|
||||
previewHead: getPreviewHeadHtml(getConfigDir()),
|
||||
previewHead: getPreviewHeadHtml(configDir),
|
||||
},
|
||||
template: require.resolve('../iframe.html.ejs'),
|
||||
}),
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import webpack from 'webpack';
|
||||
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
|
||||
import Dotenv from 'dotenv-webpack';
|
||||
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import babelLoaderConfig from './babel.prod';
|
||||
import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
import { version } from '../../../package.json';
|
||||
|
||||
export default function() {
|
||||
export default function(configDir) {
|
||||
const entries = {
|
||||
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
@ -34,7 +35,7 @@ export default function() {
|
||||
filename: 'index.html',
|
||||
chunks: ['manager'],
|
||||
data: {
|
||||
managerHead: getManagerHeadHtml(getConfigDir()),
|
||||
managerHead: getManagerHeadHtml(configDir),
|
||||
version,
|
||||
},
|
||||
template: require.resolve('../index.html.ejs'),
|
||||
@ -43,7 +44,7 @@ export default function() {
|
||||
filename: 'iframe.html',
|
||||
excludeChunks: ['manager'],
|
||||
data: {
|
||||
previewHead: getPreviewHeadHtml(getConfigDir()),
|
||||
previewHead: getPreviewHeadHtml(configDir),
|
||||
},
|
||||
template: require.resolve('../iframe.html.ejs'),
|
||||
}),
|
||||
@ -52,15 +53,18 @@ export default function() {
|
||||
{ from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
|
||||
]),
|
||||
new webpack.DefinePlugin(loadEnv({ production: true })),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
screw_ie8: true,
|
||||
new UglifyJsPlugin({
|
||||
parallel: true,
|
||||
uglifyOptions: {
|
||||
ie8: false,
|
||||
mangle: false,
|
||||
warnings: false,
|
||||
},
|
||||
mangle: false,
|
||||
output: {
|
||||
comments: false,
|
||||
screw_ie8: true,
|
||||
compress: {
|
||||
keep_fnames: true,
|
||||
},
|
||||
output: {
|
||||
comments: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
new Dotenv({ silent: true }),
|
||||
|
||||
@ -1,168 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import express from 'express';
|
||||
import https from 'https';
|
||||
import favicon from 'serve-favicon';
|
||||
import program from 'commander';
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import storybook, { webpackValid } from './middleware';
|
||||
import packageJson from '../../package.json';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-p, --port [number]', 'Port to run Storybook (Required)', str => parseInt(str, 10))
|
||||
.option('-h, --host [string]', 'Host to run Storybook')
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option(
|
||||
'--https',
|
||||
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
|
||||
)
|
||||
.option(
|
||||
'--ssl-ca <ca>',
|
||||
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
|
||||
parseList
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
port: 'SBCONFIG_PORT',
|
||||
host: 'SBCONFIG_HOSTNAME',
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildDev({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
if (!program.port) {
|
||||
logger.error('Error: port to run Storybook is required!\n');
|
||||
program.help();
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
// Used with `app.listen` below
|
||||
const listenAddr = [program.port];
|
||||
|
||||
if (program.host) {
|
||||
listenAddr.push(program.host);
|
||||
}
|
||||
|
||||
const app = express();
|
||||
let server = app;
|
||||
|
||||
if (program.https) {
|
||||
if (!program.sslCert) {
|
||||
logger.error('Error: --ssl-cert is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
if (!program.sslKey) {
|
||||
logger.error('Error: --ssl-key is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
const sslOptions = {
|
||||
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
|
||||
cert: fs.readFileSync(program.sslCert, 'utf-8'),
|
||||
key: fs.readFileSync(program.sslKey, 'utf-8'),
|
||||
};
|
||||
|
||||
server = https.createServer(sslOptions, app);
|
||||
}
|
||||
|
||||
let hasCustomFavicon = false;
|
||||
|
||||
if (program.staticDir) {
|
||||
program.staticDir = parseList(program.staticDir);
|
||||
program.staticDir.forEach(dir => {
|
||||
const staticPath = path.resolve(dir);
|
||||
if (!fs.existsSync(staticPath)) {
|
||||
logger.error(`Error: no such directory to load static files: ${staticPath}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.log(`=> Loading static files from: ${staticPath} .`);
|
||||
app.use(express.static(staticPath, { index: false }));
|
||||
|
||||
const faviconPath = path.resolve(staticPath, 'favicon.ico');
|
||||
if (fs.existsSync(faviconPath)) {
|
||||
hasCustomFavicon = true;
|
||||
app.use(favicon(faviconPath));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!hasCustomFavicon) {
|
||||
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
|
||||
}
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const configDir = program.configDir || './.storybook';
|
||||
|
||||
// The repository info is sent to the storybook while running on
|
||||
// development mode so it'll be easier for tools to integrate.
|
||||
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
|
||||
process.env.STORYBOOK_GIT_ORIGIN =
|
||||
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
|
||||
process.env.STORYBOOK_GIT_BRANCH =
|
||||
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
|
||||
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
// `getBaseConfig` function which is called inside the middleware
|
||||
app.use(storybook(configDir));
|
||||
|
||||
let serverResolve = () => {};
|
||||
let serverReject = () => {};
|
||||
const serverListening = new Promise((resolve, reject) => {
|
||||
serverResolve = resolve;
|
||||
serverReject = reject;
|
||||
});
|
||||
server.listen(...listenAddr, error => {
|
||||
if (error) {
|
||||
serverReject(error);
|
||||
} else {
|
||||
serverResolve();
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const proto = program.https ? 'https' : 'http';
|
||||
const address = `${proto}://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error instanceof Error) {
|
||||
logger.error(error);
|
||||
}
|
||||
if (program.smokeTest) {
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
import { Router } from 'express';
|
||||
import webpack from 'webpack';
|
||||
import path from 'path';
|
||||
import webpackDevMiddleware from 'webpack-dev-middleware';
|
||||
import webpackHotMiddleware from 'webpack-hot-middleware';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
import { getMiddleware } from './utils';
|
||||
|
||||
let webpackResolve = () => {};
|
||||
let webpackReject = () => {};
|
||||
export const webpackValid = new Promise((resolve, reject) => {
|
||||
webpackResolve = resolve;
|
||||
webpackReject = reject;
|
||||
});
|
||||
|
||||
export default function(configDir) {
|
||||
// Build the webpack configuration using the `getBaseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
|
||||
const middlewareFn = getMiddleware(configDir);
|
||||
|
||||
// remove the leading '/'
|
||||
let { publicPath } = config.output;
|
||||
if (publicPath[0] === '/') {
|
||||
publicPath = publicPath.slice(1);
|
||||
}
|
||||
|
||||
const compiler = webpack(config);
|
||||
const devMiddlewareOptions = {
|
||||
noInfo: true,
|
||||
publicPath: config.output.publicPath,
|
||||
watchOptions: config.watchOptions || {},
|
||||
...config.devServer,
|
||||
};
|
||||
|
||||
const router = new Router();
|
||||
const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
|
||||
router.use(webpackDevMiddlewareInstance);
|
||||
router.use(webpackHotMiddleware(compiler));
|
||||
|
||||
// custom middleware
|
||||
middlewareFn(router);
|
||||
|
||||
webpackDevMiddlewareInstance.waitUntilValid(stats => {
|
||||
router.get('/', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/index.html`));
|
||||
});
|
||||
|
||||
router.get('/iframe.html', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/iframe.html`));
|
||||
});
|
||||
|
||||
if (stats.toJson().errors.length) {
|
||||
webpackReject(stats);
|
||||
} else {
|
||||
webpackResolve(stats);
|
||||
}
|
||||
});
|
||||
|
||||
return router;
|
||||
}
|
||||
@ -5,10 +5,6 @@ import deprecate from 'util-deprecate';
|
||||
const fallbackHeadUsage = deprecate(() => {},
|
||||
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html');
|
||||
|
||||
export function parseList(str) {
|
||||
return str.split(',');
|
||||
}
|
||||
|
||||
export function getPreviewHeadHtml(configDirPath) {
|
||||
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
|
||||
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
|
||||
@ -32,25 +28,3 @@ export function getManagerHeadHtml(configDirPath) {
|
||||
|
||||
return scriptHtml;
|
||||
}
|
||||
|
||||
export function getEnvConfig(program, configEnv) {
|
||||
Object.keys(configEnv).forEach(fieldName => {
|
||||
const envVarName = configEnv[fieldName];
|
||||
const envVarValue = process.env[envVarName];
|
||||
if (envVarValue) {
|
||||
program[fieldName] = envVarValue; // eslint-disable-line
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getMiddleware(configDir) {
|
||||
const middlewarePath = path.resolve(configDir, 'middleware.js');
|
||||
if (fs.existsSync(middlewarePath)) {
|
||||
let middlewareModule = require(middlewarePath); // eslint-disable-line
|
||||
if (middlewareModule.__esModule) { // eslint-disable-line
|
||||
middlewareModule = middlewareModule.default;
|
||||
}
|
||||
return middlewareModule;
|
||||
}
|
||||
return () => {};
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-websocket": "^3.4.0-alpha.6",
|
||||
"@storybook/core": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-websocket": "^3.4.0-alpha.7",
|
||||
"@storybook/core": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-macros": "^2.1.0",
|
||||
@ -48,7 +48,7 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"commander": "^2.13.0",
|
||||
"commander": "^2.14.0",
|
||||
"css-loader": "^0.28.9",
|
||||
"express": "^4.16.2",
|
||||
"file-loader": "^1.1.6",
|
||||
@ -57,7 +57,7 @@
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"json-loader": "^0.5.7",
|
||||
"json5": "^0.5.1",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-native-compat": "^1.0.0",
|
||||
"react-native-iphone-x-helper": "^1.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"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-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.6",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/core": "^3.4.0-alpha.6",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.7",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/core": "^3.4.0-alpha.7",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
@ -45,8 +45,6 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"chalk": "^2.3.0",
|
||||
"commander": "^2.13.0",
|
||||
"common-tags": "^1.7.2",
|
||||
"configstore": "^3.1.1",
|
||||
"core-js": "^2.5.3",
|
||||
@ -67,25 +65,20 @@
|
||||
"markdown-loader": "^2.0.2",
|
||||
"npmlog": "^4.1.2",
|
||||
"postcss-flexbugs-fixes": "^3.3.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"qs": "^6.5.1",
|
||||
"react-dev-utils": "^5.0.0",
|
||||
"redux": "^3.7.2",
|
||||
"request": "^2.83.0",
|
||||
"serve-favicon": "^2.4.5",
|
||||
"shelljs": "^0.8.1",
|
||||
"style-loader": "^0.20.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.7",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.2.1",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-middleware": "^1.12.2",
|
||||
"webpack-hot-middleware": "^2.21.0"
|
||||
"webpack": "^3.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^1.14.11"
|
||||
"nodemon": "^1.14.12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0",
|
||||
|
||||
@ -1,93 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import webpack from 'webpack';
|
||||
import program from 'commander';
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import packageJson from '../../package.json';
|
||||
import getBaseConfig from './config/webpack.config.prod';
|
||||
import loadConfig from './config';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
|
||||
.option('-o, --output-dir [dir-name]', 'Directory where to store built files')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option('-w, --watch', 'Enable watch mode')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
outputDir: 'SBCONFIG_OUTPUT_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildStatic({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
const configDir = program.configDir || './.storybook';
|
||||
const outputDir = program.outputDir || './storybook-static';
|
||||
|
||||
// create output directory if not exists
|
||||
shelljs.mkdir('-p', path.resolve(outputDir));
|
||||
// clear the static dir
|
||||
shelljs.rm('-rf', path.resolve(outputDir, 'static'));
|
||||
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
|
||||
config.output.path = path.resolve(outputDir);
|
||||
|
||||
// copy all static files
|
||||
if (program.staticDir) {
|
||||
program.staticDir.forEach(dir => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
logger.error(`Error: no such directory to load static files: ${dir}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.info(`=> Copying static files from: ${dir}`);
|
||||
shelljs.cp('-r', `${dir}/*`, outputDir);
|
||||
});
|
||||
}
|
||||
|
||||
// compile all resources with webpack and write them to the disk.
|
||||
logger.info('Building storybook ...');
|
||||
const webpackCb = (err, stats) => {
|
||||
if (err || stats.hasErrors()) {
|
||||
logger.error('Failed to build the storybook');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
err && logger.error(err.message);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
|
||||
process.exitCode = 1;
|
||||
}
|
||||
logger.info('Building storybook completed.');
|
||||
};
|
||||
const compiler = webpack(config);
|
||||
if (program.watch) {
|
||||
compiler.watch({}, webpackCb);
|
||||
} else {
|
||||
compiler.run(webpackCb);
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
// @remove-on-eject-end
|
||||
|
||||
// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
|
||||
// We’re not sure why this isn't Webpack's default behavior.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/186.
|
||||
|
||||
function WatchMissingNodeModulesPlugin(nodeModulesPath) {
|
||||
this.nodeModulesPath = nodeModulesPath;
|
||||
}
|
||||
|
||||
WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
|
||||
compiler.plugin('emit', (compilation, callback) => {
|
||||
const missingDeps = compilation.missingDependencies;
|
||||
const { nodeModulesPath } = this;
|
||||
|
||||
// If any missing files are expected to appear in node_modules...
|
||||
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
|
||||
// ...tell webpack to watch node_modules recursively until they appear.
|
||||
compilation.contextDependencies.push(nodeModulesPath);
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = WatchMissingNodeModulesPlugin;
|
||||
@ -4,9 +4,9 @@ import Dotenv from 'dotenv-webpack';
|
||||
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { WatchMissingNodeModulesPlugin } from '@storybook/core/server';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
|
||||
@ -1,168 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import express from 'express';
|
||||
import https from 'https';
|
||||
import favicon from 'serve-favicon';
|
||||
import program from 'commander';
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import storybook, { webpackValid } from './middleware';
|
||||
import packageJson from '../../package.json';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-p, --port [number]', 'Port to run Storybook (Required)', str => parseInt(str, 10))
|
||||
.option('-h, --host [string]', 'Host to run Storybook')
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option(
|
||||
'--https',
|
||||
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
|
||||
)
|
||||
.option(
|
||||
'--ssl-ca <ca>',
|
||||
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
|
||||
parseList
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
port: 'SBCONFIG_PORT',
|
||||
host: 'SBCONFIG_HOSTNAME',
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildDev({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
if (!program.port) {
|
||||
logger.error('Error: port to run Storybook is required!\n');
|
||||
program.help();
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
// Used with `app.listen` below
|
||||
const listenAddr = [program.port];
|
||||
|
||||
if (program.host) {
|
||||
listenAddr.push(program.host);
|
||||
}
|
||||
|
||||
const app = express();
|
||||
let server = app;
|
||||
|
||||
if (program.https) {
|
||||
if (!program.sslCert) {
|
||||
logger.error('Error: --ssl-cert is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
if (!program.sslKey) {
|
||||
logger.error('Error: --ssl-key is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
const sslOptions = {
|
||||
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
|
||||
cert: fs.readFileSync(program.sslCert, 'utf-8'),
|
||||
key: fs.readFileSync(program.sslKey, 'utf-8'),
|
||||
};
|
||||
|
||||
server = https.createServer(sslOptions, app);
|
||||
}
|
||||
|
||||
let hasCustomFavicon = false;
|
||||
|
||||
if (program.staticDir) {
|
||||
program.staticDir = parseList(program.staticDir);
|
||||
program.staticDir.forEach(dir => {
|
||||
const staticPath = path.resolve(dir);
|
||||
if (!fs.existsSync(staticPath)) {
|
||||
logger.error(`Error: no such directory to load static files: ${staticPath}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.info(`=> Loading static files from: ${staticPath} .`);
|
||||
app.use(express.static(staticPath, { index: false }));
|
||||
|
||||
const faviconPath = path.resolve(staticPath, 'favicon.ico');
|
||||
if (fs.existsSync(faviconPath)) {
|
||||
hasCustomFavicon = true;
|
||||
app.use(favicon(faviconPath));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!hasCustomFavicon) {
|
||||
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
|
||||
}
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const configDir = program.configDir || './.storybook';
|
||||
|
||||
// The repository info is sent to the storybook while running on
|
||||
// development mode so it'll be easier for tools to integrate.
|
||||
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
|
||||
process.env.STORYBOOK_GIT_ORIGIN =
|
||||
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
|
||||
process.env.STORYBOOK_GIT_BRANCH =
|
||||
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
|
||||
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
// `getBaseConfig` function which is called inside the middleware
|
||||
app.use(storybook(configDir));
|
||||
|
||||
let serverResolve = () => {};
|
||||
let serverReject = () => {};
|
||||
const serverListening = new Promise((resolve, reject) => {
|
||||
serverResolve = resolve;
|
||||
serverReject = reject;
|
||||
});
|
||||
server.listen(...listenAddr, error => {
|
||||
if (error) {
|
||||
serverReject(error);
|
||||
} else {
|
||||
serverResolve();
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const proto = program.https ? 'https' : 'http';
|
||||
const address = `${proto}://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error instanceof Error) {
|
||||
logger.error(error);
|
||||
}
|
||||
if (program.smokeTest) {
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
import path from 'path';
|
||||
import { Router } from 'express';
|
||||
import webpack from 'webpack';
|
||||
import webpackDevMiddleware from 'webpack-dev-middleware';
|
||||
import webpackHotMiddleware from 'webpack-hot-middleware';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
import { getMiddleware } from './utils';
|
||||
|
||||
let webpackResolve = () => {};
|
||||
let webpackReject = () => {};
|
||||
export const webpackValid = new Promise((resolve, reject) => {
|
||||
webpackResolve = resolve;
|
||||
webpackReject = reject;
|
||||
});
|
||||
|
||||
export default function(configDir) {
|
||||
// Build the webpack configuration using the `getBaseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
|
||||
const middlewareFn = getMiddleware(configDir);
|
||||
|
||||
// remove the leading '/'
|
||||
let { publicPath } = config.output;
|
||||
if (publicPath[0] === '/') {
|
||||
publicPath = publicPath.slice(1);
|
||||
}
|
||||
|
||||
const compiler = webpack(config);
|
||||
const devMiddlewareOptions = {
|
||||
noInfo: true,
|
||||
publicPath: config.output.publicPath,
|
||||
watchOptions: config.watchOptions || {},
|
||||
...config.devServer,
|
||||
};
|
||||
|
||||
const router = new Router();
|
||||
const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
|
||||
router.use(webpackDevMiddlewareInstance);
|
||||
router.use(webpackHotMiddleware(compiler));
|
||||
|
||||
// custom middleware
|
||||
middlewareFn(router);
|
||||
|
||||
webpackDevMiddlewareInstance.waitUntilValid(stats => {
|
||||
router.get('/', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/index.html`));
|
||||
});
|
||||
|
||||
router.get('/iframe.html', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/iframe.html`));
|
||||
});
|
||||
|
||||
if (stats.toJson().errors.length) {
|
||||
webpackReject(stats);
|
||||
} else {
|
||||
webpackResolve(stats);
|
||||
}
|
||||
});
|
||||
|
||||
return router;
|
||||
}
|
||||
@ -5,10 +5,6 @@ import deprecate from 'util-deprecate';
|
||||
const fallbackHeadUsage = deprecate(() => {},
|
||||
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html');
|
||||
|
||||
export function parseList(str) {
|
||||
return str.split(',');
|
||||
}
|
||||
|
||||
export function getPreviewHeadHtml(configDirPath) {
|
||||
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
|
||||
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
|
||||
@ -32,25 +28,3 @@ export function getManagerHeadHtml(configDirPath) {
|
||||
|
||||
return scriptHtml;
|
||||
}
|
||||
|
||||
export function getEnvConfig(program, configEnv) {
|
||||
Object.keys(configEnv).forEach(fieldName => {
|
||||
const envVarName = configEnv[fieldName];
|
||||
const envVarValue = process.env[envVarName];
|
||||
if (envVarValue) {
|
||||
program[fieldName] = envVarValue; // eslint-disable-line
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getMiddleware(configDir) {
|
||||
const middlewarePath = path.resolve(configDir, 'middleware.js');
|
||||
if (fs.existsSync(middlewarePath)) {
|
||||
let middlewareModule = require(middlewarePath); // eslint-disable-line
|
||||
if (middlewareModule.__esModule) { // eslint-disable-line
|
||||
middlewareModule = middlewareModule.default;
|
||||
}
|
||||
return middlewareModule;
|
||||
}
|
||||
return () => {};
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
|
||||
"bugs": {
|
||||
@ -23,12 +23,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.6",
|
||||
"@storybook/core": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.7",
|
||||
"@storybook/core": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"airbnb-js-shims": "^1.4.1",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
@ -43,8 +43,6 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"chalk": "^2.3.0",
|
||||
"commander": "^2.13.0",
|
||||
"common-tags": "^1.7.2",
|
||||
"configstore": "^3.1.1",
|
||||
"core-js": "^2.5.3",
|
||||
@ -61,7 +59,7 @@
|
||||
"json5": "^0.5.1",
|
||||
"markdown-loader": "^2.0.2",
|
||||
"postcss-flexbugs-fixes": "^3.3.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"qs": "^6.5.1",
|
||||
"react": "^16.2.0",
|
||||
@ -69,21 +67,16 @@
|
||||
"react-dom": "^16.2.0",
|
||||
"redux": "^3.7.2",
|
||||
"request": "^2.83.0",
|
||||
"serve-favicon": "^2.4.5",
|
||||
"shelljs": "^0.8.1",
|
||||
"style-loader": "^0.20.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.7",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.2.1",
|
||||
"vue-hot-reload-api": "^2.2.4",
|
||||
"vue-style-loader": "^3.1.2",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-middleware": "^1.12.2",
|
||||
"webpack-hot-middleware": "^2.21.0"
|
||||
"webpack": "^3.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^1.14.11",
|
||||
"nodemon": "^1.14.12",
|
||||
"vue": "^2.5.13",
|
||||
"vue-loader": "^13.7.1",
|
||||
"vue-template-compiler": "^2.5.13"
|
||||
|
||||
@ -1,95 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import webpack from 'webpack';
|
||||
import program from 'commander';
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import packageJson from '../../package.json';
|
||||
import getBaseConfig from './config/webpack.config.prod';
|
||||
import loadConfig from './config';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
|
||||
// avoid ESLint errors
|
||||
const logger = console;
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
|
||||
.option('-o, --output-dir [dir-name]', 'Directory where to store built files')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option('-w, --watch', 'Enable watch mode')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
outputDir: 'SBCONFIG_OUTPUT_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildStatic({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
const configDir = program.configDir || './.storybook';
|
||||
const outputDir = program.outputDir || './storybook-static';
|
||||
|
||||
// create output directory if not exists
|
||||
shelljs.mkdir('-p', path.resolve(outputDir));
|
||||
// clear the static dir
|
||||
shelljs.rm('-rf', path.resolve(outputDir, 'static'));
|
||||
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
|
||||
config.output.path = path.resolve(outputDir);
|
||||
|
||||
// copy all static files
|
||||
if (program.staticDir) {
|
||||
program.staticDir.forEach(dir => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
logger.error(`Error: no such directory to load static files: ${dir}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.log(`=> Copying static files from: ${dir}`);
|
||||
shelljs.cp('-r', `${dir}/*`, outputDir);
|
||||
});
|
||||
}
|
||||
|
||||
// compile all resources with webpack and write them to the disk.
|
||||
logger.info('Building storybook ...');
|
||||
const webpackCb = (err, stats) => {
|
||||
if (err || stats.hasErrors()) {
|
||||
logger.error('Failed to build the storybook');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
err && logger.error(err.message);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
|
||||
process.exitCode = 1;
|
||||
}
|
||||
logger.info('Building storybook completed.');
|
||||
};
|
||||
const compiler = webpack(config);
|
||||
if (program.watch) {
|
||||
compiler.watch({}, webpackCb);
|
||||
} else {
|
||||
compiler.run(webpackCb);
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
// @remove-on-eject-end
|
||||
|
||||
// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
|
||||
// We’re not sure why this isn't Webpack's default behavior.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/186.
|
||||
|
||||
function WatchMissingNodeModulesPlugin(nodeModulesPath) {
|
||||
this.nodeModulesPath = nodeModulesPath;
|
||||
}
|
||||
|
||||
WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
|
||||
compiler.plugin('emit', (compilation, callback) => {
|
||||
const missingDeps = compilation.missingDependencies;
|
||||
const { nodeModulesPath } = this;
|
||||
|
||||
// If any missing files are expected to appear in node_modules...
|
||||
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
|
||||
// ...tell webpack to watch node_modules recursively until they appear.
|
||||
compilation.contextDependencies.push(nodeModulesPath);
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = WatchMissingNodeModulesPlugin;
|
||||
@ -4,9 +4,9 @@ import Dotenv from 'dotenv-webpack';
|
||||
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { WatchMissingNodeModulesPlugin } from '@storybook/core/server';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
|
||||
@ -1,169 +1,12 @@
|
||||
import '@storybook/core/env';
|
||||
|
||||
import express from 'express';
|
||||
import https from 'https';
|
||||
import favicon from 'serve-favicon';
|
||||
import program from 'commander';
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chalk from 'chalk';
|
||||
import shelljs from 'shelljs';
|
||||
import storybook, { webpackValid } from './middleware';
|
||||
import packageJson from '../../package.json';
|
||||
import { parseList, getEnvConfig } from './utils';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
|
||||
const logger = console;
|
||||
|
||||
program
|
||||
.version(packageJson.version)
|
||||
.option('-p, --port [number]', 'Port to run Storybook (Required)', str => parseInt(str, 10))
|
||||
.option('-h, --host [string]', 'Host to run Storybook')
|
||||
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
|
||||
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
|
||||
.option(
|
||||
'--https',
|
||||
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
|
||||
)
|
||||
.option(
|
||||
'--ssl-ca <ca>',
|
||||
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
|
||||
parseList
|
||||
)
|
||||
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
|
||||
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('-d, --db-path [db-file]', 'DEPRECATED!')
|
||||
.option('--enable-db', 'DEPRECATED!')
|
||||
.parse(process.argv);
|
||||
|
||||
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
|
||||
|
||||
if (program.enableDb || program.dbPath) {
|
||||
logger.error(
|
||||
[
|
||||
'Error: the experimental local database addon is no longer bundled with',
|
||||
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
|
||||
'from the command or npm script and try again.',
|
||||
].join(' ')
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// The key is the field created in `program` variable for
|
||||
// each command line argument. Value is the env variable.
|
||||
getEnvConfig(program, {
|
||||
port: 'SBCONFIG_PORT',
|
||||
host: 'SBCONFIG_HOSTNAME',
|
||||
staticDir: 'SBCONFIG_STATIC_DIR',
|
||||
configDir: 'SBCONFIG_CONFIG_DIR',
|
||||
buildDev({
|
||||
packageJson,
|
||||
getBaseConfig,
|
||||
loadConfig,
|
||||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
|
||||
});
|
||||
|
||||
if (!program.port) {
|
||||
logger.error('Error: port to run Storybook is required!\n');
|
||||
program.help();
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
// Used with `app.listen` below
|
||||
const listenAddr = [program.port];
|
||||
|
||||
if (program.host) {
|
||||
listenAddr.push(program.host);
|
||||
}
|
||||
|
||||
const app = express();
|
||||
let server = app;
|
||||
|
||||
if (program.https) {
|
||||
if (!program.sslCert) {
|
||||
logger.error('Error: --ssl-cert is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
if (!program.sslKey) {
|
||||
logger.error('Error: --ssl-key is required with --https');
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
const sslOptions = {
|
||||
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
|
||||
cert: fs.readFileSync(program.sslCert, 'utf-8'),
|
||||
key: fs.readFileSync(program.sslKey, 'utf-8'),
|
||||
};
|
||||
|
||||
server = https.createServer(sslOptions, app);
|
||||
}
|
||||
|
||||
let hasCustomFavicon = false;
|
||||
|
||||
if (program.staticDir) {
|
||||
program.staticDir = parseList(program.staticDir);
|
||||
program.staticDir.forEach(dir => {
|
||||
const staticPath = path.resolve(dir);
|
||||
if (!fs.existsSync(staticPath)) {
|
||||
logger.error(`Error: no such directory to load static files: ${staticPath}`);
|
||||
process.exit(-1);
|
||||
}
|
||||
logger.log(`=> Loading static files from: ${staticPath} .`);
|
||||
app.use(express.static(staticPath, { index: false }));
|
||||
|
||||
const faviconPath = path.resolve(staticPath, 'favicon.ico');
|
||||
if (fs.existsSync(faviconPath)) {
|
||||
hasCustomFavicon = true;
|
||||
app.use(favicon(faviconPath));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!hasCustomFavicon) {
|
||||
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
|
||||
}
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const configDir = program.configDir || './.storybook';
|
||||
|
||||
// The repository info is sent to the storybook while running on
|
||||
// development mode so it'll be easier for tools to integrate.
|
||||
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
|
||||
process.env.STORYBOOK_GIT_ORIGIN =
|
||||
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
|
||||
process.env.STORYBOOK_GIT_BRANCH =
|
||||
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
|
||||
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
// `getBaseConfig` function which is called inside the middleware
|
||||
app.use(storybook(configDir));
|
||||
|
||||
let serverResolve = () => {};
|
||||
let serverReject = () => {};
|
||||
const serverListening = new Promise((resolve, reject) => {
|
||||
serverResolve = resolve;
|
||||
serverReject = reject;
|
||||
});
|
||||
server.listen(...listenAddr, error => {
|
||||
if (error) {
|
||||
serverReject(error);
|
||||
} else {
|
||||
serverResolve();
|
||||
}
|
||||
});
|
||||
|
||||
Promise.all([webpackValid, serverListening])
|
||||
.then(() => {
|
||||
const proto = program.https ? 'https' : 'http';
|
||||
const address = `${proto}://${program.host || 'localhost'}:${program.port}/`;
|
||||
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error instanceof Error) {
|
||||
logger.error(error);
|
||||
}
|
||||
if (program.smokeTest) {
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
import { Router } from 'express';
|
||||
import webpack from 'webpack';
|
||||
import path from 'path';
|
||||
import webpackDevMiddleware from 'webpack-dev-middleware';
|
||||
import webpackHotMiddleware from 'webpack-hot-middleware';
|
||||
import getBaseConfig from './config/webpack.config';
|
||||
import loadConfig from './config';
|
||||
import { getMiddleware } from './utils';
|
||||
|
||||
let webpackResolve = () => {};
|
||||
let webpackReject = () => {};
|
||||
export const webpackValid = new Promise((resolve, reject) => {
|
||||
webpackResolve = resolve;
|
||||
webpackReject = reject;
|
||||
});
|
||||
|
||||
export default function(configDir) {
|
||||
// Build the webpack configuration using the `getBaseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
|
||||
const middlewareFn = getMiddleware(configDir);
|
||||
|
||||
// remove the leading '/'
|
||||
let { publicPath } = config.output;
|
||||
if (publicPath[0] === '/') {
|
||||
publicPath = publicPath.slice(1);
|
||||
}
|
||||
|
||||
const compiler = webpack(config);
|
||||
const devMiddlewareOptions = {
|
||||
noInfo: true,
|
||||
publicPath: config.output.publicPath,
|
||||
watchOptions: config.watchOptions || {},
|
||||
...config.devServer,
|
||||
};
|
||||
|
||||
const router = new Router();
|
||||
const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
|
||||
router.use(webpackDevMiddlewareInstance);
|
||||
router.use(webpackHotMiddleware(compiler));
|
||||
|
||||
// custom middleware
|
||||
middlewareFn(router);
|
||||
|
||||
webpackDevMiddlewareInstance.waitUntilValid(stats => {
|
||||
router.get('/', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/index.html`));
|
||||
});
|
||||
|
||||
router.get('/iframe.html', (req, res) => {
|
||||
res.set('Content-Type', 'text/html');
|
||||
res.sendFile(path.join(`${__dirname}/public/iframe.html`));
|
||||
});
|
||||
|
||||
if (stats.toJson().errors.length) {
|
||||
webpackReject(stats);
|
||||
} else {
|
||||
webpackResolve(stats);
|
||||
}
|
||||
});
|
||||
|
||||
return router;
|
||||
}
|
||||
@ -5,10 +5,6 @@ import deprecate from 'util-deprecate';
|
||||
const fallbackHeadUsage = deprecate(() => {},
|
||||
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html');
|
||||
|
||||
export function parseList(str) {
|
||||
return str.split(',');
|
||||
}
|
||||
|
||||
export function getPreviewHeadHtml(configDirPath) {
|
||||
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
|
||||
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
|
||||
@ -32,25 +28,3 @@ export function getManagerHeadHtml(configDirPath) {
|
||||
|
||||
return scriptHtml;
|
||||
}
|
||||
|
||||
export function getEnvConfig(program, configEnv) {
|
||||
Object.keys(configEnv).forEach(fieldName => {
|
||||
const envVarName = configEnv[fieldName];
|
||||
const envVarValue = process.env[envVarName];
|
||||
if (envVarValue) {
|
||||
program[fieldName] = envVarValue; // eslint-disable-line
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getMiddleware(configDir) {
|
||||
const middlewarePath = path.resolve(configDir, 'middleware.js');
|
||||
if (fs.existsSync(middlewarePath)) {
|
||||
let middlewareModule = require(middlewarePath); // eslint-disable-line
|
||||
if (middlewareModule.__esModule) { // eslint-disable-line
|
||||
middlewareModule = middlewareModule.default;
|
||||
}
|
||||
return middlewareModule;
|
||||
}
|
||||
return () => {};
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@ collectors:
|
||||
actors:
|
||||
# pull requests for updates to our major version
|
||||
- type: js-lerna
|
||||
dependencies_not_matching: "^react-native$"
|
||||
versions: "L.Y.Y"
|
||||
settings:
|
||||
batch_mode: true
|
||||
|
||||
@ -18,10 +18,10 @@
|
||||
"storybook": "start-storybook -p 9009 -s src/pages"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.3.11",
|
||||
"@storybook/addon-links": "^3.3.11",
|
||||
"@storybook/addons": "^3.3.11",
|
||||
"@storybook/react": "^3.3.11",
|
||||
"@storybook/addon-actions": "^3.3.12",
|
||||
"@storybook/addon-links": "^3.3.12",
|
||||
"@storybook/addons": "^3.3.12",
|
||||
"@storybook/react": "^3.3.12",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
@ -31,19 +31,19 @@
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"bootstrap": "^3.3.7",
|
||||
"gatsby": "^1.9.174",
|
||||
"gatsby-link": "^1.6.35",
|
||||
"gatsby": "^1.9.182",
|
||||
"gatsby-link": "^1.6.36",
|
||||
"gatsby-plugin-sharp": "^1.6.27",
|
||||
"gatsby-remark-autolink-headers": "^1.4.11",
|
||||
"gatsby-remark-copy-linked-files": "^1.5.25",
|
||||
"gatsby-remark-copy-linked-files": "^1.5.26",
|
||||
"gatsby-remark-images": "^1.5.41",
|
||||
"gatsby-remark-smartypants": "^1.4.10",
|
||||
"gatsby-source-filesystem": "^1.5.16",
|
||||
"gatsby-source-filesystem": "^1.5.18",
|
||||
"gatsby-transformer-remark": "^1.7.30",
|
||||
"gh-pages": "^1.1.0",
|
||||
"global": "^4.3.2",
|
||||
"highlight.js": "^9.12.0",
|
||||
"lodash": "^4.17.2",
|
||||
"lodash": "^4.17.5",
|
||||
"marked": "^0.3.12",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^15.6.1",
|
||||
|
||||
@ -42,6 +42,10 @@ Storyshots is a way to automatically jest-snapshot all your stories. [More info
|
||||
|
||||
Redirects console output (logs, errors, warnings) into Action Logger Panel. `withConsole` decorator notifies from what stories logs are coming.
|
||||
|
||||
### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/background)
|
||||
|
||||
With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
|
||||
|
||||
## Community Addons
|
||||
|
||||
You need to install these addons directly from NPM in order to use them.
|
||||
@ -75,10 +79,6 @@ Break your stories down into smaller categories (chapters) and subcategories (se
|
||||
Given possible values for each prop, renders your component with all combinations of prop values.
|
||||
Useful for finding edge cases or just seeing all component states at once.
|
||||
|
||||
### [Backgrounds](https://github.com/NewSpring/react-storybook-addon-backgrounds)
|
||||
|
||||
With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
|
||||
|
||||
### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)
|
||||
|
||||
Wraps your story into MuiThemeProvider.
|
||||
|
||||
137
docs/yarn.lock
137
docs/yarn.lock
@ -2,9 +2,9 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@storybook/addon-actions@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.11.tgz#158a64f01c97fcf6922e7a370c6519d216544bcd"
|
||||
"@storybook/addon-actions@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.12.tgz#1bd2668918a62f32c0907af14946cdd0c6be66f5"
|
||||
dependencies:
|
||||
deep-equal "^1.0.1"
|
||||
global "^4.3.2"
|
||||
@ -13,37 +13,37 @@
|
||||
react-inspector "^2.2.2"
|
||||
uuid "^3.1.0"
|
||||
|
||||
"@storybook/addon-links@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.11.tgz#7bc57baddd1502153ee94cf11fcb88d49131b211"
|
||||
"@storybook/addon-links@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.12.tgz#e1bb6e207506a45bea9e5f64cd78c045327412b7"
|
||||
dependencies:
|
||||
"@storybook/components" "^3.3.11"
|
||||
"@storybook/components" "^3.3.12"
|
||||
global "^4.3.2"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
"@storybook/addons@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.11.tgz#7f85136d6da785160658aee512fd3cac99780f42"
|
||||
"@storybook/addons@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.12.tgz#682927b5ac4baad796922eec505a7e956a3f79d9"
|
||||
|
||||
"@storybook/channel-postmessage@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.11.tgz#a379f96f7819ba3752bb471ebf90ad07c3fc28ea"
|
||||
"@storybook/channel-postmessage@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.12.tgz#a4e7ac32ff84d2cc41bf3a5f30608ce5f82bcf82"
|
||||
dependencies:
|
||||
"@storybook/channels" "^3.3.11"
|
||||
"@storybook/channels" "^3.3.12"
|
||||
global "^4.3.2"
|
||||
json-stringify-safe "^5.0.1"
|
||||
|
||||
"@storybook/channels@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.11.tgz#569f1c7c364aeb076df78eb829c58f9c9f0a3936"
|
||||
"@storybook/channels@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.12.tgz#aa4106888971f9e689511093b0e6f2b569973a09"
|
||||
|
||||
"@storybook/client-logger@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.11.tgz#35c851dbed2067201189847c7aa92f8d567a4d61"
|
||||
"@storybook/client-logger@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.12.tgz#5307eba4d63d6dc54676e14a40bc0d4be3439d92"
|
||||
|
||||
"@storybook/components@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.11.tgz#cb2a48b52e7cb45408172f4462f4730ca6970e78"
|
||||
"@storybook/components@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.12.tgz#e2571ca7150488f4ac3fa1cd1f70fa91ce38da8b"
|
||||
dependencies:
|
||||
glamor "^2.20.40"
|
||||
glamorous "^4.11.2"
|
||||
@ -57,9 +57,9 @@
|
||||
"@storybook/react-simple-di" "^1.2.1"
|
||||
babel-runtime "6.x.x"
|
||||
|
||||
"@storybook/node-logger@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.11.tgz#e459cbf8da75e2671a08de4f6dfe32b556b20af6"
|
||||
"@storybook/node-logger@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.12.tgz#97251cfa46be4a0d856b394f5dbbf32d6ab2f2cd"
|
||||
dependencies:
|
||||
chalk "^2.3.0"
|
||||
npmlog "^4.1.2"
|
||||
@ -87,17 +87,17 @@
|
||||
dependencies:
|
||||
babel-runtime "^6.5.0"
|
||||
|
||||
"@storybook/react@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.11.tgz#5438d40aa095dd7b0c2f4e8e51a83fd5151df0c1"
|
||||
"@storybook/react@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.12.tgz#f1f6587499e0aaa7b14be911a53d09a61e219ccd"
|
||||
dependencies:
|
||||
"@storybook/addon-actions" "^3.3.11"
|
||||
"@storybook/addon-links" "^3.3.11"
|
||||
"@storybook/addons" "^3.3.11"
|
||||
"@storybook/channel-postmessage" "^3.3.11"
|
||||
"@storybook/client-logger" "^3.3.11"
|
||||
"@storybook/node-logger" "^3.3.11"
|
||||
"@storybook/ui" "^3.3.11"
|
||||
"@storybook/addon-actions" "^3.3.12"
|
||||
"@storybook/addon-links" "^3.3.12"
|
||||
"@storybook/addons" "^3.3.12"
|
||||
"@storybook/channel-postmessage" "^3.3.12"
|
||||
"@storybook/client-logger" "^3.3.12"
|
||||
"@storybook/node-logger" "^3.3.12"
|
||||
"@storybook/ui" "^3.3.12"
|
||||
airbnb-js-shims "^1.4.0"
|
||||
autoprefixer "^7.2.3"
|
||||
babel-loader "^7.1.2"
|
||||
@ -149,11 +149,11 @@
|
||||
webpack-dev-middleware "^1.12.2"
|
||||
webpack-hot-middleware "^2.21.0"
|
||||
|
||||
"@storybook/ui@^3.3.11":
|
||||
version "3.3.11"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.11.tgz#df500b97739da484d51d6a1bcb52ce3866ad2148"
|
||||
"@storybook/ui@^3.3.12":
|
||||
version "3.3.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.12.tgz#b0a9cd83423c4d6cded0a0340fc4f48d5bdf3bc0"
|
||||
dependencies:
|
||||
"@storybook/components" "^3.3.11"
|
||||
"@storybook/components" "^3.3.12"
|
||||
"@storybook/mantra-core" "^1.7.2"
|
||||
"@storybook/react-komposer" "^2.0.3"
|
||||
babel-runtime "^6.26.0"
|
||||
@ -177,7 +177,7 @@
|
||||
react-treebeard "^2.1.0"
|
||||
redux "^3.7.2"
|
||||
|
||||
"@types/history@*":
|
||||
"@types/history@*", "@types/history@^4.6.2":
|
||||
version "4.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
|
||||
|
||||
@ -4352,9 +4352,9 @@ gatsby-1-config-css-modules@^1.0.8:
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
|
||||
gatsby-cli@^1.1.33:
|
||||
version "1.1.33"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.33.tgz#a79337d73f88ef1157aceefd245242ec0d463680"
|
||||
gatsby-cli@^1.1.37:
|
||||
version "1.1.37"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.37.tgz#2d86e766211a39e94ba38ecdfc426c8b9c4fcbf3"
|
||||
dependencies:
|
||||
babel-code-frame "^6.26.0"
|
||||
babel-runtime "^6.26.0"
|
||||
@ -4374,10 +4374,11 @@ gatsby-cli@^1.1.33:
|
||||
yargs "^8.0.2"
|
||||
yurnalist "^0.2.1"
|
||||
|
||||
gatsby-link@^1.6.35:
|
||||
version "1.6.35"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.35.tgz#28ade7aa44460d0a3102d45e4f7413ff7a633e47"
|
||||
gatsby-link@^1.6.36:
|
||||
version "1.6.36"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.36.tgz#3f969d38e9396e2650d3804543c76881eab98feb"
|
||||
dependencies:
|
||||
"@types/history" "^4.6.2"
|
||||
"@types/react-router-dom" "^4.2.2"
|
||||
babel-runtime "^6.26.0"
|
||||
prop-types "^15.5.8"
|
||||
@ -4407,12 +4408,12 @@ gatsby-plugin-sharp@^1.6.27:
|
||||
sharp "^0.19.0"
|
||||
svgo "^0.7.2"
|
||||
|
||||
gatsby-react-router-scroll@^1.0.9:
|
||||
version "1.0.9"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.9.tgz#0a321e7ae8c69ac6ba9528abf5b7be4e549a943f"
|
||||
gatsby-react-router-scroll@^1.0.10:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.10.tgz#a520ea98fd25d5c307790974b13955cb128e01df"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
scroll-behavior "^0.9.1"
|
||||
scroll-behavior "^0.9.9"
|
||||
warning "^3.0.0"
|
||||
|
||||
gatsby-remark-autolink-headers@^1.4.11:
|
||||
@ -4424,9 +4425,9 @@ gatsby-remark-autolink-headers@^1.4.11:
|
||||
mdast-util-to-string "^1.0.2"
|
||||
unist-util-visit "^1.1.1"
|
||||
|
||||
gatsby-remark-copy-linked-files@^1.5.25:
|
||||
version "1.5.25"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.25.tgz#ca2098551de4df929f03b8ab0d3bfa54b9f68deb"
|
||||
gatsby-remark-copy-linked-files@^1.5.26:
|
||||
version "1.5.26"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.26.tgz#d223fc9d7dba45b48b90a29d5e40af4c59807baa"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
cheerio "^1.0.0-rc.2"
|
||||
@ -4458,9 +4459,9 @@ gatsby-remark-smartypants@^1.4.10:
|
||||
retext-smartypants "^2.0.0"
|
||||
unist-util-visit "^1.1.1"
|
||||
|
||||
gatsby-source-filesystem@^1.5.16:
|
||||
version "1.5.16"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.16.tgz#1439093b6ad53322667870ca4ed636ad0e2121b0"
|
||||
gatsby-source-filesystem@^1.5.18:
|
||||
version "1.5.18"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.18.tgz#e2cb96a2c248c304e58ba3d0142316a695d3ef35"
|
||||
dependencies:
|
||||
babel-cli "^6.26.0"
|
||||
babel-runtime "^6.26.0"
|
||||
@ -4499,9 +4500,9 @@ gatsby-transformer-remark@^1.7.30:
|
||||
unist-util-select "^1.5.0"
|
||||
unist-util-visit "^1.1.1"
|
||||
|
||||
gatsby@^1.9.174:
|
||||
version "1.9.175"
|
||||
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.175.tgz#a0e1f9a66202f5821abfc1fdbcf3673c3dfa5b4c"
|
||||
gatsby@^1.9.182:
|
||||
version "1.9.183"
|
||||
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.183.tgz#3e6afaf17be7383a767b3d9c60e64f69eaa96ba6"
|
||||
dependencies:
|
||||
async "^2.1.2"
|
||||
babel-code-frame "^6.22.0"
|
||||
@ -4541,10 +4542,10 @@ gatsby@^1.9.174:
|
||||
front-matter "^2.1.0"
|
||||
fs-extra "^4.0.1"
|
||||
gatsby-1-config-css-modules "^1.0.8"
|
||||
gatsby-cli "^1.1.33"
|
||||
gatsby-link "^1.6.35"
|
||||
gatsby-cli "^1.1.37"
|
||||
gatsby-link "^1.6.36"
|
||||
gatsby-module-loader "^1.0.9"
|
||||
gatsby-react-router-scroll "^1.0.9"
|
||||
gatsby-react-router-scroll "^1.0.10"
|
||||
glob "^7.1.1"
|
||||
graphql "^0.11.7"
|
||||
graphql-relay "^0.5.1"
|
||||
@ -6594,6 +6595,10 @@ lodash@4.11.1:
|
||||
version "4.11.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.11.1.tgz#a32106eb8e2ec8e82c241611414773c9df15f8bc"
|
||||
|
||||
lodash@^4.17.5:
|
||||
version "4.17.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
|
||||
|
||||
log-symbols@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
|
||||
@ -9657,9 +9662,9 @@ schema-utils@^0.4.2:
|
||||
ajv "^5.0.0"
|
||||
ajv-keywords "^2.1.0"
|
||||
|
||||
scroll-behavior@^0.9.1:
|
||||
version "0.9.4"
|
||||
resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.4.tgz#73b4a0eae3e59c0b8f3b6fc1ff78f054a513e79c"
|
||||
scroll-behavior@^0.9.9:
|
||||
version "0.9.9"
|
||||
resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.9.tgz#ebfe0658455b82ad885b66195215416674dacce2"
|
||||
dependencies:
|
||||
dom-helpers "^3.2.1"
|
||||
invariant "^2.2.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -13,33 +13,33 @@
|
||||
"test": "ng test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^5.2.2",
|
||||
"@angular/common": "^5.2.2",
|
||||
"@angular/compiler": "^5.2.2",
|
||||
"@angular/core": "^5.2.2",
|
||||
"@angular/forms": "^5.2.2",
|
||||
"@angular/http": "^5.2.2",
|
||||
"@angular/platform-browser": "^5.2.2",
|
||||
"@angular/platform-browser-dynamic": "^5.2.2",
|
||||
"@angular/router": "^5.2.2",
|
||||
"@angular/animations": "^5.2.3",
|
||||
"@angular/common": "^5.2.3",
|
||||
"@angular/compiler": "^5.2.3",
|
||||
"@angular/core": "^5.2.3",
|
||||
"@angular/forms": "^5.2.3",
|
||||
"@angular/http": "^5.2.3",
|
||||
"@angular/platform-browser": "^5.2.3",
|
||||
"@angular/platform-browser-dynamic": "^5.2.3",
|
||||
"@angular/router": "^5.2.3",
|
||||
"core-js": "^2.4.1",
|
||||
"rxjs": "^5.4.2",
|
||||
"zone.js": "^0.8.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.6.6",
|
||||
"@angular/compiler-cli": "^5.2.2",
|
||||
"@angular/language-service": "^5.2.2",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/angular": "^3.4.0-alpha.6",
|
||||
"@angular/cli": "1.6.7",
|
||||
"@angular/compiler-cli": "^5.2.3",
|
||||
"@angular/language-service": "^5.2.3",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/angular": "^3.4.0-alpha.7",
|
||||
"@types/jasmine": "~2.8.6",
|
||||
"@types/node": "~6.0.96",
|
||||
"@types/node": "~6.0.97",
|
||||
"global": "^4.3.2",
|
||||
"jasmine-core": "~2.9.1",
|
||||
"jasmine-core": "~2.99.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~1.7.0",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
{
|
||||
"lerna": {
|
||||
"disabled": true
|
||||
},
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -19,23 +19,23 @@
|
||||
"react-dom": "^16.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-backgrounds": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-events": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-jest": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-a11y": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-events": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.7",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"babel-jest": "^22.1.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.1.0",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"expo": {
|
||||
"sdkVersion": "24.0.2"
|
||||
"sdkVersion": "24.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,40 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
/* eslint-disable react/no-unused-prop-types,react/require-default-props */
|
||||
|
||||
const Message = {};
|
||||
|
||||
type PropsType = {
|
||||
/** The text to be rendered in the button */
|
||||
/** A multi-type prop to be rendered in the button */
|
||||
label: string,
|
||||
/** Function to be called when the button is clicked */
|
||||
onClick?: Function,
|
||||
/** Boolean representing wether the button is disabled */
|
||||
/** Boolean representing whether the button is disabled */
|
||||
disabled?: boolean,
|
||||
/** A plain object */
|
||||
obj?: Object,
|
||||
/** A complex Object with nested types */
|
||||
shape: {
|
||||
id: number,
|
||||
func?: Function,
|
||||
arr?: Array<{
|
||||
index: number,
|
||||
}>,
|
||||
shape?: {
|
||||
shape?: {
|
||||
foo?: string,
|
||||
},
|
||||
},
|
||||
},
|
||||
/** An array of numbers */
|
||||
arrayOf?: Array<number>,
|
||||
/** A custom type */
|
||||
msg?: typeof Message,
|
||||
/** `oneOf` as Enum */
|
||||
enm?: 'News' | 'Photos',
|
||||
/** `oneOf` A multi-type prop of string or custom Message */
|
||||
union?: string | typeof Message,
|
||||
};
|
||||
|
||||
/** FlowTypeButton component description imported from comments inside the component file */
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "official-storybook",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook -c ./",
|
||||
@ -10,22 +10,22 @@
|
||||
"storybook": "start-storybook -p 9010 -c ./"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-backgrounds": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-events": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-jest": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/components": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-a11y": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-backgrounds": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-events": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-jest": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/components": "^3.4.0-alpha.7",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"babel-jest": "^21.2.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.1.0",
|
||||
|
||||
@ -16,7 +16,7 @@ exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
|
||||
style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
|
||||
>
|
||||
<p>
|
||||
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
|
||||
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. I also enjoy lime.
|
||||
</p>
|
||||
<p>
|
||||
My birthday is: January 19, 2017
|
||||
@ -70,7 +70,7 @@ exports[`Storyshots Addons|Knobs.withKnobsOptions tweaks static values with debo
|
||||
If you are encountering performance issues with state updating too often, use withKnobsOptions to debounce changes.
|
||||
</p>
|
||||
<p>
|
||||
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
|
||||
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. I also enjoy lime.
|
||||
</p>
|
||||
<p>
|
||||
My birthday is: January 19, 2017
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
boolean,
|
||||
color,
|
||||
select,
|
||||
selectV2,
|
||||
array,
|
||||
date,
|
||||
button,
|
||||
@ -56,6 +57,12 @@ storiesOf('Addons|Knobs.withKnobs', module)
|
||||
cherry: 'Cherry',
|
||||
};
|
||||
const fruit = select('Fruit', fruits, 'apple');
|
||||
const otherFruits = {
|
||||
Lime: 'lime',
|
||||
Coconut: 'coconut',
|
||||
Tomato: 'tomato',
|
||||
};
|
||||
const otherFruit = selectV2('Other Fruit', otherFruits, 'lime');
|
||||
const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
|
||||
const years = number('Years in NY', 9);
|
||||
|
||||
@ -71,7 +78,7 @@ storiesOf('Addons|Knobs.withKnobs', module)
|
||||
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
|
||||
const birthday = date('Birthday', defaultBirthday);
|
||||
|
||||
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
|
||||
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
|
||||
const style = { backgroundColor, ...otherStyles };
|
||||
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
|
||||
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
@ -113,6 +120,12 @@ storiesOf('Addons|Knobs.withKnobsOptions', module)
|
||||
cherry: 'Cherry',
|
||||
};
|
||||
const fruit = select('Fruit', fruits, 'apple');
|
||||
const otherFruits = {
|
||||
Lime: 'lime',
|
||||
Coconut: 'coconut',
|
||||
Tomato: 'tomato',
|
||||
};
|
||||
const otherFruit = selectV2('Other Fruit', otherFruits, 'lime');
|
||||
const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
|
||||
|
||||
const backgroundColor = color('background', '#ffff00');
|
||||
@ -127,7 +140,7 @@ storiesOf('Addons|Knobs.withKnobsOptions', module)
|
||||
const defaultBirthday = new Date('Jan 20 2017 GMT+0');
|
||||
const birthday = date('Birthday', defaultBirthday);
|
||||
|
||||
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
|
||||
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
|
||||
const style = { backgroundColor, ...otherStyles };
|
||||
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
|
||||
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "polymer-cli",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@polymer/polymer": "^2.4.0",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.6",
|
||||
"@storybook/polymer": "^3.4.0-alpha.6",
|
||||
"@polymer/polymer": "^2.5.0",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.7",
|
||||
"@storybook/polymer": "^3.4.0-alpha.7",
|
||||
"@webcomponents/webcomponentsjs": "^1.1.0",
|
||||
"global": "^4.3.2",
|
||||
"polymer-webpack-loader": "^2.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
@ -13,15 +13,15 @@
|
||||
"vuex": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/vue": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-viewport": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/vue": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
|
||||
@ -8,5 +8,5 @@
|
||||
}
|
||||
},
|
||||
"concurrency": 1,
|
||||
"version": "3.4.0-alpha.6"
|
||||
"version": "3.4.0-alpha.7"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -9,7 +9,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.4.0-alpha.6",
|
||||
"@storybook/channels": "^3.4.0-alpha.7",
|
||||
"global": "^4.3.2",
|
||||
"json-stringify-safe": "^5.0.1"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -9,7 +9,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.4.0-alpha.6",
|
||||
"@storybook/channels": "^3.4.0-alpha.7",
|
||||
"global": "^4.3.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "3.4.0-alpha.6",
|
||||
"version": "3.4.0-alpha.7",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -25,14 +25,14 @@
|
||||
"test-latest-cra": "cd test && ./test_latest_cra.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/codemod": "^3.4.0-alpha.6",
|
||||
"@storybook/codemod": "^3.4.0-alpha.7",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"chalk": "^2.3.0",
|
||||
"child-process-promise": "^2.2.1",
|
||||
"commander": "^2.13.0",
|
||||
"commander": "^2.14.0",
|
||||
"cross-spawn": "^5.0.1",
|
||||
"jscodeshift": "^0.4.0",
|
||||
"json5": "^0.5.1",
|
||||
@ -43,25 +43,25 @@
|
||||
"update-notifier": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-graphql": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/angular": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.6",
|
||||
"@storybook/channel-websocket": "^3.4.0-alpha.6",
|
||||
"@storybook/channels": "^3.4.0-alpha.6",
|
||||
"@storybook/polymer": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/react-native": "^3.4.0-alpha.6",
|
||||
"@storybook/ui": "^3.4.0-alpha.6",
|
||||
"@storybook/vue": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-centered": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-graphql": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-info": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-knobs": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-options": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-storyshots": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"@storybook/angular": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.7",
|
||||
"@storybook/channel-websocket": "^3.4.0-alpha.7",
|
||||
"@storybook/channels": "^3.4.0-alpha.7",
|
||||
"@storybook/polymer": "^3.4.0-alpha.7",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"@storybook/react-native": "^3.4.0-alpha.7",
|
||||
"@storybook/ui": "^3.4.0-alpha.7",
|
||||
"@storybook/vue": "^3.4.0-alpha.7",
|
||||
"check-node-version": "2.1.0",
|
||||
"npx": "9.7.1"
|
||||
}
|
||||
|
||||
@ -44,11 +44,11 @@
|
||||
"ts-node": "1.2.1",
|
||||
"tslint": "^4.3.0",
|
||||
"typescript": "~2.4.0",
|
||||
"@storybook/angular": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/angular": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6"
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,6 @@
|
||||
"@polymer/polymer": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/polymer": "^3.4.0-alpha.6"
|
||||
"@storybook/polymer": "^3.4.0-alpha.7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^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-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react-native": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0",
|
||||
"react-dom": "16.0.0-alpha.12",
|
||||
"prop-types": "^15.6.0"
|
||||
|
||||
@ -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-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react-native": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0",
|
||||
"react-dom": "16.0.0-alpha.12",
|
||||
"prop-types": "^15.6.0"
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
"build-storybook": "build-storybook -s public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/react": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.6",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.6",
|
||||
"@storybook/addons": "^3.4.0-alpha.6",
|
||||
"@storybook/react": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.7",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.7",
|
||||
"@storybook/addons": "^3.4.0-alpha.7",
|
||||
"babel-core": "^6.26.0"
|
||||
}
|
||||
}
|
||||
|
||||
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