GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into tmeasday/story-store-tests

Browse Source
This commit is contained in:
Filipp Riabchun 2018-01-15 13:28:43 +03:00 committed by GitHub
commit e825d467d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
344 changed files with 8688 additions and 3382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.circleci/config.yml
View File

@ -58,6 +58,14 @@ jobs:
name: "Link packages"
command: |
yarn install
- run:
name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
command: sh ./scripts/workaround-puppeteer-issue-290.sh
- run:
name: "Build official-storybook"
command: |
cd examples/official-storybook
yarn build-storybook
- run:
name: "Build react kitchen-sink"
command: |
@ -73,34 +81,33 @@ jobs:
command: |
cd examples/angular-cli
yarn build-storybook
- run:
name: "Run react kitchen-sink"
name: "Run react kitchen-sink (smoke test)"
command: |
cd examples/cra-kitchen-sink
yarn storybook
background: true
yarn storybook --smoke-test
- run:
name: "Run vue kitchen-sink"
name: "Run vue kitchen-sink (smoke test)"
command: |
cd examples/vue-kitchen-sink
yarn storybook
background: true
yarn storybook --smoke-test
- run:
name: "Run angular-cli"
name: "Run angular-cli (smoke test)"
command: |
cd examples/angular-cli
yarn storybook
background: true
yarn storybook --smoke-test
- run:
name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
command: sh ./scripts/workaround-puppeteer-issue-290.sh
name: "Run image snapshots"
command: yarn test --image
- run:
name: Integration Test - Kichen sinks
command: yarn test --integration
- store_artifacts:
path: integration/__image_snapshots__
destination: integration_image_snapshots
- store_artifacts:
path: examples/official-storybook/image-snapshots/__image_snapshots__
destination: official_storybook_image_snapshots
react-native:
<<: *defaults
steps:

2
.editorconfig
View File

@ -3,6 +3,6 @@ root = true
[*]
end_of_line = lf
[*.{js,json,ts}]
[*.{js,json,ts,html}]
indent_style = space
indent_size = 2

1
.gitignore vendored
View File

@ -21,3 +21,4 @@ package-lock.json
storybook-static
integration/__image_snapshots__/__diff_output__
.jest-test-results.json
/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/

428
CHANGELOG.md
View File

