diff --git a/.circleci/config.yml b/.circleci/config.yml index 75c806da2c7..55069b50583 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -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: diff --git a/.editorconfig b/.editorconfig index 641825cc12a..22d8918a308 100644 --- a/.editorconfig +++ b/.editorconfig @@ -3,6 +3,6 @@ root = true [*] end_of_line = lf -[*.{js,json,ts}] +[*.{js,json,ts,html}] indent_style = space indent_size = 2 diff --git a/.gitignore b/.gitignore index 27c697ea921..e9f5cedff94 100644 --- a/.gitignore +++ b/.gitignore @@ -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__/ diff --git a/CHANGELOG.md b/CHANGELOG.md index e50f88cb797..71d973f965a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 + +
+ +54 Upgrades + + +- 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) + +
+ +# 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 + +
+ +105 Upgrades + + +- 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) + +
+ +# 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 + +
+ +4 PRs + + +- 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) + +
+ +#### Maintenance + +
+ +4 PRs + + +- 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) + +
+ +#### Dependency Upgrades + +
+ +66 Upgrades + + +- 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) + +
+ +# 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 + +
+ +13 Upgrades + + +- 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) + +
+ # 3.3.3 2017-December-29 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 90ae635db01..353d55b5db0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 `/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 diff --git a/MIGRATION.md b/MIGRATION.md index e331a988902..91151df1c7e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -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 diff --git a/README.md b/README.md index 24abb639329..858456edf66 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/RELEASES.md b/RELEASES.md index 1ba156817a8..ae86af316b9 100644 --- a/RELEASES.md +++ b/RELEASES.md @@ -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. + diff --git a/addons/a11y/package.json b/addons/a11y/package.json index e8eba6b85fd..963d4a644fd 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -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": { diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js index 8b7b0416a88..191b214afc4 100644 --- a/addons/a11y/src/components/Panel.js +++ b/addons/a11y/src/components/Panel.js @@ -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 { Violations, + label: {violations.length} Violations, panel: , }, { - label: Passes, + label: {passes.length} Passes, panel: , }, ]} diff --git a/addons/a11y/src/components/Report/RerunButton.js b/addons/a11y/src/components/Report/RerunButton.js new file mode 100644 index 00000000000..659f1417ffa --- /dev/null +++ b/addons/a11y/src/components/Report/RerunButton.js @@ -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; diff --git a/addons/a11y/src/components/Report/index.js b/addons/a11y/src/components/Report/index.js index f92cb13a635..28b10047b03 100644 --- a/addons/a11y/src/components/Report/index.js +++ b/addons/a11y/src/components/Report/index.js @@ -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 }) => ( + + {items.length ? (
{items.map(item => )}
- ); - } - - return {empty}; -} + ) : ( + {empty} + )} + Re-run tests + +); Report.propTypes = { items: PropTypes.arrayOf( diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js index 12f8b27dea2..d52fcf54746 100644 --- a/addons/a11y/src/components/Tabs.js +++ b/addons/a11y/src/components/Tabs.js @@ -5,6 +5,7 @@ import { baseFonts } from '@storybook/components'; const styles = { container: { width: '100%', + position: 'relative', ...baseFonts, }, tabs: { diff --git a/addons/a11y/src/components/WrapStory.js b/addons/a11y/src/components/WrapStory.js index ffb43cee017..c21db1925fd 100644 --- a/addons/a11y/src/components/WrapStory.js +++ b/addons/a11y/src/components/WrapStory.js @@ -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); diff --git a/addons/actions/package.json b/addons/actions/package.json index e00c2dbf766..4558dd44acf 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -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" diff --git a/addons/background/package.json b/addons/background/package.json index d0e1fde55f9..df103cd5e38 100644 --- a/addons/background/package.json +++ b/addons/background/package.json @@ -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", diff --git a/addons/background/src/index.js b/addons/background/src/index.js index ac0c1a65f59..43c53af3925 100644 --- a/addons/background/src/index.js +++ b/addons/background/src/index.js @@ -5,7 +5,7 @@ import addons from '@storybook/addons'; const style = { wrapper: { - overflow: 'scroll', + overflow: 'auto', position: 'fixed', top: 0, bottom: 0, diff --git a/addons/centered/package.json b/addons/centered/package.json index 0a7041ae8ee..73d10ad0cda 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -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 ", diff --git a/addons/events/package.json b/addons/events/package.json index 9c63ba8539a..7f074e63eb7 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -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", diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 15110baffa0..dc5116518f7 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -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" diff --git a/addons/info/docs/home-screenshot.png b/addons/info/docs/home-screenshot.png index 65e7a787c12..a590bc0a6f1 100644 Binary files a/addons/info/docs/home-screenshot.png and b/addons/info/docs/home-screenshot.png differ diff --git a/addons/info/package.json b/addons/info/package.json index 24e37abad28..04b3c97dcdf 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -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", diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index 2a7a1b87cfa..baccb582c91 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -34,107 +34,52 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" showSource={true} styles={[Function]} > -
-
-
- It's a - story: - -
-

- function func(x) {return x + 1;} -

-

- [object Object] -

-

- 1,2,3 -

-

- 7 -

-
- seven -
-
- true -
-

- undefined -

- - test - - - storiesOf - -
    -
  • - 1 -
    • -
  • - 2 -
    • -
-
- -
-
- -
+ } + > +
+
+
+ It's a + story: + +
+

+ function func(x) {return x + 1;} +

+

+ [object Object] +

+

+ 1,2,3 +

+

+ 7 +

+
+ seven +
+
+ true +
+

+ undefined +

+ + test + + + storiesOf + +
    +
  • + 1 +
    • +
  • + 2 +
    • +
+
+ +
+
-
-
+ +
-

-

-

-
-

- Test story -

- -

+ />

- with markdown info -

- -

-

- containing - - bold - - , - - cursive - - text, - - code - - and - - - a link - - -
-

-
-
-

+

+
- Story Source - - 
-                
+                  

+                    Test story
+                  

+                
+                

+                  

+                    with markdown info
+                  

+                
+                

+                  

+                    containing 
+                    
+                      bold
+                    
+                    , 
+                    
+                      cursive
+                    
+                     text, 
+                    
+                      code
+                    
+                     and 
+                    
+                      
+                        a link
+                      
+                    
+                  

+                

+
+
+

- - It's a - story: - -

+ Story Source + + + 
-                    

-                      

+                      
-                        
-                          <
-                          div
-                        
-                        
-                              It's a 
-                               story:
-                              
-                            

-                          }
-                          singleLine={false}
-                        >
-                          
-                        
-                        
-                          >
-                        
-                      

-                      
-                        

-                          
-                            It's a 
-                          
-                        

-                      
-                      
-                        

-                          
-                        

-                      
-                      
-                        

-                          
-                             story:
-                          
-                        

-                      
-                      
-                        }
-                      >
-                        

-                          
-                            <
-                            TestComponent
-                          
-                          
+                          
+                                It's a 
+                                 story:
+                                
+                              

+                            }
+                          >
+                            

+                              

-                            }
-                            singleLine={true}
-                          >
-                            
-                              
-                                
-                                  

