mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-01 05:05:25 +08:00
Merge branch 'master' into addon-a11y-delayed-render
This commit is contained in:
Rahul
GitHub
commit
d2b1a3f623
@ -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:
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -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__/
|
||||
|
||||
329
CHANGELOG.md
329
CHANGELOG.md
@ -1,3 +1,332 @@
|
||||
# 3.4.0-alpha.2
|
||||
|
||||
2018-January-11
|
||||
|
||||
This is a duplicate of `3.4.0-alpha.1`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
|
||||
|
||||
# 3.3.8
|
||||
|
||||
2018-January-11
|
||||
|
||||
This is a duplicate of `3.3.7`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
|
||||
|
||||
# 3.4.0-alpha.1
|
||||
|
||||
2018-January-10
|
||||
|
||||
In addition to the changes listed here, also contains fixes from [3.3.5](#335) and [3.3.6](#336) and [3.3.7](#337).
|
||||
|
||||
#### Features
|
||||
|
||||
- Custom tsconfig.json for angular apps. [#2669](https://github.com/storybooks/storybook/pull/2669)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
105 Upgrades
|
||||
</summary>
|
||||
|
||||
- Upgraded `babel-eslint` in `/` from "8.1.2" to "8.2.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `eslint-plugin-jest` in `/` from "21.5.0" to "21.6.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest-cli` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest-config` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest-diff` in `/` from "22.0.3" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest-environment-jsdom` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest-jasmine2` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `lerna` in `/` from "2.5.1" to "2.6.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `nodemon` in `/` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `common-tags` in `app/react` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `common-tags` in `app/angular` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `common-tags` in `app/vue` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `vue-loader` in `app/vue` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `jest` in `examples/cra-kitchen-sink` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.10.0" to "2.10.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
|
||||
- Upgraded `marked` in `/docs` from "0.3.7" to "0.3.12" [#2699](https://github.com/storybooks/storybook/pull/2699)
|
||||
- Upgraded `react-stack-grid` in `/docs` from "0.7.0" to "0.7.1" [#2699](https://github.com/storybooks/storybook/pull/2699)
|
||||
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `@storybook/addons` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `@storybook/react` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `gatsby-link` in `/docs` from "1.6.32" to "1.6.33" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `gatsby` in `/docs` from "1.9.149" to "1.9.150" [#2686](https://github.com/storybooks/storybook/pull/2686)
|
||||
- Upgraded `nodemon` in `/` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `markdown-loader` in `app/react` from "2.0.1" to "2.0.2" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `react-native` in `app/react-native` from "0.51.0" to "0.52.0" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
|
||||
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
|
||||
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
|
||||
- Upgraded `@storybook/addons` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
|
||||
- Upgraded `@storybook/react` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
|
||||
- Update eslint in / from 4.14.0 to 4.15.0 [#2673](https://github.com/storybooks/storybook/pull/2673)
|
||||
- Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
|
||||
- Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
|
||||
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
|
||||
- Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
|
||||
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
|
||||
- Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
|
||||
|
||||
</details>
|
||||
|
||||
# 3.3.7
|
||||
|
||||
2018-January-10
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Extract tslint exclusions out of package.json scripts [#2684](https://github.com/storybooks/storybook/pull/2684)
|
||||
- Add tslint to the linting pipe [#2682](https://github.com/storybooks/storybook/pull/2682)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Angular: add entry components to modulemetadata - #2701 [#2702](https://github.com/storybooks/storybook/pull/2702)
|
||||
- Add html and markup loaders to angular and vue apps [#2692](https://github.com/storybooks/storybook/pull/2692)
|
||||
|
||||
# 3.3.6
|
||||
|
||||
2018-January-08
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Remove `src/` from remaining `.npmignore`s [#2678](https://github.com/storybooks/storybook/pull/2678)
|
||||
|
||||
# 3.3.5
|
||||
|
||||
2018-January-08
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Remove src from individual .npmignore files [#2677](https://github.com/storybooks/storybook/pull/2677)
|
||||
|
||||
# 3.4.0-alpha.0
|
||||
|
||||
2018-January-07
|
||||
|
||||
#### Features
|
||||
|
||||
- Multiple hierarchies [#2452](https://github.com/storybooks/storybook/pull/2452)
|
||||
- Change template story files extension to .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
|
||||
- Use store revisions to ensure that stories re-render on HMR. [#2605](https://github.com/storybooks/storybook/pull/2605)
|
||||
- Ability to force re-render a story [#2463](https://github.com/storybooks/storybook/pull/2463)
|
||||
- Introduce framework-independent core library [#2241](https://github.com/storybooks/storybook/pull/2241)
|
||||
|
||||
#### Documentation
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
4 PRs
|
||||
</summary>
|
||||
|
||||
- Update webpack extend warning. [#2660](https://github.com/storybooks/storybook/pull/2660)
|
||||
- ADD demo images to a new img folder with the documentation site [#2644](https://github.com/storybooks/storybook/pull/2644)
|
||||
- write doc about .css/.scss rules for Angular [#2634](https://github.com/storybooks/storybook/pull/2634)
|
||||
- Updated documentation wrt ejs exclusion [#2633](https://github.com/storybooks/storybook/pull/2633)
|
||||
|
||||
</details>
|
||||
|
||||
#### Maintenance
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
4 PRs
|
||||
</summary>
|
||||
|
||||
- Only update CLI snapsots on postpublish script, skip smoke tests [#2671](https://github.com/storybooks/storybook/pull/2671)
|
||||
- Fix the timezone for example dates [#2654](https://github.com/storybooks/storybook/pull/2654)
|
||||
- Update prereq yarn install level [#2638](https://github.com/storybooks/storybook/pull/2638)
|
||||
- Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
|
||||
|
||||
</details>
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
66 Upgrades
|
||||
</summary>
|
||||
|
||||
- Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
|
||||
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
|
||||
- Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
|
||||
- Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
|
||||
- Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
|
||||
- Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
|
||||
- Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
|
||||
- Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
|
||||
- Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
|
||||
- Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
|
||||
- Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
|
||||
- Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
|
||||
- Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
|
||||
- Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
|
||||
|
||||
</details>
|
||||
|
||||
# 3.3.4
|
||||
|
||||
2018-January-07
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fix config dir detection [#2666](https://github.com/storybooks/storybook/pull/2666)
|
||||
- Removed lowercase-only restriction for knobs [#2646](https://github.com/storybooks/storybook/pull/2646)
|
||||
- Add IE11 compatibility meta tag [#2650](https://github.com/storybooks/storybook/pull/2650)
|
||||
- Allow transparency in color knob [#2624](https://github.com/storybooks/storybook/pull/2624)
|
||||
- RN: Use haul/bin/cli.js for cross-platform support [#2577](https://github.com/storybooks/storybook/pull/2577)
|
||||
- Publish package sources along with transpiled files [#2604](https://github.com/storybooks/storybook/pull/2604)
|
||||
- Fixed all peerDependencies for apps. [#2601](https://github.com/storybooks/storybook/pull/2601)
|
||||
- Renamed angular root node to avoid name collisions [#2657](https://github.com/storybooks/storybook/pull/2657)
|
||||
- Add .ts compatibility to storyshots [#2639](https://github.com/storybooks/storybook/pull/2639)
|
||||
- Remove @angular/core dep from knobs peer. [#2640](https://github.com/storybooks/storybook/pull/2640)
|
||||
- Angular: Change template story files extension .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
|
||||
- Skip serializing (Synthetic)Events [#2626](https://github.com/storybooks/storybook/pull/2626)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
13 Upgrades
|
||||
</summary>
|
||||
|
||||
- Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
- Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
|
||||
|
||||
</details>
|
||||
|
||||
# 3.3.3
|
||||
|
||||
2017-December-29
|
||||
|
||||
@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
|
||||
|
||||
Please review this document to help to streamline the process and save everyone's precious time.
|
||||
|
||||
This repo uses yarn workspaces, so you should `yarn@1.3.2` or higher as package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
|
||||
## Issues
|
||||
|
||||
@ -31,7 +31,7 @@ yarn install
|
||||
yarn bootstrap --core
|
||||
```
|
||||
|
||||
The bootstrap command will ask which sections of the codebase you want to bootstrap. Unless you're going to work with ReactNative or the Documentation, you can keep the default.
|
||||
The bootstrap command might ask which sections of the codebase you want to bootstrap. Unless you're going to work with ReactNative or the Documentation, you can keep the default.
|
||||
|
||||
You can also pick directly from CLI:
|
||||
|
||||
@ -57,25 +57,33 @@ You can also pick suites from CLI. Suites available are listed below.
|
||||
|
||||
`yarn test --core`
|
||||
|
||||
This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`
|
||||
This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
|
||||
Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
|
||||
|
||||
##### React-Native example Tests
|
||||
|
||||
`yarn test --reactnative`
|
||||
|
||||
This option executes tests from `<rootdir>/app/react-native`
|
||||
This option executes tests from `<rootdir>/app/react-native`.
|
||||
Before these tests are ran, the project must be bootstrapped with the React Native example enabled. You can accomplish this by running `yarn bootstrap --reactnative`
|
||||
|
||||
##### Integration Tests (Screenshots of running apps)
|
||||
|
||||
`yarn test --integration`
|
||||
|
||||
This option executes tests from `<rootdir>/integration`
|
||||
This option executes tests from `<rootdir>/integration`.
|
||||
In order for the snapshot-integration tests to be executed properly, examples being tested must be running on their defaults ports, as declared in `integration/examples.test.js`
|
||||
|
||||
Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images.
|
||||
|
||||
##### CRA-kitchen-sink - Image snapshots using Storyshots
|
||||
|
||||
`yarn test --image`
|
||||
|
||||
This option executes tests from `<rootdir>/examples/cra-kitchen-sink`
|
||||
In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date.
|
||||
|
||||
Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
|
||||
|
||||
#### 2b. Run e2e tests for CLI
|
||||
|
||||
@ -95,23 +103,23 @@ In that case, please check the git diff before commiting to make sure it only co
|
||||
|
||||
If you want to test your own existing project using the github version of storybook, you need to `link` the packages you use in your project.
|
||||
|
||||
````sh
|
||||
```sh
|
||||
cd app/react
|
||||
yarn link
|
||||
|
||||
cd <your-project>
|
||||
yarn link @storybook/react
|
||||
|
||||
# repeat with whichever other parts of the monorepo you are using.
|
||||
```
|
||||
# repeat with whichever other parts of the monorepo you are using.
|
||||
```
|
||||
|
||||
### Reproductions
|
||||
### Reproductions
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
A good way to do that is using the example `cra-kitchen-sink` app embedded in this repository:
|
||||
|
||||
```sh
|
||||
```sh
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
cd storybook
|
||||
@ -130,7 +138,7 @@ If you want to test your own existing project using the github version of storyb
|
||||
# fork the storybook repo to your account, then add the resulting remote
|
||||
git remote add <your-username> https://github.com/<your-username>/storybook.git
|
||||
git push -u <your-username> master
|
||||
````
|
||||
```
|
||||
|
||||
If you follow that process, you can then link to the github repository in the issue. See <https://github.com/storybooks/storybook/issues/708#issuecomment-290589886> for an example.
|
||||
|
||||
|
||||
15
MIGRATION.md
15
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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/components": "^3.3.3",
|
||||
"@storybook/components": "^3.4.0-alpha.1",
|
||||
"axe-core": "^2.6.1",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Storybook decorator to center components",
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,11 +15,11 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "^3.3.3",
|
||||
"@storybook/components": "^3.3.3",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.1",
|
||||
"@storybook/components": "^3.4.0-alpha.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.0.1",
|
||||
"marksy": "^6.0.3",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.2",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,2 +1 @@
|
||||
src
|
||||
.babelrc
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
12
addons/knobs/src/angular/helpers.js
vendored
12
addons/knobs/src/angular/helpers.js
vendored
@ -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() {
|
||||
@ -73,11 +74,10 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
|
||||
const oldValue = knobOptions.value;
|
||||
knobOptions.value = value;
|
||||
knobStore.markAllUnused();
|
||||
const lowercasedName = name.toLocaleLowerCase();
|
||||
this[lowercasedName] = value;
|
||||
this[name] = value;
|
||||
this.cd.detectChanges();
|
||||
this.ngOnChanges({
|
||||
[lowercasedName]: new SimpleChange(oldValue, value, false),
|
||||
[name]: new SimpleChange(oldValue, value, false),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,2 +1 @@
|
||||
src
|
||||
.babelrc
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
## 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`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glob": "^7.1.2",
|
||||
"global": "^4.3.2",
|
||||
"jest-specific-snapshot": "^0.3.0",
|
||||
"jest-image-snapshot": "^2.2.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.1",
|
||||
"@storybook/react": "^3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0",
|
||||
"react": "*",
|
||||
"react-test-renderer": "*"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import glob from 'glob';
|
||||
import global, { describe, it } from 'global';
|
||||
import global, { describe, it, beforeEach, afterEach } from 'global';
|
||||
import readPkgUp from 'read-pkg-up';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
@ -18,6 +18,8 @@ export {
|
||||
renderOnly,
|
||||
} from './test-bodies';
|
||||
|
||||
export { imageSnapshot } from './test-body-image-snapshot';
|
||||
|
||||
export { getSnapshotFileName };
|
||||
|
||||
let storybook;
|
||||
@ -100,6 +102,20 @@ export default function testStorySnapshots(options = {}) {
|
||||
}
|
||||
|
||||
describe(suite, () => {
|
||||
beforeEach(() => {
|
||||
if (typeof options.test.beforeEach === 'function') {
|
||||
return options.test.beforeEach();
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (typeof options.test.afterEach === 'function') {
|
||||
return options.test.afterEach();
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
||||
describe(kind, () => {
|
||||
// eslint-disable-next-line
|
||||
for (const story of group.stories) {
|
||||
@ -109,7 +125,7 @@ export default function testStorySnapshots(options = {}) {
|
||||
}
|
||||
|
||||
it(story.name, () => {
|
||||
const context = { fileName, kind, story: story.name };
|
||||
const context = { fileName, kind, story: story.name, isRNStorybook };
|
||||
return options.test({
|
||||
story,
|
||||
context,
|
||||
@ -122,14 +138,13 @@ export default function testStorySnapshots(options = {}) {
|
||||
}
|
||||
|
||||
describe('Storyshots Integrity', () => {
|
||||
describe('Abandoned Storyshots', () => {
|
||||
test('Abandoned Storyshots', () => {
|
||||
const storyshots = glob.sync('**/*.storyshot');
|
||||
|
||||
const abandonedStoryshots = storyshots.filter(fileName => {
|
||||
const possibleStoriesFiles = getPossibleStoriesFiles(fileName);
|
||||
return !possibleStoriesFiles.some(fs.existsSync);
|
||||
});
|
||||
|
||||
expect(abandonedStoryshots).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
67
addons/storyshots/src/test-body-image-snapshot.js
Normal file
67
addons/storyshots/src/test-body-image-snapshot.js
Normal file
@ -0,0 +1,67 @@
|
||||
import puppeteer from 'puppeteer';
|
||||
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||
|
||||
expect.extend({ toMatchImageSnapshot });
|
||||
|
||||
export const imageSnapshot = ({
|
||||
storybookUrl = 'http://localhost:6006',
|
||||
getMatchOptions = () => {},
|
||||
}) => {
|
||||
let browser; // holds ref to browser. (ie. Chrome)
|
||||
let page; // Hold ref to the page to screenshot.
|
||||
|
||||
const testFn = ({ context }) => {
|
||||
if (context.isRNStorybook) {
|
||||
// Skip tests since we de not support RN image snapshots.
|
||||
console.error(
|
||||
"It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
|
||||
);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const encodedKind = encodeURIComponent(context.kind);
|
||||
const encodedStoryName = encodeURIComponent(context.story);
|
||||
const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
|
||||
const url = storybookUrl + storyUrl;
|
||||
if (!browser || !page) {
|
||||
console.error(
|
||||
`Error when generating image snapshot for test ${context.kind} - ${
|
||||
context.story
|
||||
} : It seems the headless browser is not running.`
|
||||
);
|
||||
return Promise.reject(new Error('no-headless-browser-running'));
|
||||
}
|
||||
|
||||
expect.assertions(1);
|
||||
return page
|
||||
.goto(url)
|
||||
.catch(e => {
|
||||
console.error(
|
||||
`ERROR WHILE CONNECTING TO ${url}, did you start or build the storybook first ? A storybook instance should be running or a static version should be built when using image snapshot feature.`,
|
||||
e
|
||||
);
|
||||
throw e;
|
||||
})
|
||||
.then(() =>
|
||||
page.screenshot().then(image => {
|
||||
expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
testFn.beforeEach = () =>
|
||||
puppeteer
|
||||
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
|
||||
.launch({ args: ['--no-sandbox ', '--disable-setuid-sandbox'] })
|
||||
.then(b => {
|
||||
browser = b;
|
||||
})
|
||||
.then(() => browser.newPage())
|
||||
.then(p => {
|
||||
page = p;
|
||||
});
|
||||
|
||||
testFn.afterEach = () => browser.close();
|
||||
|
||||
return testFn;
|
||||
};
|
||||
@ -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).
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
|
||||
6
app/angular/demo.d.ts
vendored
6
app/angular/demo.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
declare module '@storybook/angular/demo' {
|
||||
export const Button: any;
|
||||
export const Welcome: any;
|
||||
}
|
||||
export const Button: any;
|
||||
export const Welcome: any;
|
||||
}
|
||||
|
||||
33
app/angular/index.d.ts
vendored
33
app/angular/index.d.ts
vendored
@ -1,31 +1,32 @@
|
||||
import {NgModuleMetadata, ICollection} from './dist/client/preview/angular/types';
|
||||
import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
|
||||
|
||||
export interface IStorybookStory {
|
||||
name: string,
|
||||
render: () => any
|
||||
name: string;
|
||||
render: () => any;
|
||||
}
|
||||
|
||||
export interface IStoribookSection {
|
||||
kind: string,
|
||||
stories: IStorybookStory[]
|
||||
kind: string;
|
||||
stories: IStorybookStory[];
|
||||
}
|
||||
|
||||
export type IGetStory = () => {
|
||||
props?: ICollection;
|
||||
moduleMetadata?: Partial<NgModuleMetadata>;
|
||||
component: any
|
||||
props?: ICollection;
|
||||
moduleMetadata?: Partial<NgModuleMetadata>;
|
||||
component?: any;
|
||||
template?: string;
|
||||
};
|
||||
|
||||
export interface IApi {
|
||||
kind: string;
|
||||
addDecorator: (decorator: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory ) => IApi;
|
||||
kind: string;
|
||||
addDecorator: (decorator: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory) => IApi;
|
||||
}
|
||||
|
||||
declare module '@storybook/angular' {
|
||||
export function storiesOf(kind: string, module: NodeModule): IApi;
|
||||
export function setAddon(addon: any): void;
|
||||
export function addDecorator(decorator: any): IApi;
|
||||
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
|
||||
export function getStorybook(): IStoribookSection[];
|
||||
export function storiesOf(kind: string, module: NodeModule): IApi;
|
||||
export function setAddon(addon: any): void;
|
||||
export function addDecorator(decorator: any): IApi;
|
||||
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
|
||||
export function getStorybook(): IStoribookSection[];
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"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.1",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.1",
|
||||
"@storybook/addons": "^3.4.0-alpha.1",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.1",
|
||||
"@storybook/core": "^3.4.0-alpha.1",
|
||||
"@storybook/ui": "^3.4.0-alpha.1",
|
||||
"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,21 +42,24 @@
|
||||
"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",
|
||||
"css-loader": "^0.28.1",
|
||||
"css-loader": "^0.28.8",
|
||||
"express": "^4.15.3",
|
||||
"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,18 +71,19 @@
|
||||
"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.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.6",
|
||||
"url-loader": "^0.5.8",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.1.0",
|
||||
"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": {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { InjectionToken } from "@angular/core";
|
||||
import { NgStory } from "./types";
|
||||
import { InjectionToken } from '@angular/core';
|
||||
import { NgStory } from './types';
|
||||
|
||||
export const STORY = new InjectionToken<NgStory>("story");
|
||||
export const STORY = new InjectionToken<NgStory>('story');
|
||||
|
||||
@ -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: 'app-root',
|
||||
template: '<ng-template #target></ng-template>'
|
||||
selector: 'storybook-dynamic-app-root',
|
||||
template: '<ng-template #target></ng-template>',
|
||||
})
|
||||
export class AppComponent implements AfterViewInit, OnDestroy {
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('target', { read: ViewContainerRef })
|
||||
target: ViewContainerRef;
|
||||
constructor(
|
||||
private cfr: ComponentFactoryResolver,
|
||||
@Inject(STORY) private data: NgStory
|
||||
) {}
|
||||
constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
ngOnInit(): void {
|
||||
this.putInMyHtml();
|
||||
}
|
||||
|
||||
@ -49,20 +45,20 @@ export class AppComponent implements AfterViewInit, OnDestroy {
|
||||
/**
|
||||
* Set inputs and outputs
|
||||
*/
|
||||
private setProps(instance: any, {props = {}, propsMeta = {}}: NgStory): void {
|
||||
private setProps(instance: any, { props = {} }: NgStory): void {
|
||||
const changes: SimpleChanges = {};
|
||||
const hasNgOnChangesHook = _.has(instance, 'ngOnChanges');
|
||||
const hasNgOnChangesHook = !!instance['ngOnChanges'];
|
||||
|
||||
_.forEach(propsMeta, (meta, key) => {
|
||||
Object.keys(props).map((key: string) => {
|
||||
const value = props[key];
|
||||
const instanceProperty = <any>_.get(instance, key);
|
||||
const instanceProperty = instance[key];
|
||||
|
||||
if (!(instanceProperty instanceof EventEmitter) && !_.isUndefined(value)) {
|
||||
_.set(instance, key, value);
|
||||
if (!(instanceProperty instanceof EventEmitter) && !!value) {
|
||||
instance[key] = value;
|
||||
if (hasNgOnChangesHook) {
|
||||
changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
|
||||
}
|
||||
} else if (_.isFunction(value) && (key !== 'ngModelChange')) {
|
||||
} else if (typeof value === 'function' && key !== 'ngModelChange') {
|
||||
instanceProperty.subscribe(value);
|
||||
}
|
||||
});
|
||||
@ -76,8 +72,8 @@ export class AppComponent implements AfterViewInit, OnDestroy {
|
||||
* Issue: [https://github.com/angular/angular/issues/8903]
|
||||
*/
|
||||
private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
|
||||
if (!_.isEmpty(changes)) {
|
||||
_.invoke(instance, 'ngOnChanges', changes);
|
||||
if (!!Object.keys(changes).length) {
|
||||
instance.ngOnChanges(changes);
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,12 +81,12 @@ export class AppComponent implements AfterViewInit, OnDestroy {
|
||||
* If component implements ControlValueAccessor interface try to set ngModel
|
||||
*/
|
||||
private setNgModel(instance: any, props: ICollection): void {
|
||||
if (_.has(props, 'ngModel')) {
|
||||
_.invoke(instance, 'writeValue', props.ngModel);
|
||||
if (!!props['ngModel']) {
|
||||
instance.writeValue(props.ngModel);
|
||||
}
|
||||
|
||||
if (_.isFunction(props.ngModelChange)) {
|
||||
_.invoke(instance, 'registerOnChange', props.ngModelChange);
|
||||
if (typeof props.ngModelChange === 'function') {
|
||||
instance.registerOnChange(props.ngModelChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
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: "app-root",
|
||||
selector: 'storybook-dynamic-app-root',
|
||||
template: `
|
||||
<div class="main">
|
||||
<h1>{{ error.message }}</h1>
|
||||
@ -40,9 +40,9 @@ import { NgError } from "../types";
|
||||
width: 100vw;
|
||||
overflow: auto;
|
||||
}
|
||||
`
|
||||
]
|
||||
`,
|
||||
],
|
||||
})
|
||||
export class ErrorComponent {
|
||||
constructor(@Inject(STORY) public error: NgError) {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component } from "@angular/core";
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
template: "<p>No Preview Available!</p>"
|
||||
selector: 'storybook-dynamic-app-root',
|
||||
template: '<p>No Preview Available!</p>',
|
||||
})
|
||||
export class NoPreviewComponent {}
|
||||
|
||||
@ -1,45 +1,35 @@
|
||||
import {
|
||||
Type,
|
||||
enableProdMode,
|
||||
NgModule,
|
||||
Component,
|
||||
NgModuleRef
|
||||
} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms'
|
||||
|
||||
import { enableProdMode, NgModule, Component, NgModuleRef, Type } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { AppComponent } from './components/app.component';
|
||||
import { ErrorComponent } from './components/error.component';
|
||||
import { NoPreviewComponent } from './components/no-preview.component';
|
||||
import { STORY } from './app.token';
|
||||
import { getAnnotations, getParameters, getPropMetadata } from './utils';
|
||||
import { NgModuleMetadata, NgStory, IGetStoryWithContext, IContext, NgProvidedData } from './types';
|
||||
import {
|
||||
NgModuleMetadata,
|
||||
IGetStoryWithContext,
|
||||
IContext,
|
||||
NgProvidedData,
|
||||
IRenderErrorFn,
|
||||
IRenderStoryFn,
|
||||
} from './types';
|
||||
|
||||
let platform: any = null;
|
||||
let promises: Promise<NgModuleRef<any>>[] = [];
|
||||
|
||||
type IRenderStoryFn = (story: IGetStoryWithContext, context: IContext, reRender?: boolean) => void;
|
||||
type IRenderErrorFn = (error: Error) => void;
|
||||
|
||||
interface IModule extends Type<any> {
|
||||
annotations: any[];
|
||||
}
|
||||
interface IComponent extends Type<any> {
|
||||
annotations: any[];
|
||||
parameters: any[];
|
||||
propsMetadata: any[]
|
||||
}
|
||||
|
||||
// Taken from https://davidwalsh.name/javascript-debounce-function
|
||||
// We don't want to pull underscore
|
||||
const debounce = (func: IRenderStoryFn | IRenderErrorFn,
|
||||
wait: number = 100,
|
||||
immediate: boolean = false): () => void => {
|
||||
const debounce = (
|
||||
func: IRenderStoryFn | IRenderErrorFn,
|
||||
wait: number = 100,
|
||||
immediate: boolean = false
|
||||
): (() => void) => {
|
||||
let timeout: any;
|
||||
return function () {
|
||||
const context = this, args = arguments;
|
||||
const later = function () {
|
||||
return function() {
|
||||
const context = this,
|
||||
args = arguments;
|
||||
const later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
@ -54,113 +44,57 @@ const debounce = (func: IRenderStoryFn | IRenderErrorFn,
|
||||
};
|
||||
};
|
||||
|
||||
const getComponentMetadata = (
|
||||
{ component, props = {}, propsMeta = {}, moduleMetadata = {
|
||||
imports: [],
|
||||
schemas: [],
|
||||
declarations: [],
|
||||
providers: []
|
||||
} }: NgStory
|
||||
const getModule = (
|
||||
declarations: Array<Type<any> | any[]>,
|
||||
entryComponents: Array<Type<any> | any[]>,
|
||||
bootstrap: Array<Type<any> | any[]>,
|
||||
data: NgProvidedData,
|
||||
moduleMetadata: NgModuleMetadata
|
||||
) => {
|
||||
if (!component || typeof component !== 'function') {
|
||||
throw new Error('No valid component provided');
|
||||
}
|
||||
|
||||
const componentMetadata = getAnnotations(component)[0] || {};
|
||||
const propsMetadata = getPropMetadata(component);
|
||||
const paramsMetadata = getParameters(component);
|
||||
|
||||
Object.keys(propsMeta).map(key => {
|
||||
(<any>propsMetadata)[key] = (<any>propsMeta)[key];
|
||||
});
|
||||
|
||||
const {
|
||||
imports = [],
|
||||
schemas = [],
|
||||
declarations = [],
|
||||
providers = []
|
||||
} = moduleMetadata;
|
||||
|
||||
return {
|
||||
component,
|
||||
props,
|
||||
componentMeta: componentMetadata,
|
||||
propsMeta: propsMetadata,
|
||||
params: paramsMetadata,
|
||||
moduleMeta: {
|
||||
imports,
|
||||
schemas,
|
||||
declarations,
|
||||
providers
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const getAnnotatedComponent = (meta: NgModule,
|
||||
component: any,
|
||||
propsMeta: { [p: string]: any },
|
||||
params: any[]): IComponent => {
|
||||
const NewComponent: any = function NewComponent(...args: any[]) {
|
||||
component.call(this, ...args);
|
||||
const moduleMeta = {
|
||||
declarations: [...declarations, ...(moduleMetadata.declarations || [])],
|
||||
imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
|
||||
providers: [
|
||||
{ provide: STORY, useValue: Object.assign({}, data) },
|
||||
...(moduleMetadata.providers || []),
|
||||
],
|
||||
entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
|
||||
schemas: [...(moduleMetadata.schemas || [])],
|
||||
bootstrap: [...bootstrap],
|
||||
};
|
||||
|
||||
NewComponent.prototype = Object.create(component.prototype);
|
||||
NewComponent.annotations = [new Component(meta)];
|
||||
NewComponent.parameters = params;
|
||||
NewComponent.propsMetadata = propsMeta;
|
||||
const moduleClass = class DynamicModule {};
|
||||
|
||||
return NewComponent;
|
||||
return NgModule(moduleMeta)(moduleClass);
|
||||
};
|
||||
|
||||
const getModule = (declarations: Array<Type<any> | any[]>,
|
||||
entryComponents: Array<Type<any> | any[]>,
|
||||
bootstrap: Array<Type<any> | any[]>,
|
||||
data: NgProvidedData,
|
||||
moduleMetadata: NgModuleMetadata = {
|
||||
imports: [],
|
||||
schemas: [],
|
||||
declarations: [],
|
||||
providers: []
|
||||
}): IModule => {
|
||||
const moduleMeta = new NgModule({
|
||||
declarations: [...declarations, ...moduleMetadata.declarations],
|
||||
imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
|
||||
providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
|
||||
entryComponents: [...entryComponents],
|
||||
schemas: [...moduleMetadata.schemas],
|
||||
bootstrap: [...bootstrap]
|
||||
});
|
||||
const createComponentFromTemplate = (template: string): Function => {
|
||||
const componentClass = class DynamicComponent {};
|
||||
|
||||
const NewModule: any = function NewModule() {};
|
||||
(<IModule>NewModule).annotations = [moduleMeta];
|
||||
return NewModule;
|
||||
return Component({
|
||||
template: template,
|
||||
})(componentClass);
|
||||
};
|
||||
|
||||
const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRender: boolean): IModule => {
|
||||
const {
|
||||
component,
|
||||
componentMeta,
|
||||
props,
|
||||
propsMeta,
|
||||
params,
|
||||
moduleMeta
|
||||
} = getComponentMetadata(currentStory(context));
|
||||
const initModule = (
|
||||
currentStory: IGetStoryWithContext,
|
||||
context: IContext,
|
||||
reRender: boolean
|
||||
): Function => {
|
||||
const storyObj = currentStory(context);
|
||||
const { component, template, props, moduleMetadata = {} } = storyObj;
|
||||
|
||||
if (!componentMeta) {
|
||||
throw new Error('No component metadata available');
|
||||
let AnnotatedComponent;
|
||||
|
||||
if (template) {
|
||||
AnnotatedComponent = createComponentFromTemplate(template);
|
||||
} else {
|
||||
AnnotatedComponent = component;
|
||||
}
|
||||
|
||||
const AnnotatedComponent = getAnnotatedComponent(
|
||||
componentMeta,
|
||||
component,
|
||||
propsMeta,
|
||||
[...params, ...moduleMeta.providers.map(provider => [provider])]
|
||||
);
|
||||
|
||||
const story = {
|
||||
component: AnnotatedComponent,
|
||||
props,
|
||||
propsMeta
|
||||
};
|
||||
|
||||
return getModule(
|
||||
@ -168,39 +102,38 @@ 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();
|
||||
} catch (e) {}
|
||||
|
||||
platform = platformBrowserDynamic();
|
||||
promises.push(platform.bootstrapModule(newModule))
|
||||
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('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);
|
||||
|
||||
@ -1,28 +1,40 @@
|
||||
|
||||
export interface NgModuleMetadata {
|
||||
declarations: Array<any>,
|
||||
imports: Array<any>,
|
||||
schemas: Array<any>,
|
||||
providers: Array<any>,
|
||||
declarations?: Array<any>;
|
||||
entryComponents?: Array<any>;
|
||||
imports?: Array<any>;
|
||||
schemas?: Array<any>;
|
||||
providers?: Array<any>;
|
||||
}
|
||||
|
||||
export interface ICollection {[p: string]: any}
|
||||
export interface ICollection {
|
||||
[p: string]: any;
|
||||
}
|
||||
|
||||
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 IGetStoryWithContext = (context: IContext) => NgStory;
|
||||
|
||||
export type IRenderStoryFn = (
|
||||
story: IGetStoryWithContext,
|
||||
context: IContext,
|
||||
reRender?: boolean
|
||||
) => void;
|
||||
export type IRenderErrorFn = (error: Error) => void;
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import { ɵReflectionCapabilities } from '@angular/core';
|
||||
|
||||
const reflectionCapabilities = new ɵReflectionCapabilities();
|
||||
|
||||
function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
|
||||
if (!name2) {
|
||||
name2 = name1;
|
||||
name1 = `__${name1}__`;
|
||||
}
|
||||
|
||||
if (component[name1]) {
|
||||
return component[name1];
|
||||
}
|
||||
|
||||
if (component[name2]) {
|
||||
return component[name2];
|
||||
}
|
||||
|
||||
return (<any>window)['Reflect'].getMetadata(name2, component) || defaultValue;
|
||||
}
|
||||
|
||||
export function getAnnotations(component: any) {
|
||||
return getMeta(component, ['annotations'], []);
|
||||
}
|
||||
|
||||
export function getPropMetadata(component: any) {
|
||||
return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
|
||||
}
|
||||
|
||||
export function getParameters(component: any) {
|
||||
const params = reflectionCapabilities.parameters(component);
|
||||
|
||||
if (!params || !params[0]) {
|
||||
return getMeta(component, ['parameters'], []);
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'button-component',
|
||||
selector: 'storybook-button-component',
|
||||
template: `
|
||||
<button (click)="onClick.emit($event);">{{ text }}</button>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
`
|
||||
button {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
@ -16,10 +16,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
`
|
||||
]
|
||||
`,
|
||||
],
|
||||
})
|
||||
export default class ButtonComponent {
|
||||
@Input() text = '';
|
||||
@Output() onClick = new EventEmitter<any>();
|
||||
}
|
||||
@Input() text = '';
|
||||
@Output() onClick = new EventEmitter<any>();
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'welcome-component',
|
||||
selector: 'storybook-welcome-component',
|
||||
template: `
|
||||
<main>
|
||||
<h1>Welcome to storybook</h1>
|
||||
@ -15,7 +15,8 @@ import { Component } from '@angular/core';
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called <span class="inline-code">Button</span> .
|
||||
See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called
|
||||
<span class="inline-code">Button</span> .
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
@ -38,12 +39,13 @@ import { Component } from '@angular/core';
|
||||
<p class="note">
|
||||
<b>NOTE:</b>
|
||||
<br />
|
||||
Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack loaders and plugins you are using in this project.
|
||||
Have a look at the <span class="inline-code">.storybook/webpack.config.js</span>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</main>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
`
|
||||
main {
|
||||
margin: 15px;
|
||||
max-width: 600;
|
||||
@ -71,9 +73,9 @@ import { Component } from '@angular/core';
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
`
|
||||
]
|
||||
`,
|
||||
],
|
||||
})
|
||||
export default class WelcomeComponent {
|
||||
displayName = 'Welcome';
|
||||
}
|
||||
displayName = 'Welcome';
|
||||
}
|
||||
|
||||
2
app/angular/src/server/build.js
vendored
2
app/angular/src/server/build.js
vendored
@ -56,7 +56,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
// NOTE changes to env should be done before calling `getBaseConfig`
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
|
||||
const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
|
||||
config.output.path = path.resolve(outputDir);
|
||||
|
||||
// copy all static files
|
||||
|
||||
4
app/angular/src/server/config.js
vendored
4
app/angular/src/server/config.js
vendored
@ -2,6 +2,7 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import loadBabelConfig from './babel_config';
|
||||
import loadTsConfig from './ts_config';
|
||||
|
||||
// avoid ESLint errors
|
||||
const logger = console;
|
||||
@ -15,6 +16,9 @@ export default function(configType, baseConfig, configDir) {
|
||||
const babelConfig = loadBabelConfig(configDir);
|
||||
config.module.rules[0].query = babelConfig;
|
||||
|
||||
const tsOptions = loadTsConfig(configDir);
|
||||
config.module.rules[1].loaders[0].options = tsOptions;
|
||||
|
||||
// Check whether a config.js file exists inside the storybook
|
||||
// config directory and throw an error if it's not.
|
||||
const storybookConfigPath = path.resolve(configDir, 'config.js');
|
||||
|
||||
2
app/angular/src/server/config/utils.js
vendored
2
app/angular/src/server/config/utils.js
vendored
@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
|
||||
'process.env': env,
|
||||
};
|
||||
}
|
||||
|
||||
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
|
||||
|
||||
@ -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$/,
|
||||
|
||||
@ -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')],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -14,6 +14,6 @@
|
||||
<%= htmlWebpackPlugin.options.data.previewHead %>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<storybook-dynamic-app-root></storybook-dynamic-app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
app/angular/src/server/index.js
vendored
2
app/angular/src/server/index.js
vendored
@ -120,8 +120,6 @@ if (!hasCustomFavicon) {
|
||||
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
|
||||
}
|
||||
|
||||
// Build the webpack configuration using the `baseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const configDir = program.configDir || './.storybook';
|
||||
|
||||
// The repository info is sent to the storybook while running on
|
||||
|
||||
2
app/angular/src/server/middleware.js
vendored
2
app/angular/src/server/middleware.js
vendored
@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
|
||||
export default function(configDir) {
|
||||
// Build the webpack configuration using the `getBaseConfig`
|
||||
// custom `.babelrc` file and `webpack.config.js` files
|
||||
const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
|
||||
const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
|
||||
const middlewareFn = getMiddleware(configDir);
|
||||
|
||||
// remove the leading '/'
|
||||
|
||||
27
app/angular/src/server/ts_config.js
vendored
Normal file
27
app/angular/src/server/ts_config.js
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
// avoid ESLint errors
|
||||
const logger = console;
|
||||
|
||||
function resolveTsConfig(tsConfigPath) {
|
||||
if (!fs.existsSync(tsConfigPath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
logger.info('=> Found custom tsconfig.json');
|
||||
|
||||
return tsConfigPath;
|
||||
}
|
||||
|
||||
export default function(configDir) {
|
||||
const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
|
||||
|
||||
if (!configFile) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
configFile,
|
||||
};
|
||||
}
|
||||
32
app/angular/src/server/ts_config.test.js
Normal file
32
app/angular/src/server/ts_config.test.js
Normal file
@ -0,0 +1,32 @@
|
||||
import loadTsConfig from './ts_config';
|
||||
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
resolve: () => 'tsconfig.json',
|
||||
}));
|
||||
|
||||
const setupFiles = files => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
describe('ts_config', () => {
|
||||
it('should return the config with the path to the tsconfig.json', () => {
|
||||
setupFiles({ 'tsconfig.json': '{}' });
|
||||
|
||||
const config = loadTsConfig('.foo');
|
||||
|
||||
expect(config).toEqual({
|
||||
configFile: 'tsconfig.json',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return empty object when there is no tsconfig.json', () => {
|
||||
setupFiles({});
|
||||
|
||||
const config = loadTsConfig('.foo');
|
||||
|
||||
expect(config).toEqual({});
|
||||
});
|
||||
});
|
||||
@ -1,135 +0,0 @@
|
||||
{
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"arrow-return-shorthand": true,
|
||||
"callable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"curly": true,
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-over-type-literal": true,
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-super": true,
|
||||
"no-empty": false,
|
||||
"no-empty-interface": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-misused-new": true,
|
||||
"no-non-null-assertion": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-string-throw": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unnecessary-initializer": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"prefer-const": true,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"typeof-compare": true,
|
||||
"unified-signatures": true,
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-access-missing-member": true,
|
||||
"templates-use-public": true,
|
||||
"invoke-injectable": true
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,2 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -25,13 +25,13 @@
|
||||
"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-websocket": "^3.3.3",
|
||||
"@storybook/core": "^3.3.3",
|
||||
"@storybook/ui": "^3.3.3",
|
||||
"autoprefixer": "^7.2.4",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.1",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.1",
|
||||
"@storybook/addons": "^3.4.0-alpha.1",
|
||||
"@storybook/channel-websocket": "^3.4.0-alpha.1",
|
||||
"@storybook/core": "^3.4.0-alpha.1",
|
||||
"@storybook/ui": "^3.4.0-alpha.1",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
|
||||
@ -47,8 +47,8 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"commander": "^2.12.2",
|
||||
"css-loader": "^0.28.7",
|
||||
"commander": "^2.13.0",
|
||||
"css-loader": "^0.28.8",
|
||||
"express": "^4.16.2",
|
||||
"file-loader": "^1.1.6",
|
||||
"find-cache-dir": "^1.0.0",
|
||||
@ -60,9 +60,9 @@
|
||||
"prop-types": "^15.6.0",
|
||||
"react-native-compat": "^1.0.0",
|
||||
"react-native-iphone-x-helper": "^1.0.1",
|
||||
"shelljs": "^0.7.8",
|
||||
"shelljs": "^0.8.0",
|
||||
"style-loader": "^0.19.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.6",
|
||||
"url-loader": "^0.6.2",
|
||||
"url-parse": "^1.1.9",
|
||||
"util-deprecate": "^1.0.2",
|
||||
@ -73,11 +73,11 @@
|
||||
"ws": "^3.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-native": "^0.51.0"
|
||||
"react-native": "^0.52.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0",
|
||||
"react": "*",
|
||||
"react-native": ">=0.27.0"
|
||||
"react-native": "0.52.0"
|
||||
}
|
||||
}
|
||||
|
||||
4
app/react-native/src/bin/storybook-start.js
vendored
4
app/react-native/src/bin/storybook-start.js
vendored
@ -75,10 +75,10 @@ if (!program.skipPackager) {
|
||||
);
|
||||
}
|
||||
|
||||
let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
|
||||
let cliCommand = 'react-native start';
|
||||
if (program.haul) {
|
||||
const platform = program.platform || 'all';
|
||||
cliCommand = `node node_modules/haul/bin/cli.js start --config ${
|
||||
cliCommand = `haul start --config ${
|
||||
program.haul
|
||||
} --platform ${platform}`;
|
||||
}
|
||||
|
||||
@ -37,6 +37,9 @@ const getConfig = options => {
|
||||
ie8: false,
|
||||
mangle: false,
|
||||
warnings: false,
|
||||
compress: {
|
||||
keep_fnames: true,
|
||||
},
|
||||
output: {
|
||||
comments: false,
|
||||
},
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
|
||||
"bugs": {
|
||||
@ -23,16 +23,16 @@
|
||||
"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/client-logger": "^3.3.3",
|
||||
"@storybook/core": "^3.3.3",
|
||||
"@storybook/node-logger": "^3.3.3",
|
||||
"@storybook/ui": "^3.3.3",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.1",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.1",
|
||||
"@storybook/addons": "^3.4.0-alpha.1",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.1",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.1",
|
||||
"@storybook/core": "^3.4.0-alpha.1",
|
||||
"@storybook/node-logger": "^3.4.0-alpha.1",
|
||||
"@storybook/ui": "^3.4.0-alpha.1",
|
||||
"airbnb-js-shims": "^1.4.0",
|
||||
"autoprefixer": "^7.2.4",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-react-docgen": "^1.8.0",
|
||||
"babel-plugin-transform-regenerator": "^6.26.0",
|
||||
@ -45,11 +45,11 @@
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"chalk": "^2.3.0",
|
||||
"commander": "^2.12.2",
|
||||
"common-tags": "^1.6.0",
|
||||
"commander": "^2.13.0",
|
||||
"common-tags": "^1.7.2",
|
||||
"configstore": "^3.1.1",
|
||||
"core-js": "^2.5.3",
|
||||
"css-loader": "^0.28.7",
|
||||
"css-loader": "^0.28.8",
|
||||
"dotenv-webpack": "^1.5.4",
|
||||
"express": "^4.16.2",
|
||||
"file-loader": "^1.1.6",
|
||||
@ -57,13 +57,13 @@
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.2",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.1",
|
||||
"html-loader": "^0.5.4",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"json-loader": "^0.5.7",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"json5": "^0.5.1",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
"markdown-loader": "^2.0.1",
|
||||
"markdown-loader": "^2.0.2",
|
||||
"npmlog": "^4.1.2",
|
||||
"postcss-flexbugs-fixes": "^3.2.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
@ -72,9 +72,9 @@
|
||||
"redux": "^3.7.2",
|
||||
"request": "^2.83.0",
|
||||
"serve-favicon": "^2.4.5",
|
||||
"shelljs": "^0.7.8",
|
||||
"shelljs": "^0.8.0",
|
||||
"style-loader": "^0.19.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.6",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.1.0",
|
||||
@ -83,7 +83,7 @@
|
||||
"webpack-hot-middleware": "^2.21.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^1.14.7"
|
||||
"nodemon": "^1.14.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0",
|
||||
|
||||
@ -54,7 +54,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
|
||||
|
||||
@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
|
||||
'process.env': env,
|
||||
};
|
||||
}
|
||||
|
||||
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
|
||||
|
||||
@ -5,19 +5,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: {
|
||||
@ -38,7 +31,7 @@ export default function() {
|
||||
filename: 'index.html',
|
||||
chunks: ['manager'],
|
||||
data: {
|
||||
managerHead: getManagerHeadHtml(getConfigDir()),
|
||||
managerHead: getManagerHeadHtml(configDir),
|
||||
version,
|
||||
},
|
||||
template: require.resolve('../index.html.ejs'),
|
||||
@ -47,7 +40,7 @@ export default function() {
|
||||
filename: 'iframe.html',
|
||||
excludeChunks: ['manager'],
|
||||
data: {
|
||||
previewHead: getPreviewHeadHtml(getConfigDir()),
|
||||
previewHead: getPreviewHeadHtml(configDir),
|
||||
},
|
||||
template: require.resolve('../iframe.html.ejs'),
|
||||
}),
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
@ -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 '/'
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
|
||||
"bugs": {
|
||||
@ -23,14 +23,14 @@
|
||||
"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.1",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.1",
|
||||
"@storybook/addons": "^3.4.0-alpha.1",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.1",
|
||||
"@storybook/core": "^3.4.0-alpha.1",
|
||||
"@storybook/ui": "^3.4.0-alpha.1",
|
||||
"airbnb-js-shims": "^1.4.0",
|
||||
"autoprefixer": "^7.2.4",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-react-docgen": "^1.8.0",
|
||||
"babel-plugin-transform-regenerator": "^6.26.0",
|
||||
@ -43,20 +43,22 @@
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.1",
|
||||
"chalk": "^2.3.0",
|
||||
"commander": "^2.12.2",
|
||||
"common-tags": "^1.6.0",
|
||||
"commander": "^2.13.0",
|
||||
"common-tags": "^1.7.2",
|
||||
"configstore": "^3.1.1",
|
||||
"core-js": "^2.5.3",
|
||||
"css-loader": "^0.28.7",
|
||||
"css-loader": "^0.28.8",
|
||||
"dotenv-webpack": "^1.5.4",
|
||||
"express": "^4.16.2",
|
||||
"file-loader": "^1.1.6",
|
||||
"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.7",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"json5": "^0.5.1",
|
||||
"markdown-loader": "^2.0.2",
|
||||
"postcss-flexbugs-fixes": "^3.2.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"prop-types": "^15.6.0",
|
||||
@ -66,9 +68,9 @@
|
||||
"redux": "^3.7.2",
|
||||
"request": "^2.83.0",
|
||||
"serve-favicon": "^2.4.5",
|
||||
"shelljs": "^0.7.8",
|
||||
"shelljs": "^0.8.0",
|
||||
"style-loader": "^0.19.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.6",
|
||||
"url-loader": "^0.6.2",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.1.0",
|
||||
@ -79,15 +81,15 @@
|
||||
"webpack-hot-middleware": "^2.21.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^1.14.7",
|
||||
"nodemon": "^1.14.11",
|
||||
"vue": "^2.5.13",
|
||||
"vue-loader": "^13.6.2",
|
||||
"vue-loader": "^13.7.0",
|
||||
"vue-template-compiler": "^2.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-core": "^6.26.0 || ^7.0.0-0",
|
||||
"vue": "2.5.13",
|
||||
"vue-loader": "13.6.2",
|
||||
"vue-loader": "13.7.0",
|
||||
"vue-template-compiler": "2.5.13"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
|
||||
'process.env': env,
|
||||
};
|
||||
}
|
||||
|
||||
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
|
||||
|
||||
@ -4,19 +4,12 @@ import Dotenv from 'dotenv-webpack';
|
||||
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 { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
import { version } from '../../../package.json';
|
||||
|
||||
export default function() {
|
||||
export default function(configDir) {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
@ -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'),
|
||||
}),
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
@ -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 '/'
|
||||
|
||||
@ -12,4 +12,4 @@ yarn storybook
|
||||
|
||||
### Edit Documentation
|
||||
|
||||
Documentation is written in Markdown and located inside the [`pages/`](pages/) directory.
|
||||
Documentation is written in Markdown and located inside the [`docs/src/pages`](https://github.com/storybooks/storybook/tree/master/docs/src/pages) directory.
|
||||
|
||||
@ -18,10 +18,10 @@
|
||||
"storybook": "start-storybook -p 9009 -s src/pages"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.3.3",
|
||||
"@storybook/addon-links": "^3.3.3",
|
||||
"@storybook/addons": "^3.3.3",
|
||||
"@storybook/react": "^3.3.3",
|
||||
"@storybook/addon-actions": "^3.3.8",
|
||||
"@storybook/addon-links": "^3.3.8",
|
||||
"@storybook/addons": "^3.3.8",
|
||||
"@storybook/react": "^3.3.8",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
@ -31,27 +31,27 @@
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"bootstrap": "^3.3.7",
|
||||
"gatsby": "^1.9.149",
|
||||
"gatsby-link": "^1.6.32",
|
||||
"gatsby": "^1.9.154",
|
||||
"gatsby-link": "^1.6.34",
|
||||
"gatsby-plugin-sharp": "^1.6.24",
|
||||
"gatsby-remark-autolink-headers": "^1.4.11",
|
||||
"gatsby-remark-copy-linked-files": "^1.5.25",
|
||||
"gatsby-remark-images": "^1.5.36",
|
||||
"gatsby-remark-smartypants": "^1.4.10",
|
||||
"gatsby-source-filesystem": "^1.5.11",
|
||||
"gatsby-transformer-remark": "^1.7.26",
|
||||
"gatsby-transformer-remark": "^1.7.28",
|
||||
"gh-pages": "^1.1.0",
|
||||
"global": "^4.3.2",
|
||||
"highlight.js": "^9.12.0",
|
||||
"lodash": "^4.17.2",
|
||||
"marked": "^0.3.7",
|
||||
"marked": "^0.3.12",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^15.6.1",
|
||||
"react-document-title": "^2.0.3",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-helmet": "^5.0.3",
|
||||
"react-router": "^4.2.0",
|
||||
"react-stack-grid": "^0.7.0",
|
||||
"react-stack-grid": "^0.7.1",
|
||||
"sitemap": "^1.12.0"
|
||||
},
|
||||
"private": true
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
* * *
|
||||
|
||||
---
|
||||
id: 'addon-gallery'
|
||||
|
||||
## title: 'Addon Gallery'
|
||||
title: 'Addon Gallery'
|
||||
---
|
||||
|
||||
This is a list of available addons for Storybook.
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
* * *
|
||||
|
||||
---
|
||||
id: 'api'
|
||||
|
||||
## title: 'API'
|
||||
title: 'API'
|
||||
---
|
||||
|
||||
## Core Addon API
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ We are going to use an addon called [Notes](https://github.com/storybooks/storyb
|
||||
First, we need to install the addons:
|
||||
|
||||
```sh
|
||||
npm i --save-dev @storybook/addon-actions @storybook/addon-links @storybook/addon-notes
|
||||
npm i --save-dev @storybook-addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes
|
||||
```
|
||||
|
||||
Then, we need to create a file called `addons.js` inside the storybook config directory and add the following content:
|
||||
|
||||
@ -17,7 +17,7 @@ In this guide, we are trying to set up Storybook for your Angular project.
|
||||
## Table of contents
|
||||
|
||||
- [Create Angular project](#create-angular-project)
|
||||
- [Add @storybook/angular](#add-storybookangular)
|
||||
- [Add @storybook/angular and babel-core](#add-storybookangular-and-babel-core)
|
||||
- [Create the config file](#create-the-config-file)
|
||||
- [Write your stories](#write-your-stories)
|
||||
- [Run your Storybook](#run-your-storybook)
|
||||
@ -32,12 +32,12 @@ ng new your-angular-prj
|
||||
cd your-angular-prj
|
||||
```
|
||||
|
||||
## Add @storybook/angular
|
||||
## Add @storybook/angular and babel-core
|
||||
|
||||
Next, install `@storybook/angular` to your project:
|
||||
Next, install `@storybook/angular` and `babel-core` (it's a peerDependency) to your project:
|
||||
|
||||
```sh
|
||||
npm i --save-dev @storybook/angular
|
||||
npm i --save-dev @storybook/angular babel-core
|
||||
```
|
||||
|
||||
Then add the following NPM script to your package json in order to start the storybook later in this guide:
|
||||
@ -63,19 +63,19 @@ To do that, simply create a file at `.storybook/config.js` with the following co
|
||||
import { configure } from '@storybook/angular';
|
||||
|
||||
function loadStories() {
|
||||
require('../stories/index.ts');
|
||||
require('../src/stories/index.ts');
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
```
|
||||
|
||||
That'll load stories in `../stories/index.ts`.
|
||||
That'll load stories in `../src/stories/index.ts`.
|
||||
|
||||
Just like that, you can load stories from wherever you want to.
|
||||
|
||||
## Write your stories
|
||||
|
||||
Now you can write some stories inside the `../stories/index.ts` file, like this:
|
||||
Now you can write some stories inside the `../src/stories/index.ts` file, like this:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
|
||||
@ -16,7 +16,7 @@ In this guide, we are trying to set up Storybook for your React project.
|
||||
## Table of contents
|
||||
|
||||
- [Add @storybook/react](#add-storybookreact)
|
||||
- [Add react and react-dom](#add-react-and-react-dom)
|
||||
- [Add react, react-dom, and babel-core](#add-react-react-dom-and-babel-core)
|
||||
- [Create the config file](#create-the-config-file)
|
||||
- [Write your stories](#write-your-stories)
|
||||
- [Run your Storybook](#run-your-storybook)
|
||||
@ -29,12 +29,13 @@ First of all, you need to add `@storybook/react` to your project. To do that, si
|
||||
npm i --save-dev @storybook/react
|
||||
```
|
||||
|
||||
## Add react and react-dom
|
||||
## Add react, react-dom, and babel-core
|
||||
|
||||
Make sure that you have `react` and `react-dom` in your dependencies as well because we list these as a peerDependency:
|
||||
Make sure that you have `react`, `react-dom`, and `babel-core` in your dependencies as well because we list these as a peerDependency:
|
||||
|
||||
```sh
|
||||
npm i --save react react-dom
|
||||
npm i --save-dev babel-core
|
||||
```
|
||||
|
||||
Then add the following NPM script to your package json in order to start the storybook later in this guide:
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
* * *
|
||||
|
||||
---
|
||||
id: 'guide-vue'
|
||||
|
||||
## title: 'Storybook for Vue'
|
||||
title: 'Storybook for Vue'
|
||||
---
|
||||
|
||||
You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
|
||||
|
||||
@ -18,7 +17,7 @@ In this guide, we are trying to set up Storybook for your Vue project.
|
||||
## Table of contents
|
||||
|
||||
- [Add @storybook/vue](#add-storybookvue)
|
||||
- [Add vue](#add-vue)
|
||||
- [Add vue and babel-core](#add-vue-and-babel-core)
|
||||
- [Create the NPM script](#create-the-npm-script)
|
||||
- [Create the config file](#create-the-config-file)
|
||||
- [Write your stories](#write-your-stories)
|
||||
@ -32,12 +31,13 @@ First of all, you need to add `@storybook/vue` to your project. To do that, simp
|
||||
npm i --save-dev @storybook/vue
|
||||
```
|
||||
|
||||
## Add vue
|
||||
## Add vue and babel-core
|
||||
|
||||
Make sure that you have `vue` in your dependencies as well because we list is as a peerDependency:
|
||||
Make sure that you have `vue` and `babel-core` in your dependencies as well because we list is as a peerDependency:
|
||||
|
||||
```sh
|
||||
npm i --save vue
|
||||
npm i --save-dev babel-core
|
||||
```
|
||||
|
||||
## Create the NPM script
|
||||
|
||||
@ -38,7 +38,7 @@ Since this config file stays in the Storybook directory, you need to set the inc
|
||||
|
||||
You also need to install the loaders (style, css, and sass) used in above config manually.
|
||||
|
||||
> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/configurations/default-config/) other than loading JS files with the Babel loader.
|
||||
> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/configurations/default-config/) other than loading JS files with the Babel loader. This will disable included functionality like svg loading. Read on to learn how to [retain defaults](#full-control-mode--default).
|
||||
|
||||
### Supported Webpack Options
|
||||
|
||||
|
||||
@ -139,3 +139,9 @@ fyndiq-ui:
|
||||
description: Fyndiq UI Component library
|
||||
source: https://github.com/fyndiq/fyndiq-ui
|
||||
demo: https://fyndiq.github.io/fyndiq-ui/
|
||||
gumgum:
|
||||
thumbnail: ./thumbnails/gumgum.png
|
||||
title: GumGum
|
||||
description: GumGum (Computer Vision Company) Component library
|
||||
demo: https://storybook.gumgum.com
|
||||
site: https://gumgum.com
|
||||
|
||||
BIN
docs/src/pages/examples/thumbnails/gumgum.png
Normal file
BIN
docs/src/pages/examples/thumbnails/gumgum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
272
docs/yarn.lock
272
docs/yarn.lock
@ -2,9 +2,9 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@storybook/addon-actions@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.3.tgz#468e3426eb8f109825d9b41bf77f206711fa74b3"
|
||||
"@storybook/addon-actions@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.8.tgz#7efa3d639b35f5b7540ed5befd2fbd80bc49e821"
|
||||
dependencies:
|
||||
deep-equal "^1.0.1"
|
||||
global "^4.3.2"
|
||||
@ -13,37 +13,37 @@
|
||||
react-inspector "^2.2.2"
|
||||
uuid "^3.1.0"
|
||||
|
||||
"@storybook/addon-links@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.3.tgz#b5fe29f3aa3d5fe812aa9d47240846bf4d040ad1"
|
||||
"@storybook/addon-links@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.8.tgz#d760952951c1f51eef280ceb091505d7af84bfb6"
|
||||
dependencies:
|
||||
"@storybook/components" "^3.3.3"
|
||||
"@storybook/components" "^3.3.8"
|
||||
global "^4.3.2"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
"@storybook/addons@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.3.tgz#968d98a61957bc30db642b43924c3332dbaec40e"
|
||||
"@storybook/addons@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.8.tgz#2e36fdc0c03fb6eb9d2245fea1311ee7aaafbf0e"
|
||||
|
||||
"@storybook/channel-postmessage@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.3.tgz#d3c1a6da0b9bb111eb410419788d2609924f894b"
|
||||
"@storybook/channel-postmessage@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.8.tgz#249a25e6f8c1c59e229ecec71a545c8127d59ab8"
|
||||
dependencies:
|
||||
"@storybook/channels" "^3.3.3"
|
||||
"@storybook/channels" "^3.3.8"
|
||||
global "^4.3.2"
|
||||
json-stringify-safe "^5.0.1"
|
||||
|
||||
"@storybook/channels@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.3.tgz#ee9a496f984a41c0b12b523a1375d21e1f05eb7d"
|
||||
"@storybook/channels@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.8.tgz#3989a77c57ae6bf29bc2dcd9a82f364225f595ba"
|
||||
|
||||
"@storybook/client-logger@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.3.tgz#3fd2a8dc243d9d3d2f171f7a02f58c805c409385"
|
||||
"@storybook/client-logger@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.8.tgz#58fc42e31ba10fc54380b324fbb8a16c76370398"
|
||||
|
||||
"@storybook/components@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.3.tgz#a01adb8eb065a9e9627d85d7268deb270b57d2de"
|
||||
"@storybook/components@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.8.tgz#850737561c1d97cfba003ed060db8f0cdf448c94"
|
||||
dependencies:
|
||||
glamor "^2.20.40"
|
||||
glamorous "^4.11.2"
|
||||
@ -57,9 +57,9 @@
|
||||
"@storybook/react-simple-di" "^1.2.1"
|
||||
babel-runtime "6.x.x"
|
||||
|
||||
"@storybook/node-logger@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.3.tgz#e22e29a27fc440ea58134e36a85d5a38eca2ee6e"
|
||||
"@storybook/node-logger@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.8.tgz#b528bebb5d74156cf51e2c6424ba6da653adefe2"
|
||||
dependencies:
|
||||
chalk "^2.3.0"
|
||||
npmlog "^4.1.2"
|
||||
@ -87,17 +87,17 @@
|
||||
dependencies:
|
||||
babel-runtime "^6.5.0"
|
||||
|
||||
"@storybook/react@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.3.tgz#fd7f41fa897b82af09bb4026cfbad9684901cbe1"
|
||||
"@storybook/react@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.8.tgz#c7d3d4bb20d5ed281f73b118ccb2a22cd91eb0e8"
|
||||
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/client-logger" "^3.3.3"
|
||||
"@storybook/node-logger" "^3.3.3"
|
||||
"@storybook/ui" "^3.3.3"
|
||||
"@storybook/addon-actions" "^3.3.8"
|
||||
"@storybook/addon-links" "^3.3.8"
|
||||
"@storybook/addons" "^3.3.8"
|
||||
"@storybook/channel-postmessage" "^3.3.8"
|
||||
"@storybook/client-logger" "^3.3.8"
|
||||
"@storybook/node-logger" "^3.3.8"
|
||||
"@storybook/ui" "^3.3.8"
|
||||
airbnb-js-shims "^1.4.0"
|
||||
autoprefixer "^7.2.3"
|
||||
babel-loader "^7.1.2"
|
||||
@ -116,7 +116,7 @@
|
||||
common-tags "^1.6.0"
|
||||
configstore "^3.1.1"
|
||||
core-js "^2.5.3"
|
||||
css-loader "^0.28.7"
|
||||
css-loader "^0.28.8"
|
||||
dotenv-webpack "^1.5.4"
|
||||
express "^4.16.2"
|
||||
file-loader "^1.1.6"
|
||||
@ -124,7 +124,7 @@
|
||||
glamor "^2.20.40"
|
||||
glamorous "^4.11.2"
|
||||
global "^4.3.2"
|
||||
html-loader "^0.5.1"
|
||||
html-loader "^0.5.4"
|
||||
html-webpack-plugin "^2.30.1"
|
||||
json-loader "^0.5.7"
|
||||
json-stringify-safe "^5.0.1"
|
||||
@ -141,7 +141,7 @@
|
||||
serve-favicon "^2.4.5"
|
||||
shelljs "^0.7.8"
|
||||
style-loader "^0.19.1"
|
||||
uglifyjs-webpack-plugin "^1.1.5"
|
||||
uglifyjs-webpack-plugin "^1.1.6"
|
||||
url-loader "^0.6.2"
|
||||
util-deprecate "^1.0.2"
|
||||
uuid "^3.1.0"
|
||||
@ -149,11 +149,11 @@
|
||||
webpack-dev-middleware "^1.12.2"
|
||||
webpack-hot-middleware "^2.21.0"
|
||||
|
||||
"@storybook/ui@^3.3.3":
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.3.tgz#c8eb95a1734c654e082d3909f665ae00ad472d94"
|
||||
"@storybook/ui@^3.3.8":
|
||||
version "3.3.8"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.8.tgz#fc9e9f3da3d988da8b6e07f78e1f6db0a5c6e1dd"
|
||||
dependencies:
|
||||
"@storybook/components" "^3.3.3"
|
||||
"@storybook/components" "^3.3.8"
|
||||
"@storybook/mantra-core" "^1.7.2"
|
||||
"@storybook/react-komposer" "^2.0.3"
|
||||
babel-runtime "^6.26.0"
|
||||
@ -254,6 +254,10 @@ ajv-keywords@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
|
||||
|
||||
ajv-keywords@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
|
||||
|
||||
ajv@^4.9.1:
|
||||
version "4.11.8"
|
||||
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
|
||||
@ -300,12 +304,6 @@ ansi-html@0.0.7:
|
||||
version "0.0.7"
|
||||
resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
|
||||
|
||||
ansi-red@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
|
||||
dependencies:
|
||||
ansi-wrap "0.1.0"
|
||||
|
||||
ansi-regex@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
|
||||
@ -324,10 +322,6 @@ ansi-styles@^3.1.0:
|
||||
dependencies:
|
||||
color-convert "^1.9.0"
|
||||
|
||||
ansi-wrap@0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
|
||||
|
||||
ansi@^0.3.0, ansi@~0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi/-/ansi-0.3.1.tgz#0c42d4fb17160d5a9af1e484bace1c66922c1b21"
|
||||
@ -2100,9 +2094,9 @@ bytes@3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
|
||||
|
||||
cacache@^10.0.0:
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.1.tgz#3e05f6e616117d9b54665b1b20c8aeb93ea5d36f"
|
||||
cacache@^10.0.1:
|
||||
version "10.0.2"
|
||||
resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.2.tgz#105a93a162bbedf3a25da42e1939ed99ffb145f8"
|
||||
dependencies:
|
||||
bluebird "^3.5.0"
|
||||
chownr "^1.0.1"
|
||||
@ -2446,10 +2440,6 @@ code-point-at@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
|
||||
|
||||
coffee-script@^1.12.4:
|
||||
version "1.12.7"
|
||||
resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
|
||||
|
||||
collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
|
||||
@ -2876,22 +2866,22 @@ css-loader@^0.26.1:
|
||||
postcss-modules-values "^1.1.0"
|
||||
source-list-map "^0.1.7"
|
||||
|
||||
css-loader@^0.28.7:
|
||||
version "0.28.7"
|
||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
|
||||
css-loader@^0.28.8:
|
||||
version "0.28.8"
|
||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5"
|
||||
dependencies:
|
||||
babel-code-frame "^6.11.0"
|
||||
babel-code-frame "^6.26.0"
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
cssnano ">=2.6.1 <4"
|
||||
cssnano "^3.10.0"
|
||||
icss-utils "^2.1.0"
|
||||
loader-utils "^1.0.2"
|
||||
lodash.camelcase "^4.3.0"
|
||||
object-assign "^4.0.1"
|
||||
object-assign "^4.1.1"
|
||||
postcss "^5.0.6"
|
||||
postcss-modules-extract-imports "^1.0.0"
|
||||
postcss-modules-local-by-default "^1.0.1"
|
||||
postcss-modules-scope "^1.0.0"
|
||||
postcss-modules-values "^1.1.0"
|
||||
postcss-modules-extract-imports "^1.1.0"
|
||||
postcss-modules-local-by-default "^1.2.0"
|
||||
postcss-modules-scope "^1.1.0"
|
||||
postcss-modules-values "^1.3.0"
|
||||
postcss-value-parser "^3.3.0"
|
||||
source-list-map "^2.0.0"
|
||||
|
||||
@ -2924,7 +2914,7 @@ cssesc@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
|
||||
|
||||
"cssnano@>=2.6.1 <4":
|
||||
"cssnano@>=2.6.1 <4", cssnano@^3.10.0:
|
||||
version "3.10.0"
|
||||
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
|
||||
dependencies:
|
||||
@ -3613,7 +3603,7 @@ es6-template-strings@^2.0.0:
|
||||
es5-ext "^0.10.12"
|
||||
esniff "^1.1"
|
||||
|
||||
es6-templates@^0.2.2:
|
||||
es6-templates@^0.2.3:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
|
||||
dependencies:
|
||||
@ -4357,9 +4347,9 @@ gatsby-cli@^1.1.28:
|
||||
yargs "^8.0.2"
|
||||
yurnalist "^0.2.1"
|
||||
|
||||
gatsby-link@^1.6.30, gatsby-link@^1.6.32:
|
||||
version "1.6.32"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.32.tgz#49114e5fc649f274254953e06bfaafebb296ccb8"
|
||||
gatsby-link@^1.6.34:
|
||||
version "1.6.34"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.34.tgz#c1ce57cfcb2f693128b2a7d0eff3dde0c6cefec4"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
prop-types "^15.5.8"
|
||||
@ -4389,9 +4379,9 @@ gatsby-plugin-sharp@^1.6.24:
|
||||
sharp "^0.17.3"
|
||||
svgo "^0.7.2"
|
||||
|
||||
gatsby-react-router-scroll@^1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.7.tgz#50be2d6d3857625eb087c14f2a6789672fd73219"
|
||||
gatsby-react-router-scroll@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.8.tgz#6cc9d80c139e58ed5189dd35146ac37b46846cd5"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
scroll-behavior "^0.9.1"
|
||||
@ -4456,13 +4446,13 @@ gatsby-source-filesystem@^1.5.11:
|
||||
slash "^1.0.0"
|
||||
valid-url "^1.0.9"
|
||||
|
||||
gatsby-transformer-remark@^1.7.26:
|
||||
version "1.7.26"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.26.tgz#58c273517b6039489b183fc4194ad07ee46e71ff"
|
||||
gatsby-transformer-remark@^1.7.28:
|
||||
version "1.7.28"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.28.tgz#c99df9cf9d5fdb8a802168c1d49e32ce8be5895b"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
bluebird "^3.5.0"
|
||||
gray-matter "^2.1.0"
|
||||
gray-matter "^3.0.0"
|
||||
hast-util-to-html "^3.0.0"
|
||||
lodash "^4.17.4"
|
||||
mdast-util-to-hast "^2.4.0"
|
||||
@ -4478,9 +4468,9 @@ gatsby-transformer-remark@^1.7.26:
|
||||
unist-util-select "^1.5.0"
|
||||
unist-util-visit "^1.1.1"
|
||||
|
||||
gatsby@^1.9.149:
|
||||
version "1.9.149"
|
||||
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.149.tgz#4c0f776b634a8c291254abedae22e6265bfbcde4"
|
||||
gatsby@^1.9.154:
|
||||
version "1.9.154"
|
||||
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.154.tgz#d4eb3385d88483c8f434a0275374c4c995f685c2"
|
||||
dependencies:
|
||||
async "^2.1.2"
|
||||
babel-code-frame "^6.22.0"
|
||||
@ -4521,9 +4511,9 @@ gatsby@^1.9.149:
|
||||
fs-extra "^4.0.1"
|
||||
gatsby-1-config-css-modules "^1.0.8"
|
||||
gatsby-cli "^1.1.28"
|
||||
gatsby-link "^1.6.30"
|
||||
gatsby-link "^1.6.34"
|
||||
gatsby-module-loader "^1.0.9"
|
||||
gatsby-react-router-scroll "^1.0.7"
|
||||
gatsby-react-router-scroll "^1.0.8"
|
||||
glob "^7.1.1"
|
||||
graphql "^0.11.7"
|
||||
graphql-relay "^0.5.1"
|
||||
@ -4577,6 +4567,7 @@ gatsby@^1.9.149:
|
||||
style-loader "^0.13.0"
|
||||
type-of "^2.0.1"
|
||||
url-loader "^0.5.7"
|
||||
v8-compile-cache "^1.1.0"
|
||||
webpack "^1.13.3"
|
||||
webpack-configurator "^0.3.0"
|
||||
webpack-dev-middleware "^1.8.4"
|
||||
@ -4903,15 +4894,14 @@ graphql@^0.11.3, graphql@^0.11.7:
|
||||
dependencies:
|
||||
iterall "1.1.3"
|
||||
|
||||
gray-matter@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
|
||||
gray-matter@^3.0.0:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-3.1.1.tgz#101f80d9e69eeca6765cdce437705b18f40876ac"
|
||||
dependencies:
|
||||
ansi-red "^0.1.1"
|
||||
coffee-script "^1.12.4"
|
||||
extend-shallow "^2.0.1"
|
||||
js-yaml "^3.8.1"
|
||||
toml "^2.3.2"
|
||||
js-yaml "^3.10.0"
|
||||
kind-of "^5.0.2"
|
||||
strip-bom-string "^1.0.0"
|
||||
|
||||
gulp-decompress@^1.2.0:
|
||||
version "1.2.0"
|
||||
@ -5213,17 +5203,17 @@ html-entities@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
|
||||
|
||||
html-loader@^0.5.1:
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.1.tgz#4f1e8396a1ea6ab42bedc987dfac058070861ebe"
|
||||
html-loader@^0.5.4:
|
||||
version "0.5.4"
|
||||
resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.4.tgz#70f36e30a923cc52536fdc812cec6f556aeb47a4"
|
||||
dependencies:
|
||||
es6-templates "^0.2.2"
|
||||
es6-templates "^0.2.3"
|
||||
fastparse "^1.1.1"
|
||||
html-minifier "^3.0.1"
|
||||
loader-utils "^1.0.2"
|
||||
object-assign "^4.1.0"
|
||||
html-minifier "^3.5.8"
|
||||
loader-utils "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
html-minifier@^3.0.1, html-minifier@^3.2.3:
|
||||
html-minifier@^3.2.3, html-minifier@^3.5.8:
|
||||
version "3.5.8"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
|
||||
dependencies:
|
||||
@ -5993,7 +5983,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
|
||||
|
||||
js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.2, js-yaml@^3.8.1:
|
||||
js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.2:
|
||||
version "3.10.0"
|
||||
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
|
||||
dependencies:
|
||||
@ -6630,14 +6620,14 @@ markdown-table@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
|
||||
|
||||
marked@^0.3.12:
|
||||
version "0.3.12"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
|
||||
|
||||
marked@^0.3.6:
|
||||
version "0.3.9"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.9.tgz#54ce6a57e720c3ac6098374ec625fcbcc97ff290"
|
||||
|
||||
marked@^0.3.7:
|
||||
version "0.3.7"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.7.tgz#80ef3bbf1bd00d1c9cfebe42ba1b8c85da258d0d"
|
||||
|
||||
math-expression-evaluator@^1.2.14:
|
||||
version "1.2.17"
|
||||
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
|
||||
@ -8159,21 +8149,27 @@ postcss-modules-extract-imports@^1.0.0:
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-local-by-default@^1.0.1:
|
||||
postcss-modules-extract-imports@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
|
||||
dependencies:
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-scope@^1.0.0:
|
||||
postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
|
||||
dependencies:
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-values@^1.1.0:
|
||||
postcss-modules-values@^1.1.0, postcss-modules-values@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
|
||||
dependencies:
|
||||
@ -8763,9 +8759,9 @@ react-split-pane@^0.1.74:
|
||||
prop-types "^15.5.10"
|
||||
react-style-proptype "^3.0.0"
|
||||
|
||||
react-stack-grid@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-stack-grid/-/react-stack-grid-0.7.0.tgz#396109b811ae8a43920ce8b67421ed9978a8b677"
|
||||
react-stack-grid@^0.7.1:
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/react-stack-grid/-/react-stack-grid-0.7.1.tgz#cbf7353ce6c2acf712b827c36b0be234af84bee9"
|
||||
dependencies:
|
||||
easy-css-transform-builder "^0.0.2"
|
||||
exenv "^1.2.1"
|
||||
@ -9543,6 +9539,13 @@ schema-utils@^0.3.0:
|
||||
dependencies:
|
||||
ajv "^5.0.0"
|
||||
|
||||
schema-utils@^0.4.2:
|
||||
version "0.4.3"
|
||||
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
|
||||
dependencies:
|
||||
ajv "^5.0.0"
|
||||
ajv-keywords "^2.1.0"
|
||||
|
||||
scroll-behavior@^0.9.1:
|
||||
version "0.9.4"
|
||||
resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.4.tgz#73b4a0eae3e59c0b8f3b6fc1ff78f054a513e79c"
|
||||
@ -10257,6 +10260,10 @@ strip-bom-stream@^1.0.0:
|
||||
first-chunk-stream "^1.0.0"
|
||||
strip-bom "^2.0.0"
|
||||
|
||||
strip-bom-string@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
|
||||
|
||||
strip-bom@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
|
||||
@ -10564,10 +10571,6 @@ to-regex@^3.0.1:
|
||||
extend-shallow "^2.0.1"
|
||||
regex-not "^1.0.0"
|
||||
|
||||
toml@^2.3.2:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.3.tgz#8d683d729577cb286231dfc7a8affe58d31728fb"
|
||||
|
||||
topo@2.x.x:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
|
||||
@ -10661,9 +10664,9 @@ ua-parser-js@^0.7.9:
|
||||
version "0.7.17"
|
||||
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
|
||||
|
||||
uglify-es@3.2.2:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.2.tgz#15c62b7775002c81b7987a1c49ecd3f126cace73"
|
||||
uglify-es@^3.3.4:
|
||||
version "3.3.4"
|
||||
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.4.tgz#2d592678791e5310456bbc95e952139e3b13167a"
|
||||
dependencies:
|
||||
commander "~2.12.1"
|
||||
source-map "~0.6.1"
|
||||
@ -10705,18 +10708,18 @@ uglifyjs-webpack-plugin@^0.4.6:
|
||||
uglify-js "^2.8.29"
|
||||
webpack-sources "^1.0.1"
|
||||
|
||||
uglifyjs-webpack-plugin@^1.1.5:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.5.tgz#5ec4a16da0fd10c96538f715caed10dbdb180875"
|
||||
uglifyjs-webpack-plugin@^1.1.6:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.6.tgz#f4ba8449edcf17835c18ba6ae99b9d610857fb19"
|
||||
dependencies:
|
||||
cacache "^10.0.0"
|
||||
cacache "^10.0.1"
|
||||
find-cache-dir "^1.0.0"
|
||||
schema-utils "^0.3.0"
|
||||
schema-utils "^0.4.2"
|
||||
serialize-javascript "^1.4.0"
|
||||
source-map "^0.6.1"
|
||||
uglify-es "3.2.2"
|
||||
webpack-sources "^1.0.1"
|
||||
worker-farm "^1.4.1"
|
||||
uglify-es "^3.3.4"
|
||||
webpack-sources "^1.1.0"
|
||||
worker-farm "^1.5.2"
|
||||
|
||||
uid-number@^0.0.6:
|
||||
version "0.0.6"
|
||||
@ -11025,6 +11028,10 @@ uws@~0.14.4:
|
||||
version "0.14.5"
|
||||
resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
|
||||
|
||||
v8-compile-cache@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-1.1.0.tgz#1dc2a340fb8e5f800a32bcdbfb8c23cd747021b9"
|
||||
|
||||
v8flags@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
|
||||
@ -11293,6 +11300,13 @@ webpack-sources@^1.0.1:
|
||||
source-list-map "^2.0.0"
|
||||
source-map "~0.5.3"
|
||||
|
||||
webpack-sources@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
|
||||
dependencies:
|
||||
source-list-map "^2.0.0"
|
||||
source-map "~0.6.1"
|
||||
|
||||
webpack-stats-plugin@^0.1.4:
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.1.5.tgz#29e5f12ebfd53158d31d656a113ac1f7b86179d9"
|
||||
@ -11421,7 +11435,7 @@ wordwrap@~0.0.2:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
|
||||
|
||||
worker-farm@^1.4.1:
|
||||
worker-farm@^1.5.2:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae"
|
||||
dependencies:
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
|
||||
import { configure } from '@storybook/angular';
|
||||
import addCssWarning from '../src/cssWarning';
|
||||
import '../src/assets/common.css'
|
||||
|
||||
addCssWarning();
|
||||
|
||||
function loadStories() {
|
||||
// put welcome screen at the top of the list so it's the first one displayed
|
||||
|
||||
10
examples/angular-cli/.storybook/tsconfig.json
Normal file
10
examples/angular-cli/.storybook/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"exclude": [
|
||||
"../src/test.ts",
|
||||
"../src/**/*.spec.ts"
|
||||
],
|
||||
"include": [
|
||||
"../src/**/*"
|
||||
]
|
||||
}
|
||||
@ -10,6 +10,6 @@ describe('ng5test App', () => {
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(<any>(page.getParagraphText())).toEqual('Welcome to app!');
|
||||
expect(<any>page.getParagraphText()).toEqual('Welcome to app!');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "3.3.3",
|
||||
"version": "3.4.0-alpha.1",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"storybook": "start-storybook -p 9008 -s src/assets",
|
||||
"build-storybook": "build-storybook -s src"
|
||||
@ -25,20 +24,20 @@
|
||||
"@angular/router": "^5.1.3",
|
||||
"core-js": "^2.4.1",
|
||||
"rxjs": "^5.4.2",
|
||||
"zone.js": "^0.8.19"
|
||||
"zone.js": "^0.8.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.6.3",
|
||||
"@angular/cli": "1.6.4",
|
||||
"@angular/compiler-cli": "^5.1.3",
|
||||
"@angular/language-service": "^5.1.3",
|
||||
"@storybook/addon-actions": "^3.3.3",
|
||||
"@storybook/addon-links": "^3.3.3",
|
||||
"@storybook/addon-notes": "^3.3.3",
|
||||
"@storybook/addons": "^3.3.3",
|
||||
"@storybook/angular": "^3.3.3",
|
||||
"@storybook/addon-actions": "^3.4.0-alpha.1",
|
||||
"@storybook/addon-links": "^3.4.0-alpha.1",
|
||||
"@storybook/addon-notes": "^3.4.0-alpha.1",
|
||||
"@storybook/addons": "^3.4.0-alpha.1",
|
||||
"@storybook/angular": "^3.4.0-alpha.1",
|
||||
"@types/jasmine": "~2.8.3",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "^3.1.2",
|
||||
"@types/node": "~6.0.96",
|
||||
"global": "^4.3.2",
|
||||
"jasmine-core": "~2.8.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~1.7.0",
|
||||
@ -49,7 +48,7 @@
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.2.2",
|
||||
"ts-node": "~3.3.0",
|
||||
"tslint": "~5.8.0",
|
||||
"typescript": "^2.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div class="hide" style="color: red; font-size: 30px; text-align: center;">
|
||||
This should be hidden, if not - scss is not loaded as needed.
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{title}}!
|
||||
|
||||
5
examples/angular-cli/src/app/app.component.scss
Normal file
5
examples/angular-cli/src/app/app.component.scss
Normal file
@ -0,0 +1,5 @@
|
||||
$display: none;
|
||||
|
||||
.hide {
|
||||
display: $display;
|
||||
}
|
||||
@ -4,30 +4,39 @@ import 'jasmine';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
beforeEach(
|
||||
async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [AppComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
);
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
it(
|
||||
'should create the app',
|
||||
async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
})
|
||||
);
|
||||
|
||||
it(`should have as title 'app'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app');
|
||||
}));
|
||||
it(
|
||||
`should have as title 'app'`,
|
||||
async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app');
|
||||
})
|
||||
);
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
|
||||
}));
|
||||
it(
|
||||
'should render title in a h1 tag',
|
||||
async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
selector: 'storybook-app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
styleUrls: ['./app.component.scss'],
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'app';
|
||||
|
||||
@ -4,13 +4,9 @@ import { NgModule } from '@angular/core';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
|
||||
3
examples/angular-cli/src/assets/common.css
Normal file
3
examples/angular-cli/src/assets/common.css
Normal file
@ -0,0 +1,3 @@
|
||||
.css-rules-warning {
|
||||
display: none;
|
||||
}
|
||||
10
examples/angular-cli/src/cssWarning.js
vendored
Normal file
10
examples/angular-cli/src/cssWarning.js
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
import { document } from 'global';
|
||||
|
||||
export default function addCssWarning() {
|
||||
const warning = document.createElement('h1');
|
||||
warning.textContent = 'CSS rules are not configured as needed';
|
||||
warning.className = 'css-rules-warning';
|
||||
warning.style.color = 'red';
|
||||
|
||||
document.body.insertBefore(warning, document.body.firstChild);
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
production: true,
|
||||
};
|
||||
|
||||
@ -4,5 +4,5 @@
|
||||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
production: false,
|
||||
};
|
||||
|
||||
@ -41,21 +41,16 @@
|
||||
import 'core-js/es6/reflect';
|
||||
import 'core-js/es7/reflect';
|
||||
|
||||
|
||||
/**
|
||||
* Required to support Web Animations `@angular/animation`.
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
|
||||
@ -7,8 +7,8 @@ storiesOf('Addon Actions', module)
|
||||
component: Button,
|
||||
props: {
|
||||
text: 'Action only',
|
||||
onClick: action('log 1')
|
||||
}
|
||||
onClick: action('log 1'),
|
||||
},
|
||||
}))
|
||||
.add('Action and method', () => ({
|
||||
component: Button,
|
||||
@ -18,6 +18,6 @@ storiesOf('Addon Actions', module)
|
||||
console.log(e);
|
||||
e.preventDefault();
|
||||
action('log2')(e.target);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -19,20 +19,22 @@ import { AllKnobsComponent } from './all-knobs.component';
|
||||
storiesOf('Addon Knobs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Simple', () => {
|
||||
const name = text('Name', 'John Doe');
|
||||
const age = number('Age', 44);
|
||||
const name = text('name', 'John Doe');
|
||||
const age = number('age', 44);
|
||||
const phoneNumber = text('phoneNumber', '555-55-55');
|
||||
|
||||
return {
|
||||
component: SimpleKnobsComponent,
|
||||
props: {
|
||||
name,
|
||||
age
|
||||
}
|
||||
age,
|
||||
phoneNumber,
|
||||
},
|
||||
};
|
||||
})
|
||||
.add('All knobs', () => {
|
||||
const name = text('Name', 'Jane');
|
||||
const stock = number('Stock', 20, {
|
||||
const name = text('name', 'Jane');
|
||||
const stock = number('stock', 20, {
|
||||
range: true,
|
||||
min: 0,
|
||||
max: 30,
|
||||
@ -43,13 +45,13 @@ storiesOf('Addon Knobs', module)
|
||||
bananas: 'Banana',
|
||||
cherries: 'Cherry',
|
||||
};
|
||||
const fruit = select('Fruit', fruits, 'apple');
|
||||
const price = number('Price', 2.25);
|
||||
const fruit = select('fruit', fruits, 'apple');
|
||||
const price = number('price', 2.25);
|
||||
|
||||
const border = color('Border', 'deeppink');
|
||||
const today = date('Today', new Date('Jan 20 2017'));
|
||||
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
|
||||
const nice = boolean('Nice', true);
|
||||
const border = color('border', 'deeppink');
|
||||
const today = date('today', new Date('Jan 20 2017'));
|
||||
const items = array('items', ['Laptop', 'Book', 'Whiskey']);
|
||||
const nice = boolean('nice', true);
|
||||
button('Arbitrary action', action('You clicked it!'));
|
||||
|
||||
return {
|
||||
@ -57,13 +59,12 @@ storiesOf('Addon Knobs', module)
|
||||
props: {
|
||||
name,
|
||||
stock,
|
||||
fruits,
|
||||
fruit,
|
||||
price,
|
||||
border,
|
||||
today,
|
||||
items,
|
||||
nice
|
||||
}
|
||||
nice,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@ storiesOf('Addon Notes', module)
|
||||
props: {
|
||||
text: 'Notes on some Button',
|
||||
onClick: () => {},
|
||||
}
|
||||
},
|
||||
}))
|
||||
)
|
||||
.add(
|
||||
@ -28,6 +28,6 @@ storiesOf('Addon Notes', module)
|
||||
props: {
|
||||
text: 'Notes with HTML',
|
||||
onClick: () => {},
|
||||
}
|
||||
},
|
||||
}))
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user