@ -1,3 +1,431 @@
# 3.4.0-alpha.4
2018-January-13
Republish `3.4.0-alpha.3` due to potential publishing errors
# 3.4.0-alpha.3
2018-January-13
#### Features
- Polymer 2 support [#2225](https://github.com/storybooks/storybook/pull/2225)
- Add image snapshots to addon-storyshots [#2413](https://github.com/storybooks/storybook/pull/2413)
- Angular template support for Storybook [#2690](https://github.com/storybooks/storybook/pull/2690)
#### Bug Fixes
- Remove polymer-cli dependency [#2741](https://github.com/storybooks/storybook/pull/2741)
- Add scss for components in angular apps by default. [#2703](https://github.com/storybooks/storybook/pull/2703)
#### Maintenance
- Change ng stories dir [#2672](https://github.com/storybooks/storybook/pull/2672)
#### Dependency Upgrades
<details>
<summary>
54 Upgrades
</summary>
- Upgraded `jest-image-snapshot` in `/` from "2.2.1" to "2.3.0" [#2740](https://github.com/storybooks/storybook/pull/2740)
- Upgraded `polymer-webpack-loader` in `app/polymer` from "2.0.0" to "2.0.1" [#2740](https://github.com/storybooks/storybook/pull/2740)
- Upgraded `jest-image-snapshot` in `addons/storyshots` from "2.2.1" to "2.3.0" [#2740](https://github.com/storybooks/storybook/pull/2740)
- Upgraded `shelljs` in `/` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `addons/links` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `autoprefixer` in `app/react` from "7.2.4" to "7.2.5" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `app/react` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `autoprefixer` in `app/angular` from "7.2.4" to "7.2.5" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `app/angular` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `autoprefixer` in `app/react-native` from "7.2.4" to "7.2.5" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `app/react-native` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `autoprefixer` in `app/vue` from "7.2.4" to "7.2.5" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `app/vue` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Upgraded `shelljs` in `lib/cli` from "0.7.8" to "0.8.0" [#2734](https://github.com/storybooks/storybook/pull/2734)
- Update gatsby in /docs from 1.9.153 to 1.9.154 [#2733](https://github.com/storybooks/storybook/pull/2733)
- Update @angular/cli in examples/angular-cli from 1.6.3 to 1.6.4 [#2726](https://github.com/storybooks/storybook/pull/2726)
- Upgraded `commander` in `/` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest-cli` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest-config` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest-diff` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest-environment-jsdom` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest-jasmine2` in `/` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `nodemon` in `/` from "1.14.10" to "1.14.11" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `prettier` in `/` from "1.9.2" to "1.10.2" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `tslint` in `/` from "5.8.0" to "5.9.1" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `commander` in `app/react` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `common-tags` in `app/react` from "1.7.0" to "1.7.2" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `nodemon` in `app/react` from "1.14.10" to "1.14.11" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `commander` in `app/angular` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `common-tags` in `app/angular` from "1.7.0" to "1.7.2" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `zone.js` in `app/angular` from "0.8.19" to "0.8.20" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `nodemon` in `app/angular` from "1.14.10" to "1.14.11" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `commander` in `app/react-native` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `commander` in `app/vue` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `common-tags` in `app/vue` from "1.7.0" to "1.7.2" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `nodemon` in `app/vue` from "1.14.10" to "1.14.11" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `babel-jest` in `examples/cra-kitchen-sink` from "22.0.4" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `jest` in `examples/cra-kitchen-sink` from "22.0.5" to "22.0.6" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `commander` in `lib/cli` from "2.12.2" to "2.13.0" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `zone.js` in `examples/angular-cli` from "0.8.19" to "0.8.20" [#2724](https://github.com/storybooks/storybook/pull/2724)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.7" to "3.3.8" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.7" to "3.3.8" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `@storybook/addons` in `/docs` from "3.3.7" to "3.3.8" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `@storybook/react` in `/docs` from "3.3.7" to "3.3.8" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `gatsby-transformer-remark` in `/docs` from "1.7.27" to "1.7.28" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `gatsby` in `/docs` from "1.9.151" to "1.9.153" [#2722](https://github.com/storybooks/storybook/pull/2722)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.6" to "3.3.7" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.6" to "3.3.7" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `@storybook/addons` in `/docs` from "3.3.6" to "3.3.7" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `@storybook/react` in `/docs` from "3.3.6" to "3.3.7" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `gatsby-link` in `/docs` from "1.6.33" to "1.6.34" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `gatsby-transformer-remark` in `/docs` from "1.7.26" to "1.7.27" [#2710](https://github.com/storybooks/storybook/pull/2710)
- Upgraded `gatsby` in `/docs` from "1.9.150" to "1.9.151" [#2710](https://github.com/storybooks/storybook/pull/2710)
</details>
# 3.3.9
2018-January-13
#### Bug Fixes
- Start haul/react-native using named binaries instead of cli.js [#2715](https://github.com/storybooks/storybook/pull/2715)
- Reflect the new peer dependencies in docs and CLI templates [#2714](https://github.com/storybooks/storybook/pull/2714)
- Don't mangle function names for production builds [#2705](https://github.com/storybooks/storybook/pull/2705)
# 3.4.0-alpha.2
2018-January-11
This is a duplicate of `3.4.0-alpha.1`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
# 3.3.8
2018-January-11
This is a duplicate of `3.3.7`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
# 3.4.0-alpha.1
2018-January-10
In addition to the changes listed here, also contains fixes from [3.3.5](#335) and [3.3.6](#336) and [3.3.7](#337).
#### Features
- Custom tsconfig.json for angular apps. [#2669](https://github.com/storybooks/storybook/pull/2669)
#### Dependency Upgrades
<details>
<summary>
105 Upgrades
</summary>
- Upgraded `babel-eslint` in `/` from "8.1.2" to "8.2.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `eslint-plugin-jest` in `/` from "21.5.0" to "21.6.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest-cli` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest-config` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest-diff` in `/` from "22.0.3" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest-environment-jsdom` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest-jasmine2` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `lerna` in `/` from "2.5.1" to "2.6.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `nodemon` in `/` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `common-tags` in `app/react` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `nodemon` in `app/react` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `common-tags` in `app/angular` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `nodemon` in `app/angular` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `common-tags` in `app/vue` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `nodemon` in `app/vue` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `vue-loader` in `app/vue` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `jest` in `examples/cra-kitchen-sink` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.10.0" to "2.10.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
- Upgraded `marked` in `/docs` from "0.3.7" to "0.3.12" [#2699](https://github.com/storybooks/storybook/pull/2699)
- Upgraded `react-stack-grid` in `/docs` from "0.7.0" to "0.7.1" [#2699](https://github.com/storybooks/storybook/pull/2699)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `@storybook/addons` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `@storybook/react` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `gatsby-link` in `/docs` from "1.6.32" to "1.6.33" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `gatsby` in `/docs` from "1.9.149" to "1.9.150" [#2686](https://github.com/storybooks/storybook/pull/2686)
- Upgraded `nodemon` in `/` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `markdown-loader` in `app/react` from "2.0.1" to "2.0.2" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `nodemon` in `app/react` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `nodemon` in `app/angular` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `react-native` in `app/react-native` from "0.51.0" to "0.52.0" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `nodemon` in `app/vue` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
- Upgraded `@storybook/addons` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
- Upgraded `@storybook/react` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
- Update eslint in / from 4.14.0 to 4.15.0 [#2673](https://github.com/storybooks/storybook/pull/2673)
- Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
- Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
- Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
- Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
</details>
# 3.3.7
2018-January-10
#### Maintenance
- Extract tslint exclusions out of package.json scripts [#2684](https://github.com/storybooks/storybook/pull/2684)
- Add tslint to the linting pipe [#2682](https://github.com/storybooks/storybook/pull/2682)
#### Bug Fixes
- Angular: add entry components to modulemetadata - #2701 [#2702](https://github.com/storybooks/storybook/pull/2702)
- Add html and markup loaders to angular and vue apps [#2692](https://github.com/storybooks/storybook/pull/2692)
# 3.3.6
2018-January-08
#### Bug Fixes
- Remove `src/` from remaining `.npmignore`s [#2678](https://github.com/storybooks/storybook/pull/2678)
# 3.3.5
2018-January-08
#### Bug Fixes
- Remove src from individual .npmignore files [#2677](https://github.com/storybooks/storybook/pull/2677)
# 3.4.0-alpha.0
2018-January-07
#### Features
- Multiple hierarchies [#2452](https://github.com/storybooks/storybook/pull/2452)
- Change template story files extension to .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
- Use store revisions to ensure that stories re-render on HMR. [#2605](https://github.com/storybooks/storybook/pull/2605)
- Ability to force re-render a story [#2463](https://github.com/storybooks/storybook/pull/2463)
- Introduce framework-independent core library [#2241](https://github.com/storybooks/storybook/pull/2241)
#### Documentation
<details>
<summary>
4 PRs
</summary>
- Update webpack extend warning. [#2660](https://github.com/storybooks/storybook/pull/2660)
- ADD demo images to a new img folder with the documentation site [#2644](https://github.com/storybooks/storybook/pull/2644)
- write doc about .css/.scss rules for Angular [#2634](https://github.com/storybooks/storybook/pull/2634)
- Updated documentation wrt ejs exclusion [#2633](https://github.com/storybooks/storybook/pull/2633)
</details>
#### Maintenance
<details>
<summary>
4 PRs
</summary>
- Only update CLI snapsots on postpublish script, skip smoke tests [#2671](https://github.com/storybooks/storybook/pull/2671)
- Fix the timezone for example dates [#2654](https://github.com/storybooks/storybook/pull/2654)
- Update prereq yarn install level [#2638](https://github.com/storybooks/storybook/pull/2638)
- Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
</details>
#### Dependency Upgrades
<details>
<summary>
66 Upgrades
</summary>
- Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
- Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
- Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
- Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
- Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
- Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
- Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
- Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
- Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
- Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
- Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
</details>
# 3.3.4
2018-January-07
#### Bug Fixes
- Fix config dir detection [#2666](https://github.com/storybooks/storybook/pull/2666)
- Removed lowercase-only restriction for knobs [#2646](https://github.com/storybooks/storybook/pull/2646)
- Add IE11 compatibility meta tag [#2650](https://github.com/storybooks/storybook/pull/2650)
- Allow transparency in color knob [#2624](https://github.com/storybooks/storybook/pull/2624)
- RN: Use haul/bin/cli.js for cross-platform support [#2577](https://github.com/storybooks/storybook/pull/2577)
- Publish package sources along with transpiled files [#2604](https://github.com/storybooks/storybook/pull/2604)
- Fixed all peerDependencies for apps. [#2601](https://github.com/storybooks/storybook/pull/2601)
- Renamed angular root node to avoid name collisions [#2657](https://github.com/storybooks/storybook/pull/2657)
- Add .ts compatibility to storyshots [#2639](https://github.com/storybooks/storybook/pull/2639)
- Remove @angular/core dep from knobs peer. [#2640](https://github.com/storybooks/storybook/pull/2640)
- Angular: Change template story files extension .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
- Skip serializing (Synthetic)Events [#2626](https://github.com/storybooks/storybook/pull/2626)
#### Maintenance
- Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
#### Dependency Upgrades
<details>
<summary>
13 Upgrades
</summary>
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
</details>
# 3.3.3
2017-December-29

8
CONTRIBUTING.md
View File

@ -76,6 +76,14 @@ In order for the snapshot-integration tests to be executed properly, examples be
Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images.
##### CRA-kitchen-sink - Image snapshots using Storyshots
`yarn test --image`
This option executes tests from `<rootdir>/examples/cra-kitchen-sink`
In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date.
Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
#### 2b. Run e2e tests for CLI

15
MIGRATION.md
View File

@ -18,7 +18,20 @@
## From version 3.2.x to 3.3.x
There should be no breaking changes in this release, but read on if you're using `addon-knobs`: we advise an update to your code for efficiency's sake.
There wasn't expected be any breaking changes in this release, but unfortunately it turned out that there are some. We're revisiting our [release strategy](https://github.com/storybooks/storybook/blob/master/RELEASES.md) to follow semver more strictly.
Also read on if you're using `addon-knobs`: we advise an update to your code for efficiency's sake.
### `babel-core` is now a peer dependency ([#2494](https://github.com/storybooks/storybook/pull/2494))
This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency:
```
npm install --save-dev babel-core
```
This was done to support different major versions of babel.
### Base webpack config now contains vital plugins ([#1775](https://github.com/storybooks/storybook/pull/1775))
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a reccomendation, but now it [became](https://github.com/storybooks/storybook/pull/2578) a requirement.
### Refactored Knobs

2
README.md
View File

@ -60,6 +60,8 @@ It runs a codemod to update all package names. Read all migration details in our
For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
## Projects
### Main Projects

1
RELEASES.md
View File

@ -116,3 +116,4 @@ in a patch release.
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.

5
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -25,8 +25,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/components": "^3.3.3",
"@storybook/components": "^3.4.0-alpha.4",
"axe-core": "^2.6.1",
"glamorous": "^4.11.2",
"prop-types": "^15.6.0"
},
"peerDependencies": {

8
addons/a11y/src/components/Panel.js
View File

@ -6,10 +6,10 @@ import Report from './Report';
const styles = {
passes: {
color: '#2ecc71',
color: '#0D6731',
},
violations: {
color: '#e74c3c',
color: '#AC2300',
},
};
@ -47,11 +47,11 @@ class Panel extends Component {
<Tabs
tabs={[
{
label: <span style={styles.violations}>Violations</span>,
label: <span style={styles.violations}>{violations.length} Violations</span>,
panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
},
{
label: <span style={styles.passes}>Passes</span>,
label: <span style={styles.passes}>{passes.length} Passes</span>,
panel: <Report passes items={passes} empty="No a11y check passed" />,
},
]}

17
addons/a11y/src/components/Report/RerunButton.js Normal file
View File

@ -0,0 +1,17 @@
import glamorous from 'glamorous';
const RerunButton = glamorous.button({
position: 'absolute',
bottom: 0,
right: 0,
border: 'none',
borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
background: 'rgba(255, 255, 255, 0.5)',
padding: '5px 10px',
borderRadius: '4px 0 0 0',
color: 'rgba(0, 0, 0, 0.5)',
textTransform: 'uppercase',
});
export default RerunButton;

27
addons/a11y/src/components/Report/index.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import addons from '@storybook/addons';
import RerunButton from './RerunButton';
import Item from './Item';
const styles = {
@ -17,17 +18,23 @@ const styles = {
},
};
function Report({ items, empty, passes }) {
if (items.length) {
return (
function onRerunClick() {
const channel = addons.getChannel();
channel.emit('addon:a11y:rerun');
}
const Report = ({ items, empty, passes }) => (
<Fragment>
{items.length ? (
<div style={styles.container}>
{items.map(item => <Item passes={passes} item={item} key={item.id} />)}
</div>
);
}
return <span style={styles.empty}>{empty}</span>;
}
) : (
<span style={styles.empty}>{empty}</span>
)}
<RerunButton onClick={onRerunClick}>Re-run tests</RerunButton>
</Fragment>
);
Report.propTypes = {
items: PropTypes.arrayOf(

1
addons/a11y/src/components/Tabs.js
View File

@ -5,6 +5,7 @@ import { baseFonts } from '@storybook/components';
const styles = {
container: {
width: '100%',
position: 'relative',
...baseFonts,
},
tabs: {

18
addons/a11y/src/components/WrapStory.js
View File

@ -15,8 +15,24 @@ class WrapStory extends Component {
channel: {},
};
/* eslint-disable react/no-find-dom-node */
constructor(props) {
super(props);
this.runA11yCheck = this.runA11yCheck.bind(this);
}
componentDidMount() {
const { channel } = this.props;
channel.on('addon:a11y:rerun', this.runA11yCheck);
this.runA11yCheck();
}
componentWillUnmount() {
const { channel } = this.props;
channel.removeListener('addon:a11y:rerun', this.runA11yCheck);
}
/* eslint-disable react/no-find-dom-node */
runA11yCheck() {
const { channel } = this.props;
const wrapper = findDOMNode(this);

2
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"

2
addons/background/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",

2
addons/background/src/index.js
View File

@ -5,7 +5,7 @@ import addons from '@storybook/addons';
const style = {
wrapper: {
overflow: 'scroll',
overflow: 'auto',
position: 'fixed',
top: 0,
bottom: 0,

2
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Storybook decorator to center components",
"license": "MIT",
"author": "Muhammed Thanish <mnmtanish@gmail.com>",

2
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",

2
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"storybook"

BIN
addons/info/docs/home-screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 160 KiB

9
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "A Storybook addon to show additional information for your stories.",
"license": "MIT",
"main": "dist/index.js",
@ -15,11 +15,12 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/client-logger": "^3.3.3",
"@storybook/components": "^3.3.3",
"@storybook/client-logger": "^3.4.0-alpha.4",
"@storybook/components": "^3.4.0-alpha.4",
"babel-runtime": "^6.26.0",
"glamorous": "^4.11.2",
"global": "^4.3.2",
"marksy": "^6.0.2",
"marksy": "^6.0.3",
"nested-object-assign": "^1.0.1",
"prop-types": "^15.6.0",
"react-addons-create-fragment": "^15.5.3",

2748
addons/info/src/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

54
addons/info/src/components/PropVal.js
View File

@ -1,46 +1,47 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from 'glamorous';
import createFragment from 'react-addons-create-fragment';
const valueStyles = {
const getValueStyles = (codeColors = {}) => ({
func: {
color: '#170',
color: codeColors.func || '#170',
},
attr: {
color: '#666',
color: codeColors.attr || '#666',
},
object: {
color: '#666',
color: codeColors.object || '#666',
},
array: {
color: '#666',
color: codeColors.array || '#666',
},
number: {
color: '#a11',
color: codeColors.number || '#a11',
},
string: {
color: '#22a',
color: codeColors.string || '#22a',
wordBreak: 'break-word',
},
bool: {
color: '#a11',
color: codeColors.bool || '#a11',
},
empty: {
color: '#777',
},
};
});
function previewArray(val, maxPropArrayLength) {
function previewArray(val, maxPropArrayLength, valueStyles) {
const items = {};
val.slice(0, maxPropArrayLength).forEach((item, i) => {
items[`n${i}`] = <PropVal val={item} />;
items[`n${i}`] = <PropVal val={item} valueStyles={valueStyles} />;
items[`c${i}`] = ', ';
});
if (val.length > maxPropArrayLength) {
@ -51,13 +52,13 @@ function previewArray(val, maxPropArrayLength) {
return <span style={valueStyles.array}>[{createFragment(items)}]</span>;
}
function previewObject(val, maxPropObjectKeys) {
function previewObject(val, maxPropObjectKeys, valueStyles) {
const names = Object.keys(val);
const items = {};
names.slice(0, maxPropObjectKeys).forEach((name, i) => {
items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
items[`c${i}`] = ': ';
items[`v${i}`] = <PropVal val={val[name]} />;
items[`v${i}`] = <PropVal val={val[name]} valueStyles={valueStyles} />;
items[`m${i}`] = ', ';
});
if (names.length > maxPropObjectKeys) {
@ -74,11 +75,13 @@ function previewObject(val, maxPropObjectKeys) {
);
}
export default function PropVal(props) {
const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
function PropVal(props) {
const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength, theme } = props;
let { val } = props;
const { codeColors } = theme || {};
let braceWrap = true;
let content = null;
const valueStyles = props.valueStyles || getValueStyles(codeColors);
if (typeof val === 'number') {
content = <span style={valueStyles.number}>{val}</span>;
@ -91,7 +94,7 @@ export default function PropVal(props) {
} else if (typeof val === 'boolean') {
content = <span style={valueStyles.bool}>{`${val}`}</span>;
} else if (Array.isArray(val)) {
content = previewArray(val, maxPropArrayLength);
content = previewArray(val, maxPropArrayLength, valueStyles);
} else if (typeof val === 'function') {
content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
} else if (!val) {
@ -105,7 +108,7 @@ export default function PropVal(props) {
</span>
);
} else {
content = previewObject(val, maxPropObjectKeys);
content = previewObject(val, maxPropObjectKeys, valueStyles);
}
if (!braceWrap) return content;
@ -118,6 +121,8 @@ PropVal.defaultProps = {
maxPropObjectKeys: 3,
maxPropArrayLength: 3,
maxPropStringLength: 50,
theme: {},
valueStyles: null,
};
PropVal.propTypes = {
@ -125,4 +130,19 @@ PropVal.propTypes = {
maxPropObjectKeys: PropTypes.number,
maxPropArrayLength: PropTypes.number,
maxPropStringLength: PropTypes.number,
theme: PropTypes.shape({
codeColors: PropTypes.object,
}),
valueStyles: PropTypes.shape({
func: PropTypes.object,
attr: PropTypes.object,
object: PropTypes.object,
array: PropTypes.object,
number: PropTypes.object,
string: PropTypes.object,
bool: PropTypes.object,
empty: PropTypes.object,
}),
};
export default withTheme(PropVal);

11
addons/info/src/components/Story.js
View File

@ -4,6 +4,7 @@ import React, { createElement } from 'react';
import PropTypes from 'prop-types';
import global from 'global';
import { baseFonts } from '@storybook/components';
import { ThemeProvider } from 'glamorous';
import marksy from 'marksy';
@ -364,11 +365,11 @@ export default class Story extends React.Component {
}
render() {
if (this.props.showInline) {
return this._renderInline();
}
return this._renderOverlay();
return (
<ThemeProvider theme={this.state.stylesheet}>
{this.props.showInline ? this._renderInline() : this._renderOverlay()}
</ThemeProvider>
);
}
}

17
addons/info/src/components/markdown/code.js
View File

@ -52,21 +52,6 @@ Code.defaultProps = {
code: null,
};
export function Pre(props) {
const style = {
fontSize: '.88em',
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
backgroundColor: '#fafafa',
padding: '.5rem',
lineHeight: 1.5,
overflowX: 'scroll',
};
return <pre style={style}>{props.children}</pre>;
}
Pre.propTypes = { children: PropTypes.node };
Pre.defaultProps = { children: null };
export function Blockquote(props) {
const style = {
fontSize: '1.88em',
@ -79,3 +64,5 @@ export function Blockquote(props) {
Blockquote.propTypes = { children: PropTypes.node };
Blockquote.defaultProps = { children: null };
export { default as Pre } from './pre/pre';

13
addons/info/src/components/markdown/pre/copy.js Normal file
View File

@ -0,0 +1,13 @@
/* eslint-disable no-undef */
export default function copy(str) {
const tmp = document.createElement('TEXTAREA');
const focus = document.activeElement;
tmp.value = str;
document.body.appendChild(tmp);
tmp.select();
document.execCommand('copy');
document.body.removeChild(tmp);
focus.focus();
}

68
addons/info/src/components/markdown/pre/copyButton.js Normal file
View File

@ -0,0 +1,68 @@
import React from 'react';
import PropTypes from 'prop-types';
import glamorous, { withTheme } from 'glamorous';
const Button = glamorous.button(
{
overflow: 'hidden',
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 13,
padding: '3px 10px',
alignSelf: 'flex-start',
':hover': {
backgroundColor: '#f4f7fa',
borderColor: '#ddd',
},
':active': {
backgroundColor: '#e9ecef',
borderColor: '#ccc',
},
},
props => props.styles
);
const ContentWrapper = glamorous.div(
{
transition: 'transform .2s ease',
height: 16,
},
props => ({
...props.styles,
transform: props.toggled ? 'translateY(0px)' : 'translateY(-100%) translateY(-6px)',
})
);
function CopyButton(props) {
const { copyButton = {}, copyButtonContent } = props.theme;
const { toggleText = 'Copied!', text = 'Copy', ...copyButtonStyles } = copyButton;
return (
<Button onClick={props.onClick} styles={copyButtonStyles}>
<ContentWrapper styles={copyButtonContent} toggled={props.toggled}>
<div style={{ marginBottom: 6 }}>{toggleText}</div>
<div>{text}</div>
</ContentWrapper>
</Button>
);
}
CopyButton.propTypes = {
onClick: PropTypes.func,
toggled: PropTypes.bool,
theme: PropTypes.shape({
copyButton: PropTypes.object,
}),
};
CopyButton.defaultProps = {
onClick: () => {},
toggled: false,
theme: {},
};
export default withTheme(CopyButton);

75
addons/info/src/components/markdown/pre/pre.js Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import PropTypes from 'prop-types';
import glamorous, { withTheme } from 'glamorous';
import CopyButton from './copyButton';
import copy from './copy';
const TOGGLE_TIMEOUT = 1800;
const StyledPre = glamorous.pre(
{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
fontSize: '.88em',
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
backgroundColor: '#fafafa',
padding: '.5rem',
lineHeight: 1.5,
overflowX: 'scroll',
},
props => props.styles
);
class Pre extends React.Component {
state = {
copied: false,
};
setRef = elem => {
this.pre = elem;
};
handleClick = () => {
const text = this.pre && this.pre.innerText;
if (!text) {
return;
}
copy(text);
this.setState({ copied: true });
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setState({ copied: false });
}, TOGGLE_TIMEOUT);
};
render() {
const { pre } = this.props.theme;
return (
<StyledPre styles={pre}>
<div ref={this.setRef}>{this.props.children}</div>
<CopyButton onClick={this.handleClick} toggled={this.state.copied} />
</StyledPre>
);
}
}
Pre.propTypes = {
children: PropTypes.node,
theme: PropTypes.shape({
pre: PropTypes.object,
}),
};
Pre.defaultProps = {
children: null,
theme: {},
};
export default withTheme(Pre);

14
addons/info/src/components/types/OneOfType.js
View File

@ -8,13 +8,13 @@ const OneOfType = ({ propType }) => {
return (
<span>
{propType.value
.map((value, i) => [
<PrettyPropType
key={`${value.name}${value.value ? `-${value.value}` : ''}`}
propType={value}
/>,
i < length - 1 ? <span> | </span> : null,
])
.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,
];
})
.reduce((acc, tuple) => acc.concat(tuple), [])}
</span>
);

4
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/components": "^3.3.3",
"@storybook/components": "^3.4.0-alpha.4",
"glamor": "^2.20.40",
"glamorous": "^4.11.2",
"global": "^4.3.2",

1
addons/knobs/.npmignore
View File

@ -1,2 +1 @@
src
.babelrc

2
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Storybook Addon Prop Editor Component",
"license": "MIT",
"main": "dist/index.js",

1
addons/knobs/polymer.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/polymer');

7
addons/knobs/src/angular/helpers.js vendored
View File

@ -3,7 +3,7 @@
import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';
import { getParameters, getAnnotations, getPropMetadata } from './utils';
const getComponentMetadata = ({ component, props = {}, moduleMetadata = {} }) => {
const getComponentMetadata = ({ component, props = {}, moduleMetadata = {}, template = '' }) => {
if (!component || typeof component !== 'function') throw new Error('No valid component provided');
const componentMeta = getAnnotations(component)[0] || {};
@ -16,6 +16,7 @@ const getComponentMetadata = ({ component, props = {}, moduleMetadata = {} }) =>
componentMeta,
propsMeta,
moduleMetadata,
template,
params: paramsMetadata,
};
};
@ -29,8 +30,8 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
};
KnobWrapperComponent.prototype = Object.create(component.prototype);
KnobWrapperComponent.__annotations__ = [new Component(componentMeta)];
KnobWrapperComponent.__parameters__ = [[ChangeDetectorRef], ...params];
KnobWrapperComponent.annotations = [new Component(componentMeta)];
KnobWrapperComponent.parameters = [[ChangeDetectorRef], ...params];
KnobWrapperComponent.prototype.constructor = KnobWrapperComponent;
KnobWrapperComponent.prototype.ngOnInit = function onInit() {

87
addons/knobs/src/polymer/WrapStory.html Normal file
View File

@ -0,0 +1,87 @@
<dom-module id="wrap-story">
<script>
class WrapStory extends HTMLElement {
static get is() {
return 'wrap-story';
}
constructor(component, channel, context, storyFn, knobStore) {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<div id="wrapper"></div>';
this.channel = channel;
this.context = context;
this.storyFn = storyFn;
this.knobStore = knobStore;
this.knobChanged = this.knobChanged.bind(this);
this.knobClicked = this.knobClicked.bind(this);
this.resetKnobs = this.resetKnobs.bind(this);
this.setPaneKnobs = this.setPaneKnobs.bind(this);
this.connectChannel(this.channel);
this.knobStore.subscribe(this.setPaneKnobs);
this.render(component);
}
disconnectedCallback() {
this.disconnectChannel(this.channel);
this.knobStore.unsubscribe(this.setPaneKnobs);
}
connectChannel(channel) {
channel.on('addon:knobs:knobChange', this.knobChanged);
channel.on('addon:knobs:knobClick', this.knobClicked);
channel.on('addon:knobs:reset', this.resetKnobs);
}
disconnectChannel(channel) {
channel.removeListener('addon:knobs:knobChange', this.knobChanged);
channel.removeListener('addon:knobs:knobClick', this.knobClicked);
channel.removeListener('addon:knobs:reset', this.resetKnobs);
}
knobChanged(change) {
const { name, value } = change;
const { knobStore, storyFn, context } = this;
// Update the related knob and it's value.
const knobOptions = knobStore.get(name);
knobOptions.value = value;
knobStore.markAllUnused();
this.render(storyFn(context));
}
knobClicked(clicked) {
const knobOptions = this.knobStore.get(clicked.name);
knobOptions.callback();
}
resetKnobs() {
const { knobStore, storyFn, context } = this;
knobStore.reset();
this.render(storyFn(context));
this.setPaneKnobs(this.channel, this.knobStore, false);
}
setPaneKnobs(timestamp = +new Date()) {
const { channel, knobStore } = this;
channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
}
render(component) {
const wrapper = this.shadowRoot.querySelector('div#wrapper');
if (typeof component === 'string') {
wrapper.innerHTML = component;
} else {
wrapper.innerHTML = '';
wrapper.appendChild(component);
}
}
}
customElements.define(WrapStory.is, WrapStory);
</script>
</dom-module>

36
addons/knobs/src/polymer/index.js Normal file
View File

@ -0,0 +1,36 @@
import addons from '@storybook/addons';
import window from 'global';
import './WrapStory.html';
import { knob, text, boolean, number, color, object, array, date, select, manager } from '../base';
export { knob, text, boolean, number, color, object, array, date, select };
export function button(name, callback) {
return manager.knob(name, { type: 'button', value: Date.now(), callback, hideLabel: true });
}
function prepareComponent({ getStory, context, channel, knobStore }) {
const WrapStory = window.customElements.get('wrap-story');
return new WrapStory(getStory(context), channel, context, getStory, knobStore);
}
export const polymerHandler = (channel, knobStore) => getStory => context =>
prepareComponent({ getStory, context, channel, knobStore });
function wrapperKnobs(options) {
const channel = addons.getChannel();
manager.setChannel(channel);
if (options) channel.emit('addon:knobs:setOptions', options);
return polymerHandler(channel, manager.knobStore);
}
export function withKnobs(storyFn, context) {
return wrapperKnobs()(storyFn)(context);
}
export function withKnobsOptions(options = {}) {
return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
}

6
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Story Links addon for storybook",
"keywords": [
"storybook"
@ -22,7 +22,7 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/components": "^3.3.3",
"@storybook/components": "^3.4.0-alpha.4",
"global": "^4.3.2",
"prop-types": "^15.5.10"
},
@ -30,7 +30,7 @@
"enzyme": "^3.3.0",
"react": "^16.1.0",
"react-dom": "^16.1.0",
"shelljs": "^0.7.8"
"shelljs": "^0.8.0"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",

2
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",

2
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Options addon for storybook",
"keywords": [
"storybook"

1
addons/storyshots/.npmignore
View File

@ -1,2 +1 @@
src
.babelrc

99
addons/storyshots/README.md
View File

@ -36,7 +36,7 @@ Usually, you might already have completed this step. If not, here are some resou
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
## Configure Storyshots
## Configure Storyshots for HTML snapshots
Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
Then add following content to it:
@ -53,6 +53,103 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y
![Screenshot](docs/storyshots.png)
## Configure Storyshots for image snapshots
/*\ **React-native** is **not supported** by this test function.
Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
When willing to generate and compare image snapshots for your stories, you have to two options:
- Have a storybook running (ie. accessible via http(s):// , for instance using `yarn run storybook`)
- Have a static build of the storybook (for instance, using `yarn run build-storybook`)
Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
### Using default values for _imageSnapshots_
Then you can either create a new Storyshots instance or edit the one you previously used:
```js
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
initStoryshots({suite: 'Image storyshots', test: imageSnapshot});
```
This will assume you have a storybook running on at _http://localhost:6006_.
Internally here are the steps:
- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
- Browses each stories (calling _http://localhost:6006/iframe.html?..._ URL),
- Take screenshots & save all images under _\_image_snapshots\__ folder.
### Specifying the storybook URL
If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below:
```js
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
```
The above config will use _https://my-specific-domain.com:9010_ for screenshots.
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
```js
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'file:///path/to/my/storybook-static'})});
```
### Specifying options to _jest-image-snapshots_
If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object.
```js
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
const getMatchOptions = ({context : {kind, story}, url}) => {
return {
failureThreshold: 0.2,
failureThresholdType: 'percent',
}
}
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions})});
```
`getMatchOptions` receives an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
### Integrate image storyshots with regular app
You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.
You can find a working example of this in the [official-storybook](https://github.com/storybooks/storybook/tree/master/examples/official-storybook) example.
### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
You have two options here, you can either:
- Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
- Create a custom test file using Jest outside of the CRA scope:
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
Then you will create a separate script entry in your package.json, for instance
```json
{
"scripts": {
"image-snapshots" : "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
}
}
```
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
### Reminder
An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome).
The browser opens a page (either using the static build of storybook or a running instance of Storybook)
If you run your test without either the static build or a running instance, this wont work.
To make sure your screenshots are taken from latest changes of your Storybook, you must keep your static build or running Storybook up-to-date.
This can be achieved by adding a step before running the test ie: `yarn run build-storybook && yarn run image-snapshots`.
If you run the image snapshots against a running Storybook in dev mode, you don't have to care about being up-to-date because the dev-server is watching changes and rebuilds automatically.
## Options
### `configPath`

12
addons/storyshots/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"license": "MIT",
"main": "dist/index.js",
@ -16,17 +16,19 @@
"example": "jest storyshot.test"
},
"dependencies": {
"@storybook/channels": "^3.3.3",
"@storybook/channels": "^3.4.0-alpha.4",
"babel-runtime": "^6.26.0",
"glob": "^7.1.2",
"global": "^4.3.2",
"jest-image-snapshot": "^2.3.0",
"jest-specific-snapshot": "^0.3.0",
"prop-types": "^15.6.0",
"puppeteer": "^0.13.0",
"read-pkg-up": "^3.0.0"
},
"devDependencies": {
"@storybook/addons": "^3.3.3",
"@storybook/react": "^3.3.3",
"@storybook/addons": "^3.4.0-alpha.4",
"@storybook/react": "^3.4.0-alpha.4",
"babel-cli": "^6.26.0",
"babel-jest": "^20.0.3",
"babel-plugin-transform-runtime": "^6.23.0",
@ -40,7 +42,7 @@
"react-dom": "^16.1.0"
},
"peerDependencies": {
"@storybook/addons": "^3.3.3",
"@storybook/addons": "^3.4.0-alpha.4",
"babel-core": "^6.26.0 || ^7.0.0-0",
"react": "*",
"react-test-renderer": "*"

23
addons/storyshots/src/index.js
View File

@ -1,7 +1,7 @@
import path from 'path';
import fs from 'fs';
import glob from 'glob';
import global, { describe, it } from 'global';
import global, { describe, it, beforeEach, afterEach } from 'global';
import readPkgUp from 'read-pkg-up';
import addons from '@storybook/addons';
@ -18,6 +18,8 @@ export {
renderOnly,
} from './test-bodies';
export { imageSnapshot } from './test-body-image-snapshot';
export { getSnapshotFileName };
let storybook;
@ -100,6 +102,20 @@ export default function testStorySnapshots(options = {}) {
}
describe(suite, () => {
beforeEach(() => {
if (typeof options.test.beforeEach === 'function') {
return options.test.beforeEach();
}
return Promise.resolve();
});
afterEach(() => {
if (typeof options.test.afterEach === 'function') {
return options.test.afterEach();
}
return Promise.resolve();
});
describe(kind, () => {
// eslint-disable-next-line
for (const story of group.stories) {
@ -109,7 +125,7 @@ export default function testStorySnapshots(options = {}) {
}
it(story.name, () => {
const context = { fileName, kind, story: story.name };
const context = { fileName, kind, story: story.name, isRNStorybook };
return options.test({
story,
context,
@ -122,14 +138,13 @@ export default function testStorySnapshots(options = {}) {
}
describe('Storyshots Integrity', () => {
describe('Abandoned Storyshots', () => {
test('Abandoned Storyshots', () => {
const storyshots = glob.sync('**/*.storyshot');
const abandonedStoryshots = storyshots.filter(fileName => {
const possibleStoriesFiles = getPossibleStoriesFiles(fileName);
return !possibleStoriesFiles.some(fs.existsSync);
});
expect(abandonedStoryshots).toHaveLength(0);
});
});

67
addons/storyshots/src/test-body-image-snapshot.js Normal file
View File

@ -0,0 +1,67 @@
import puppeteer from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
expect.extend({ toMatchImageSnapshot });
export const imageSnapshot = ({
storybookUrl = 'http://localhost:6006',
getMatchOptions = () => {},
}) => {
let browser; // holds ref to browser. (ie. Chrome)
let page; // Hold ref to the page to screenshot.
const testFn = ({ context }) => {
if (context.isRNStorybook) {
// Skip tests since we de not support RN image snapshots.
console.error(
"It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
);
return Promise.resolve();
}
const encodedKind = encodeURIComponent(context.kind);
const encodedStoryName = encodeURIComponent(context.story);
const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
const url = storybookUrl + storyUrl;
if (!browser || !page) {
console.error(
`Error when generating image snapshot for test ${context.kind} - ${
context.story
} : It seems the headless browser is not running.`
);
return Promise.reject(new Error('no-headless-browser-running'));
}
expect.assertions(1);
return page
.goto(url)
.catch(e => {
console.error(
`ERROR WHILE CONNECTING TO ${url}, did you start or build the storybook first ? A storybook instance should be running or a static version should be built when using image snapshot feature.`,
e
);
throw e;
})
.then(() =>
page.screenshot().then(image => {
expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
})
);
};
testFn.beforeEach = () =>
puppeteer
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
.launch({ args: ['--no-sandbox ', '--disable-setuid-sandbox'] })
.then(b => {
browser = b;
})
.then(() => browser.newPage())
.then(p => {
page = p;
});
testFn.afterEach = () => browser.close();
return testFn;
};

2
addons/viewport/README.md
View File

@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
This addon works with Storybook for: [React](https://github.com/storybooks/storybook/tree/master/app/react) and [Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
![Screenshot](https://github.com/storybooks/storybook/blob/master/docs/viewport.png)
![Screenshot](https://github.com/storybooks/storybook/blob/master/addons/viewport/docs/viewport.png)
## Installation

4
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Storybook addon to change the viewport size to mobile",
"main": "register.js",
"keywords": [
@ -11,7 +11,7 @@
},
"license": "MIT",
"dependencies": {
"@storybook/components": "^3.3.3",
"@storybook/components": "^3.4.0-alpha.4",
"global": "^4.3.2",
"prop-types": "^15.5.10"
},

1
app/angular/.npmignore
View File

@ -1,3 +1,2 @@
docs
src
.babelrc

6
app/angular/demo.d.ts vendored
View File

@ -1,4 +1,4 @@
declare module '@storybook/angular/demo' {
export const Button: any;
export const Welcome: any;
}
export const Button: any;
export const Welcome: any;
}

33
app/angular/index.d.ts vendored
View File

@ -1,31 +1,32 @@
import {NgModuleMetadata, ICollection} from './dist/client/preview/angular/types';
import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
export interface IStorybookStory {
name: string,
render: () => any
name: string;
render: () => any;
}
export interface IStoribookSection {
kind: string,
stories: IStorybookStory[]
kind: string;
stories: IStorybookStory[];
}
export type IGetStory = () => {
props?: ICollection;
moduleMetadata?: Partial<NgModuleMetadata>;
component: any
props?: ICollection;
moduleMetadata?: Partial<NgModuleMetadata>;
component?: any;
template?: string;
};
export interface IApi {
kind: string;
addDecorator: (decorator: any) => IApi;
add: (storyName: string, getStory: IGetStory ) => IApi;
kind: string;
addDecorator: (decorator: any) => IApi;
add: (storyName: string, getStory: IGetStory) => IApi;
}
declare module '@storybook/angular' {
export function storiesOf(kind: string, module: NodeModule): IApi;
export function setAddon(addon: any): void;
export function addDecorator(decorator: any): IApi;
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
export function getStorybook(): IStoribookSection[];
export function storiesOf(kind: string, module: NodeModule): IApi;
export function setAddon(addon: any): void;
export function addDecorator(decorator: any): IApi;
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
export function getStorybook(): IStoribookSection[];
}

30
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "3.3.3",
"version": "3.4.0-alpha.4",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
"bugs": {
@ -23,15 +23,15 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.3.3",
"@storybook/addon-links": "^3.3.3",
"@storybook/addons": "^3.3.3",
"@storybook/channel-postmessage": "^3.3.3",
"@storybook/core": "^3.3.3",
"@storybook/ui": "^3.3.3",
"@storybook/addon-actions": "^3.4.0-alpha.4",
"@storybook/addon-links": "^3.4.0-alpha.4",
"@storybook/addons": "^3.4.0-alpha.4",
"@storybook/channel-postmessage": "^3.4.0-alpha.4",
"@storybook/core": "^3.4.0-alpha.4",
"@storybook/ui": "^3.4.0-alpha.4",
"airbnb-js-shims": "^1.1.1",
"angular2-template-loader": "^0.6.2",
"autoprefixer": "^7.2.4",
"autoprefixer": "^7.2.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-docgen": "^1.6.0",
@ -42,8 +42,8 @@
"babel-runtime": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"chalk": "^2.1.0",
"commander": "^2.11.0",
"common-tags": "^1.4.0",
"commander": "^2.13.0",
"common-tags": "^1.7.2",
"configstore": "^3.1.0",
"core-js": "^2.4.1",
"cross-env": "^5.1.1",
@ -52,11 +52,14 @@
"file-loader": "^0.11.1",
"find-cache-dir": "^1.0.0",
"global": "^4.3.2",
"html-loader": "^0.5.4",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.4",
"json-stringify-safe": "^5.0.1",
"json5": "^0.5.1",
"lodash.pick": "^4.4.0",
"markdown-loader": "^2.0.2",
"node-sass": "^4.7.2",
"postcss-flexbugs-fixes": "^3.0.0",
"postcss-loader": "^2.0.10",
"prop-types": "^15.5.10",
@ -68,8 +71,9 @@
"redux": "^3.6.0",
"request": "^2.81.0",
"rxjs": "^5.4.2",
"sass-loader": "^6.0.6",
"serve-favicon": "^2.4.3",
"shelljs": "^0.7.8",
"shelljs": "^0.8.0",
"style-loader": "^0.18.2",
"ts-loader": "^2.2.2",
"uglifyjs-webpack-plugin": "^1.1.6",
@ -79,7 +83,7 @@
"webpack": "^2.5.1 || ^3.0.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0",
"zone.js": "^0.8.19"
"zone.js": "^0.8.20"
},
"devDependencies": {
"babel-cli": "^6.26.0",
@ -87,7 +91,7 @@
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"codelyzer": "^3.1.2",
"mock-fs": "^4.3.0",
"nodemon": "^1.14.7",
"nodemon": "^1.14.11",
"typescript": "^2.4.0"
},
"peerDependencies": {

6
app/angular/src/client/preview/angular/app.token.ts
View File

@ -1,4 +1,4 @@
import { InjectionToken } from "@angular/core";
import { NgStory } from "./types";
import { InjectionToken } from '@angular/core';
import { NgStory } from './types';
export const STORY = new InjectionToken<NgStory>("story");
export const STORY = new InjectionToken<NgStory>('story');

42
app/angular/src/client/preview/angular/components/app.component.ts
View File

@ -2,35 +2,31 @@
// to provide @Inputs and subscribe to @Outputs, see
// https://github.com/angular/angular/issues/15360
// For the time being, the ViewContainerRef approach works pretty well.
import * as _ from 'lodash';
import {
Component,
Inject,
AfterViewInit,
OnInit,
ViewChild,
ViewContainerRef,
ComponentFactoryResolver,
OnDestroy,
EventEmitter,
SimpleChanges,
SimpleChange
SimpleChange,
} from '@angular/core';
import { STORY } from '../app.token';
import { NgStory, ICollection } from '../types';
@Component({
selector: 'storybook-dynamic-app-root',
template: '<ng-template #target></ng-template>'
template: '<ng-template #target></ng-template>',
})
export class AppComponent implements AfterViewInit, OnDestroy {
export class AppComponent implements OnInit, OnDestroy {
@ViewChild('target', { read: ViewContainerRef })
target: ViewContainerRef;
constructor(
private cfr: ComponentFactoryResolver,
@Inject(STORY) private data: NgStory
) {}
constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
ngAfterViewInit(): void {
ngOnInit(): void {
this.putInMyHtml();
}
@ -49,20 +45,20 @@ export class AppComponent implements AfterViewInit, OnDestroy {
/**
* Set inputs and outputs
*/
private setProps(instance: any, {props = {}, propsMeta = {}}: NgStory): void {
private setProps(instance: any, { props = {} }: NgStory): void {
const changes: SimpleChanges = {};
const hasNgOnChangesHook = _.has(instance, 'ngOnChanges');
const hasNgOnChangesHook = !!instance['ngOnChanges'];
_.forEach(propsMeta, (meta, key) => {
Object.keys(props).map((key: string) => {
const value = props[key];
const instanceProperty = <any>_.get(instance, key);
const instanceProperty = instance[key];
if (!(instanceProperty instanceof EventEmitter) && !_.isUndefined(value)) {
_.set(instance, key, value);
if (!(instanceProperty instanceof EventEmitter) && !!value) {
instance[key] = value;
if (hasNgOnChangesHook) {
changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
}
} else if (_.isFunction(value) && (key !== 'ngModelChange')) {
} else if (typeof value === 'function' && key !== 'ngModelChange') {
instanceProperty.subscribe(value);
}
});
@ -76,8 +72,8 @@ export class AppComponent implements AfterViewInit, OnDestroy {
* Issue: [https://github.com/angular/angular/issues/8903]
*/
private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
if (!_.isEmpty(changes)) {
_.invoke(instance, 'ngOnChanges', changes);
if (!!Object.keys(changes).length) {
instance.ngOnChanges(changes);
}
}
@ -85,12 +81,12 @@ export class AppComponent implements AfterViewInit, OnDestroy {
* If component implements ControlValueAccessor interface try to set ngModel
*/
private setNgModel(instance: any, props: ICollection): void {
if (_.has(props, 'ngModel')) {
_.invoke(instance, 'writeValue', props.ngModel);
if (!!props['ngModel']) {
instance.writeValue(props.ngModel);
}
if (_.isFunction(props.ngModelChange)) {
_.invoke(instance, 'registerOnChange', props.ngModelChange);
if (typeof props.ngModelChange === 'function') {
instance.registerOnChange(props.ngModelChange);
}
}
}

12
app/angular/src/client/preview/angular/components/error.component.ts
View File

@ -1,6 +1,6 @@
import { Component, Inject } from "@angular/core";
import { STORY } from "../app.token";
import { NgError } from "../types";
import { Component, Inject } from '@angular/core';
import { STORY } from '../app.token';
import { NgError } from '../types';
@Component({
selector: 'storybook-dynamic-app-root',
@ -40,9 +40,9 @@ import { NgError } from "../types";
width: 100vw;
overflow: auto;
}
`
]
`,
],
})
export class ErrorComponent {
constructor(@Inject(STORY) public error: NgError) {}
}
}

4
app/angular/src/client/preview/angular/components/no-preview.component.ts
View File

@ -1,7 +1,7 @@
import { Component } from "@angular/core";
import { Component } from '@angular/core';
@Component({
selector: 'storybook-dynamic-app-root',
template: "<p>No Preview Available!</p>"
template: '<p>No Preview Available!</p>',
})
export class NoPreviewComponent {}

206
app/angular/src/client/preview/angular/helpers.ts
View File

@ -1,45 +1,35 @@
import {
Type,
enableProdMode,
NgModule,
Component,
NgModuleRef
} from '@angular/core';
import {FormsModule} from '@angular/forms';
import { enableProdMode, NgModule, Component, NgModuleRef, Type } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './components/app.component';
import { ErrorComponent } from './components/error.component';
import { NoPreviewComponent } from './components/no-preview.component';
import { STORY } from './app.token';
import { getAnnotations, getParameters, getPropMetadata } from './utils';
import { NgModuleMetadata, NgStory, IGetStoryWithContext, IContext, NgProvidedData } from './types';
import {
NgModuleMetadata,
IGetStoryWithContext,
IContext,
NgProvidedData,
IRenderErrorFn,
IRenderStoryFn,
} from './types';
let platform: any = null;
let promises: Promise<NgModuleRef<any>>[] = [];
type IRenderStoryFn = (story: IGetStoryWithContext, context: IContext, reRender?: boolean) => void;
type IRenderErrorFn = (error: Error) => void;
interface IModule extends Type<any> {
annotations: any[];
}
interface IComponent extends Type<any> {
annotations: any[];
parameters: any[];
propsMetadata: any[];
}
// Taken from https://davidwalsh.name/javascript-debounce-function
// We don't want to pull underscore
const debounce = (func: IRenderStoryFn | IRenderErrorFn,
wait: number = 100,
immediate: boolean = false): () => void => {
const debounce = (
func: IRenderStoryFn | IRenderErrorFn,
wait: number = 100,
immediate: boolean = false
): (() => void) => {
let timeout: any;
return function () {
const context = this, args = arguments;
const later = function () {
return function() {
const context = this,
args = arguments;
const later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
@ -54,113 +44,57 @@ const debounce = (func: IRenderStoryFn | IRenderErrorFn,
};
};
const getComponentMetadata = (
{ component, props = {}, propsMeta = {}, moduleMetadata = {
imports: [],
schemas: [],
declarations: [],
providers: []
} }: NgStory
const getModule = (
declarations: Array<Type<any> | any[]>,
entryComponents: Array<Type<any> | any[]>,
bootstrap: Array<Type<any> | any[]>,
data: NgProvidedData,
moduleMetadata: NgModuleMetadata
) => {
if (!component || typeof component !== 'function') {
throw new Error('No valid component provided');
}
const componentMetadata = getAnnotations(component)[0] || {};
const propsMetadata = getPropMetadata(component);
const paramsMetadata = getParameters(component);
Object.keys(propsMeta).map(key => {
(<any>propsMetadata)[key] = (<any>propsMeta)[key];
});
const {
imports = [],
schemas = [],
declarations = [],
providers = []
} = moduleMetadata;
return {
component,
props,
componentMeta: componentMetadata,
propsMeta: propsMetadata,
params: paramsMetadata,
moduleMeta: {
imports,
schemas,
declarations,
providers
}
};
};
const getAnnotatedComponent = (meta: NgModule,
component: any,
propsMeta: { [p: string]: any },
params: any[]): IComponent => {
const NewComponent: any = function NewComponent(...args: any[]) {
component.call(this, ...args);
const moduleMeta = {
declarations: [...declarations, ...(moduleMetadata.declarations || [])],
imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
providers: [
{ provide: STORY, useValue: Object.assign({}, data) },
...(moduleMetadata.providers || []),
],
entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
schemas: [...(moduleMetadata.schemas || [])],
bootstrap: [...bootstrap],
};
NewComponent.prototype = Object.create(component.prototype);
NewComponent.annotations = [new Component(meta)];
NewComponent.parameters = params;
NewComponent.propsMetadata = propsMeta;
const moduleClass = class DynamicModule {};
return NewComponent;
return NgModule(moduleMeta)(moduleClass);
};
const getModule = (declarations: Array<Type<any> | any[]>,
entryComponents: Array<Type<any> | any[]>,
bootstrap: Array<Type<any> | any[]>,
data: NgProvidedData,
moduleMetadata: NgModuleMetadata = {
imports: [],
schemas: [],
declarations: [],
providers: []
}): IModule => {
const moduleMeta = new NgModule({
declarations: [...declarations, ...moduleMetadata.declarations],
imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
entryComponents: [...entryComponents],
schemas: [...moduleMetadata.schemas],
bootstrap: [...bootstrap]
});
const createComponentFromTemplate = (template: string): Function => {
const componentClass = class DynamicComponent {};
const NewModule: any = function NewModule() {};
(<IModule>NewModule).annotations = [moduleMeta];
return NewModule;
return Component({
template: template,
})(componentClass);
};
const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRender: boolean): IModule => {
const {
component,
componentMeta,
props,
propsMeta,
params,
moduleMeta
} = getComponentMetadata(currentStory(context));
const initModule = (
currentStory: IGetStoryWithContext,
context: IContext,
reRender: boolean
): Function => {
const storyObj = currentStory(context);
const { component, template, props, moduleMetadata = {} } = storyObj;
if (!componentMeta) {
throw new Error('No component metadata available');
let AnnotatedComponent;
if (template) {
AnnotatedComponent = createComponentFromTemplate(template);
} else {
AnnotatedComponent = component;
}
const AnnotatedComponent = getAnnotatedComponent(
componentMeta,
component,
propsMeta,
[...params, ...moduleMeta.providers.map(provider => [provider])]
);
const story = {
component: AnnotatedComponent,
props,
propsMeta
};
return getModule(
@ -168,11 +102,11 @@ const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRen
[AnnotatedComponent],
[AppComponent],
story,
moduleMeta
moduleMetadata
);
};
const draw = (newModule: IModule, reRender: boolean = true): void => {
const draw = (newModule: Function, reRender: boolean = true): void => {
if (!platform) {
try {
enableProdMode();
@ -181,26 +115,25 @@ const draw = (newModule: IModule, reRender: boolean = true): void => {
platform = platformBrowserDynamic();
promises.push(platform.bootstrapModule(newModule));
} else {
Promise.all(promises)
.then((modules) => {
modules.forEach(mod => mod.destroy());
Promise.all(promises).then(modules => {
modules.forEach(mod => mod.destroy());
const body = document.body;
const app = document.createElement('storybook-dynamic-app-root');
body.appendChild(app);
promises = [];
promises.push(platform.bootstrapModule(newModule));
});
const body = document.body;
const app = document.createElement('storybook-dynamic-app-root');
body.appendChild(app);
promises = [];
promises.push(platform.bootstrapModule(newModule));
});
}
};
export const renderNgError = debounce((error: Error) => {
const errorData = {
message: error.message,
stack: error.stack
stack: error.stack,
};
const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData);
const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData, {});
draw(Module);
});
@ -212,8 +145,9 @@ export const renderNoPreview = debounce(() => {
[NoPreviewComponent],
{
message: 'No Preview available.',
stack: ''
}
stack: '',
},
{}
);
draw(Module);

31
app/angular/src/client/preview/angular/types.ts
View File

@ -1,8 +1,9 @@
export interface NgModuleMetadata {
declarations: Array<any>;
imports: Array<any>;
schemas: Array<any>;
providers: Array<any>;
declarations?: Array<any>;
entryComponents?: Array<any>;
imports?: Array<any>;
schemas?: Array<any>;
providers?: Array<any>;
}
export interface ICollection {
@ -10,21 +11,29 @@ export interface ICollection {
}
export interface NgStory {
component: any;
props: ICollection;
propsMeta: ICollection;
moduleMetadata?: NgModuleMetadata;
component?: any;
props: ICollection;
propsMeta?: ICollection;
moduleMetadata?: NgModuleMetadata;
template?: string;
}
export interface NgError {
message: string;
stack: string;
message: string;
stack: string;
}
export type NgProvidedData = NgStory | NgError;
export interface IContext {
[p: string]: any;
[p: string]: any;
}
export type IGetStoryWithContext = (context: IContext) => NgStory;
export type IRenderStoryFn = (
story: IGetStoryWithContext,
context: IContext,
reRender?: boolean
) => void;
export type IRenderErrorFn = (error: Error) => void;

38
app/angular/src/client/preview/angular/utils.ts
View File

@ -1,38 +0,0 @@
import { ɵReflectionCapabilities } from '@angular/core';
const reflectionCapabilities = new ɵReflectionCapabilities();
function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
if (!name2) {
name2 = name1;
name1 = `__${name1}__`;
}
if (component[name1]) {
return component[name1];
}
if (component[name2]) {
return component[name2];
}
return (<any>window)['Reflect'].getMetadata(name2, component) || defaultValue;
}
export function getAnnotations(component: any) {
return getMeta(component, ['annotations'], []);
}
export function getPropMetadata(component: any) {
return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
}
export function getParameters(component: any) {
const params = reflectionCapabilities.parameters(component);
if (!params || !params[0]) {
return getMeta(component, ['parameters'], []);
}
return params;
}

14
app/angular/src/demo/button.component.ts
View File

@ -1,12 +1,12 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'button-component',
selector: 'storybook-button-component',
template: `
<button (click)="onClick.emit($event);">{{ text }}</button>
`,
styles: [
`
`
button {
border: 1px solid #eee;
border-radius: 3px;
@ -16,10 +16,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
padding: 3px 10px;
margin: 10px;
}
`
]
`,
],
})
export default class ButtonComponent {
@Input() text = '';
@Output() onClick = new EventEmitter<any>();
}
@Input() text = '';
@Output() onClick = new EventEmitter<any>();
}

18
app/angular/src/demo/welcome.component.ts
View File

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'welcome-component',
selector: 'storybook-welcome-component',
template: `
<main>
<h1>Welcome to storybook</h1>
@ -15,7 +15,8 @@ import { Component } from '@angular/core';
(Basically a story is like a visual test case.)
</p>
<p>
See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called <span class="inline-code">Button</span> .
See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called
<span class="inline-code">Button</span> .
</p>
<p>
Just like that, you can add your own components as stories.
@ -38,12 +39,13 @@ import { Component } from '@angular/core';
<p class="note">
<b>NOTE:</b>
<br />
Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack loaders and plugins you are using in this project.
Have a look at the <span class="inline-code">.storybook/webpack.config.js</span>
to add webpack loaders and plugins you are using in this project.
</p>
</main>
`,
styles: [
`
`
main {
margin: 15px;
max-width: 600;
@ -71,9 +73,9 @@ import { Component } from '@angular/core';
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
}
`
]
`,
],
})
export default class WelcomeComponent {
displayName = 'Welcome';
}
displayName = 'Welcome';
}

2
app/angular/src/server/build.js vendored
View File

@ -56,7 +56,7 @@ 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);
const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
config.output.path = path.resolve(outputDir);
// copy all static files

4
app/angular/src/server/config.js vendored
View File

@ -2,6 +2,7 @@
import fs from 'fs';
import path from 'path';
import loadBabelConfig from './babel_config';
import loadTsConfig from './ts_config';
// avoid ESLint errors
const logger = console;
@ -15,6 +16,9 @@ export default function(configType, baseConfig, configDir) {
const babelConfig = loadBabelConfig(configDir);
config.module.rules[0].query = babelConfig;
const tsOptions = loadTsConfig(configDir);
config.module.rules[1].loaders[0].options = tsOptions;
// Check whether a config.js file exists inside the storybook
// config directory and throw an error if it's not.
const storybookConfigPath = path.resolve(configDir, 'config.js');

2
app/angular/src/server/config/utils.js vendored
View File

@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
'process.env': env,
};
}
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

30
app/angular/src/server/config/webpack.config.js
View File

@ -4,19 +4,12 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
import {
getConfigDir,
includePaths,
excludePaths,
nodeModulesPaths,
loadEnv,
nodePaths,
} from './utils';
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
import babelLoaderConfig from './babel';
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import { version } from '../../../package.json';
export default function() {
export default function(configDir) {
const config = {
devtool: 'cheap-module-source-map',
entry: {
@ -37,7 +30,7 @@ export default function() {
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
managerHead: getManagerHeadHtml(configDir),
version,
},
template: require.resolve('../index.html.ejs'),
@ -46,7 +39,7 @@ export default function() {
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
previewHead: getPreviewHeadHtml(configDir),
},
template: require.resolve('../iframe.html.ejs'),
}),
@ -71,12 +64,21 @@ export default function() {
},
{
test: /\.ts?$/,
loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
loaders: [
{
loader: require.resolve('ts-loader'),
},
require.resolve('angular2-template-loader'),
],
},
{
test: /\.(html|css)$/,
test: /\.html$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/,
exclude: /\.async\.css$/,
},
{
test: /\.scss$/,
loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
},
{
test: /\.md$/,

26
app/angular/src/server/config/webpack.config.prod.js
View File

@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
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'), path.resolve(__dirname, '../../client/manager')],
@ -32,7 +32,7 @@ export default function() {
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
managerHead: getManagerHeadHtml(configDir),
version,
},
template: require.resolve('../index.html.ejs'),
@ -41,7 +41,7 @@ export default function() {
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
previewHead: getPreviewHeadHtml(configDir),
},
template: require.resolve('../iframe.html.ejs'),
}),
@ -52,6 +52,9 @@ export default function() {
ie8: false,
mangle: false,
warnings: false,
compress: {
keep_fnames: true,
},
output: {
comments: false,
},
@ -73,12 +76,21 @@ export default function() {
},
{
test: /\.ts?$/,
loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
loaders: [
{
loader: require.resolve('ts-loader'),
},
require.resolve('angular2-template-loader'),
],
},
{
test: /\.(html|css)$/,
test: /\.html$/,
loader: 'raw-loader',
exclude: /\.async\.(html|css)$/,
exclude: /\.async\.html$/,
},
{
test: /\.scss$/,
loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
},
],
},

2
app/angular/src/server/index.js vendored
View File

@ -120,8 +120,6 @@ 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

2
app/angular/src/server/middleware.js vendored
View File

@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, 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 config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
const middlewareFn = getMiddleware(configDir);
// remove the leading '/'

27
app/angular/src/server/ts_config.js vendored Normal file
View File

@ -0,0 +1,27 @@
import fs from 'fs';
import path from 'path';
// avoid ESLint errors
const logger = console;
function resolveTsConfig(tsConfigPath) {
if (!fs.existsSync(tsConfigPath)) {
return null;
}
logger.info('=> Found custom tsconfig.json');
return tsConfigPath;
}
export default function(configDir) {
const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
if (!configFile) {
return {};
}
return {
configFile,
};
}

32
app/angular/src/server/ts_config.test.js Normal file
View File

@ -0,0 +1,32 @@
import loadTsConfig from './ts_config';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: () => 'tsconfig.json',
}));
const setupFiles = files => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
describe('ts_config', () => {
it('should return the config with the path to the tsconfig.json', () => {
setupFiles({ 'tsconfig.json': '{}' });
const config = loadTsConfig('.foo');
expect(config).toEqual({
configFile: 'tsconfig.json',
});
});
it('should return empty object when there is no tsconfig.json', () => {
setupFiles({});
const config = loadTsConfig('.foo');
expect(config).toEqual({});
});
});

3
app/polymer/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["env", "stage-0", "react"]
}

3
app/polymer/.npmignore Normal file
View File

@ -0,0 +1,3 @@
docs
src
.babelrc

41
app/polymer/README.md Normal file
View File

@ -0,0 +1,41 @@
# Storybook for Polymer
[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
* * *
Storybook for polymer is a UI development environment for your Polymer components.
With it, you can visualize different states of your UI components and develop them interactively.
> Storybook for Polymer is at the **EXPERIMENTAL** stage!
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/polymer/docs/demo.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
## Getting Started
```sh
npm i -g @storybook/cli
cd my-polymer-app
getstorybook
```
For more information visit: [storybook.js.org](https://storybook.js.org)
* * *
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
## Polymer Notes
- This is super super experimental, if you want to use this, expect some bugs, and missing features.
- We're looking for help to support this. If you're a member of the Polymer community and like this project, please help us!
If you need any onboarding from us, we're happy to help you in any way!

3
app/polymer/bin/build.js Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env node
require('../dist/server/build');

3
app/polymer/bin/index.js Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env node
require('../dist/server');

BIN
app/polymer/docs/demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
app/polymer/docs/react_storybook_screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

BIN
app/polymer/docs/storybooks_io_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

87
app/polymer/package.json Normal file
View File

@ -0,0 +1,87 @@
{
"name": "@storybook/polymer",
"version": "3.4.0-alpha.4",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/polymer",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"license": "MIT",
"main": "dist/client/index.js",
"bin": {
"build-storybook": "./bin/build.js",
"start-storybook": "./bin/index.js",
"storybook-server": "./bin/index.js"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"dev": "DEV_BUILD=1 nodemon --watch ./src --exec 'yarn prepare'",
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "^3.4.0-alpha.4",
"@storybook/channel-postmessage": "^3.4.0-alpha.4",
"@storybook/client-logger": "^3.4.0-alpha.4",
"@storybook/core": "^3.4.0-alpha.4",
"@storybook/node-logger": "^3.4.0-alpha.4",
"@storybook/ui": "^3.4.0-alpha.4",
"@webcomponents/webcomponentsjs": "^1.0.17",
"airbnb-js-shims": "^1.3.0",
"autoprefixer": "^7.1.6",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-react-docgen": "^1.8.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-minify": "^0.2.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.1.0",
"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",
"core-js": "^2.5.1",
"css-loader": "^0.28.7",
"express": "^4.16.2",
"file-loader": "^0.11.2",
"find-cache-dir": "^1.0.0",
"global": "^4.3.2",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"json-stringify-safe": "^5.0.1",
"json5": "^0.5.1",
"lodash.pick": "^4.4.0",
"polymer-webpack-loader": "2.0.1",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-loader": "^2.0.8",
"prop-types": "^15.6.0",
"qs": "^6.5.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-modal": "^2.4.1",
"redux": "^3.7.2",
"request": "^2.83.0",
"serve-favicon": "^2.4.5",
"shelljs": "^0.7.8",
"style-loader": "^0.18.2",
"url-loader": "^0.6.2",
"util-deprecate": "^1.0.2",
"uuid": "^3.1.0",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"nodemon": "^1.12.1"
}
}

17
app/polymer/src/client/index.js Normal file
View File

@ -0,0 +1,17 @@
// import deprecate from 'util-deprecate';
// NOTE export these to keep backwards compatibility
// import { action as deprecatedAction } from '@storybook/addon-actions';
// import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
// export const action = deprecate(
// deprecatedAction,
// '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
// );
// export const linkTo = deprecate(
// deprecatedLinkTo,
// '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
// );

7
app/polymer/src/client/manager/index.js Normal file
View File

@ -0,0 +1,7 @@
/* global document */
import renderStorybookUI from '@storybook/ui';
import Provider from './provider';
const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

39
app/polymer/src/client/manager/preview.js Normal file
View File

@ -0,0 +1,39 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
const iframeStyle = {
width: '100%',
height: '100%',
border: 0,
margin: 0,
padding: 0,
};
class Preview extends Component {
shouldComponentUpdate() {
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
// addon panel to right) Preview section will update. If its re-rendered the whole html page
// inside the html is re-rendered making the story to re-mount.
// We dont have to re-render this component for any reason since changes are communicated to
// story using the channel and necessary changes are done by it.
return false;
}
render() {
return (
<iframe
id="storybook-preview-iframe"
title="preview"
style={iframeStyle}
src={this.props.url}
allowFullScreen
/>
);
}
}
Preview.propTypes = {
url: PropTypes.string.isRequired,
};
export default Preview;

51
app/polymer/src/client/manager/provider.js Normal file
View File

@ -0,0 +1,51 @@
import { location } from 'global';
import qs from 'qs';
import React from 'react';
import { Provider } from '@storybook/ui';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import Preview from './preview';
export default class ReactProvider extends Provider {
constructor() {
super();
this.channel = createChannel({ page: 'manager' });
addons.setChannel(this.channel);
}
getPanels() {
return addons.getPanels();
}
renderPreview(selectedKind, selectedStory) {
const queryParams = {
selectedKind,
selectedStory,
};
// Add the react-perf query string to the iframe if that present.
if (/react_perf/.test(location.search)) {
queryParams.react_perf = '1';
}
const queryString = qs.stringify(queryParams);
const url = `iframe.html?${queryString}`;
return <Preview url={url} />;
}
handleAPI(api) {
api.onStory((kind, story) => {
this.channel.emit('setCurrentStory', { kind, story });
});
this.channel.on('setStories', data => {
api.setStories(data.stories);
});
this.channel.on('selectStory', data => {
api.selectStory(data.kind, data.story);
});
this.channel.on('applyShortcut', data => {
api.handleShortcut(data.event);
});
addons.loadAddons(api);
}
}

37
app/polymer/src/client/preview/errorpreview.js Normal file
View File

@ -0,0 +1,37 @@
export const errorpreview = (message, stack) => `
<style>
.errordisplay_main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20;
background-color: rgb(187, 49, 49);
color: #FFF;
webkit-font-smoothing: antialiased;
}
.errordisplay_heading {
font-size: 20;
font-weight: 600;
letter-spacing: 0.2;
margin: 10px 0;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
.errordisplay_code {
font-size: 14;
width: 100vw;
overflow: auto;
}
</style>
<div class="errordisplay_main">
<div class="errordisplay_heading">${message}</div>
<pre class="errordisplay_code">
<code>
${stack}
</code>
</pre>
</div>
`;

61
app/polymer/src/client/preview/index.js Normal file
View File

@ -0,0 +1,61 @@
import { createStore } from 'redux';
import addons from '@storybook/addons';
import { navigator, window } from 'global';
import createChannel from '@storybook/channel-postmessage';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import {
StoryStore,
ClientApi,
ConfigApi,
Actions,
reducer,
syncUrlWithStore,
} from '@storybook/core/client';
import render from './render';
// check whether we're running on node/browser
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
/* eslint-disable no-underscore-dangle */
const reduxStore = createStore(reducer);
/* eslint-enable */
const context = { storyStore, reduxStore };
if (isBrowser) {
// setup preview channel
const channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
const clientApi = new ClientApi(context);
export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
const configApi = new ConfigApi({ clearDecorators, ...context });
export const { configure } = configApi;
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
export const forceReRender = () => render(context, true);

42
app/polymer/src/client/preview/nopreview.js Normal file
View File

@ -0,0 +1,42 @@
export const nopreview = `
<style>
.nopreview_wrapper {
position: fixed;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20;
align-content: center;
justify-content: center;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
webkit-font-smoothing: antialiased;
}
.nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0,0,0,0.03);
}
.nopreview_heading {
font-size: 20;
font-weight: 600;
letter-spacing: 0.2;
margin: 10px 0;
text-align: center;
}
</style>
<div class="nopreview_wrapper">
<div class="nopreview_main">
<h1 class="nopreview_heading">No Preview</h1>
<p>Sorry, but you either have no stories or none are selected somehow.</p>
<ul>
<li>Please check the storybook config.</li>
<li>Try reloading the page.</li>
</ul>
</div>
</div>
`;

66
app/polymer/src/client/preview/render.js Normal file
View File

@ -0,0 +1,66 @@
import { document } from 'global';
import { stripIndents } from 'common-tags';
import { logger } from '@storybook/client-logger';
import { nopreview } from './nopreview';
import { errorpreview } from './errorpreview';
let previousKind = '';
let previousStory = '';
const rootElement = document.getElementById('root');
export function renderError(error) {
rootElement.innerHTML = errorpreview(error.message, error.stack);
}
export function renderException(error) {
renderError(error);
logger.error(error.stack);
}
export function renderMain(data, storyStore) {
if (storyStore.size() === 0) return;
const { selectedKind, selectedStory } = data;
const story = storyStore.getStory(selectedKind, selectedStory);
if (selectedKind !== previousKind || previousStory !== selectedStory) {
previousKind = selectedKind;
previousStory = selectedStory;
} else {
return;
}
const context = {
kind: selectedKind,
story: selectedStory,
};
const component = story ? story(context) : nopreview;
if (!component) {
renderError({
message: `Expecting a Polymer component from the story: "${selectedStory}" of "${selectedKind}".`,
stack: stripIndents`
Did you forget to return the Polymer component from the story?
Use "() => '&lt;your-component-name&gt;&lt;/your-component-name\&gt;'" when defining the story.
`,
});
return;
}
if (typeof component === 'string') {
rootElement.innerHTML = component;
} else {
rootElement.innerHTML = '';
rootElement.appendChild(component);
}
}
export default function renderPreview({ reduxStore, storyStore }) {
const state = reduxStore.getState();
if (state.error) {
return renderException(state.error);
}
try {
return renderMain(state, storyStore);
} catch (ex) {
return renderException(ex);
}
}

2
app/polymer/src/server/addons.js Normal file
View File

@ -0,0 +1,2 @@
// import '@storybook/addon-actions/register';
// import '@storybook/addon-links/register';

82
app/polymer/src/server/babel_config.js Normal file
View File

@ -0,0 +1,82 @@
import fs from 'fs';
import path from 'path';
import JSON5 from 'json5';
import { logger } from '@storybook/node-logger';
import defaultConfig from './config/babel';
function removeReactHmre(presets) {
const index = presets.indexOf('react-hmre');
if (index > -1) {
presets.splice(index, 1);
}
}
// Tries to load a .babelrc and returns the parsed object if successful
function loadFromPath(babelConfigPath) {
let config;
if (fs.existsSync(babelConfigPath)) {
const content = fs.readFileSync(babelConfigPath, 'utf-8');
try {
config = JSON5.parse(content);
config.babelrc = false;
logger.info('=> Loading custom .babelrc');
} catch (e) {
logger.error(`=> Error parsing .babelrc file: ${e.message}`);
throw e;
}
}
if (!config) return null;
// Remove react-hmre preset.
// It causes issues with react-storybook.
// We don't really need it.
// Earlier, we fix this by running storybook in the production mode.
// But, that hide some useful debug messages.
if (config.presets) {
removeReactHmre(config.presets);
}
if (config.env && config.env.development && config.env.development.presets) {
removeReactHmre(config.env.development.presets);
}
return config;
}
export default function(configDir) {
let babelConfig = loadFromPath(path.resolve(configDir, '.babelrc'));
let inConfigDir = true;
if (!babelConfig) {
babelConfig = loadFromPath('.babelrc');
inConfigDir = false;
}
if (babelConfig) {
// If the custom config uses babel's `extends` clause, then replace it with
// an absolute path. `extends` will not work unless we do this.
if (babelConfig.extends) {
babelConfig.extends = inConfigDir
? path.resolve(configDir, babelConfig.extends)
: path.resolve(babelConfig.extends);
}
}
const finalConfig = babelConfig || defaultConfig;
// Ensure plugins are defined or fallback to an array to avoid empty values.
const babelConfigPlugins = finalConfig.plugins || [];
const extraPlugins = [
[
require.resolve('babel-plugin-react-docgen'),
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
];
// If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
// as a single value, if it is an `Array` it will be spreaded.
finalConfig.plugins = [].concat(babelConfigPlugins, extraPlugins);
return finalConfig;
}

110
app/polymer/src/server/babel_config.test.js Normal file
View File

@ -0,0 +1,110 @@
import loadBabelConfig from './babel_config';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: () => '.babelrc',
}));
const setup = ({ files }) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
describe('babel_config', () => {
// As the 'fs' is going to be mocked, let's call require.resolve
// so the require.cache has the correct route to the file.
// In fact let's use it in the tests :)
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
it('should return the config with the extra plugins when `plugins` is an array.', () => {
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": [
"foo-plugin"
]
}`,
},
});
const config = loadBabelConfig('.foo');
expect(config).toEqual({
babelrc: false,
plugins: [
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
presets: ['env', 'foo-preset'],
});
});
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
},
});
const config = loadBabelConfig('.bar');
expect(config).toEqual({
babelrc: false,
plugins: [
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
presets: ['env', 'foo-preset'],
});
});
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
// Mock a `.babelrc` config file with no plugins key.
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
]
}`,
},
});
const config = loadBabelConfig('.biz');
expect(config).toEqual({
babelrc: false,
plugins: [
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
presets: ['env', 'foo-preset'],
});
});
});

83
app/polymer/src/server/build.js Executable file
View File

@ -0,0 +1,83 @@
import webpack from 'webpack';
import program from 'commander';
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('-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',
});
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.log('Building storybook ...');
webpack(config).run((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.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
process.exit(1);
}
});

86
app/polymer/src/server/config.js Normal file
View File

@ -0,0 +1,86 @@
/* eslint-disable global-require, import/no-dynamic-require */
import fs from 'fs';
import path from 'path';
import findCacheDir from 'find-cache-dir';
import { logger } from '@storybook/node-logger';
import loadBabelConfig from './babel_config';
// `baseConfig` is a webpack configuration bundled with storybook.
// Storybook will look in the `configDir` directory
// (inside working directory) if a config path is not provided.
export default function(configType, baseConfig, configDir) {
const config = baseConfig;
const babelConfig = loadBabelConfig(configDir);
config.module.rules[0].query = {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables a cache directory for faster-rebuilds
// `find-cache-dir` will create the cache directory under the node_modules directory.
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
...babelConfig,
};
// Check whether a config.js file exists inside the storybook
// config directory and throw an error if it's not.
const storybookConfigPath = path.resolve(configDir, 'config.js');
if (!fs.existsSync(storybookConfigPath)) {
const err = new Error(`=> Create a storybook config file in "${configDir}/config.js".`);
throw err;
}
config.entry.preview.push(require.resolve(storybookConfigPath));
// Check whether addons.js file exists inside the storybook.
// Load the default addons.js file if it's missing.
// Insert it after polyfills.js, but before client/manager.
const storybookDefaultAddonsPath = path.resolve(__dirname, 'addons.js');
const storybookCustomAddonsPath = path.resolve(configDir, 'addons.js');
if (fs.existsSync(storybookCustomAddonsPath)) {
logger.info('=> Loading custom addons config.');
config.entry.manager.splice(1, 0, storybookCustomAddonsPath);
} else {
config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
}
// Check whether user has a custom webpack config file and
// return the (extended) base configuration if it's not available.
const customConfigPath = path.resolve(configDir, 'webpack.config.js');
if (!fs.existsSync(customConfigPath)) {
logger.info('=> Using default webpack setup based on "polymer-cli".');
const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
const customConfig = require(configPath);
return customConfig(config);
}
const customConfig = require(customConfigPath);
if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
return customConfig(config, configType);
}
logger.info('=> Loading custom webpack config (extending mode).');
return {
...customConfig,
// We'll always load our configurations after the custom config.
// So, we'll always load the stuff we need.
...config,
// Override with custom devtool if provided
devtool: customConfig.devtool || config.devtool,
// We need to use our and custom plugins.
plugins: [...config.plugins, ...(customConfig.plugins || [])],
module: {
...config.module,
// We need to use our and custom rules.
...customConfig.module,
rules: [...config.module.rules, ...(customConfig.module.rules || [])],
},
resolve: {
...config.resolve,
...customConfig.resolve,
alias: {
...config.alias,
...(customConfig.resolve && customConfig.resolve.alias),
},
},
};
}

34
app/polymer/src/server/config/WatchMissingNodeModulesPlugin.js Normal file
View File

@ -0,0 +1,34 @@
/**
* 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;

28
app/polymer/src/server/config/babel.js Normal file
View File

@ -0,0 +1,28 @@
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

29
app/polymer/src/server/config/babel.prod.js Normal file
View File

@ -0,0 +1,29 @@
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
require.resolve('babel-preset-minify'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

73
app/polymer/src/server/config/defaults/webpack.config.js Normal file
View File

@ -0,0 +1,73 @@
// import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
import { includePaths } from '../utils';
// Add a default custom config which is similar to what React Create App does.
module.exports = storybookBaseConfig => {
const newConfig = { ...storybookBaseConfig };
newConfig.module.rules = [
...storybookBaseConfig.module.rules,
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'), // eslint-disable-line
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.json$/,
include: includePaths,
loader: require.resolve('json-loader'),
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
include: includePaths,
loader: require.resolve('file-loader'),
query: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
include: includePaths,
loader: require.resolve('url-loader'),
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
];
newConfig.resolve.alias = {
...storybookBaseConfig.resolve.alias,
// This is to support NPM2
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
};
// Return the altered config
return newConfig;
};

4
app/polymer/src/server/config/globals.js Normal file
View File

@ -0,0 +1,4 @@
/* globals window */
window.STORYBOOK_REACT_CLASSES = {};
window.STORYBOOK_ENV = 'polymer';

4
app/polymer/src/server/config/polyfills.js Normal file
View File

@ -0,0 +1,4 @@
import 'core-js/es6/symbol';
import 'core-js/fn/array/iterator';
import 'airbnb-js-shims';
import 'babel-polyfill';

37
app/polymer/src/server/config/utils.js Normal file
View File

@ -0,0 +1,37 @@
import path from 'path';
export const includePaths = [path.resolve('./')];
export const excludePaths = [path.resolve('node_modules')];
export const nodeModulesPaths = path.resolve('./node_modules');
export const nodePaths = (process.env.NODE_PATH || '')
.split(process.platform === 'win32' ? ';' : ':')
.filter(Boolean)
.map(p => path.resolve('./', p));
// Load environment variables starts with STORYBOOK_ to the client side.
export function loadEnv(options = {}) {
const defaultNodeEnv = options.production ? 'production' : 'development';
const env = {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
// This is to support CRA's public folder feature.
// In production we set this to dot(.) to allow the browser to access these assests
// even when deployed inside a subpath. (like in GitHub pages)
// In development this is just empty as we always serves from the root.
PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
};
Object.keys(process.env)
.filter(name => /^STORYBOOK_/.test(name))
.forEach(name => {
env[name] = JSON.stringify(process.env[name]);
});
return {
'process.env': env,
};
}
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

105
app/polymer/src/server/config/webpack.config.js Normal file
View File

@ -0,0 +1,105 @@
import path from 'path';
import webpack from 'webpack';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
import {
getConfigDir,
includePaths,
excludePaths,
nodeModulesPaths,
loadEnv,
nodePaths,
} from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import babelLoaderConfig from './babel';
import { version } from '../../../package.json';
export default function() {
const config = {
devtool: 'cheap-module-source-map',
entry: {
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
preview: [
require.resolve('./polyfills'),
require.resolve('./globals'),
`${require.resolve('webpack-hot-middleware/client')}?reload=true`,
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].bundle.js',
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
version,
},
template: require.resolve('../index.html.ejs'),
}),
new HtmlWebpackPlugin({
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
},
template: require.resolve('../iframe.html.ejs'),
}),
new CopyWebpackPlugin([
{ from: require.resolve('@webcomponents/webcomponentsjs/webcomponents-lite.js') },
{ from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
]),
new webpack.DefinePlugin(loadEnv()),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(nodeModulesPaths),
new webpack.ProgressPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
include: includePaths,
exclude: excludePaths,
},
{
test: /\.html$/,
use: [
{
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
},
{
loader: require.resolve('polymer-webpack-loader'),
options: { processStyleLinks: true },
},
],
},
],
},
resolve: {
// Since we ship with json-loader always, it's better to move extensions to here
// from the default config.
extensions: ['.js', '.json', '.jsx'],
// Add support to NODE_PATH. With this we could avoid relative path imports.
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths),
alias: {
react$: require.resolve('react'),
'react-dom$': require.resolve('react-dom'),
},
},
performance: {
hints: false,
},
};
return config;
}

103
app/polymer/src/server/config/webpack.config.prod.js Normal file
View File

@ -0,0 +1,103 @@
import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import babelLoaderConfig from './babel.prod';
import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import { version } from '../../../package.json';
export default function() {
const entries = {
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
};
const config = {
bail: true,
devtool: '#cheap-module-source-map',
entry: entries,
output: {
filename: 'static/[name].[chunkhash].bundle.js',
// Here we set the publicPath to ''.
// This allows us to deploy storybook into subpaths like GitHub pages.
// This works with css and image loaders too.
// This is working for storybook since, we don't use pushState urls and
// relative URLs works always.
publicPath: '',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
version,
},
template: require.resolve('../index.html.ejs'),
}),
new HtmlWebpackPlugin({
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
},
template: require.resolve('../iframe.html.ejs'),
}),
new CopyWebpackPlugin([
{ from: require.resolve('@webcomponents/webcomponentsjs/webcomponents-lite.js') },
{ from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
]),
new webpack.DefinePlugin(loadEnv({ production: true })),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false,
},
mangle: false,
output: {
comments: false,
screw_ie8: true,
},
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
include: includePaths,
exclude: excludePaths,
},
{
test: /\.html$/,
use: [
{
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
},
{
loader: require.resolve('polymer-webpack-loader'),
options: { processStyleLinks: true },
},
],
},
],
},
resolve: {
// Since we ship with json-loader always, it's better to move extensions to here
// from the default config.
extensions: ['.js', '.json', '.jsx'],
// Add support to NODE_PATH. With this we could avoid relative path imports.
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths),
alias: {
react$: require.resolve('react'),
'react-dom$': require.resolve('react-dom'),
},
},
};
return config;
}

Some files were not shown because too many files have changed in this diff Show More