-                                    
-                                
                                 
-                                  func
+                                  <
+                                  div
                                 
-                                
-                                  =
-                                  
-                                    
-                                      
-                                        {
-                                        
-                                          func()
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                
-                              
-                              
-                                
-                                  

-                                    
-                                
-                                
-                                  obj
-                                
-                                
-                                  =
-                                  
-                                    
-                                      
-                                        {
-                                        
-                                          {
-                                          
-                                            a
-                                          
-                                          : 
-                                          
-                                            
-                                              "
-                                              a
-                                              "
-                                            
-                                          
-                                          , 
-                                          
-                                            b
-                                          
-                                          : 
-                                          
-                                            
-                                              "
-                                              b
-                                              "
-                                            
-                                          
-                                          }
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                
-                              
-                              
-                                
-                                  

-                                    
-                                
-                                
-                                  array
-                                
-                                
-                                  =
-                                  
-                                    
-                                      
-                                        {
-                                        
-                                          [
-                                          
-                                            
-                                              {
-                                              
-                                                1
-                                              
-                                              }
-                                            
-                                          
-                                          , 
-                                          
-                                            
-                                              {
-                                              
-                                                2
-                                              
-                                              }
-                                            
-                                          
-                                          , 
-                                          
-                                            
-                                              {
-                                              
-                                                3
-                                              
-                                              }
-                                            
-                                          
+                                
+                                      It's a 
+                                       story:
+                                      
                                         }
-                                      
-                                    
-                                  
-                                
-                              
-                              
-                                
-                                  

-                                    
-                                
-                                
-                                  number
-                                
-                                
-                                  =
-                                  
-                                    
-                                      
-                                        {
-                                        
-                                          7
-                                        
-                                        }
-                                      
-                                    
-                                  
-                                
-                              
-                              
-                                
-                                  

-                                    
-                                
-                                
-                                  string
-                                
-                                
-                                  =
-                                  
-                                    
-                                      
-                                        "
-                                        seven
-                                        "
-                                      
-                                    
-                                  
-                                
-                              
-                              
-                                
-                                  

-                                    
-                                
-                                
+                                    

+                                  }
+                                  singleLine={false}
                                 >
-                                  bool
+                                  
+                                
+                                
+                                  >
                                 
-                                

-                              
-                            
-                          
-                          
+                              
+                                

+                                  
+                                    It's a 
+                                  
+                                

+                              
+                              
+                                

+                                  
+                                

+                              
+                              
+                                

+                                  
+                                     story:
+                                  
+                                

+                              
+                              
+                                }
+                              >
+                                

+                                  
+                                    <
+                                    TestComponent
+                                  
+                                  
+                                    }
+                                    singleLine={true}
+                                  >
+                                    
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          func
+                                        
+                                        
+                                          =
+                                          
+                                            
+                                              
+                                                
+                                                  {
+                                                  
+                                                    func()
+                                                  
+                                                  }
+                                                
+                                              
+                                            
+                                          
+                                        
+                                      
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          obj
+                                        
+                                        
+                                          =
+                                          
+                                            
+                                              
+                                                
+                                                  {
+                                                  
+                                                    {
+                                                    
+                                                      a
+                                                    
+                                                    : 
+                                                    
+                                                      
+                                                        "
+                                                        a
+                                                        "
+                                                      
+                                                    
+                                                    , 
+                                                    
+                                                      b
+                                                    
+                                                    : 
+                                                    
+                                                      
+                                                        "
+                                                        b
+                                                        "
+                                                      
+                                                    
+                                                    }
+                                                  
+                                                  }
+                                                
+                                              
+                                            
+                                          
+                                        
+                                      
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          array
+                                        
+                                        
+                                          =
+                                          
+                                            
+                                              
+                                                
+                                                  {
+                                                  
+                                                    [
+                                                    
+                                                      
+                                                        {
+                                                        
+                                                          1
+                                                        
+                                                        }
+                                                      
+                                                    
+                                                    , 
+                                                    
+                                                      
+                                                        {
+                                                        
+                                                          2
+                                                        
+                                                        }
+                                                      
+                                                    
+                                                    , 
+                                                    
+                                                      
+                                                        {
+                                                        
+                                                          3
+                                                        
+                                                        }
+                                                      
+                                                    
+                                                    ]
+                                                  
+                                                  }
+                                                
+                                              
+                                            
+                                          
+                                        
+                                      
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          number
+                                        
+                                        
+                                          =
+                                          
+                                            
+                                              
+                                                
+                                                  {
+                                                  
+                                                    7
+                                                  
+                                                  }
+                                                
+                                              
+                                            
+                                          
+                                        
+                                      
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          string
+                                        
+                                        
+                                          =
+                                          
+                                            
+                                              
+                                                
+                                                  "
+                                                  seven
+                                                  "
+                                                
+                                              
+                                            
+                                          
+                                        
+                                      
+                                      
+                                        
+                                          

+                                            
+                                        
+                                        
+                                          bool
+                                        
+                                        

+                                      
+                                    
+                                  
+                                  
+                                    />
+                                  
+                                

+                              
+                              

+                                
+                                  </
+                                  div
+                                  >
+                                
+                              

+                            

+                          
+
+ + - /> - -
- -
- - </ - div - > - -
-
- - - -
-
-

- Prop Types -

-
-

+ + + + + + + + +

+
+

- " - TestComponent - " Component -

- +
- + " + TestComponent + " Component + + - - No propTypes defined! - - - + + + No propTypes defined! + + + +
- + `; diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js index 361dd6b0055..db935e709d7 100644 --- a/addons/info/src/components/PropVal.js +++ b/addons/info/src/components/PropVal.js @@ -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}`] = ; + items[`n${i}`] = ; items[`c${i}`] = ', '; }); if (val.length > maxPropArrayLength) { @@ -51,13 +52,13 @@ function previewArray(val, maxPropArrayLength) { return [{createFragment(items)}]; } -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}`] = {name}; items[`c${i}`] = ': '; - items[`v${i}`] = ; + items[`v${i}`] = ; 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 = {val}; @@ -91,7 +94,7 @@ export default function PropVal(props) { } else if (typeof val === 'boolean') { content = {`${val}`}; } else if (Array.isArray(val)) { - content = previewArray(val, maxPropArrayLength); + content = previewArray(val, maxPropArrayLength, valueStyles); } else if (typeof val === 'function') { content = {val.name ? `${val.name}()` : 'anonymous()'}; } else if (!val) { @@ -105,7 +108,7 @@ export default function PropVal(props) { ); } 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); diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 3dd4bf83437..1021f180531 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -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 ( + + {this.props.showInline ? this._renderInline() : this._renderOverlay()} + + ); } } diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js index f43d67955b8..db17696ca94 100644 --- a/addons/info/src/components/markdown/code.js +++ b/addons/info/src/components/markdown/code.js @@ -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 
{props.children}
; -} - -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'; diff --git a/addons/info/src/components/markdown/pre/copy.js b/addons/info/src/components/markdown/pre/copy.js new file mode 100644 index 00000000000..8142b089573 --- /dev/null +++ b/addons/info/src/components/markdown/pre/copy.js @@ -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(); +} diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js new file mode 100644 index 00000000000..0daf4db7990 --- /dev/null +++ b/addons/info/src/components/markdown/pre/copyButton.js @@ -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 ( + + ); +} + +CopyButton.propTypes = { + onClick: PropTypes.func, + toggled: PropTypes.bool, + theme: PropTypes.shape({ + copyButton: PropTypes.object, + }), +}; + +CopyButton.defaultProps = { + onClick: () => {}, + toggled: false, + theme: {}, +}; + +export default withTheme(CopyButton); diff --git a/addons/info/src/components/markdown/pre/pre.js b/addons/info/src/components/markdown/pre/pre.js new file mode 100644 index 00000000000..c8c4a45633c --- /dev/null +++ b/addons/info/src/components/markdown/pre/pre.js @@ -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 ( + +
{this.props.children}
+ + + ); + } +} + +Pre.propTypes = { + children: PropTypes.node, + theme: PropTypes.shape({ + pre: PropTypes.object, + }), +}; + +Pre.defaultProps = { + children: null, + theme: {}, +}; + +export default withTheme(Pre); diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js index 3c10aa68df4..fab5bb53bc9 100644 --- a/addons/info/src/components/types/OneOfType.js +++ b/addons/info/src/components/types/OneOfType.js @@ -8,13 +8,13 @@ const OneOfType = ({ propType }) => { return ( {propType.value - .map((value, i) => [ - , - i < length - 1 ? | : null, - ]) + .map((value, i) => { + const key = `${value.name}${value.value ? `-${value.value}` : ''}`; + return [ + , + i < length - 1 ? | : null, + ]; + }) .reduce((acc, tuple) => acc.concat(tuple), [])} ); diff --git a/addons/jest/package.json b/addons/jest/package.json index cbfd8c07453..18826611243 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -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", diff --git a/addons/knobs/.npmignore b/addons/knobs/.npmignore index b467c377fd1..02ba1793bbe 100644 --- a/addons/knobs/.npmignore +++ b/addons/knobs/.npmignore @@ -1,2 +1 @@ -src .babelrc diff --git a/addons/knobs/package.json b/addons/knobs/package.json index af2d5f23343..338d6e03e0a 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -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", diff --git a/addons/knobs/polymer.js b/addons/knobs/polymer.js new file mode 100644 index 00000000000..b3cfb782c79 --- /dev/null +++ b/addons/knobs/polymer.js @@ -0,0 +1 @@ +module.exports = require('./dist/polymer'); diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js index 1fdc7d7f5b9..54607015ce2 100644 --- a/addons/knobs/src/angular/helpers.js +++ b/addons/knobs/src/angular/helpers.js @@ -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() { diff --git a/addons/knobs/src/polymer/WrapStory.html b/addons/knobs/src/polymer/WrapStory.html new file mode 100644 index 00000000000..ec233fb8744 --- /dev/null +++ b/addons/knobs/src/polymer/WrapStory.html @@ -0,0 +1,87 @@ + + + diff --git a/addons/knobs/src/polymer/index.js b/addons/knobs/src/polymer/index.js new file mode 100644 index 00000000000..5bb16a89065 --- /dev/null +++ b/addons/knobs/src/polymer/index.js @@ -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); +} diff --git a/addons/links/package.json b/addons/links/package.json index e02114bdc16..56d75533f71 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -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", diff --git a/addons/notes/package.json b/addons/notes/package.json index 5bd3fe2d69f..be02853de9e 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -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", diff --git a/addons/options/package.json b/addons/options/package.json index fdea967bc5c..c02dd1cda1f 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -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" diff --git a/addons/storyshots/.npmignore b/addons/storyshots/.npmignore index b467c377fd1..02ba1793bbe 100644 --- a/addons/storyshots/.npmignore +++ b/addons/storyshots/.npmignore @@ -1,2 +1 @@ -src .babelrc diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index 0505b724b24..b75b0ec4c49 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -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` diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index 8d5521ab990..d1ae8f5bf11 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -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": "*" diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index c43acb30182..1f94fd13a45 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -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); }); }); diff --git a/addons/storyshots/src/test-body-image-snapshot.js b/addons/storyshots/src/test-body-image-snapshot.js new file mode 100644 index 00000000000..94aadf4de74 --- /dev/null +++ b/addons/storyshots/src/test-body-image-snapshot.js @@ -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; +}; diff --git a/addons/viewport/README.md b/addons/viewport/README.md index 37f59241831..05aad39ff40 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -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 diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 1ba6eaabee8..82ec3710286 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -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" }, diff --git a/app/angular/.npmignore b/app/angular/.npmignore index 329fc8d67ad..6d236e2ff68 100644 --- a/app/angular/.npmignore +++ b/app/angular/.npmignore @@ -1,3 +1,2 @@ docs -src .babelrc diff --git a/app/angular/demo.d.ts b/app/angular/demo.d.ts index 7ff09737fcd..c2deaa98dbb 100644 --- a/app/angular/demo.d.ts +++ b/app/angular/demo.d.ts @@ -1,4 +1,4 @@ declare module '@storybook/angular/demo' { - export const Button: any; - export const Welcome: any; -} \ No newline at end of file + export const Button: any; + export const Welcome: any; +} diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts index 96e06d24596..09fc1b7c611 100644 --- a/app/angular/index.d.ts +++ b/app/angular/index.d.ts @@ -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; - component: any + props?: ICollection; + moduleMetadata?: Partial; + 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[]; } diff --git a/app/angular/package.json b/app/angular/package.json index 0313188ad4c..ff3f2f3aa45 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -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": { diff --git a/app/angular/src/client/preview/angular/app.token.ts b/app/angular/src/client/preview/angular/app.token.ts index bf45fcd7720..3e4753b21c1 100644 --- a/app/angular/src/client/preview/angular/app.token.ts +++ b/app/angular/src/client/preview/angular/app.token.ts @@ -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("story"); +export const STORY = new InjectionToken('story'); diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts index ff4d463bf9e..af7a76764c2 100644 --- a/app/angular/src/client/preview/angular/components/app.component.ts +++ b/app/angular/src/client/preview/angular/components/app.component.ts @@ -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: '' + 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 = _.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); } } } diff --git a/app/angular/src/client/preview/angular/components/error.component.ts b/app/angular/src/client/preview/angular/components/error.component.ts index e5c2588036d..f19d679b11c 100644 --- a/app/angular/src/client/preview/angular/components/error.component.ts +++ b/app/angular/src/client/preview/angular/components/error.component.ts @@ -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) {} -} \ No newline at end of file +} diff --git a/app/angular/src/client/preview/angular/components/no-preview.component.ts b/app/angular/src/client/preview/angular/components/no-preview.component.ts index 73a0d0c205e..3e220b28cc2 100644 --- a/app/angular/src/client/preview/angular/components/no-preview.component.ts +++ b/app/angular/src/client/preview/angular/components/no-preview.component.ts @@ -1,7 +1,7 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core'; @Component({ selector: 'storybook-dynamic-app-root', - template: "

No Preview Available!

" + template: '

No Preview Available!

', }) export class NoPreviewComponent {} diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 847654083b6..68b1ec9e3eb 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -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>[] = []; -type IRenderStoryFn = (story: IGetStoryWithContext, context: IContext, reRender?: boolean) => void; -type IRenderErrorFn = (error: Error) => void; - -interface IModule extends Type { - annotations: any[]; -} -interface IComponent extends Type { - 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 | any[]>, + entryComponents: Array | any[]>, + bootstrap: Array | 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 => { - (propsMetadata)[key] = (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 | any[]>, -entryComponents: Array | any[]>, -bootstrap: Array | 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() {}; - (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); diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index ae1501e3e99..f24ab7beb2a 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/app/angular/src/client/preview/angular/types.ts @@ -1,8 +1,9 @@ export interface NgModuleMetadata { - declarations: Array; - imports: Array; - schemas: Array; - providers: Array; + declarations?: Array; + entryComponents?: Array; + imports?: Array; + schemas?: Array; + providers?: Array; } 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; diff --git a/app/angular/src/client/preview/angular/utils.ts b/app/angular/src/client/preview/angular/utils.ts deleted file mode 100644 index fe83324fa0d..00000000000 --- a/app/angular/src/client/preview/angular/utils.ts +++ /dev/null @@ -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 (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; -} \ No newline at end of file diff --git a/app/angular/src/demo/button.component.ts b/app/angular/src/demo/button.component.ts index cc03d44f743..bb292c9793a 100644 --- a/app/angular/src/demo/button.component.ts +++ b/app/angular/src/demo/button.component.ts @@ -1,12 +1,12 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ - selector: 'button-component', + selector: 'storybook-button-component', template: ` `, 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(); -} \ No newline at end of file + @Input() text = ''; + @Output() onClick = new EventEmitter(); +} diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts index 99c240ce566..ca7a7c2f9fb 100644 --- a/app/angular/src/demo/welcome.component.ts +++ b/app/angular/src/demo/welcome.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'welcome-component', + selector: 'storybook-welcome-component', template: `

Welcome to storybook

@@ -15,7 +15,8 @@ import { Component } from '@angular/core'; (Basically a story is like a visual test case.)

- See these sample stories for a component called Button . + See these sample stories for a component called + Button .

Just like that, you can add your own components as stories. @@ -38,12 +39,13 @@ import { Component } from '@angular/core';

NOTE:
- Have a look at the .storybook/webpack.config.js to add webpack loaders and plugins you are using in this project. + Have a look at the .storybook/webpack.config.js + to add webpack loaders and plugins you are using in this project.

`, 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'; -} \ No newline at end of file + displayName = 'Welcome'; +} diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js index 74fc769d1a5..ea488da6a0e 100755 --- a/app/angular/src/server/build.js +++ b/app/angular/src/server/build.js @@ -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 diff --git a/app/angular/src/server/config.js b/app/angular/src/server/config.js index abe4257095b..dcf9e41ee5b 100644 --- a/app/angular/src/server/config.js +++ b/app/angular/src/server/config.js @@ -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'); diff --git a/app/angular/src/server/config/utils.js b/app/angular/src/server/config/utils.js index 0236481efd7..fc73c38a37f 100644 --- a/app/angular/src/server/config/utils.js +++ b/app/angular/src/server/config/utils.js @@ -33,5 +33,3 @@ export function loadEnv(options = {}) { 'process.env': env, }; } - -export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook'; diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js index e479e77efd8..fccf87ea32e 100644 --- a/app/angular/src/server/config/webpack.config.js +++ b/app/angular/src/server/config/webpack.config.js @@ -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$/, diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js index c06bc2a4286..4adf3deba0e 100644 --- a/app/angular/src/server/config/webpack.config.prod.js +++ b/app/angular/src/server/config/webpack.config.prod.js @@ -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')], }, ], }, diff --git a/app/angular/src/server/index.js b/app/angular/src/server/index.js index 9b82e9ac7a6..96234d9e0f8 100755 --- a/app/angular/src/server/index.js +++ b/app/angular/src/server/index.js @@ -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 diff --git a/app/angular/src/server/middleware.js b/app/angular/src/server/middleware.js index 7b84bc34349..28e8554bccf 100644 --- a/app/angular/src/server/middleware.js +++ b/app/angular/src/server/middleware.js @@ -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 '/' diff --git a/app/angular/src/server/ts_config.js b/app/angular/src/server/ts_config.js new file mode 100644 index 00000000000..cdf1106a2f3 --- /dev/null +++ b/app/angular/src/server/ts_config.js @@ -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, + }; +} diff --git a/app/angular/src/server/ts_config.test.js b/app/angular/src/server/ts_config.test.js new file mode 100644 index 00000000000..2a00d1d212c --- /dev/null +++ b/app/angular/src/server/ts_config.test.js @@ -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({}); + }); +}); diff --git a/app/polymer/.babelrc b/app/polymer/.babelrc new file mode 100644 index 00000000000..845c3cf4d75 --- /dev/null +++ b/app/polymer/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["env", "stage-0", "react"] +} diff --git a/app/polymer/.npmignore b/app/polymer/.npmignore new file mode 100644 index 00000000000..329fc8d67ad --- /dev/null +++ b/app/polymer/.npmignore @@ -0,0 +1,3 @@ +docs +src +.babelrc diff --git a/app/polymer/README.md b/app/polymer/README.md new file mode 100644 index 00000000000..9f3492f09bf --- /dev/null +++ b/app/polymer/README.md @@ -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! diff --git a/app/polymer/bin/build.js b/app/polymer/bin/build.js new file mode 100755 index 00000000000..780773c6cd3 --- /dev/null +++ b/app/polymer/bin/build.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +require('../dist/server/build'); diff --git a/app/polymer/bin/index.js b/app/polymer/bin/index.js new file mode 100755 index 00000000000..2e96258ce63 --- /dev/null +++ b/app/polymer/bin/index.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +require('../dist/server'); diff --git a/app/polymer/docs/demo.gif b/app/polymer/docs/demo.gif new file mode 100644 index 00000000000..c8366f8534a Binary files /dev/null and b/app/polymer/docs/demo.gif differ diff --git a/app/polymer/docs/react_storybook_screenshot.png b/app/polymer/docs/react_storybook_screenshot.png new file mode 100644 index 00000000000..9763382042b Binary files /dev/null and b/app/polymer/docs/react_storybook_screenshot.png differ diff --git a/app/polymer/docs/storybooks_io_logo.png b/app/polymer/docs/storybooks_io_logo.png new file mode 100644 index 00000000000..3dd9b09f3a9 Binary files /dev/null and b/app/polymer/docs/storybooks_io_logo.png differ diff --git a/app/polymer/package.json b/app/polymer/package.json new file mode 100644 index 00000000000..e913f6153a5 --- /dev/null +++ b/app/polymer/package.json @@ -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" + } +} diff --git a/app/polymer/src/client/index.js b/app/polymer/src/client/index.js new file mode 100644 index 00000000000..4d19c3fb217 --- /dev/null +++ b/app/polymer/src/client/index.js @@ -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' +// ); diff --git a/app/polymer/src/client/manager/index.js b/app/polymer/src/client/manager/index.js new file mode 100644 index 00000000000..24082de7ca5 --- /dev/null +++ b/app/polymer/src/client/manager/index.js @@ -0,0 +1,7 @@ +/* global document */ + +import renderStorybookUI from '@storybook/ui'; +import Provider from './provider'; + +const rootEl = document.getElementById('root'); +renderStorybookUI(rootEl, new Provider()); diff --git a/app/polymer/src/client/manager/preview.js b/app/polymer/src/client/manager/preview.js new file mode 100644 index 00000000000..4f8e792d964 --- /dev/null +++ b/app/polymer/src/client/manager/preview.js @@ -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 ( +