diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 9731c81d6927..000000000000 --- a/.babelrc +++ /dev/null @@ -1,53 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react", - "@babel/preset-flow" - ], - "plugins": [ - "babel-plugin-emotion", - "babel-plugin-macros", - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-export-default-from", - [ - "@babel/plugin-transform-runtime", - { - "regenerator": true - } - ] - ], - "env": { - "test": { - "plugins": ["babel-plugin-require-context-hook"] - } - }, - "overrides": [ - { - "test": "./examples/vue-kitchen-sink", - "presets": [ - "@babel/preset-env", - "babel-preset-vue" - ] - }, - { - "test": [ - "./lib/core/src/server", - "./lib/node-logger", - "./lib/codemod", - "./addons/storyshots", - "./addons/storysource/src/loader", - "./app/**/src/server/**" - ], - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": "8.11" - } - } - ] - ] - } - ] -} diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 000000000000..f7846f29ad20 --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,50 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', modules: false }], + '@babel/preset-react', + '@babel/preset-flow', + ], + plugins: [ + 'babel-plugin-emotion', + 'babel-plugin-macros', + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-object-rest-spread', + '@babel/plugin-proposal-export-default-from', + ], + env: { + test: { + presets: [['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage' }]], + plugins: ['babel-plugin-require-context-hook', 'babel-plugin-dynamic-import-node'], + }, + }, + overrides: [ + { + test: './examples/vue-kitchen-sink', + presets: ['babel-preset-vue'], + }, + { + test: [ + './lib/core/src/server', + './lib/node-logger', + './lib/codemod', + './addons/storyshots', + './addons/storysource/src/loader', + './app/**/src/server/**', + './app/**/src/bin/**', + './dangerfile.js', + ], + presets: [ + [ + '@babel/preset-env', + { + shippedProposals: true, + useBuiltIns: 'usage', + targets: { + node: '8.11', + }, + }, + ], + ], + }, + ], +}; diff --git a/.eslintignore b/.eslintignore index 6a611e8ec182..acaec38f0b07 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ dist +lib/**/dll build coverage node_modules diff --git a/.eslintrc.js b/.eslintrc.js index 52d06020fa45..941c65d84c56 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -123,6 +123,12 @@ module.exports = { ], }, overrides: [ + { + files: ['**/__tests__/**', '**/*.test.js/**', '**/*.spec.js/**'], + rules: { + 'import/no-extraneous-dependencies': ignore, + }, + }, { files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'], rules: { diff --git a/.gitignore b/.gitignore index a1bdccd96d11..0ed76d9dcdc0 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ integration/__image_snapshots__/__diff_output__ .jest-test-results.json /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/ lib/*.jar +lib/**/dll diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt index f18d4aaf8682..f609d196a3ea 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt @@ -17,6 +17,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({ addons/storyshots/*/dist/** => dist.zip/addons/storyshots app/*/dist/** => dist.zip/app lib/*/dist/** => dist.zip/lib + lib/core/dll/** => dist.zip/lib/core/dll """.trimIndent() vcs { diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt index 53ee4bd40753..2fe164bb30e9 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt @@ -12,10 +12,10 @@ object OpenSourceProjects_Storybook_Examples : BuildType({ name = "Examples" artifactRules = """ -${StorybookApp.values().map { it.artifactPath }.joinToString("\n")} -examples/official-storybook/storybook-static => official.zip -examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots -""".trimIndent() + ${StorybookApp.values().map { it.artifactPath }.joinToString("\n")} + examples/official-storybook/storybook-static => official.zip + examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots + """.trimIndent() vcs { root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster) diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt index 93a9b13b25d7..3f043631ceea 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt @@ -82,7 +82,9 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged: } artifacts { - artifactRules = "dist.zip!**" + artifactRules = """ + dist.zip!** + """.trimIndent() } } } diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md index 3fbeab75b068..ae7d66dc8422 100644 --- a/ADDONS_SUPPORT.md +++ b/ADDONS_SUPPORT.md @@ -15,6 +15,7 @@ |[links](addons/links) |+|+|+|+|+|+|+| |+|+|+| |[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+| |[options](addons/options) |+|+|+|+|+|+|+| |+|+|+| +|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+| |[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| | |[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+| |[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+| diff --git a/CHANGELOG.md b/CHANGELOG.md index a6348a30ddd1..1b94030049c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,181 @@ -# 4.1.0-alpha.1 +## 4.0.12 (December 5, 2018) + +### Bug Fixes + +* Addon-a11y: Fix runtime errors in older browsers ([#4904](https://github.com/storybooks/storybook/pull/4904)) + +## 4.1.0-alpha.11 (December 5, 2018) + +### Features + +* Add CRA TypeScript support for .storybook folder ([#4902](https://github.com/storybooks/storybook/pull/4902)) + +### Bug Fixes + +* React-native: Fix async storage ([#4907](https://github.com/storybooks/storybook/pull/4907)) +* Core: replace babel/runtime with core-js to fix some aliasing issues ([#4900](https://github.com/storybooks/storybook/pull/4900)) + +### Maintenance + +* Core: More granular methods separation in "build-static" and "build-dev" ([#4919](https://github.com/storybooks/storybook/pull/4919)) +* Examples: replace deprecated setOptions with withOptions ([#4899](https://github.com/storybooks/storybook/pull/4899)) + +## 4.0.11 (December 3, 2018) + +### Bug Fixes + +* Restore index.html in cra-kitchen-sink ([#4856](https://github.com/storybooks/storybook/pull/4856)) +* Add try, catch for IE11 as it breaks script execution ([#4870](https://github.com/storybooks/storybook/pull/4870)) + +## 4.0.10 (December 2, 2018) + +Fixes 4.0.9 + +### Bug Fixes + +* Core: Use correct cache directory path ([#4792](https://github.com/storybooks/storybook/pull/4792)) +* Addon-Info: fix docgen description display ([#4685](https://github.com/storybooks/storybook/pull/4685)) +* Addon-storyshots-puppeteer: fix peerDependencies ([#4828](https://github.com/storybooks/storybook/pull/4828)) + +## 4.1.0-alpha.10 (December 1, 2018) + +### Maintenance + +* Performance optimizations on separate manager preview split, improved cold start, restart & rebuild ([#4834](https://github.com/storybooks/storybook/pull/4834)) + +## 4.1.0-alpha.9 (November 29, 2018) + +### Features + +* UI: Accessible success/fail colors ([#4843](https://github.com/storybooks/storybook/pull/4843)) +* React-native: add option to set keyboarVerticalOffset ([#4862](https://github.com/storybooks/storybook/pull/4862)) +* Addon-CSSResources: new adddon to dynamically add/remove css ([#4622](https://github.com/storybooks/storybook/pull/4622)) + +### Bug Fixes + +* Core: Add try, catch for history API for IE11 ([#4870](https://github.com/storybooks/storybook/pull/4870)) +* Core: Don't copy index.html on build-storybook ([#4856](https://github.com/storybooks/storybook/pull/4856)) +* React-native: properly set initial story out of Async Storage. ([#4872](https://github.com/storybooks/storybook/pull/4872)) +* React-native: show webpack-related build issues ([#4883](https://github.com/storybooks/storybook/pull/4883)) +* Addon-info: fix docgen description display ([#4685](https://github.com/storybooks/storybook/pull/4685)) + +### Dependency Upgrades + +* Bump svelte to 2.15.3, addresses !4478 ([#4842](https://github.com/storybooks/storybook/pull/4842)) + +## 4.1.0-alpha.8 (November 25, 2018) + +### Features + +* React: use babel presets/plugins based on CRA. ([#4836](https://github.com/storybooks/storybook/pull/4836)) +* React-native: Add ability to filter story list ([#4806](https://github.com/storybooks/storybook/pull/4806)) + +### Bug Fixes + +* Core: Don't mangle production build ([#4838](https://github.com/storybooks/storybook/pull/4838)) +* HTML: Don't change rootElement when received node is the same ([#4822](https://github.com/storybooks/storybook/pull/4822)) + +### Maintenance + +* Fix snapshots to use "emotion/snapshot-serializer" ([#4837](https://github.com/storybooks/storybook/pull/4837)) + +## 4.1.0-alpha.7 (November 22, 2018) + +### Features + +* Add TypeScript support for react-scripts ([#4824](https://github.com/storybooks/storybook/pull/4824)) + +## 4.1.0-alpha.5/6 (November 22, 2018) + +Publish failed + +## 4.1.0-alpha.4 (November 21, 2018) + +### Features + +* ADD support for all versions of react ([#4808](https://github.com/storybooks/storybook/pull/4808)) + +### Bug Fixes + +* Use correct cache directory path ([#4792](https://github.com/storybooks/storybook/pull/4792)) + +## 4.0.9 (November 26, 2018) + +Broken release (see https://github.com/storybooks/storybook/issues/4897) + +## 4.0.8 (November 21, 2018) + +### Bug Fixes + +* Addon-knobs: Vue optimize on force render ([#4773](https://github.com/storybooks/storybook/pull/4773)) + +## 4.1.0-alpha.3 (November 15, 2018) + +### Maintenance + +* REFACTOR dev-serve to output less noise ([#4791](https://github.com/storybooks/storybook/pull/4791)) +* Separate manager and preview part.2 ([#4789](https://github.com/storybooks/storybook/pull/4789)) + +### Dependency Upgrades + +* Use alpha minify dependency to upgrade transitive lodash dependencies ([#4771](https://github.com/storybooks/storybook/pull/4771)) + +## 4.0.7 (November 15, 2018) + +### Bug Fixes + +* Vue/Angular/Mithril/Polymer: Add missing "forceReRender" and "addParameters" ([#4767](https://github.com/storybooks/storybook/pull/4767)) + +## 4.1.0-alpha.2 (November 13, 2018) + +### Features + +* Core: Interpolation for multiple environment variables ([#4761](https://github.com/storybooks/storybook/pull/4761)) +* UI: deep theming for stories nav panel ([#4702](https://github.com/storybooks/storybook/pull/4702)) +* React-native: Persist last displayed story, allow to set initial story. ([#4713](https://github.com/storybooks/storybook/pull/4713)) + +### Bug Fixes + +* Better a11y ([#4704](https://github.com/storybooks/storybook/pull/4704)) +* Remove z-index from vertical resizer ([#4651](https://github.com/storybooks/storybook/pull/4651)) +* React: Ensure @storybook/react can be imported in Node.js without errors ([#4757](https://github.com/storybooks/storybook/pull/4757)) + +### Maintenance + +* Core: separate manager from preview ([#4590](https://github.com/storybooks/storybook/pull/4590)) +* Add tests for custom react-scripts packages ([#4768](https://github.com/storybooks/storybook/pull/4768)) +* FIX deprecation warning from husky ([#4755](https://github.com/storybooks/storybook/pull/4755)) +* Tech/silent smoke tests ([#4749](https://github.com/storybooks/storybook/pull/4749)) + +### Dependency Upgrades + +* Bump lint-staged from 7.3.0 to 8.0.4 ([#4673](https://github.com/storybooks/storybook/pull/4673)) +* Bump svelte from 2.13.5 to 2.15.2 ([#4726](https://github.com/storybooks/storybook/pull/4726)) +* [Security] Bump cached-path-relative from 1.0.1 to 1.0.2 ([#4745](https://github.com/storybooks/storybook/pull/4745)) +* Update expo requirement from ^30.0.1 to ^31.0.4 in /examples-native/crna-kitchen-sink ([#4728](https://github.com/storybooks/storybook/pull/4728)) +* Bump @storybook/addon-links from 3.4.11 to 4.0.4 in /docs ([#4732](https://github.com/storybooks/storybook/pull/4732)) +* Bump react-syntax-highlighter from 9.0.1 to 10.0.0 ([#4654](https://github.com/storybooks/storybook/pull/4654)) +* Bump @angular/compiler from 7.0.1 to 7.0.2 ([#4677](https://github.com/storybooks/storybook/pull/4677)) +* Bump @types/jest from 23.3.8 to 23.3.9 ([#4658](https://github.com/storybooks/storybook/pull/4658)) +* Bump copy-webpack-plugin from 4.5.4 to 4.6.0 ([#4674](https://github.com/storybooks/storybook/pull/4674)) +* Bump @ngrx/store from 6.1.1 to 6.1.2 ([#4678](https://github.com/storybooks/storybook/pull/4678)) +* [Security] Bump merge from 1.2.0 to 1.2.1 ([#4686](https://github.com/storybooks/storybook/pull/4686)) + +## 4.0.6 (November 13, 2018) + +### Features + +* React: add support for custom `react-scripts` packages ([#4712](https://github.com/storybooks/storybook/pull/4712)) + +### Bug Fixes + +* Core: fix NODE_PATH is not being loaded from .env ([#4706](https://github.com/storybooks/storybook/pull/4706)) + +## 4.0.5 (November 13, 2018) + +Publish failed + +## 4.1.0-alpha.1 2018-November-06 @@ -16,11 +193,11 @@ - Bump @ngrx/store from 6.1.1 to 6.1.2 [#4678](https://github.com/storybooks/storybook/pull/4678) - [Security] Bump merge from 1.2.0 to 1.2.1 [#4686](https://github.com/storybooks/storybook/pull/4686) -# 4.1.0-alpha.0 +## 4.1.0-alpha.0 Publish failed -# 4.0.4 +## 4.0.4 2018-November-06 @@ -37,7 +214,7 @@ Publish failed - Bump react-syntax-highlighter from 9.0.1 to 10.0.0 [#4654](https://github.com/storybooks/storybook/pull/4654) - Remove SB deps from cli tests [#4705](https://github.com/storybooks/storybook/pull/4705) -# 4.0.3 +## 4.0.3 2018-November-06 @@ -95,7 +272,7 @@ Publish failed -# 4.0.2 +## 4.0.2 2018-October-31 @@ -105,13 +282,13 @@ Fix broken 4.0.1 release - Addon-knobs: fix select array values showing k [#4586](https://github.com/storybooks/storybook/pull/4586) -# 4.0.1 +## 4.0.1 2018-October-31 Broken release - `@storybook/client-logger` [somehow didn't get published to NPM.](https://github.com/storybooks/storybook/issues/4660) -# 4.0.0 +## 4.0.0 2018-October-29 @@ -147,7 +324,7 @@ Broken release - `@storybook/client-logger` [somehow didn't get published to NPM There are hundreds of more fixes, features, and tweaks in the 4.0 release. See changelogs for `4.0.0-rc.*` and `4.0.0-alpha.*` for details; check out our [migration guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c) for a walkthrough of how to upgrade or the [migration docs](https://github.com/storybooks/storybook/blob/master/MIGRATION.md#from-version-34x-to-40x) for an enumeration of breaking changes. -# 4.0.0-rc.6 +## 4.0.0-rc.6 2018-October-25 @@ -155,7 +332,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Upgrade react-komposer to 2.0.5 [#4547](https://github.com/storybooks/storybook/pull/4547) -# 4.0.0-rc.5 +## 4.0.0-rc.5 2018-October-25 @@ -163,7 +340,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Fix issue with `sb init` on the Vue CLI [#4535](https://github.com/storybooks/storybook/pull/4535) -# 4.0.0-rc.4 +## 4.0.0-rc.4 2018-October-25 @@ -188,7 +365,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Bump riot from 3.12.0 to 3.13.0 [#4511](https://github.com/storybooks/storybook/pull/4511) -# 4.0.0-rc.3 +## 4.0.0-rc.3 2018-October-23 @@ -203,7 +380,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - REMOVE emotion from demo components to make backwards compatibility easier && ADD demo components to official example [#4527](https://github.com/storybooks/storybook/pull/4527) - Exclude story files from angular app build [#4485](https://github.com/storybooks/storybook/pull/4485) -# 4.0.0-rc.2 +## 4.0.0-rc.2 2018-October-22 @@ -229,7 +406,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Bump jest-image-snapshot from 2.5.0 to 2.6.0 [#4494](https://github.com/storybooks/storybook/pull/4494) - Bump webpack from 4.20.2 to 4.21.0 [#4477](https://github.com/storybooks/storybook/pull/4477) -# 4.0.0-rc.1 +## 4.0.0-rc.1 2018-October-18 @@ -254,7 +431,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Bump marked from 0.4.0 to 0.5.1 in /docs [#4437](https://github.com/storybooks/storybook/pull/4437) - Bump highlight.js from 9.12.0 to 9.13.0 in /docs [#4440](https://github.com/storybooks/storybook/pull/4440) -# 4.0.0-rc.0 +## 4.0.0-rc.0 2018-October-15 @@ -285,7 +462,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Bump eslint-plugin-jest from 21.24.1 to 21.25.0 [#4424](https://github.com/storybooks/storybook/pull/4424) - Bump lazy-universal-dotenv from 1.9.1 to 2.0.0 [#4422](https://github.com/storybooks/storybook/pull/4422) -# 4.0.0-alpha.25 +## 4.0.0-alpha.25 2018-October-13 @@ -342,7 +519,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Bump husky from 1.1.1 to 1.1.2 [#4358](https://github.com/storybooks/storybook/pull/4358) - Tech/upgrades 5 [#4347](https://github.com/storybooks/storybook/pull/4347) -# 4.0.0-alpha.24 +## 4.0.0-alpha.24 2018-October-04 @@ -359,7 +536,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Addon-Notes: Fix how markdownOptions are passed to marked [#4242](https://github.com/storybooks/storybook/pull/4242) - Addon-Knobs: Fix broken colorpicker [#4222](https://github.com/storybooks/storybook/pull/4222) -# 4.0.0-alpha.23 +## 4.0.0-alpha.23 2018-September-25 @@ -378,7 +555,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Upgrade deps dealing with license issues [#4228](https://github.com/storybooks/storybook/pull/4228) - Use @emotion/snapshot-serializer [#4206](https://github.com/storybooks/storybook/pull/4206) -# 4.0.0-alpha.22 +## 4.0.0-alpha.22 2018-September-19 @@ -410,7 +587,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Updating react-split-pane to version 0.1.84 [#4153](https://github.com/storybooks/storybook/pull/4153) - Riot tag loader missing in cli [#4122](https://github.com/storybooks/storybook/pull/4122) -# 3.4.11 +## 3.4.11 2018-September-17 @@ -418,7 +595,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - Allow v1 or v2 in airbnb-js-shims [#4190](https://github.com/storybooks/storybook/pull/4190) -# 4.0.0-alpha.21 +## 4.0.0-alpha.21 2018-September-07 @@ -440,7 +617,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - \[WIP\] Refactor core and frameworks to work with presets [#4043](https://github.com/storybooks/storybook/pull/4043) - \[WIP\] presets - merge default babel configs [#4107](https://github.com/storybooks/storybook/pull/4107) -# 4.0.0-alpha.20 +## 4.0.0-alpha.20 2018-August-31 @@ -468,13 +645,13 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c - UPGRADE packages [#3996](https://github.com/storybooks/storybook/pull/3996) -# 4.0.0-alpha.19 +## 4.0.0-alpha.19 2018-August-31 Not published to NPM -# 4.0.0-alpha.18 +## 4.0.0-alpha.18 2018-August-25 @@ -488,7 +665,7 @@ Not published to NPM - Faster CircleCI [#4068](https://github.com/storybooks/storybook/pull/4068) -# 4.0.0-alpha.17 +## 4.0.0-alpha.17 2018-August-24 @@ -518,7 +695,7 @@ Not published to NPM - Fixed homepage links \[skip ci\] [#4008](https://github.com/storybooks/storybook/pull/4008) - CHANGE html-webpack-plugin for generate-page-plugin [#3919](https://github.com/storybooks/storybook/pull/3919) -# 4.0.0-alpha.16 +## 4.0.0-alpha.16 2018-August-06 @@ -537,7 +714,7 @@ Not published to NPM - More dependency upgrades (major version bumps) [#3957](https://github.com/storybooks/storybook/pull/3957) - UPGRADE all minor dependencies [#3954](https://github.com/storybooks/storybook/pull/3954) -# 4.0.0-alpha.15 +## 4.0.0-alpha.15 2018-August-03 @@ -571,7 +748,7 @@ Not published to NPM - Use react-dev-utils@next [#3852](https://github.com/storybooks/storybook/pull/3852) -# 3.4.10 +## 3.4.10 2018-August-03 @@ -582,7 +759,7 @@ NOTE: `3.4.9` publish failed - addons-jest: bug with the jest parameter [#3923](https://github.com/storybooks/storybook/pull/3923) - addon-info: fix copy button styling [#3896](https://github.com/storybooks/storybook/pull/3896) -# 4.0.0-alpha.14 +## 4.0.0-alpha.14 2018-July-11 @@ -590,7 +767,7 @@ NOTE: `3.4.9` publish failed - Upgrade universal-dotenv to fix core-js dependency [#3874](https://github.com/storybooks/storybook/pull/3874) -# 4.0.0-alpha.13 +## 4.0.0-alpha.13 2018-July-09 @@ -606,7 +783,7 @@ NOTE: `3.4.9` publish failed - Added a test for parameter combination [#3844](https://github.com/storybooks/storybook/pull/3844) -# 4.0.0-alpha.12 +## 4.0.0-alpha.12 2018-July-03 @@ -614,7 +791,7 @@ NOTE: `3.4.9` publish failed - Fix non-polyfilled themed UI components [#3829](https://github.com/storybooks/storybook/pull/3829) -# 4.0.0-alpha.11 +## 4.0.0-alpha.11 2018-July-02 @@ -629,7 +806,7 @@ NOTE: `3.4.9` publish failed - Marko: fix welcome component [#3796](https://github.com/storybooks/storybook/pull/3796) - Addon-a11y: Run analysis on demand [#3690](https://github.com/storybooks/storybook/pull/3690) -# 4.0.0-alpha.10 +## 4.0.0-alpha.10 2018-June-21 @@ -650,7 +827,7 @@ NOTE: `3.4.9` publish failed - Try to fix linter issues [#3748](https://github.com/storybooks/storybook/pull/3748) -# 3.4.8 +## 3.4.8 2018-June-21 @@ -659,7 +836,7 @@ NOTE: `3.4.9` publish failed - Fix centered addon for IE11 [#3735](https://github.com/storybooks/storybook/pull/3735) - Display functions as variables not invocations [#3761](https://github.com/storybooks/storybook/pull/3761) -# 4.0.0-alpha.9 +## 4.0.0-alpha.9 2018-June-10 @@ -788,7 +965,7 @@ NOTE: `3.4.9` publish failed -# 3.4.7 +## 3.4.7 2018-June-10 @@ -796,7 +973,7 @@ NOTE: `3.4.9` publish failed - Remove linebreaks in notes text when they are html elements [#3731](https://github.com/storybooks/storybook/pull/3731) -# 4.0.0-alpha.8 +## 4.0.0-alpha.8 2018-May-26 @@ -874,7 +1051,7 @@ NOTE: `3.4.9` publish failed -# 3.4.6 +## 3.4.6 2018-May-26 @@ -882,7 +1059,7 @@ NOTE: `3.4.9` publish failed - Addon-notes: Add classname to the container component to target with styles. [#3617](https://github.com/storybooks/storybook/pull/3617) -# 4.0.0-alpha.7 +## 4.0.0-alpha.7 2018-May-17 @@ -901,7 +1078,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon - Refactor transitional decorator from addon-notes [#3559](https://github.com/storybooks/storybook/pull/3559) -# 3.4.5 +## 3.4.5 2018-May-17 @@ -916,7 +1093,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon - Ignore any unstructured output from the package managers [#3563](https://github.com/storybooks/storybook/pull/3563) - Use the --use-npm flag also for version checking [#3535](https://github.com/storybooks/storybook/pull/3535) -# 4.0.0-alpha.6 +## 4.0.0-alpha.6 2018-May-12 @@ -940,11 +1117,11 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon - Clean out the store if `configure` fails [#3558](https://github.com/storybooks/storybook/pull/3558) - Fix render order in preview [#3520](https://github.com/storybooks/storybook/pull/3520) -# 4.0.0-alpha.5 +## 4.0.0-alpha.5 Broken release (@storybook/core-events had not been published publicly) -# 3.4.4 +## 3.4.4 2018-May-12 @@ -959,7 +1136,7 @@ Broken release (@storybook/core-events had not been published publicly) - jest-image-snapshot version to ^2.4.1 [#3500](https://github.com/storybooks/storybook/pull/3500) -# 4.0.0-alpha.4 +## 4.0.0-alpha.4 2018-April-27 @@ -1013,7 +1190,7 @@ Broken release (@storybook/core-events had not been published publicly) -# 3.4.3 +## 3.4.3 2018-April-27 @@ -1030,7 +1207,7 @@ Broken release (@storybook/core-events had not been published publicly) - Update webpack-hot-middleware to fix HMR [#3463](https://github.com/storybooks/storybook/pull/3463) -# 4.0.0-alpha.3 +## 4.0.0-alpha.3 2018-April-17 @@ -1163,7 +1340,7 @@ Also includes changes from 3.4.2 -# 3.4.2 +## 3.4.2 2018-April-17 @@ -1176,7 +1353,7 @@ Also includes changes from 3.4.2 - Fix storyshots readme for image snapshotting [#3397](https://github.com/storybooks/storybook/pull/3397) -# 4.0.0-alpha.2 +## 4.0.0-alpha.2 2018-April-10 @@ -1356,7 +1533,7 @@ Also includes changes from 3.4.1 -# 3.4.1 +## 3.4.1 2018-April-10 @@ -1375,7 +1552,7 @@ Also includes changes from 3.4.1 - Add typescript docs [#3361](https://github.com/storybooks/storybook/pull/3361) - Update links of the live examples for the new release [#3197](https://github.com/storybooks/storybook/pull/3197) -# 3.4.0 +## 3.4.0 2018-March-30 @@ -1472,7 +1649,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende - 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) -# 4.0.0-alpha.1 +## 4.0.0-alpha.1 2018-March-29 @@ -1480,7 +1657,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende - \[Hotfix\] Use published webpack 4 compatible fork of react-dev-utils [#3312](https://github.com/storybooks/storybook/pull/3312) -# 4.0.0-alpha.0 +## 4.0.0-alpha.0 2018-March-28 @@ -1590,7 +1767,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende -# 3.4.0-rc.4 +## 3.4.0-rc.4 2018-March-28 @@ -1603,7 +1780,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende - Fix storyshots renderer and serializer options [#3252](https://github.com/storybooks/storybook/pull/3252) - Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251) -# 3.4.0-rc.3 +## 3.4.0-rc.3 2018-March-19 @@ -1680,7 +1857,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende -# 3.4.0-rc.2 +## 3.4.0-rc.2 2018-March-13 @@ -1688,7 +1865,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - use exact versions for cross-dependencies between our own packages [#3183](https://github.com/storybooks/storybook/pull/3183) -# 3.4.0-rc.1 +## 3.4.0-rc.1 2018-March-13 @@ -1773,7 +1950,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.4.0-rc.0 +## 3.4.0-rc.0 2018-March-08 @@ -2040,7 +2217,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.15 +## 3.3.15 2018-March-07 @@ -2051,7 +2228,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Added missing key prop to NoTests component. [#3111](https://github.com/storybooks/storybook/pull/3111) - Events addon: fix React keys warning [#3072](https://github.com/storybooks/storybook/pull/3072) -# 3.4.0-alpha.9 +## 3.4.0-alpha.9 2018-February-22 @@ -2263,7 +2440,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.14 +## 3.3.14 2018-February-21 @@ -2276,7 +2453,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Use @storybook/podda to fix npm engine version in podda [#3033](https://github.com/storybooks/storybook/pull/3033) - Addon-backgrounds: set background on iframe instead of adding a wrapper in preview [#2807](https://github.com/storybooks/storybook/pull/3033) -# 3.4.0-alpha.8 +## 3.4.0-alpha.8 2018-February-11 @@ -2403,7 +2580,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.13 +## 3.3.13 2018-February-11 @@ -2412,7 +2589,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Angular: add rule for .md to webpack.config.prod.js [#2924](https://github.com/storybooks/storybook/pull/2924) - Check for correct props in Flow or prop-types [#2902](https://github.com/storybooks/storybook/pull/2902) -# 3.4.0-alpha.7 +## 3.4.0-alpha.7 2018-February-03 @@ -2523,7 +2700,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.12 +## 3.3.12 2018-February-02 @@ -2535,7 +2712,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Update url-loader from 0.5.8 to 0.6.2 in app/angular [#2847](https://github.com/storybooks/storybook/pull/2847) -# 3.4.0-alpha.6 +## 3.4.0-alpha.6 2018-January-27 @@ -2646,7 +2823,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.11 +## 3.3.11 2018-January-26 @@ -2654,7 +2831,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Angular: update helpers.ts [#2777](https://github.com/storybooks/storybook/pull/2777) -# 3.4.0-alpha.5 +## 3.4.0-alpha.5 2018-January-19 @@ -2786,7 +2963,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.10 +## 3.3.10 2018-January-19 @@ -2795,13 +2972,13 @@ Fix publishing options to use exact versions for cross-dependencies per this cha - Addon-backgrounds: remove redundant scrollbars [#2744](https://github.com/storybooks/storybook/pull/2744) - Addon-info: add keys for separator spans in OneOfType [#2743](https://github.com/storybooks/storybook/pull/2743) -# 3.4.0-alpha.4 +## 3.4.0-alpha.4 2018-January-13 Republish `3.4.0-alpha.3` due to potential publishing errors -# 3.4.0-alpha.3 +## 3.4.0-alpha.3 2018-January-13 @@ -2884,7 +3061,7 @@ Republish `3.4.0-alpha.3` due to potential publishing errors -# 3.3.9 +## 3.3.9 2018-January-13 @@ -2894,19 +3071,19 @@ Republish `3.4.0-alpha.3` due to potential publishing errors - Reflect the new peer dependencies in docs and CLI templates [#2714](https://github.com/storybooks/storybook/pull/2714) - Don't mangle function names for production builds [#2705](https://github.com/storybooks/storybook/pull/2705) -# 3.4.0-alpha.2 +## 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 +## 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 +## 3.4.0-alpha.1 2018-January-10 @@ -3031,7 +3208,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a -# 3.3.7 +## 3.3.7 2018-January-10 @@ -3045,7 +3222,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - 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 +## 3.3.6 2018-January-08 @@ -3053,7 +3230,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - Remove `src/` from remaining `.npmignore`s [#2678](https://github.com/storybooks/storybook/pull/2678) -# 3.3.5 +## 3.3.5 2018-January-08 @@ -3061,7 +3238,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - Remove src from individual .npmignore files [#2677](https://github.com/storybooks/storybook/pull/2677) -# 3.4.0-alpha.0 +## 3.4.0-alpha.0 2018-January-07 @@ -3177,7 +3354,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a -# 3.3.4 +## 3.3.4 2018-January-07 @@ -3223,7 +3400,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a -# 3.3.3 +## 3.3.3 2017-December-29 @@ -3244,7 +3421,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - Upgraded `@storybook/addons` in `/docs` from "3.2.18" to "3.3.1" [#2580](https://github.com/storybooks/storybook/pull/2580) - Upgraded `@storybook/react` in `/docs` from "3.2.18" to "3.3.1" [#2580](https://github.com/storybooks/storybook/pull/2580) -# 3.3.2 +## 3.3.2 2017-December-28 @@ -3278,7 +3455,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.4" to "1.1.5" [#2581](https://github.com/storybooks/storybook/pull/2581) - Upgraded `karma-coverage-istanbul-reporter` in `examples/angular-cli` from "1.3.1" to "1.3.3" [#2581](https://github.com/storybooks/storybook/pull/2581) -# 3.3.1 +## 3.3.1 2017-December-26 @@ -3290,7 +3467,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a - Add migration note about #2570 [#2571](https://github.com/storybooks/storybook/pull/2571) -# 3.3.0 +## 3.3.0 2017-December-26 @@ -3498,7 +3675,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.3.0-rc.1 +## 3.3.0-rc.1 2017-December-26 @@ -3543,7 +3720,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.3.0-rc.0 +## 3.3.0-rc.0 2017-December-23 @@ -3555,7 +3732,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - UPGRADE jest & react-native [#2542](https://github.com/storybooks/storybook/pull/2542) -# 3.3.0-alpha.6 +## 3.3.0-alpha.6 2017-December-23 @@ -3647,7 +3824,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.3.0-alpha.4 +## 3.3.0-alpha.4 2017-November-22 @@ -3656,7 +3833,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Fix HMR by saving the preview frame URL as the story changes [#2349](https://github.com/storybooks/storybook/pull/2349) - Fix CLI babel transpilation [#2350](https://github.com/storybooks/storybook/pull/2350) -# 3.3.0-alpha.3 +## 3.3.0-alpha.3 2017-November-07 @@ -3699,7 +3876,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - React-Native - Docs - Add Issues section for Android Emulator [#2078](https://github.com/storybooks/storybook/pull/2078) - Upgrade eslint-config-airbnb and make it pass [#2212](https://github.com/storybooks/storybook/pull/2212) -# 3.3.0-alpha.2 +## 3.3.0-alpha.2 2017-October-03 @@ -3751,7 +3928,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Add config for dependencies.io [#1770](https://github.com/storybooks/storybook/pull/1770) -# 3.3.0-alpha.0 +## 3.3.0-alpha.0 2017-September-06 @@ -3801,7 +3978,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795) - Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768) -# 3.2.19 +## 3.2.19 2017-December-23 @@ -3881,7 +4058,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.18 +## 3.2.18 2017-December-18 @@ -4055,7 +4232,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.17 +## 3.2.17 2017-December-03 @@ -4170,7 +4347,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.16 +## 3.2.16 2017-November-15 @@ -4228,7 +4405,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.15 +## 3.2.15 2017-November-10 @@ -4269,7 +4446,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.14 +## 3.2.14 2017-November-01 @@ -4320,7 +4497,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.13 +## 3.2.13 2017-October-20 @@ -4411,7 +4588,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.12 +## 3.2.12 2017-October-02 @@ -4457,7 +4634,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.11 +## 3.2.11 2017-September-27 @@ -4474,7 +4651,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Updated release process documentation [#1882](https://github.com/storybooks/storybook/pull/1882) -# 3.2.10 +## 3.2.10 2017-September-22 @@ -4513,7 +4690,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Smoke test master [#1801](https://github.com/storybooks/storybook/pull/1801) - Fixed Jest warnings [#1744](https://github.com/storybooks/storybook/pull/1744) -# 3.2.9 +## 3.2.9 2017-August-26 @@ -4533,7 +4710,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Update lerna to the latest version 🚀 [#1727](https://github.com/storybooks/storybook/pull/1727) -# 3.2.8 +## 3.2.8 2017-August-23 @@ -4546,7 +4723,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Add caveat about knobs date defaultValue [#1719](https://github.com/storybooks/storybook/pull/1719) -# 3.2.7 +## 3.2.7 2017-August-23 @@ -4562,7 +4739,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Enable eslint for vue-related stuff [#1715](https://github.com/storybooks/storybook/pull/1715) - CLI: ensure explicit dependency on `prop-types` for RN [#1714](https://github.com/storybooks/storybook/pull/1714) -# 3.2.6 +## 3.2.6 2017-August-22 @@ -4598,7 +4775,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Upgrade react-native-compat to avoid PropTypes warnings [#1673](https://github.com/storybooks/storybook/pull/1673) - Change React.PropTypes to prop-types [#1674](https://github.com/storybooks/storybook/pull/1674) [#1710](https://github.com/storybooks/storybook/pull/1710) -# 3.2.5 +## 3.2.5 2017-August-16 @@ -4617,7 +4794,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Upgrade react-modal to v2.2.4 [#1666](https://github.com/storybooks/storybook/pull/1666) -# 3.2.4 +## 3.2.4 2017-August-12 @@ -4642,7 +4819,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Use ReactModal for search box [#1548](https://github.com/storybooks/storybook/pull/1548) - Limit react versions to >=15 [#1613](https://github.com/storybooks/storybook/pull/1613) -# 3.2.3 +## 3.2.3 2017-August-01 @@ -4655,7 +4832,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Add short description to addon-options readme [#1566](https://github.com/storybooks/storybook/pull/1566) -# 3.2.2 +## 3.2.2 2017-July-31 @@ -4663,7 +4840,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Fixed build-storybook for vue [#1564](https://github.com/storybooks/storybook/pull/1564) -# 3.2.1 +## 3.2.1 2017-July-31 @@ -4677,7 +4854,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) - Fix typo with Vue README referring to react [#1556](https://github.com/storybooks/storybook/pull/1556) - Add state-setting FAQ [#1559](https://github.com/storybooks/storybook/pull/1559) -# 3.2.0 +## 3.2.0 2017-July-31 @@ -4744,7 +4921,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Remove upper bound on react-native peerDependency [#1424](https://github.com/storybooks/storybook/pull/1424) - Bump `react-split-pane` version [#1495](https://github.com/storybooks/storybook/pull/1495) -# 3.1.9 +## 3.1.9 2017-July-16 @@ -4770,7 +4947,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Update lerna to the latest version 🚀 [#1423](https://github.com/storybooks/storybook/pull/1423) - Pin gatsby version and upgrade gh-pages [#1462](https://github.com/storybooks/storybook/pull/1462) -# 3.1.8 +## 3.1.8 2017-July-06 @@ -4789,7 +4966,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Support webpack 3.0.0 [#1410](https://github.com/storybooks/storybook/pull/1410) - Update react inspector to fix #1385 [#1408](https://github.com/storybooks/storybook/pull/1408) -# 3.1.7 +## 3.1.7 2017-June-28 @@ -4802,7 +4979,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Document Storybook release process [#1348](https://github.com/storybooks/storybook/pull/1348) -# 3.1.6 +## 3.1.6 2017-June-26 @@ -4824,7 +5001,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Update lint-staged to the latest version 🚀 [#1315](https://github.com/storybooks/storybook/pull/1315) -# 3.1.5 +## 3.1.5 2017-June-22 @@ -4849,7 +5026,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Use a pack -> install technique to recreate local packages [#1332](https://github.com/storybooks/storybook/pull/1332) - Import demo components from @storybook/react [#1303](https://github.com/storybooks/storybook/pull/1303) -# 3.1.4 +## 3.1.4 2017-June-15 @@ -4867,7 +5044,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Add versions plugin to docs [#1269](https://github.com/storybooks/storybook/pull/1269) -# 3.1.3 +## 3.1.3 2017-June-10 @@ -4875,7 +5052,7 @@ Plus many more features, documentation improvements, and bugfixes below! - Fix `storybook-build` manager-head.html bug [#1248](https://github.com/storybooks/storybook/pull/1248) -# 3.1.2 +## 3.1.2 Minor features including a new "events" addon, as well as the usual bugfixes, cleanup, etc. @@ -4912,7 +5089,7 @@ Minor features including a new "events" addon, as well as the usual bugfixes, cl - Update babel docgen plugin to generate docs for React.createClass and createReactClass [#1206](https://github.com/storybooks/storybook/pull/1206) - Update `marksy` dependecy due broken 1.1.0 version [#1204](https://github.com/storybooks/storybook/pull/1204) -# 3.0.1 +## 3.0.1 Minor bug fixes and documentation updates post 3.0.0 release. @@ -4942,7 +5119,7 @@ Minor bug fixes and documentation updates post 3.0.0 release. - Replaced deprecated `markdown-to-react-components` with `marksy` [#1188](https://github.com/storybooks/storybook/pull/1188) -# 3.0.0 +## 3.0.0 Storybook 3.0 is our first fully community-driven release! Notable changes: @@ -5063,11 +5240,11 @@ Storybook 3.0 is our first fully community-driven release! Notable changes: -# v2.35.3 +## v2.35.3 Allow customConfig to override devtool. [PR668](https://github.com/storybooks/react-storybook/pull/668) -# v2.35.2 +## v2.35.2 03-January-2017 @@ -5075,11 +5252,11 @@ Fixes issue [#601](https://github.com/storybooks/react-storybook/issues/601) whe This release comes with the updated `babel-plugin-react-docgen`. -# v2.35.1 +## v2.35.1 - Revert [PR653](https://github.com/storybooks/react-storybook/pull/653) where it's causing HMR to not working properly. -# v2.35.0 +## v2.35.0 18-December-2016 @@ -5087,90 +5264,90 @@ This release comes with the updated `babel-plugin-react-docgen`. - Update css-loader dependency [PR648](https://github.com/storybooks/react-storybook/pull/648) - Check if stories are loaded from Jest [PR644](https://github.com/storybooks/react-storybook/pull/644) -# v2.34.0 +## v2.34.0 05-December-2016 Open the express router for developers (middleware.js file). [PR435](https://github.com/storybooks/react-storybook/pull/435) -# v2.33.1 +## v2.33.1 01-December-2016 Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybooks/react-storybook/pull/634) -# v2.33.0 +## v2.33.0 28-November-2016 Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybooks/react-storybook/pull/631) -# v2.32.2 +## v2.32.2 28-November-2016 Update postmsg channel module version [PR627](https://github.com/storybooks/react-storybook/pull/627) -# v2.32.1 +## v2.32.1 22-November-2016 Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybooks/react-storybook/pull/623) -# v2.32.0 +## v2.32.0 Incorrect publish (error when running `npm publish`) -# v2.31.0 +## v2.31.0 20-November-2016 Add the react-storybook version to the build output. [PR621](https://github.com/storybooks/react-storybook/pull/621) -# v2.30.1 +## v2.30.1 17-November-2016 Update the postmsg channel module to fix issue [#555](https://github.com/storybooks/react-storybook/issues/555) with [PR611](https://github.com/storybooks/react-storybook/pull/611) -# v2.30.0 +## v2.30.0 16-November-2016 Update to the new Storybook UI which doesn't use Redux. -# v2.29.7 +## v2.29.7 11-November-2016 Update @kadira/storybook-ui to the latest. -# v2.29.6 +## v2.29.6 10-November-2016 Fix a typo in the story syntax error messages. [PR610](https://github.com/storybooks/react-storybook/pull/610) -# v2.29.5 +## v2.29.5 09-November-2016 Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybooks/react-storybook/pull/608) -# v2.29.3 +## v2.29.3 08-November-2016 Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybooks/react-storybook/issues/543). -# v2.29.3 +## v2.29.3 03-November-2016 Fix a regression caused by v2.29.2. There was a text called undefined listed always on the top of the preview. -# v2.29.2 +## v2.29.2 03-November-2016 @@ -5182,33 +5359,33 @@ Add various fixes. - Update postcss-loader to v1.1.0 [PR599](https://github.com/storybooks/react-storybook/pull/599) - fix for `module.hot` is not available in a static build [PR600](https://github.com/storybooks/react-storybook/pull/600) -# v2.29.1 +## v2.29.1 03-November-2016 Update babel-plugin-react-docgen to v1.4.1 to fix HOC [issue](https://github.com/kadirahq/babel-plugin-react-docgen/issues/19) -# v2.29.0 +## v2.29.0 01-November-2016 Update babel-plugin-react-docgen to 1.4.0. This will fix some of the compilation issues such as #580. -# v2.28.1 +## v2.28.1 28-October-2016 Remove preview decorator support. [PR583](https://github.com/storybooks/react-storybook/pull/583). -# v2.28.0 +## v2.28.0 28-October-2016 Add preview decorator support. [PR582](https://github.com/storybooks/react-storybook/pull/582). This will help us bring storybook designer with some great power. -# v2.27.0 +## v2.27.0 27-October-2016 @@ -5220,7 +5397,7 @@ Add a few usability improvements to Storybook. - Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybooks/react-storybook/pull/576) - Ship `json-loader` by default. [PR575](https://github.com/storybooks/react-storybook/pull/575) -# v2.26.0 +## v2.26.0 24-October-2016 @@ -5230,13 +5407,13 @@ Get some new features from CRA. - Allow to use postcss for CSS @imports [PR564](https://github.com/storybooks/react-storybook/pull/564) - Use process.env as a proper object [PR565](https://github.com/storybooks/react-storybook/pull/565) -# v2.25.1 +## v2.25.1 23-October-2016 Add a potential fix to [558](https://github.com/storybooks/react-storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2). -# v2.25.0 +## v2.25.0 21-October-2016 @@ -5248,25 +5425,25 @@ With this: Additionally, added `yarn.lock`. -# v2.24.1 +## v2.24.1 19-October-2016 Do not show git command output. [PR554](https://github.com/storybooks/react-storybook/pull/554) -# v2.24.0 +## v2.24.0 07-October-2016 - Export git repository info to support custom tool integrations [PR536](https://github.com/storybooks/react-storybook/pull/536) -# v2.23.0 +## v2.23.0 06-October-2016 - Remove the experimental database addon from react-storybook [PR535](https://github.com/storybooks/react-storybook/pull/535) -# v2.22.0 +## v2.22.0 05-October-2016 @@ -5275,80 +5452,80 @@ Add some nice development experiment based on suggestion from Dan Abramov. - Set a color to the Storybook URL in the console. [PR533](https://github.com/storybooks/react-storybook/pull/533) - Add better error message when there's no React element in the story. [PR534](https://github.com/storybooks/react-storybook/pull/534) -# v2.21.0 +## v2.21.0 05-October-2016 - Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybooks/react-storybook/issues/468) - Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3` -# v2.20.1 +## v2.20.1 28-September-2016 - Fix story kind order bug [PR499](https://github.com/storybooks/react-storybook/pull/499) - Prefix config environment variables [PR503](https://github.com/storybooks/react-storybook/pull/503) -# v2.20.0 +## v2.20.0 26-September-2016 - Use postMessage channel [PR498](https://github.com/storybooks/react-storybook/pull/498) - Support dynamic panel titles [PR497](https://github.com/storybooks/react-storybook/pull/497) -# v2.19.0 +## v2.19.0 26-September-2016 - Support layout options [PR494](https://github.com/storybooks/react-storybook/pull/494) - Update Typescript definitions [PR491](https://github.com/storybooks/react-storybook/pull/491) and [PR493](https://github.com/storybooks/react-storybook/pull/493) -# v2.18.1 +## v2.18.1 23-September-2016 - Stop uglifyjs from mangling names [PR483](https://github.com/storybooks/react-storybook/pull/483) -# v2.18.0 +## v2.18.0 23-September-2016 - Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybooks/react-storybook/pull/481) -# v2.17.0 +## v2.17.0 22-September-2016 - Add support for StoryShots. [PR479](https://github.com/storybooks/react-storybook/pull/479) - Fix some typos: [PR477](https://github.com/storybooks/react-storybook/pull/477) & [PR478](https://github.com/storybooks/react-storybook/pull/478) -# v2.16.1 +## v2.16.1 21-September-2016 - Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybooks/react-storybook/pull/472) - Serve/Bundle the storybook favicon [PR473](https://github.com/storybooks/react-storybook/pull/473) -# v2.16.0 +## v2.16.0 21-September-2016 - Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybooks/react-storybook/pull/469) - Update airbnd eslint rules to the latest. -# v2.15.1 +## v2.15.1 19-September-2016 Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybooks/react-storybook/pull/465) -# v2.15.0 +## v2.15.0 19-September-2016 - Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybooks/react-storybook/pull/462) -# v2.14.0 +## v2.14.0 14-September-2016 @@ -5357,26 +5534,26 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co - Allow to reload if HMR goes crazy. [PR448](https://github.com/storybooks/react-storybook/pull/448) - Add support to get custom env variables. [PR450](https://github.com/storybooks/react-storybook/pull/450) -# v2.13.1 +## v2.13.1 14-September-2016 - Fix 404 error when db file does not exist [PR449](https://github.com/storybooks/react-storybook/pull/449) -# v2.13.0 +## v2.13.0 9-September-2016 - Fix [#443](https://github.com/storybooks/react-storybook/issues/443) where the static version of Storybook doesn't like Safari. - Update postcss-loader to 0.13.0. -# v2.12.1 +## v2.12.1 8-September-2016 - Parse static directory provided by env as a list. [PR436](https://github.com/storybooks/react-storybook/pull/436) -# v2.12.0 +## v2.12.0 8-September-2016 @@ -5384,86 +5561,86 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co - Update css-loader to version 0.25.0. [PR427](https://github.com/storybooks/react-storybook/pull/427) - Get the head.html values for every page request. [PR432](https://github.com/storybooks/react-storybook/pull/432) -# v2.11.0 +## v2.11.0 4-September-2016 - Remove babel-polyfill since we don't use it. - Update versions with the help from greenkeeper. [PR421](https://github.com/storybooks/react-storybook/pull/421) -# v2.10.0 +## v2.10.0 3-September-2016 - Adding airbnb-js-shims again. [PR419](https://github.com/storybooks/react-storybook/pull/419) -# v2.9.1 +## v2.9.1 2-September-2016. - Use the config directory to store the addon database file [PR418](https://github.com/storybooks/react-storybook/pull/418). -# v2.9.0 +## v2.9.0 2-September-2016. - Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybooks/react-storybook/pull/417). -# v2.8.0 +## v2.8.0 2-September-2016. - Update @kadira/storybook to get the clean query params feature. See [storybook-ui-PR37](https://github.com/kadirahq/storybook-ui/pull/37) -# v2.7.0 +## v2.7.0 1-September-2016 - Add addon database feature [PR415](https://github.com/storybooks/react-storybook/pull/415). -# v2.6.1 +## v2.6.1 31-August-2016 - Bring back HMR dev logs. [PR412](https://github.com/storybooks/react-storybook/pull/412). -# v2.6.0 +## v2.6.0 30-August-2016 - Allow start/build params from env variables. [PR413](https://github.com/storybooks/react-storybook/pull/413) -# v2.5.2 +## v2.5.2 29-August-2016 - Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybooks/react-storybook/pull/410) -# v2.5.1 +## v2.5.1 24-August-2016 - Update @kadira/storybook-ui to v3.3.2 -# v2.5.0 +## v2.5.0 24-August-2016 - We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybooks/react-storybook/pull/402) -# v2.4.2 +## v2.4.2 24-August-2016 - Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybooks/react-storybook/pull/401) -# v2.4.1 +## v2.4.1 24-August-2016 - Bump @kadira/storybook ui to v3.3.1 to fix some UI related issues. -# v2.4.0 +## v2.4.0 23-August-2016 @@ -5472,32 +5649,32 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co - Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybooks/react-storybook/pull/397) - Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons. -# v2.3.0 +## v2.3.0 16-August-2016 - Implement anonymous usage tracking. [PR384](https://github.com/storybooks/react-storybook/pull/384) -# v2.2.3 +## v2.2.3 15-August-2016 - Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybooks/react-storybook/pull/380) -# v2.2.2 +## v2.2.2 10-August-2016 - Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybooks/react-storybook/pull/369). -# v2.2.1 +## v2.2.1 09-August-2016 - Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybooks/react-storybook/pull/359). - Update @kadira/storybook-ui to the latest. -# v2.2.0 +## v2.2.0 05-August-2016 @@ -5508,7 +5685,7 @@ This release bring some webpack config related optimizations and the NPM2 suppor - Add NPM2 support. [PR356](https://github.com/storybooks/react-storybook/pull/356) - Add autofixer defaults. [PR357](https://github.com/storybooks/react-storybook/pull/357) -# v2.1.1 +## v2.1.1 03-August-2016 @@ -5517,7 +5694,7 @@ Remove default webpack config for all config types. [PR348](https://github.com/s Now we only use the Create React App based config if there's no custom webpack config. This will fix issues like [#347](https://github.com/storybooks/react-storybook/issues/347). -# v2.1.0 +## v2.1.0 02-August-2016 @@ -5533,7 +5710,7 @@ Unfortunately, as of this version, there are no docs for this feature. But, you Have a look at [here](https://github.com/storybooks/react-storybook/blob/master/src/server/config.js#L88) to how to configure addons. -# v2.0.0 +## v2.0.0 01-August-2016 @@ -5547,151 +5724,151 @@ This is the starting of the next major version of Storybook. This version is alm - Continue support for babel's stage-0 preset and add es2016 preset. - Update @kadira/storybook-ui to v2.6.1 to remove some React warnings. -# v1.41.0 +## v1.41.0 - Fix nodejs require errors [#337](https://github.com/storybooks/react-storybook/pull/337). - Add getStorybook method to client API [#332](https://github.com/storybooks/react-storybook/pull/332). -# v1.40.0 +## v1.40.0 - Fix duplicate decorator bug [#335](https://github.com/storybooks/react-storybook/pull/335). -# v1.39.1 +## v1.39.1 - Update babel packages [#325](https://github.com/storybooks/react-storybook/pull/325). - Hide HMR info logs [#331](https://github.com/storybooks/react-storybook/pull/331). -# v1.39.0 +## v1.39.0 - Update @kadira/storybook-ui to get features from [v2.5.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v250) and [v2.6.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v260). -# v1.38.3 +## v1.38.3 - Add names for action and linkTo functions [#321](https://github.com/storybooks/react-storybook/pull/321). -# v1.38.2 +## v1.38.2 - Fix error in prepublish script [#319](https://github.com/storybooks/react-storybook/pull/319). -# v1.38.1 +## v1.38.1 - Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybooks/react-storybook/pull/308). -# v1.38.0 +## v1.38.0 - v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybooks/react-storybook/issues/306) and [#305](https://github.com/storybooks/react-storybook/pull/305). -# v1.37.0 +## v1.37.0 - Update @kadira/storybook-ui to 2.4.0 -# v1.36.0 +## v1.36.0 - Support watchOptions configuration. See: [PR287](https://github.com/storybooks/react-storybook/pull/287) -# v1.35.2 +## v1.35.2 - Add missing font-face to the ErrorDisplay's heading. -# v1.35.1 +## v1.35.1 - Fix issue related to bad error handling. See issue [#275](https://github.com/storybooks/react-storybook/issues/275): -# v1.35.0 +## v1.35.0 - Add fuzzy search powered search box and Redux DevTools support via [@kadira/storybook-ui@2.3.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v230). -# v1.34.1 +## v1.34.1 - Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybooks/react-storybook/pull/272) -# v1.34.0 +## v1.34.0 - Use storybook-ui v2.2.0 which puts shortcut state into the URL. -# v1.33.0 +## v1.33.0 - Introduce an [extension API](https://github.com/storybooks/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybooks/react-storybook/pull/258) -# v1.32.1 +## v1.32.1 - Extend @kadira/storybook-ui provider from it's base Provider. -# v1.32.0 +## v1.32.0 - Use @kadira/storybook-ui as the manager UI with the implemented provider for React. See `client/manager` for more info. -# v1.31.0 +## v1.31.0 - Pass a `context` argument to stories [PR250](https://github.com/storybooks/react-storybook/pull/250) -# v1.30.0 +## v1.30.0 - Fuzzy search kinds [PR247](https://github.com/storybooks/react-storybook/pull/247) -# v1.29.5 +## v1.29.5 - Update dependency version to fix filter crash [PR246](https://github.com/storybooks/react-storybook/pull/246) -# v1.29.4 +## v1.29.4 - Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybooks/react-storybook/pull/243) -# v1.29.3 +## v1.29.3 - Update @kadira/storybook-core version [PR241](https://github.com/storybooks/react-storybook/pull/241) - Add es6-shim by default [PR238](https://github.com/storybooks/react-storybook/pull/238) -# v1.29.2 +## v1.29.2 - Use url.resolve instead of path.join [PR240](https://github.com/storybooks/react-storybook/pull/240) -# v1.29.1 +## v1.29.1 - Copy missed manager.js.map file on static build [PR236](https://github.com/storybooks/react-storybook/pull/236) -# v1.29.0 +## v1.29.0 - Multiple static dirs (comma separated) [PR229](https://github.com/storybooks/react-storybook/pull/229) -# v1.28.5 +## v1.28.5 - Support ECMAScript stage-0 [PR228](https://github.com/storybooks/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybooks/react-storybook/issues/227) -# v1.28.4 +## v1.28.4 - Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybooks/react-storybook/pull/226) -# v1.28.3 +## v1.28.3 - Revert [PR226](https://github.com/storybooks/react-storybook/pull/226) -# v1.28.2 +## v1.28.2 - Support custom webpack publicPath [PR226](https://github.com/storybooks/react-storybook/pull/226) -# v1.28.1 +## v1.28.1 - Add charset meta tags to HTML heads [PR216](https://github.com/storybooks/react-storybook/pull/216) -# v1.28.0 +## v1.28.0 - Moved storybook serving code into a middleware to support more advanced use cases. - Refactored dev server to use storybook middleware [PR211](https://github.com/storybooks/react-storybook/pull/211) -# v1.27.0 +## v1.27.0 - Move modules to storybook-core repo. [PR196](https://github.com/storybooks/react-storybook/pull/196) - Add stack-source-map again only for Chrome to get better error stacks. - Add ability to control the hostname. See [PR195](https://github.com/storybooks/react-storybook/pull/195) and [PR198](https://github.com/storybooks/react-storybook/pull/198) -# v1.26.0 +## v1.26.0 12-May-2016 - Ensure asset directory exists in the static-builder. -# v1.25.0 +## v1.25.0 11-May-2016 @@ -5703,7 +5880,7 @@ This is the starting of the next major version of Storybook. This version is alm - Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybooks/react-storybook/pull/182). - Add `qs` as a direct dependency as it's used in preview. -# v1.24.0 +## v1.24.0 10-May-2016 @@ -5711,34 +5888,34 @@ This is the starting of the next major version of Storybook. This version is alm - Add scrolling support to the left panel. Fixes [#177](https://github.com/storybooks/react-storybook/issues/177). - Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybooks/react-storybook/issues/158) -# v1.23.0 +## v1.23.0 09-May-2016 - Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybooks/react-storybook/pull/176) - Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybooks/react-storybook/pull/173) -# v1.22.1 +## v1.22.1 06-May-2016 - Add a potential fix for [#167](https://github.com/storybooks/react-storybook/issues/167) - basically, this moved back babel-packages required by webpack. -# v1.22.0 +## v1.22.0 06-May-2016 - Improve the static builder time. -# v1.21.0 +## v1.21.0 06-May-2016 - Add configType argument to custom config function. See: [PR169](https://github.com/storybooks/react-storybook/pull/169) - Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybooks/react-storybook/pull/170) -# v1.20.0 +## v1.20.0 05-May-2016 @@ -5748,7 +5925,7 @@ This is the starting of the next major version of Storybook. This version is alm - Remove some typo in docs. See: [PR154](https://github.com/storybooks/react-storybook/pull/154) - Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybooks/react-storybook/pull/153) -# v1.19.0 +## v1.19.0 27-April-2016 @@ -5756,38 +5933,38 @@ This is the starting of the next major version of Storybook. This version is alm - Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybooks/react-storybook/pull/148) - Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybooks/react-storybook/pull/149) -# v1.18.0 +## v1.18.0 26-April-2016 - Link Storybook menu to the repo. See: [PR137](https://github.com/storybooks/react-storybook/pull/137) - Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybooks/react-storybook/pull/141) -# v1.17.2 +## v1.17.2 25-April-2016 - Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybooks/react-storybook/pull/144) -# v1.17.1 +## v1.17.1 21-April-2016 - Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybooks/react-storybook/pull/133) -# v1.17.0 +## v1.17.0 21-April-2016 - Check all the arguments passed to action for events. See: [PR132](https://github.com/storybooks/react-storybook/pull/132) -# v1.16.1 +## v1.16.1 21-April-2016 - Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybooks/react-storybook/pull/126). -# v1.16.0 +## v1.16.0 20-April-2016 @@ -5795,37 +5972,37 @@ This is the starting of the next major version of Storybook. This version is alm - Related issue: [#116](https://github.com/storybooks/react-storybook/issues/116) - Related PR: [PR126](https://github.com/storybooks/react-storybook/pull/126) -# v1.15.0 +## v1.15.0 20-April-2016 - Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybooks/react-storybook/pull/123) -# v1.14.0 +## v1.14.0 19-April-2016 - Add syntax highlights to the logger. See: [PR118](https://github.com/storybooks/react-storybook/pull/118) -# v1.13.0 +## v1.13.0 - Add some UI test cases. See [PR103](https://github.com/storybooks/react-storybook/pull/103) - Implement `.addDecorator()` API. See [PR115](https://github.com/storybooks/react-storybook/pull/115) - Add code folding support. See [PR111](https://github.com/storybooks/react-storybook/pull/111) -# v1.12.0 +## v1.12.0 14-April-2016 - Add support for webpack module preLoaders. See: [PR107](https://github.com/storybooks/react-storybook/pull/107) -# v1.11.0 +## v1.11.0 13-April-2016 - Add support for React DevTools. See: [PR104](https://github.com/storybooks/react-storybook/pull/104) -# v1.10.2 +## v1.10.2 12-April-2016 @@ -5835,13 +6012,13 @@ Fix various issues related to static bundling. - Use relative urls so, static sites can be host with paths (GH Pages) - Identify SyntheticEvent using feature detection. UglifyJS mangal class names, so we can't use classnames to detect a SyntheticEvent in the static build. -# v1.10.1 +## v1.10.1 - Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybooks/react-storybook/pull/100) - Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybooks/react-storybook/pull/98) - Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybooks/react-storybook/pull/101) -# v1.10.0 +## v1.10.0 - Add custom head support inside the iframe. See [PR77](https://github.com/storybooks/react-storybook/pull/77) - Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybooks/react-storybook/issues/81) @@ -5849,7 +6026,7 @@ Fix various issues related to static bundling. - Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybooks/react-storybook/pull/94) - Add the search box. See: [PR91](https://github.com/storybooks/react-storybook/pull/91). -# v1.9.0 +## v1.9.0 Add some minor improvements. @@ -5857,48 +6034,48 @@ Add some minor improvements. - Fix the React Warning about CSS property. See: [PR84](https://github.com/storybooks/react-storybook/pull/84) - Transition on latest logged action. See: [PR80](https://github.com/storybooks/react-storybook/pull/80) -# v1.8.0 +## v1.8.0 - Add story linking functionality. - [Documentation](https://github.com/storybooks/react-storybook/blob/master/docs/api.md#linking-stories). - Original feature request: [#50](https://github.com/storybooks/react-storybook/issues/50) - Implementation: [PR86](https://github.com/storybooks/react-storybook/pull/86) -# v1.7.0 +## v1.7.0 - Add support to React v15.0.0. -# v1.6.0 +## v1.6.0 - Make scrollable layout. See: [PR](https://github.com/storybooks/react-storybook/pull/70) - Add npm3 requirement to the `package.json`. - Add `react` and `react-dom` to devDependencies. -# v1.5.0 +## v1.5.0 - Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybooks/react-storybook/pull/64) -# v1.4.0 +## v1.4.0 - Add CLI option to specify the config dir. See [PR52](https://github.com/storybooks/react-storybook/pull/52). -# v1.3.0 +## v1.3.0 - Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybooks/react-storybook/issues/41) - Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md) - Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`. -# v1.2.0 +## v1.2.0 - Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybooks/react-storybook/issues/21). - Remove navigation list order hijacking. See [commit](https://github.com/storybooks/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99). - Fix a typo in .gitignore. See [PR31](https://github.com/storybooks/react-storybook/pull/31). - Add support for JSX. See [PR18](https://github.com/storybooks/react-storybook/pull/18). -# v1.1.0 +## v1.1.0 - v1.0.0 was a mistake and it contains very old code. That's why we had to do a 1.1.0 release. -# v1.0.0 +## v1.0.0 - Yeah! diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 37bbca2015a9..f61259df04ec 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 install `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 a package manager. See [installation guide](https://yarnpkg.com/en/docs/install). ## Issues @@ -57,15 +57,15 @@ You can also pick suites from CLI. Suites available are listed below. `yarn test --core` -This option executes test from `/app/react`, `/app/vue`, and `/lib`. -Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core` +This option executes tests from `/app/react`, `/app/vue`, and `/lib`. +Before the tests are run, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core` ##### CRA-kitchen-sink - Image snapshots using Storyshots `yarn test --image` This option executes tests from `/examples/official-storybook` -In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date : +In order for the image snapshots to be correctly generated, you must have a static build of the storybook up-to-date : ```javascript cd examples/official-storybook @@ -78,7 +78,7 @@ Puppeteer is used to launch and grab screenshots of example pages, while jest is #### 2b. Run e2e tests for CLI -If you made any changes to `lib/cli` package, the easiest way to verify that it doesn't break anything is to run e2e tests: +If you made any changes to the `lib/cli` package, the easiest way to verify that it doesn't break anything is to run e2e tests: yarn test --cli @@ -92,7 +92,7 @@ In that case, please check the git diff before committing to make sure it only c #### 2c. Link `storybook` and any other required dependencies: -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. +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 cd app/react @@ -131,9 +131,9 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th git push -u master ``` -If you follow that process, you can then link to the github repository in the issue. See for an example. +If you follow that process, you can then link to the GitHub repository in the issue. See for an example. -**NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however you can still modify storybook's to mirror your app's version of the storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config. +**NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however, you can still modify storybook's to mirror your app's version of the storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config. ### Updating Tests @@ -154,7 +154,7 @@ We welcome your contributions. There are many ways you can help us. This is few - Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs). - Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug). - Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request). -- Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)). +- Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (especially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)). Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask. @@ -325,7 +325,7 @@ git status # generate changelog and edit as appropriate # generates a Next section -yarn changelog x.y.z-alpha.a +yarn changelog:next x.y.z-alpha.a # Edit the changelog/PRs as needed, then commit git commit -m "x.y.z-alpha.a changelog" diff --git a/LICENSE b/LICENSE index fa4fd06abc7f..85a6c94557e5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2018 Norbert de Langen ndelangen@me.com +Copyright (c) 2017 Kadira Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/MAINTAINERS.md b/MAINTAINERS.md index 9f091b96e676..afdcef319d51 100644 --- a/MAINTAINERS.md +++ b/MAINTAINERS.md @@ -3,7 +3,7 @@ This document will document some of the processes that members of the documentat # PR Process 1. Triage with the correct [label](#labels) -2. If there a change related to it ensure it has been published and tested before closing +2. If there is a change related to it ensure it has been published and tested before closing # Labels diff --git a/MIGRATION.md b/MIGRATION.md index d94b7cb20168..a1f855d03933 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -86,7 +86,7 @@ import { number } from "@storybook/addon-knobs"; Addon-knobs no longer updates the URL parameters interactively as you edit a knob. This is a UI change but it shouldn't break any code because old URLs are still supported. -In 3.x, editing knobs updated the URL parameters interactively. The implementation had performance and architectural problems. So in 4.0, we changed this to a "copy" button tp the addon which generates a URL with the updated knob values and copies it to the clipboard. +In 3.x, editing knobs updated the URL parameters interactively. The implementation had performance and architectural problems. So in 4.0, we changed this to a "copy" button in the addon which generates a URL with the updated knob values and copies it to the clipboard. ### Keyboard shortcuts moved @@ -144,7 +144,7 @@ If you are using `create-react-app` (aka CRA), you may need to do some manual st - `create-react-app@1` may require manual migrations. - If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies. - - If you've upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section: + - If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section: - Upgrade to Babel 7 if you are not dependent on Babel 6-specific features. - Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features). - `create-react-app@2` should be compatible as is, since it uses babel 7. @@ -162,7 +162,7 @@ yarn add @babel/core babel-loader --dev yarn add babel-loader@7 ``` -Also make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works: +Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works: ```json { @@ -221,7 +221,7 @@ There are no expected breaking changes in the 3.4.x release, but 3.4 contains a ## From version 3.2.x to 3.3.x -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. +It wasn't expected that there would 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)) @@ -236,7 +236,7 @@ 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. +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 recommendation, but now it [became](https://github.com/storybooks/storybook/pull/2578) a requirement. ### Refactored Knobs @@ -268,7 +268,7 @@ See also [TypeScript definitions in 3.1.x](#moved-typescript-definitions). ### Updated Addons API -We're in the process of upgrading our addons APIs. As a first step, we've upgraded the Info and Notes addons. The old API will still work with your existing projects, but will be deprecated soon and removed in Storybook 4.0. +We're in the process of upgrading our addons APIs. As a first step, we've upgraded the Info and Notes addons. The old API will still work with your existing projects but will be deprecated soon and removed in Storybook 4.0. Here's an example of using Notes and Info in 3.2 with the new API. @@ -287,7 +287,7 @@ It's not beautiful, but we'll be adding a more convenient/idiomatic way of using ## From version 3.0.x to 3.1.x -**NOTE:** technically this is a breaking change and should be a 4.0.0 release according to semver. However, we're still figuring things out, and didn't think this change necessitated a major release. Please bear with us! +**NOTE:** technically this is a breaking change and should be a 4.0.0 release according to semver. However, we're still figuring things out and didn't think this change necessitated a major release. Please bear with us! ### Moved TypeScript definitions @@ -334,7 +334,7 @@ npx -p @storybook/cli sb init If the above doesn't work, or you want to make the changes manually, the details are below: -> We have adopted the same versioning strategy as have been adopted by babel, jest and apollo. +> We have adopted the same versioning strategy that has been adopted by babel, jest and apollo. > It's a strategy best suited for ecosystem type tools, which consist of many separately installable features / packages. > We think this describes storybook pretty well. @@ -379,7 +379,7 @@ You have to change your `package.json`, prune old and install new dependencies b ### Deprecated embedded addons -We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning. +We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future, they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning. If you **are** using these addons, migrating is simple: diff --git a/README.md b/README.md index 7d1a4f15dd92..13e7600f3237 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,20 @@ # Storybook -[![Build Status on TeamCity](https://teamcity.jetbrains.com/app/rest/builds/buildType:OpenSourceProjects_Storybook_Build_2/statusIcon.svg)](https://teamcity.jetbrains.com/viewType.html?buildTypeId=OpenSourceProjects_Storybook_Build_2&branch_OpenSourceProjects_Storybook=%3Cdefault%3E&tab=buildTypeStatusDiv) -[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook) -[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) -[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/badge.svg)](https://snyk.io/test/github/storybooks/storybook) -[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) -[![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) -[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/) -[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) -[![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) -[![License](https://img.shields.io/github/license/storybooks/storybook.svg)](https://github.com/storybooks/storybook/blob/master/LICENSE) - - +

+ Build Status on TeamCity + Build Status on CircleCI + CodeFactor + Known Vulnerabilities + BCH compliance + codecov + License

+

+

+ + Storybook Slack + Backers on Open Collective + Sponsors on Open Collective +

--- @@ -21,13 +24,14 @@ It allows you to browse a component library, view the different states of each c ## Intro
- +
-README for: - -- [![Alpha](https://img.shields.io/npm/v/@storybook/core/alpha.svg)](https://github.com/storybooks/storybook) -- [![Latest](https://img.shields.io/npm/v/@storybook/core/latest.svg)](https://github.com/storybooks/storybook/tree/master) +

+README for:
+latest +next +

Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies. @@ -73,25 +77,25 @@ 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/) +For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack](https://now-examples-slackin-rrirkqohko.now.sh/) ## Projects ### Supported Frameworks -| Framework | Demo latest | Demo prerelease | | -| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) | -| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) | -| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) | -| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) | -| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) | -| [Mithril](app/mithril) | - | [v4.0.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) | -| [Marko](app/marko) | - | [v4.0.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) | -| [HTML](app/html) | - | [v4.0.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) | -| [Svelte](app/svelte) | - | [v4.0.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) | -| [Riot](app/riot) | - | [v4.0.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) | -| [Ember](app/ember) | - | [v4.0.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) | +| Framework | Demo | | +| -------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| [React](app/react) | [v4.0.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) | +| [React Native](app/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) | +| [Vue](app/vue) | [v4.0.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | +| [Angular](app/angular) | [v4.0.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | +| [Polymer](app/polymer) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dm/@storybook/polymer.svg)](app/polymer) | +| [Mithril](app/mithril) | [v4.0.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) | +| [Marko](app/marko) | [v4.0.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) | +| [HTML](app/html) | [v4.0.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | +| [Svelte](app/svelte) | [v4.0.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) | +| [Riot](app/riot) | [v4.0.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) | +| [Ember](app/ember) | [v4.0.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | ### Sub Projects @@ -106,6 +110,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo | [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI | | [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI | | [centered](addons/centered/) | Center the alignment of your components within the Storybook UI | +| [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe | | [events](addons/events/) | Interactively fire events to components that respond to EventEmitter | | [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories | | [google-analytics](addons/google-analytics) | Reports google analytics on stories | @@ -123,7 +128,7 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md) ## Badges & Presentation materials -We have a badge ! Link it to your live Storybook example. +We have a badge! Link it to your live Storybook example. ![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg) diff --git a/RELEASES.md b/RELEASES.md index eba1f0f861a1..2493d3f9a368 100644 --- a/RELEASES.md +++ b/RELEASES.md @@ -47,7 +47,7 @@ releases. We'll try our best to restrict breaking changes to MAJOR releases. Every bugfix should go out as soon as we've verified the fix, and based on the current rate of contribution, we should be issuing PATCH releases weekly. -Eventually we'll automate the process so that a release will go out every time a PR is +Eventually, we'll automate the process so that a release will go out every time a PR is merged into `master`, and we've already laid most of the groundwork for this. ## MINOR releases @@ -61,7 +61,7 @@ hierarchy for stories) deserves more attention: Therefore we release `alpha` versions continuously on the NPM `next` tag to allow people to test out features as soon as they are ready. -In general we should release 2-3 headline features per minor release for +In general, we should release 2-3 headline features per minor release for marketing purposes. Each headline feature should get its own blog post on the Storybook medium publication, and the release itself should also get a blog post. @@ -102,11 +102,11 @@ in a patch release. - For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed). - For MINOR feature changes, there are multiple stages of discussion: - The feature may be discussed in an issue before it is implemented (ex: ) - - Once it's implemented, the discussion may be occur on the PR (ex: ) + - Once it's implemented, the discussion may occur on the PR (ex: ) - If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas - Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults. - Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc. -- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc. +- For MAJOR infrastructural changes, the discussion may take place over time, in gists, issues, slack discussions, etc. - Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process). ## FAQ's diff --git a/ROADMAP.md b/ROADMAP.md index 6931395d9955..f98687178543 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -26,14 +26,14 @@ Doing these will be backwards compatible. If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all. But story selection and addon-settings are not synced. -We want to make this much much simpler and really are core feature of storybook. +We want to make this much much simpler and a core feature of storybook. ### Automatic story detection Some tools are doing automatic file detection, jest for example. We think such a feature is highly needed. A lot of users are already hacking this themselves using webpack specific features. -### Theme ability and override core UI components +### Themeability and override core UI components Storybook is often used inside product companies and agencies. We want to help them have a sense of quality and immersion. We're interested in full customizability of our UI, though addons and options. @@ -41,14 +41,14 @@ We're interested in full customizability of our UI, though addons and options. ### Add a playground addon Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app. -Storybook has of course a very tight connection with your editor, and it has a knobs addon. +Storybook has, of course, a very tight connection with your editor, and it has a knobs addon. But we still see value in an addon that will allow the workflow of a playground. ### See multiple (or all) stories in 1 preview. Storybook's philosophy is about describing small bits in a variety of states. -However some components are best understood when viewed in multiple varieties in 1 view. -It's quite common to see users write a single story, with a wrapper components and multiple instances of the component the story is about. +However, some components are best understood when viewed in multiple varieties in 1 view. +It's quite common to see users write a single story, with wrapper components and multiple instances of the component the story is about. We plan to add a second mode to storybook that will allow you to see all stories in 1 preview. That way you can write your stories how they are best, and preview them how you like. @@ -56,13 +56,13 @@ That way you can write your stories how they are best, and preview them how you We believe in the power of react, and think it's the right choice for a lot of projects. But it's up to you and your team to decide your stack. -Unfortunately if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook. +Unfortunately, if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook. We want you to be able to use storybook with the framework / library of your choice. ### Polymer & Webcomponents -Storybook for Polymer is currently in development, and will support custom elements and plain HTML. +Storybook for Polymer is currently in development and will support custom elements and plain HTML. ### Aurelia @@ -76,16 +76,16 @@ Our addon api is limited and will eventually have to be improved to accommodate ### API for adding stories -Currently it's getting hard to setup a story that has data / options for multiple addons. -We want to support this, but will likely mean we will have to change the `add` method's API. +Currently, it's getting hard to set up a story that has data/options for multiple addons. +We want to support this but will likely mean we will have to change the `add` method's API. ## Documentation ### Better design -We have a new logo, so next step is a overhaul of our documentation site. +We have a new logo, so the next step is an overhaul of our documentation site. -### Record videos and write blog post on how to use, tweak & develop storybook +### Record videos and write blog posts on how to use, tweak & develop storybook - writing addons, - choosing the right addons. diff --git a/addons/a11y/README.md b/addons/a11y/README.md index df2c841e0f4e..12d34e48355d 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -1,6 +1,6 @@ # storybook-addon-a11y -This storybook addon can be helpfull to make your UI components more accessibile. +This storybook addon can be helpful to make your UI components more accessible. [Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md) diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js index caee93e065e9..c5a46038bbb8 100755 --- a/addons/a11y/manager.js +++ b/addons/a11y/manager.js @@ -1,3 +1 @@ -const manager = require('./dist/register'); - -manager.init(); +require('./dist/register').init(); diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 8ef831e2ee4c..dd20b0df1680 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -11,9 +11,6 @@ "verify" ], "homepage": "https://github.com/storybooks/storybook#readme", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -29,10 +26,10 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/client-logger": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/client-logger": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "axe-core": "^3.1.2", "global": "^4.3.2", "prop-types": "^15.6.2" @@ -40,5 +37,8 @@ "peerDependencies": { "react": "*", "react-dom": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js index 7d579a9b66d6..49506c8ac41e 100644 --- a/addons/a11y/src/index.js +++ b/addons/a11y/src/index.js @@ -14,11 +14,14 @@ export const configureA11y = (options = {}) => { const runA11yCheck = () => { const channel = addons.getChannel(); + const infoWrapper = document.getElementById('story-root').children; const wrapper = document.getElementById('root'); axe.reset(); axe.configure(axeOptions); - axe.run(wrapper).then(results => channel.emit(CHECK_EVENT_ID, results), logger.error); + axe + .run(infoWrapper || wrapper) + .then(results => channel.emit(CHECK_EVENT_ID, results), logger.error); }; const a11ySubscription = () => { diff --git a/addons/actions/package.json b/addons/actions/package.json index dfaa4c8ac046..9636b333b406 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/addon-actions", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Action Logger addon for storybook", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -26,9 +23,9 @@ "@emotion/core": "^0.13.1", "@emotion/provider": "^0.11.2", "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "deep-equal": "^1.0.1", "global": "^4.3.2", "lodash": "^4.17.11", @@ -39,5 +36,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index ebdf4b7faf21..615bace782d3 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -9,9 +9,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/backgrounds", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,13 +25,17 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", + "eventemitter3": "^3.1.0", "global": "^4.3.2", "prop-types": "^15.6.2", "util-deprecate": "^1.0.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/backgrounds/src/__tests__/BackgroundPanel.js b/addons/backgrounds/src/__tests__/BackgroundPanel.js index 6cdee1c901bb..c1591f483926 100644 --- a/addons/backgrounds/src/__tests__/BackgroundPanel.js +++ b/addons/backgrounds/src/__tests__/BackgroundPanel.js @@ -1,6 +1,6 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; -import EventEmitter from 'events'; +import EventEmitter from 'eventemitter3'; import BackgroundPanel from '../BackgroundPanel'; import Events from '../constants'; diff --git a/addons/centered/package.json b/addons/centered/package.json index 2901a99cb644..ac8a5e480245 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-centered", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook decorator to center components", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/centered", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -26,5 +23,8 @@ }, "dependencies": { "global": "^4.3.2" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md new file mode 100644 index 000000000000..14bec5d98141 --- /dev/null +++ b/addons/cssresources/README.md @@ -0,0 +1,63 @@ +# Storybook Addon Cssresources + +Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org). + +[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md) + +![Storybook Addon Cssresources Demo](docs/demo.gif) + +## Installation + +```sh +yarn add -D @storybook/addon-cssresources +``` + +## Configuration + +Then create a file called `addons.js` in your storybook config. + +Add following content to it: + +```js +import '@storybook/addon-cssresources/register'; +``` + +## Usage + +You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon ui: + +```js +// Import from @storybook/X where X is your framework +import { configure, addDecorator, storiesOf } from '@storybook/react'; +import { withCssResources } from '@storybook/addon-cssresources'; + +// global +addDecorator( + withCssResources({ + cssresources: [{ + name: `bluetheme`, + code: ``, + picked: false, + }, + ], + }) +); + +// per story +storiesOf('Addons|Cssresources', module) + .addDecorator( + withCssResources({ + cssresources: [{ + name: `fontawesome`, + code: ``, + picked: true, + }, { + name: `whitetheme`, + code: ``, + picked: true, + }, + ], + }) + ) + .add('Camera Icon', () => Camera Icon); +``` diff --git a/addons/cssresources/docs/demo.gif b/addons/cssresources/docs/demo.gif new file mode 100644 index 000000000000..75bc3685edf6 Binary files /dev/null and b/addons/cssresources/docs/demo.gif differ diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json new file mode 100644 index 000000000000..63d2bc72215d --- /dev/null +++ b/addons/cssresources/package.json @@ -0,0 +1,42 @@ +{ + "name": "@storybook/addon-cssresources", + "version": "4.1.0-alpha.11", + "description": "A storybook addon to switch between css resources at runtime for your story", + "keywords": [ + "addon", + "cssresources", + "react", + "storybook" + ], + "homepage": "https://storybook.js.org", + "bugs": { + "url": "https://github.com/storybooks/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybooks/storybook.git" + }, + "license": "MIT", + "author": "nm123github", + "main": "dist/index.js", + "jsnext:main": "src/index.js", + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@emotion/styled": "0.10.6", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", + "global": "^4.3.2", + "prop-types": "^15.6.2", + "react-syntax-highlighter": "^10.0.0", + "util-deprecate": "^1.0.2" + }, + "peerDependencies": { + "react": "*" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/addons/cssresources/register.js b/addons/cssresources/register.js new file mode 100644 index 000000000000..18cdafda57c4 --- /dev/null +++ b/addons/cssresources/register.js @@ -0,0 +1 @@ +require('./dist/register.js'); diff --git a/addons/cssresources/src/CssResourcePanel.js b/addons/cssresources/src/CssResourcePanel.js new file mode 100644 index 000000000000..ca41679b800b --- /dev/null +++ b/addons/cssresources/src/CssResourcePanel.js @@ -0,0 +1,147 @@ +import { document, DOMParser } from 'global'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { monoFonts } from '@storybook/components'; +import styled from '@emotion/styled'; + +import css from 'react-syntax-highlighter/dist/esm/languages/prism/css'; +import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism'; +import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light'; + +SyntaxHighlighter.registerLanguage('css', css); + +const storybookIframe = 'storybook-preview-iframe'; +const addedElAttr = 'addedbycssresourcesaddon'; + +// Taken from StoryPanel.js +const highlighterTheme = { + ...darcula, + 'pre[class*="language-"]': { + ...darcula['pre[class*="language-"]'], + margin: 'auto', + width: 'auto', + height: 'auto', + minHeight: '100%', + overflow: 'hidden', + boxSizing: 'border-box', + display: 'flex', + fontFamily: monoFonts.fontFamily, + fontSize: 'inherit', + }, + 'code[class*="language-"]': { + ...darcula['code[class*="language-"]'], + margin: 0, + fontFamily: 'inherit', + }, +}; + +const PanelWrapper = styled.div({ + position: 'absolute', + top: '10px', + left: '10px', + fontFamily: monoFonts.fontFamily, +}); + +export default class CssResourcePanel extends Component { + constructor(props) { + super(props); + this.state = { cssresources: `` }; + this.onAddCssresources = this.onAddCssresources.bind(this); + this.parser = new DOMParser(); + } + + componentDidMount() { + const { channel } = this.props; + this.iframe = document.getElementById(storybookIframe); + if (!this.iframe) { + throw new Error('Cannot find Storybook iframe'); + } + channel.on('storybook/resources/add_cssresources', this.onAddCssresources); + } + + componentWillUnmount() { + const { channel } = this.props; + channel.removeListener('storybook/resources/add_cssresources', this.onAddCssresources); + } + + onAddCssresources(cssresources) { + this.loadCssresources(cssresources.filter(res => res.picked)); + this.setState(prevState => ({ ...prevState, cssresources })); + } + + handleChange(i, { target }) { + const { channel } = this.props; + const { cssresources = [] } = this.state; + cssresources[i].picked = target.checked; + channel.emit('storybook/resources/add_cssresources', cssresources); + } + + loadCssresources(cssresources) { + // remove previously added elements! + this.iframe.contentDocument.head.querySelectorAll(`[${addedElAttr}]`).forEach(eL => { + if (eL) { + eL.parentNode.removeChild(eL); + } + }); + + // add new elements! + const str = cssresources.map(res => res.code).join(''); + const parsedHtml = this.parser.parseFromString(str, 'text/html'); + const elements = parsedHtml.querySelectorAll('head > *'); + elements.forEach(eL => { + // add addedElAttr to css elements + eL.setAttribute(addedElAttr, ''); + this.iframe.contentDocument.head.appendChild(eL); + }); + } + + render() { + const { cssresources = [] } = this.state; + const { active } = this.props; + + if (!active) { + return null; + } + + return ( + + {cssresources && + cssresources.map(({ name, code, picked }, i) => ( +
+
+ + +
+ + {code} + +
+ ))} + + ); + } +} + +CssResourcePanel.propTypes = { + active: PropTypes.bool.isRequired, + channel: PropTypes.shape({ + on: PropTypes.func, + emit: PropTypes.func, + removeListener: PropTypes.func, + }).isRequired, + api: PropTypes.shape({ + onStory: PropTypes.func, + getQueryParam: PropTypes.func, + setQueryParams: PropTypes.func, + }).isRequired, +}; diff --git a/addons/cssresources/src/index.js b/addons/cssresources/src/index.js new file mode 100644 index 000000000000..6625b422a4b8 --- /dev/null +++ b/addons/cssresources/src/index.js @@ -0,0 +1,23 @@ +import addons, { makeDecorator } from '@storybook/addons'; + +export const withCssResources = makeDecorator({ + name: 'withCssResources', + parameterName: 'cssresources', + skipIfNoParametersOrOptions: true, + allowDeprecatedUsage: false, + wrapper: (getStory, context, { options, parameters }) => { + const channel = addons.getChannel(); + const storyOptions = parameters || options; + + if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) { + throw new Error('The `cssresources` parameter needs to be an Array'); + } + + channel.emit( + 'storybook/resources/add_cssresources', + Array.isArray(storyOptions) ? storyOptions : storyOptions.cssresources + ); + + return getStory(context); + }, +}); diff --git a/addons/cssresources/src/register.js b/addons/cssresources/src/register.js new file mode 100644 index 000000000000..de7f8b91f72a --- /dev/null +++ b/addons/cssresources/src/register.js @@ -0,0 +1,12 @@ +import React from 'react'; +import addons from '@storybook/addons'; +import CssResourcePanel from './CssResourcePanel'; + +addons.register('storybook/cssresources', api => { + const channel = addons.getChannel(); + addons.addPanel('storybook/cssresources/panel', { + title: 'Cssresources', + // eslint-disable-next-line react/prop-types + render: ({ active }) => , + }); +}); diff --git a/addons/events/package.json b/addons/events/package.json index 62f29b173303..ad06f411ef99 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -9,9 +9,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/events", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,8 +24,8 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "format-json": "^1.0.3", "prop-types": "^15.6.2", "react-lifecycles-compat": "^3.0.4", @@ -37,5 +34,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index 20a5342103ab..99050f16ddfb 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/addon-google-analytics", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook addon for google analytics", "keywords": [ "addon", "storybook" ], - "publishConfig": { - "access": "public" - }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/google-analytics", "bugs": { "url": "https://github.com/storybooks/storybook/issues" @@ -24,8 +21,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "global": "^4.3.2", "react-ga": "^2.5.3" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 91d0f74184a0..6e9ec753e5d3 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-graphql", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -31,5 +28,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/info/package.json b/addons/info/package.json index 7da20403eeb5..5105d792d4cb 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-info", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/info", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -25,10 +22,9 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/client-logger": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "core-js": "2.5.7", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/client-logger": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", "global": "^4.3.2", "marksy": "^6.1.0", "nested-object-assign": "^1.0.1", @@ -42,5 +38,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index f0b9089b1ec7..3bff0c35ba1e 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2728,3 +2728,1229 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" `; + +exports[`addon Info should render component description 1`] = ` +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: .88em; + font-family: Menlo,Monaco,"Courier New",monospace; + background-color: #fafafa; + padding: .5rem; + line-height: 1.5; + overflow-x: scroll; +} + +.emotion-2 { + overflow: hidden; + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 13px; + padding: 3px 10px; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-2:hover { + background-color: #f4f7fa; + border-color: #ddd; +} + +.emotion-2:active { + background-color: #e9ecef; + border-color: #ccc; +} + +.emotion-0 { + -webkit-transition: -webkit-transform .2s ease; + -webkit-transition: transform .2s ease; + transition: transform .2s ease; + height: 16px; + -webkit-transform: translateY(-100%) translateY(-6px); + -ms-transform: translateY(-100%) translateY(-6px); + transform: translateY(-100%) translateY(-6px); +} + + + +
+
+
+
+

+ TestComponent +

+

+ Basic test +

+
+
+
+
+
+ It's a + Basic test + story: + +
+

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

+

+ [object Object] +

+

+ 1,2,3 +

+

+ 7 +

+
+ seven +
+
+ true +
+

+ undefined +

+ + test + + + storiesOf + +
    +
  • + 1 +
    • +
  • + 2 +
    • +
+
+ +
+
+
+
+
+ Awesome test component description +
+
+

+ Story Source +

+ 
+              
+                
+                  
+                    

+                      
+                            It's a 
+                            Basic test
+                             story:
+                            
+                          

+                        }
+                      >
+                        

+                          

+                            
+                              <
+                              div
+                            
+                            
+                                  It's a 
+                                  Basic test
+                                   story:
+                                  
+                                

+                              }
+                              singleLine={false}
+                            >
+                              
+                            
+                            
+                              >
+                            
+                          

+                          
+                            

+                              
+                                It's a 
+                              
+                            

+                          
+                          
+                            

+                              
+                                Basic test
+                              
+                            

+                          
+                          
+                            

+                              
+                                 story:
+                              
+                            

+                          
+                          
+                            }
+                          >
+                            

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

+                                        
+                                    
+                                    
+                                      func
+                                    
+                                    
+                                      =
+                                      
+                                        {
+                                        
+                                          
+                                            func
+                                          
+                                        
+                                        }
+                                      
+                                    
+                                  
+                                  
+                                    
+                                      

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

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

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

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

+                                        
+                                    
+                                    
+                                      bool
+                                    
+                                    

+                                  
+                                
+                              
+                              
+                                />
+                              
+                            

+                          
+                          

+                            
+                              </
+                              div
+                              >
+                            
+                          

+
+ +
+ + + + + + + + + + + +
+
+ + + + +`; diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index 34b323759d48..8916bfe7bf50 100644 --- a/addons/info/src/components/PropTable.js +++ b/addons/info/src/components/PropTable.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import 'core-js/fn/array/includes'; import { Table, Td, Th } from '@storybook/components'; import PropVal from './PropVal'; diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 5d1fccafc56c..d5dfa4013cab 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -117,7 +117,11 @@ class Story extends Component { const { stylesheet } = this.state; const { children } = this.props; - return
{children}
; + return ( +
+ {children} +
+ ); } _renderInline() { @@ -250,7 +254,7 @@ class Story extends Component { if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => { - if (STORYBOOK_REACT_CLASSES[key].name === context.story) { + if (STORYBOOK_REACT_CLASSES[key].name === context.kind) { retDiv =
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
; } }); diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 76a0d5070ff7..44b60bb69a20 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -23,6 +23,16 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => ( ); /* eslint-enable */ +const reactClassPath = 'some/path/TestComponent.jsx'; +const storybookReactClassMock = { + name: 'TestComponent', + path: reactClassPath, + docgenInfo: { + description: 'Awesome test component description', + name: 'TestComponent', + }, +}; + const testOptions = { propTables: false }; const testMarkdown = `# Test story @@ -63,4 +73,19 @@ describe('addon Info', () => { const Info = withInfo()(storyFn); mount(); }); + + it('should render component description', () => { + const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath]; + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock }); + + const Info = () => + withInfo({ inline: true, propTables: false })(storyFn, { + kind: 'TestComponent', + story: 'Basic test', + }); + + expect(mount()).toMatchSnapshot(); + + Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue }); + }); }); diff --git a/addons/jest/docs/storybook-addon-jest.gif b/addons/jest/docs/storybook-addon-jest.gif index a2f7152536b7..4b6c71b6f9f1 100644 Binary files a/addons/jest/docs/storybook-addon-jest.gif and b/addons/jest/docs/storybook-addon-jest.gif differ diff --git a/addons/jest/package.json b/addons/jest/package.json index f9e7f91dee39..51f675c37652 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -12,9 +12,6 @@ "unit-testing" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/jest", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -31,8 +28,8 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", "global": "^4.3.2", "prop-types": "^15.6.2", "upath": "^1.1.0", @@ -40,5 +37,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/jest/src/components/Result.js b/addons/jest/src/components/Result.js index f740dcdd2289..60201de4b664 100644 --- a/addons/jest/src/components/Result.js +++ b/addons/jest/src/components/Result.js @@ -140,24 +140,22 @@ const Message = ({ msg }) => { .join('') .split(/\[22m/) .reduce((acc, item) => acc.concat(item), []) - .map( - (item, li) => - typeof item === 'string' - ? item - .split(/\[32m(.*?)\[39m/) - // eslint-disable-next-line react/no-array-index-key - .map((i, index) => (index % 2 ? {i} : i)) - : item + .map((item, li) => + typeof item === 'string' + ? item + .split(/\[32m(.*?)\[39m/) + // eslint-disable-next-line react/no-array-index-key + .map((i, index) => (index % 2 ? {i} : i)) + : item ) .reduce((acc, item) => acc.concat(item), []) - .map( - (item, li) => - typeof item === 'string' - ? item - .split(/\[31m(.*?)\[39m/) - // eslint-disable-next-line react/no-array-index-key - .map((i, index) => (index % 2 ? {i} : i)) - : item + .map((item, li) => + typeof item === 'string' + ? item + .split(/\[31m(.*?)\[39m/) + // eslint-disable-next-line react/no-array-index-key + .map((i, index) => (index % 2 ? {i} : i)) + : item ) .reduce((acc, item) => acc.concat(item), []) .reduce(createSubgroup, { diff --git a/addons/knobs/README.md b/addons/knobs/README.md index a0a20953f735..d9bb8210f636 100644 --- a/addons/knobs/README.md +++ b/addons/knobs/README.md @@ -55,6 +55,39 @@ stories.add('as dynamic variables', () => { }); ``` +### With Vue.js +```js +import { storiesOf } from '@storybook/vue'; +import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; + +import MyButton from './Button.vue'; + +const stories = storiesOf('Storybook Knobs', module); + +// Add the `withKnobs` decorator to add knobs support to your stories. +// You can also configure `withKnobs` as a global decorator. +stories.addDecorator(withKnobs); + +// Knobs for Vue props +// Knobs for Vue props +stories.add('with a button', () => ({ + components: { MyButton }, + template: + `` +})); + +// Knobs as dynamic variables. +stories.add('as dynamic variables', () => { + const name = text('Name', 'Arunoda Susiripala'); + const age = number('Age', 89); + + const content = `I am ${name} and I'm ${age} years old.`; + return `
${content}
`; +}); +``` + ### With Angular ```js import { storiesOf } from '@storybook/angular'; @@ -344,8 +377,8 @@ stories.addDecorator(withKnobs) stories.add('story name', () => ..., { knobs: { timestamps: true, // Doesn't emit events while user is typing. - escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default in storybook for Vue, Angular, and Polymer, because those frameworks allow rendering plain HTML. - // You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app. + escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side. + // You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app. } }); ``` diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 8d7492354fc7..8cdc0c6f15ea 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-knobs", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook Addon Prop Editor Component", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/knobs", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -25,9 +22,9 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "copy-to-clipboard": "^3.0.8", "escape-html": "^1.0.3", "fast-deep-equal": "^2.0.1", @@ -40,5 +37,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 560c5c759979..70bb67dc5a3c 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -138,22 +138,24 @@ export default class Panel extends PureComponent { let knobsArray = Object.keys(knobs).filter(key => knobs[key].used); - knobsArray.filter(key => knobs[key].groupId).forEach(key => { - const knobKeyGroupId = knobs[key].groupId; - groupIds.push(knobKeyGroupId); - groups[knobKeyGroupId] = { - render: ({ active: groupActive, selected }) => ( - - knob.groupId === knobKeyGroupId)} - onFieldChange={this.handleChange} - onFieldClick={this.handleClick} - /> - - ), - title: knobKeyGroupId, - }; - }); + knobsArray + .filter(key => knobs[key].groupId) + .forEach(key => { + const knobKeyGroupId = knobs[key].groupId; + groupIds.push(knobKeyGroupId); + groups[knobKeyGroupId] = { + render: ({ active: groupActive, selected }) => ( + + knob.groupId === knobKeyGroupId)} + onFieldChange={this.handleChange} + onFieldClick={this.handleClick} + /> + + ), + title: knobKeyGroupId, + }; + }); groups[DEFAULT_GROUP_ID] = { render: () => null, diff --git a/addons/links/package.json b/addons/links/package.json index 2e5ab1ef51f7..4cc8d247edd0 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-links", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Story Links addon for storybook", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/links", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -24,13 +21,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "global": "^4.3.2", "prop-types": "^15.6.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/notes/package.json b/addons/notes/package.json index da2c69aeca5f..976bbb95b5ae 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -8,9 +8,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/notes", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,7 +24,7 @@ }, "dependencies": { "@emotion/styled": "^10.0.4", - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "marked": "^0.5.2" }, "devDependencies": { @@ -35,5 +32,8 @@ }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index 096c87ffe283..ccb93442af52 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -9,9 +9,6 @@ "storybook" ], "homepage": "https://storybook.js.org", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -26,11 +23,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "prop-types": "^15.6.2" }, "peerDependencies": { "react": "*", "react-native": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index 4d2179ff6eec..af8de397cf4b 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Display storybook story knobs on your deviced.", "keywords": [ "addon", @@ -9,9 +9,6 @@ "react-native", "storybook" ], - "publishConfig": { - "access": "public" - }, "repository": { "type": "git", "url": "https://github.com/storybooks/storybook.git" @@ -23,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "deep-equal": "^1.0.1", "prop-types": "^15.6.2", "react-native-color-picker": "^0.4.0", @@ -35,5 +32,8 @@ "@storybook/addon-knobs": "4.1.0-alpha.1", "react": "*", "react-native": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/ondevice-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js index df825df64345..961b88bca288 100644 --- a/addons/ondevice-knobs/src/panel.js +++ b/addons/ondevice-knobs/src/panel.js @@ -103,14 +103,16 @@ export default class Panel extends React.Component { let knobsArray = Object.keys(knobs); - knobsArray.filter(key => knobs[key].groupId).forEach(key => { - const knobKeyGroupId = knobs[key].groupId; - groupIds.push(knobKeyGroupId); - groups[knobKeyGroupId] = { - render: () => {knobKeyGroupId}, - title: knobKeyGroupId, - }; - }); + knobsArray + .filter(key => knobs[key].groupId) + .forEach(key => { + const knobKeyGroupId = knobs[key].groupId; + groupIds.push(knobKeyGroupId); + groups[knobKeyGroupId] = { + render: () => {knobKeyGroupId}, + title: knobKeyGroupId, + }; + }); if (groupIds.length > 0) { groups[DEFAULT_GROUP_ID] = { diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 9a7491d661e8..797489f4fe71 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", "notes", "storybook" ], - "publishConfig": { - "access": "public" - }, "repository": { "type": "git", "url": "https://github.com/storybooks/storybook.git" @@ -21,12 +18,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "prop-types": "^15.6.2", "react-native-simple-markdown": "^1.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/options/README.md b/addons/options/README.md index 46fc3ca9c3b6..4de59b4ac8db 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -20,7 +20,9 @@ Add this line to your `addons.js` file (create this file inside your storybook c import '@storybook/addon-options/register'; ``` -Import and use the `withOptions` decorator in your config.js file. +###Set options globally + +Import and use the `withOptions` decorator in your `config.js` file. ```js import { addDecorator, configure } from '@storybook/react'; @@ -113,27 +115,29 @@ configure(() => require('./stories'), module); The options-addon accepts story parameters on the `options` key: ```js -import { storiesOf } from '@storybook/marko'; -import { withKnobs, text, number } from '@storybook/addon-knobs'; -import Hello from '../components/hello/index.marko'; +import { storiesOf } from '@storybook/react'; +import MyComponent from './my-component'; -storiesOf('Addons|Knobs/Hello', module) +storiesOf('Addons|Custom options', module) // If you want to set the option for all stories in of this kind .addParameters({ options: { addonPanelInRight: true } }) - .addDecorator(withKnobs) .add( - 'Simple', - () => { - const name = text('Name', 'John Doe'); - const age = number('Age', 44); - return Hello.renderSync({ - name, - age, - }); - }, + 'Story for MyComponent', + () => , // If you want to set the options for a specific story { options: { addonPanelInRight: false } } ); ``` _NOTE_ that you must attach `withOptions` as a decorator (at the top-level) for this to work. + +## Typescript + +To install type definitions: `npm install -D @types/storybook__addon-options` + +Make sure you also have the type definitions installed for the following libs: + +- node +- react + +You can install them using `npm install -D @types/node @types/react`, assuming you are using Typescript >2.0. diff --git a/addons/options/package.json b/addons/options/package.json index a33eb902d484..b8dc9ec482a4 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-options", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Options addon for storybook", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/options", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -23,10 +20,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", "util-deprecate": "^1.0.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index 8abae2420d83..4ed6aebdfbe6 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -434,11 +434,27 @@ If you are running tests from outside of your app's directory, storyshots' detec ### `test` -Run a custom test function for each story, rather than the default (a vanilla snapshot test). Setting `test` will take precedence over the `renderer` option. See the exports section below for more details. +Run a custom test function for each story, rather than the default (a vanilla snapshot test). +Setting `test` will take precedence over the `renderer` option. +You can still overwrite what renderer is used for the test function: + +```js +import initStoryshots, { renderWithOptions } from '@storybook/addon-storyshots'; +import { mount } from 'enzyme'; + +initStoryshots({ + test: renderWithOptions({ + renderer: mount, + }), +}); +``` ### `renderer` -Pass a custom renderer (such as enzymes `mount`) to record snapshots. Note that setting `test` overrides `renderer`. +Pass a custom renderer (such as enzymes `mount`) to record snapshots. +This may be necessary if you want to use React features that are not supported by the default test renderer, +such as **ref** or **Portals**. +Note that setting `test` overrides `renderer`. ```js import initStoryshots from '@storybook/addon-storyshots'; @@ -524,7 +540,8 @@ The default, render the story as normal and take a Jest snapshot. ### `renderOnly` -Just render the story, don't check the output at all (useful if you just want to ensure it doesn't error) +Just render the story, don't check the output at all. This is useful as a low-effort way of smoke testing your +components to ensure they do not error. ### `snapshotWithOptions(options)` @@ -532,13 +549,14 @@ Like the default, but allows you to specify a set of options for the test render ### `renderWithOptions(options)` -Like the default, but allows you to specify a set of options for the renderer. See above. +Like the default, but allows you to specify a set of options for the renderer, just like `snapshotWithOptions`. ### `multiSnapshotWithOptions(options)` Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object. #### integrityOptions + This option is useful when running test with `multiSnapshotWithOptions(options)` in order to track snapshots are matching the stories. (disabled by default). The value is just a [settings](https://github.com/isaacs/node-glob#options) to a `glob` object, that searches for the snapshot files. diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 3387213c2568..b8dc954e9342 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-storyshots", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshorts/storyshots-core", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,19 +24,23 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/addons": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "core-js": "^2.5.7", "glob": "^7.1.3", "global": "^4.3.2", "jest-specific-snapshot": "^1.0.0", - "read-pkg-up": "^4.0.0" + "read-pkg-up": "^4.0.0", + "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "@storybook/addon-actions": "4.1.0-alpha.1", - "@storybook/addon-links": "4.1.0-alpha.1", + "@storybook/addon-actions": "4.1.0-alpha.11", + "@storybook/addon-links": "4.1.0-alpha.11", "@storybook/addons": "4.1.0-alpha.1", - "@storybook/react": "4.1.0-alpha.1", + "@storybook/react": "4.1.0-alpha.11", "enzyme-to-json": "^3.3.4", "react": "^16.6.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js b/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js index 981da4f36a76..9019699ac72e 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js +++ b/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js @@ -2,6 +2,9 @@ import hasDependency from '../hasDependency'; import configure from '../configure'; function setupAngularJestPreset() { + // Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten." + require.requireActual('core-js/modules/es6.promise'); + // Angular + Jest + Storyshots = Crazy Shit: // We need to require 'jest-preset-angular/setupJest' before any storybook code // is running inside jest - one of the things that `jest-preset-angular/setupJest` does is diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index 8d70fccec33e..c9856b2ef471 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -1,3 +1,11 @@ +## Getting Started + +Add the following module into your app. + + ```sh +npm install --save-dev @storybook/addon-storyshots-puppeteer +``` + ## Configure Storyshots for image snapshots /\*\ **React-native** is **not supported** by this test function. diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 037fa9036f23..d67712109aea 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Image snappshots addition to StoryShots base on puppeteer", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshorts/storyshots-puppeteer", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -24,12 +21,16 @@ "prepare": "node ../../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/node-logger": "4.1.0-alpha.1", + "@storybook/node-logger": "4.1.0-alpha.11", + "core-js": "^2.5.7", "jest-image-snapshot": "^2.6.0", - "puppeteer": "^1.9.0" + "puppeteer": "^1.9.0", + "regenerator-runtime": "^0.12.1" }, "peerDependencies": { - "@storybook/addon-storyshots": "4.0.0" + "@storybook/addon-storyshots": "^4.0.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index e40fdfe76394..6485b4fc3918 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-storysource", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Stories addon for storybook", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/storysource", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -24,16 +21,20 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "core-js": "^2.5.7", "estraverse": "^4.2.0", "loader-utils": "^1.1.0", "prettier": "^1.14.3", "prop-types": "^15.6.2", - "react-syntax-highlighter": "^10.0.0" + "react-syntax-highlighter": "^10.0.0", + "regenerator-runtime": "^0.12.1" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap index f5c3d3d46fd5..40dbb369c25f 100644 --- a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap +++ b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap @@ -216,11 +216,11 @@ Object { "Custom|ng-content@Default": Object { "endLoc": Object { "col": 2, - "line": 15, + "line": 17, }, "startLoc": Object { "col": 43, - "line": 10, + "line": 12, }, }, } diff --git a/addons/viewport/package.json b/addons/viewport/package.json index e3f5d14a17ed..492b81a0e283 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-viewport", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook addon to change the viewport size to mobile", "keywords": [ "addon", "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/addons/viewport", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -24,14 +21,17 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/components": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/components": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", "global": "^4.3.2", "prop-types": "^15.6.2", "util-deprecate": "^1.0.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts index 191d587750da..5fb420e543f0 100644 --- a/app/angular/index.d.ts +++ b/app/angular/index.d.ts @@ -41,4 +41,5 @@ declare module '@storybook/angular' { export function addParameters(parameters: any): IApi; export function configure(loaders: () => void, module: NodeModule): void; export function getStorybook(): IStoribookSection[]; + export function forceReRender(): void; } diff --git a/app/angular/package.json b/app/angular/package.json index 1b62fe4f5750..968543a12fa0 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/angular", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/angular", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,20 +25,23 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", - "@storybook/node-logger": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", + "@storybook/node-logger": "4.1.0-alpha.11", "angular2-template-loader": "^0.6.2", "core-js": "^2.5.7", "fork-ts-checker-webpack-plugin": "^0.4.14", "global": "^4.3.2", "react": "^16.6.0", "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1", "sass-loader": "^7.1.0", "ts-loader": "^5.2.2", "tsconfig-paths-webpack-plugin": "^3.2.0", "webpack": "^4.23.1" }, + "devDependencies": { + "zone.js": "^0.8.26" + }, "peerDependencies": { "@angular-devkit/core": "^0.6.1 || >=7.0.0", "@angular/common": ">=6.0.0", @@ -53,7 +53,7 @@ "babel-loader": "^7.0.0 || ^8.0.0", "zone.js": "^0.8.26" }, - "devDependencies": { - "zone.js": "^0.8.26" + "publishConfig": { + "access": "public" } } diff --git a/app/angular/src/client/index.js b/app/angular/src/client/index.js index 85a2bda84e6a..b9441c7cbc29 100644 --- a/app/angular/src/client/index.js +++ b/app/angular/src/client/index.js @@ -5,6 +5,7 @@ export { addParameters, configure, getStorybook, + forceReRender, } from './preview'; export { moduleMetadata } from './preview/angular/decorators'; diff --git a/app/angular/src/client/preview/index.d.ts b/app/angular/src/client/preview/index.d.ts index 32925352207a..b053e1ac3b8b 100644 --- a/app/angular/src/client/preview/index.d.ts +++ b/app/angular/src/client/preview/index.d.ts @@ -4,3 +4,4 @@ export function addDecorator(decorator: any): IApi; export function configure(loaders: () => void, module: NodeModule): void; export function getStorybook(): IStoribookSection[]; export function clearDecorators(): void; +export function forceReRender(): void; diff --git a/app/angular/src/demo/button.component.ts b/app/angular/src/demo/button.component.ts index 9ccfad39309e..f3e2828cec83 100644 --- a/app/angular/src/demo/button.component.ts +++ b/app/angular/src/demo/button.component.ts @@ -3,7 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'storybook-button-component', template: ` - + `, styles: [ ` diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts index 8e1f3261991f..c8348edbcec8 100644 --- a/app/angular/src/demo/welcome.component.ts +++ b/app/angular/src/demo/welcome.component.ts @@ -3,46 +3,45 @@ import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'storybook-welcome-component', template: ` -
-

Welcome to storybook

-

This is a UI component dev environment for your app.

-

- We've added some basic stories inside the src/stories directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

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

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button stories - located at src/stories/index.js.) -

-

- Usually we create stories with smaller UI components in the app.
- Have a look at the - Writing Stories - section in our documentation. -

-

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

-
+
+

Welcome to storybook

+

This is a UI component dev environment for your app.

+

+ We've added some basic stories inside the + src/stories directory.
+ A story is a single state of one or more UI components. You can have as many stories as you + want.
+ (Basically a story is like a visual test case.) +

+

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

+

+ Just like that, you can add your own components as stories.
+ You can also edit those components and see changes right away.
+ (Try editing the Button stories located at + src/stories/index.js.) +

+

+ Usually we create stories with smaller UI components in the app.
+ Have a look at the + + Writing Stories + + section in our documentation. +

+

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

+
`, styles: [ ` diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index 049167745352..c5b25b4710f1 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -103,12 +103,10 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const rulesExcludingStyles = filterOutStylingRules(baseConfig); // cliStyleConfig.entry adds global style files to the webpack context - const entry = { + const entry = [ ...baseConfig.entry, - iframe: [] - .concat(baseConfig.entry.iframe) - .concat(Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), [])), - }; + ...Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), []), + ]; const module = { ...baseConfig.module, diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 882e212caecb..714d9fb5a20f 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -38,13 +38,13 @@ export function webpack(config, { configDir }) { }, resolve: { ...config.resolve, - extensions: [...config.resolve.extensions, '.ts', '.tsx'], + extensions: ['.ts', '.tsx', ...config.resolve.extensions], }, plugins: [ ...config.plugins, // See https://github.com/angular/angular/issues/11580#issuecomment-401127742 new ContextReplacementPlugin( - /@angular(\\|\/)core(\\|\/)fesm5/, + /@angular(\\|\/)core(\\|\/)(fesm5|bundles)/, path.resolve(__dirname, '..') ), createForkTsCheckerInstance(tsLoaderOptions), diff --git a/app/ember/package.json b/app/ember/package.json index 5beea410db49..87a3ffef14e8 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,11 +1,8 @@ { "name": "@storybook/ember", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -25,18 +22,22 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", "@ember/test-helpers": "^1.0.0", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", "babel-plugin-ember-modules-api-polyfill": "^2.4.0", "ember-cli-htmlbars-inline-precompile": "^1.0.3", "ember-source": "^3.4.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/html/package.json b/app/html/package.json index 787282ed70fe..4dfe672ec4db 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/html", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/html", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,15 +24,19 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "html-loader": "^0.5.5", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js index 75484ac511d5..db2632aa91e2 100644 --- a/app/html/src/client/preview/render.js +++ b/app/html/src/client/preview/render.js @@ -3,13 +3,24 @@ import { stripIndents } from 'common-tags'; const rootElement = document.getElementById('root'); -export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) { +export default function renderMain({ + story, + selectedKind, + selectedStory, + showMain, + showError, + forceRender, +}) { const component = story(); showMain(); if (typeof component === 'string') { rootElement.innerHTML = component; } else if (component instanceof Node) { + if (forceRender === true) { + return; + } + rootElement.innerHTML = ''; rootElement.appendChild(component); } else { diff --git a/app/marko/package.json b/app/marko/package.json index 22a125a6144e..882e7bf2ee01 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/marko", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/marko", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,18 +25,22 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "marko-loader": "^1.3.3", "raw-loader": "^0.5.1", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", "marko": "^4.10.0", "marko-widgets": "^7.0.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/mithril/package.json b/app/mithril/package.json index 18a52ae8118f..96412b161677 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/mithril", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,13 +25,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.0.0", - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@babel/plugin-transform-react-jsx": "^7.2.0", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "devDependencies": { "mithril": "^1.1.6" @@ -42,5 +40,8 @@ "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", "mithril": "^1.1.6" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/mithril/src/client/index.js b/app/mithril/src/client/index.js index 308ceea8889f..88fb416f70ef 100644 --- a/app/mithril/src/client/index.js +++ b/app/mithril/src/client/index.js @@ -2,6 +2,7 @@ export { storiesOf, setAddon, addDecorator, + addParameters, configure, getStorybook, forceReRender, diff --git a/app/polymer/package.json b/app/polymer/package.json index 54bf6a0c6ab3..40fb5c2ebf57 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/polymer", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/polymer", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,14 +24,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/polyfill": "^7.0.0", - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "@webcomponents/webcomponentsjs": "^1.2.0", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1", "webpack": "^4.23.1" }, "devDependencies": { @@ -45,5 +42,8 @@ "babel-loader": "^7.0.0 || ^8.0.0", "lit-html": "0.10.0", "polymer-webpack-loader": "^2.0.2" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/polymer/src/client/index.js b/app/polymer/src/client/index.js index ff377f83f50d..88fb416f70ef 100644 --- a/app/polymer/src/client/index.js +++ b/app/polymer/src/client/index.js @@ -5,4 +5,5 @@ export { addParameters, configure, getStorybook, + forceReRender, } from './preview'; diff --git a/app/polymer/src/client/preview/globals.js b/app/polymer/src/client/preview/globals.js index a409d335bc25..ddb4205926a8 100644 --- a/app/polymer/src/client/preview/globals.js +++ b/app/polymer/src/client/preview/globals.js @@ -1,6 +1,5 @@ import '@webcomponents/webcomponentsjs/webcomponents-lite'; import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'; -import '@babel/polyfill'; import { window } from 'global'; diff --git a/app/react-native/package.json b/app/react-native/package.json index 8bed413c75bd..a06823747a7b 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -8,9 +8,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,12 +25,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/channel-websocket": "4.1.0-alpha.1", - "@storybook/channels": "4.1.0-alpha.1", - "@storybook/core": "4.1.0-alpha.1", - "@storybook/core-events": "4.1.0-alpha.1", - "@storybook/ui": "4.1.0-alpha.1", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/channel-websocket": "4.1.0-alpha.11", + "@storybook/channels": "4.1.0-alpha.11", + "@storybook/core": "4.1.0-alpha.11", + "@storybook/core-events": "4.1.0-alpha.11", + "@storybook/ui": "4.1.0-alpha.11", "babel-loader": "^8.0.4", "babel-plugin-macros": "^2.4.2", "babel-plugin-syntax-async-functions": "^6.13.0", @@ -43,7 +40,7 @@ "babel-plugin-transform-regenerator": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", - "babel-preset-minify": "^0.5.0", + "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5", "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "case-sensitive-paths-webpack-plugin": "^2.1.2", @@ -76,5 +73,8 @@ "babel-runtime": ">=6.0.0", "react": "*", "react-native": ">=0.51.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/react-native/readme.md b/app/react-native/readme.md index cfc38cc38b43..f21620e4c411 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -22,16 +22,16 @@ The next thing you need to do is make Storybook UI visible in your app. The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code: ```js -export default from "./storybook"; +export default from './storybook'; ``` This will get you up and running quickly, but then you lose your app! There are multiple options here. for example, you can export conditionally: ```js -import StorybookUI from "./storybook"; +import StorybookUI from './storybook'; -import App from "./app"; +import App from './app'; module.exports = __DEV__ ? StorybookUI : App; ``` @@ -124,8 +124,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi initialSelection: Object (null) -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }` shouldPersistSelection: Boolean (true) - -- initialize storybook with the last selected story.` - ) + -- initialize storybook with the last selected story. + shouldDisableKeyboardAvoidingView: Boolean (false) + -- Disable KeyboardAvoidingView wrapping Storybook's view + keyboardAvoidingViewVerticalOffset: Number (0) + -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view } ``` diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js b/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js index 9874e510bdca..1b01c00a0c14 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js +++ b/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native'; +import { View, ScrollView } from 'react-native'; import style from '../style'; @@ -8,8 +8,6 @@ export default class Wrapper extends PureComponent { render() { const { panels, addonSelected } = this.props; - const keyboardVerticalOffset = Platform.OS === 'ios' ? 60 : 0; - const addonKeys = Object.keys(panels); return addonKeys.map(id => { @@ -17,13 +15,7 @@ export default class Wrapper extends PureComponent { return ( - - {panels[id].render({ active: selected })} - + {panels[id].render({ active: selected })} ); }); diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js index 8d1e82887e66..ab39f6cd5399 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/index.js +++ b/app/react-native/src/preview/components/OnDeviceUI/index.js @@ -1,6 +1,13 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { SafeAreaView, Animated, TouchableOpacity } from 'react-native'; +import { + Keyboard, + KeyboardAvoidingView, + Platform, + SafeAreaView, + Animated, + TouchableOpacity, +} from 'react-native'; import Events from '@storybook/core-events'; import StoryListView from '../StoryListView'; @@ -22,6 +29,7 @@ import { import style from './style'; const ANIMATION_DURATION = 300; +const IS_IOS = Platform.OS === 'ios'; export default class OnDeviceUI extends PureComponent { constructor(props) { @@ -32,8 +40,8 @@ export default class OnDeviceUI extends PureComponent { this.state = { tabOpen, slideBetweenAnimation: false, - selection: props.initialStory || {}, - storyFn: props.initialStory ? props.initialStory.storyFn : null, + selection: {}, + storyFn: null, previewWidth: 0, previewHeight: 0, }; @@ -42,8 +50,18 @@ export default class OnDeviceUI extends PureComponent { this.forceRender = this.forceUpdate.bind(this); } - componentWillMount() { - const { events } = this.props; + async componentWillMount() { + const { events, getInitialStory } = this.props; + + if (getInitialStory) { + const story = await getInitialStory(); + + this.setState({ + selection: story || {}, + storyFn: story ? story.storyFn : null, + }); + } + events.on(Events.SELECT_STORY, this.handleStoryChange); events.on(Events.FORCE_RE_RENDER, this.forceRender); } @@ -95,10 +113,22 @@ export default class OnDeviceUI extends PureComponent { // True if swiping between navigator and addons slideBetweenAnimation: tabOpen + newTabOpen === PREVIEW, }); + + // close the keyboard opened from a TextInput from story list or knobs + if (newTabOpen === PREVIEW) { + Keyboard.dismiss(); + } }; render() { - const { stories, events, url, isUIHidden } = this.props; + const { + stories, + events, + url, + isUIHidden, + shouldDisableKeyboardAvoidingView, + keyboardAvoidingViewVerticalOffset, + } = this.props; const { tabOpen, slideBetweenAnimation, @@ -121,40 +151,47 @@ export default class OnDeviceUI extends PureComponent { return ( - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + + ); } @@ -175,16 +212,16 @@ OnDeviceUI.propTypes = { url: PropTypes.string, tabOpen: PropTypes.number, isUIHidden: PropTypes.bool, - initialStory: PropTypes.shape({ - story: PropTypes.string.isRequired, - kind: PropTypes.string.isRequired, - storyFn: PropTypes.func.isRequired, - }), + getInitialStory: PropTypes.func, + shouldDisableKeyboardAvoidingView: PropTypes.bool, + keyboardAvoidingViewVerticalOffset: PropTypes.number, }; OnDeviceUI.defaultProps = { url: '', tabOpen: 0, isUIHidden: false, - initialStory: null, + getInitialStory: null, + shouldDisableKeyboardAvoidingView: false, + keyboardAvoidingViewVerticalOffset: 0, }; diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js index a53522b648ec..750f26ab9c08 100644 --- a/app/react-native/src/preview/components/StoryListView/index.js +++ b/app/react-native/src/preview/components/StoryListView/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { SectionList, View, Text, TouchableOpacity } from 'react-native'; +import { SectionList, Text, TextInput, TouchableOpacity, View } from 'react-native'; import Events from '@storybook/core-events'; import style from './style'; @@ -40,6 +40,7 @@ export default class StoryListView extends Component { this.state = { data: [], + originalData: [], }; this.storyAddedHandler = this.handleStoryAdded.bind(this); @@ -71,10 +72,37 @@ export default class StoryListView extends Component { }), {} ); - this.setState({ - data, - }); + + this.setState({ data, originalData: data }); + } + }; + + handleChangeSearchText = text => { + const query = text.trim(); + const { originalData: data } = this.state; + + if (!query) { + this.setState({ data }); + return; } + + const checkValue = value => value.toLowerCase().includes(query.toLowerCase()); + const filteredData = data.reduce((acc, story) => { + const hasTitle = checkValue(story.title); + const hasKind = story.data.some(kind => checkValue(kind.name)); + + if (hasTitle || hasKind) { + acc.push({ + ...story, + // in case the query matches component's title, all of its stories will be shown + data: !hasTitle ? story.data.filter(kind => checkValue(kind.name)) : story.data, + }); + } + + return acc; + }, []); + + this.setState({ data: filteredData }); }; changeStory(kind, story) { @@ -88,24 +116,34 @@ export default class StoryListView extends Component { const { data } = this.state; return ( - ( - this.changeStory(item.kind, item.name)} - /> - )} - renderSectionHeader={({ section: { title } }) => ( - - )} - keyExtractor={(item, index) => item + index} - sections={data} - stickySectionHeadersEnabled={false} - /> + + + ( + this.changeStory(item.kind, item.name)} + /> + )} + renderSectionHeader={({ section: { title } }) => ( + + )} + keyExtractor={(item, index) => item + index} + sections={data} + stickySectionHeadersEnabled={false} + /> + ); } } diff --git a/app/react-native/src/preview/components/StoryListView/style.js b/app/react-native/src/preview/components/StoryListView/style.js index fe376bbb1813..5cac48f5cabc 100644 --- a/app/react-native/src/preview/components/StoryListView/style.js +++ b/app/react-native/src/preview/components/StoryListView/style.js @@ -1,10 +1,17 @@ export default { - list: { + searchBar: { + backgroundColor: '#eee', + borderRadius: 5, + fontSize: 16, + marginHorizontal: 5, + marginVertical: 5, + padding: 5, + }, + flex: { flex: 1, }, header: { - paddingTop: 5, - paddingBottom: 5, + paddingVertical: 5, }, headerText: { fontSize: 20, diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js index e01cb14b4767..1f0f7f6ad653 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -1,4 +1,4 @@ -/* eslint-disable react/no-this-in-sfc, no-underscore-dangle */ +/* eslint-disable no-underscore-dangle */ import React from 'react'; import { AsyncStorage, NativeModules } from 'react-native'; @@ -46,7 +46,7 @@ export default class Preview { let channel = null; const onDeviceUI = params.onDeviceUI !== false; - + const { initialSelection, shouldPersistSelection } = params; // should the initial story be sent to storybookUI // set to true if using disableWebsockets or if connection to WebsocketServer fails. let setInitialStory = false; @@ -67,7 +67,7 @@ export default class Preview { const port = params.port !== false ? `:${params.port || 7007}` : ''; const query = params.query || ''; - const { initialSelection, secured, shouldPersistSelection } = params; + const { secured } = params; const websocketType = secured ? 'wss' : 'ws'; const httpType = secured ? 'https' : 'http'; @@ -77,6 +77,8 @@ export default class Preview { url, async: onDeviceUI, onError: () => { + // We are both emitting event and telling the component to get initial story. It may happen that component is created before the error or vise versa. + // This way we handle both cases this._setInitialStory(initialSelection, shouldPersistSelection); setInitialStory = true; @@ -90,7 +92,7 @@ export default class Preview { } channel.on(Events.GET_STORIES, () => this._sendSetStories()); - channel.on(Events.SET_CURRENT_STORY, d => this._selectStory(d)); + channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d)); this._sendSetStories(); // If the app is started with server running, set the story as the one selected in the browser @@ -114,7 +116,13 @@ export default class Preview { url={webUrl} isUIOpen={params.isUIOpen} tabOpen={params.tabOpen} - initialStory={setInitialStory ? preview._getInitialStory() : null} + getInitialStory={ + setInitialStory + ? preview._getInitialStory(initialSelection, shouldPersistSelection) + : null + } + shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView} + keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset} /> ); } @@ -136,8 +144,15 @@ export default class Preview { } _setInitialStory = async (initialSelection, shouldPersistSelection = true) => { - let story = this._getInitialStory(); + const story = await this._getInitialStory(initialSelection, shouldPersistSelection)(); + + if (story) { + this._selectStory(story); + } + }; + _getInitialStory = (initialSelection, shouldPersistSelection = true) => async () => { + let story = null; if (initialSelection && this._checkStory(initialSelection)) { story = initialSelection; } else if (shouldPersistSelection) { @@ -150,11 +165,9 @@ export default class Preview { } if (story) { - this._selectStory(story); + return this._getStory(story); } - }; - _getInitialStory = () => { const dump = this._stories.dumpStoryBook(); const nonEmptyKind = dump.find(kind => kind.stories.length > 0); @@ -171,11 +184,16 @@ export default class Preview { return { ...selection, storyFn }; } - _selectStory(selection) { - const channel = addons.getChannel(); - - channel.emit(Events.SELECT_STORY, this._getStory(selection)); + _selectStoryEvent(selection) { AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection)); + + const story = this._getStory(selection); + this._selectStory(story); + } + + _selectStory(story) { + const channel = addons.getChannel(); + channel.emit(Events.SELECT_STORY, story); } _checkStory(selection) { diff --git a/app/react-native/src/server/config/babel.js b/app/react-native/src/server/config/babel.js index 7c4414c5fa4b..f3471ce02341 100644 --- a/app/react-native/src/server/config/babel.js +++ b/app/react-native/src/server/config/babel.js @@ -6,6 +6,7 @@ module.exports = { require.resolve('babel-preset-env'), { modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false, + shippedProposals: true, }, ], require.resolve('babel-preset-react'), diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js index 09720b78ff2b..77da36c090b2 100644 --- a/app/react-native/src/server/config/webpack.config.prod.js +++ b/app/react-native/src/server/config/webpack.config.prod.js @@ -3,7 +3,7 @@ import webpack from 'webpack'; import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; -import { getManagerHeadHtml } from '@storybook/core/dist/server/utils'; +import { getManagerHeadHtml } from '@storybook/core/dist/server/utils/template'; import { version } from '../../../package.json'; import { includePaths, excludePaths, loadEnv } from './utils'; diff --git a/app/react/package.json b/app/react/package.json index ca004e43f301..cf7eb83b3374 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/react", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/react", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,25 +25,33 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@babel/plugin-transform-react-constant-elements": "^7.2.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@babel/runtime": "^7.1.2", "@emotion/styled": "^0.10.6", - "@storybook/core": "4.1.0-alpha.1", - "@storybook/node-logger": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", + "@storybook/node-logger": "4.1.0-alpha.11", + "@svgr/webpack": "^4.0.3", + "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", + "babel-preset-react-app": "^6.1.0", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.4.4", "prop-types": "^15.6.2", + "react": "^16.6.0", "react-dev-utils": "^6.1.0", + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1", "semver": "^5.6.0", "webpack": "^4.23.1" }, "peerDependencies": { - "babel-loader": "^7.0.0 || ^8.0.0", - "react": ">=15.0.0", - "react-dom": ">=15.0.0" + "babel-loader": "^7.0.0 || ^8.0.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/react/src/client/preview/globals.js b/app/react/src/client/preview/globals.js index ac7fc8f90a67..1f7c80bda805 100644 --- a/app/react/src/client/preview/globals.js +++ b/app/react/src/client/preview/globals.js @@ -1,6 +1,6 @@ import { window } from 'global'; -if (window.parent !== window) { +if (window && window.parent !== window) { try { // eslint-disable-next-line no-underscore-dangle window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -8,4 +8,7 @@ if (window.parent !== window) { // The above line can throw if we do not have access to the parent frame -- i.e. cross origin } } -window.STORYBOOK_ENV = 'react'; + +if (window) { + window.STORYBOOK_ENV = 'react'; +} diff --git a/app/react/src/client/preview/index.test.js b/app/react/src/client/preview/index.test.js new file mode 100644 index 000000000000..cba87bb5e2d4 --- /dev/null +++ b/app/react/src/client/preview/index.test.js @@ -0,0 +1,24 @@ +/* eslint-disable global-require */ +describe('preview', () => { + afterEach(() => { + jest.resetModules(); + }); + + const isFunction = value => typeof value === 'function'; + + it('should return the client api in a browser environment', () => { + const api = require('.'); + expect(Object.keys(api).length).toBeGreaterThan(0); + expect(Object.values(api).every(isFunction)).toEqual(true); + }); + + it('should return the client api in a node.js environment', () => { + jest.mock('global', () => ({ + document: undefined, + window: undefined, + })); + const api = require('.'); + expect(Object.keys(api).length).toBeGreaterThan(0); + expect(Object.values(api).every(isFunction)).toEqual(true); + }); +}); diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js index 507e58685636..dd322227ad61 100644 --- a/app/react/src/client/preview/render.js +++ b/app/react/src/client/preview/render.js @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import { stripIndents } from 'common-tags'; import isReactRenderable from './element_check'; -const rootEl = document.getElementById('root'); +const rootEl = document ? document.getElementById('root') : null; function render(node, el) { ReactDOM.render( @@ -46,7 +46,7 @@ export default function renderMain({ } // We need to unmount the existing set of components in the DOM node. - // Otherwise, React may not recrease instances for every story run. + // Otherwise, React may not recreate instances for every story run. // This could leads to issues like below: // https://github.com/storybooks/react-storybook/issues/81 // But forceRender means that it's the same story, so we want too keep the state in that case. diff --git a/app/react/src/server/__mocks__/mockRules.js b/app/react/src/server/__mocks__/mockRules.js new file mode 100644 index 000000000000..11319ec0536d --- /dev/null +++ b/app/react/src/server/__mocks__/mockRules.js @@ -0,0 +1,151 @@ +export default [ + { parser: { requireEnsure: false } }, + { + test: /\.(js|mjs|jsx)$/, + enforce: 'pre', + use: [ + { + options: { + formatter: '/mock_folder/node_modules/react-dev-utils/eslintFormatter.js', + eslintPath: '/mock_folder/node_modules/eslint/lib/api.js', + baseConfig: { + extends: ['/mock_folder/node_modules/eslint-config-react-app/index.js'], + settings: { react: { version: '999.999.999' } }, + }, + ignore: false, + useEslintrc: false, + }, + loader: '/mock_folder/node_modules/eslint-loader/index.js', + }, + ], + include: '/mock_folder/src', + }, + { + oneOf: [ + { + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + loader: '/mock_folder/node_modules/url-loader/dist/cjs.js', + options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }, + }, + { + test: /\.(js|mjs|jsx|ts|tsx)$/, + include: '/mock_folder/src', + loader: '/mock_folder/node_modules/babel-loader/lib/index.js', + options: { + customize: '/mock_folder/node_modules/babel-preset-react-app/webpack-overrides.js', + babelrc: false, + configFile: false, + presets: ['/mock_folder/node_modules/babel-preset-react-app/index.js'], + cacheIdentifier: + 'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@', + plugins: [ + [ + '/mock_folder/node_modules/babel-plugin-named-asset-import/index.js', + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + }, + }, + }, + ], + ], + cacheDirectory: true, + cacheCompression: false, + compact: false, + }, + }, + { + test: /\.(js|mjs)$/, + exclude: {}, + loader: '/mock_folder/node_modules/babel-loader/lib/index.js', + options: { + babelrc: false, + configFile: false, + compact: false, + presets: [ + ['/mock_folder/node_modules/babel-preset-react-app/dependencies.js', { helpers: true }], + ], + cacheDirectory: true, + cacheCompression: false, + cacheIdentifier: + 'development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@', + sourceMaps: false, + }, + }, + { + test: /\.css$/, + exclude: {}, + use: [ + '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js', + { + loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js', + options: { importLoaders: 1, sourceMap: false }, + }, + { + loader: '/mock_folder/node_modules/postcss-loader/src/index.js', + options: { ident: 'postcss', sourceMap: false }, + }, + ], + sideEffects: true, + }, + { + test: /\.module\.css$/, + use: [ + '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js', + { + loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js', + options: { importLoaders: 1, sourceMap: false, modules: true }, + }, + { + loader: '/mock_folder/node_modules/postcss-loader/src/index.js', + options: { ident: 'postcss', sourceMap: false }, + }, + ], + }, + { + test: /\.(scss|sass)$/, + exclude: {}, + use: [ + '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js', + { + loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js', + options: { importLoaders: 2, sourceMap: false }, + }, + { + loader: '/mock_folder/node_modules/postcss-loader/src/index.js', + options: { ident: 'postcss', sourceMap: false }, + }, + { + loader: '/mock_folder/node_modules/sass-loader/lib/loader.js', + options: { sourceMap: false }, + }, + ], + sideEffects: true, + }, + { + test: /\.module\.(scss|sass)$/, + use: [ + '/mock_folder/node_modules/bmr-react-scripts/node_modules/style-loader/index.js', + { + loader: '/mock_folder/node_modules/bmr-react-scripts/node_modules/css-loader/index.js', + options: { importLoaders: 2, sourceMap: false, modules: true }, + }, + { + loader: '/mock_folder/node_modules/postcss-loader/src/index.js', + options: { ident: 'postcss', sourceMap: false }, + }, + { + loader: '/mock_folder/node_modules/sass-loader/lib/loader.js', + options: { sourceMap: false }, + }, + ], + }, + { + loader: '/mock_folder/node_modules/file-loader/dist/cjs.js', + exclude: [{}, {}, {}], + options: { name: 'static/media/[name].[hash:8].[ext]' }, + }, + ], + }, +]; diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js new file mode 100644 index 000000000000..d85b0bad0235 --- /dev/null +++ b/app/react/src/server/cra-config.js @@ -0,0 +1,141 @@ +import fs from 'fs'; +import path from 'path'; +import semver from 'semver'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import { normalizeCondition } from 'webpack/lib/RuleSet'; + +const cssExtensions = ['.css', '.scss', '.sass']; +const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass']; +const typeScriptExtensions = ['.ts', '.tsx']; + +let reactScriptsPath; + +export function getReactScriptsPath({ noCache } = {}) { + if (reactScriptsPath && !noCache) return reactScriptsPath; + + const appDirectory = fs.realpathSync(process.cwd()); + const reactScriptsScriptPath = fs.realpathSync( + path.join(appDirectory, '/node_modules/.bin/react-scripts') + ); + + reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); + const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); + + if (!fs.existsSync(scriptsPkgJson)) { + reactScriptsPath = 'react-scripts'; + } + + return reactScriptsPath; +} + +export function isReactScriptsInstalled(requiredVersion = '2.0.0') { + try { + // eslint-disable-next-line import/no-dynamic-require,global-require + const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json')); + return !semver.lt(reactScriptsJson.version, requiredVersion); + } catch (e) { + return false; + } +} + +export const getRules = extensions => rules => + rules.reduce((craRules, rule) => { + // If at least one extension satisfies the rule test, the rule is one + // we want to extract + if (rule.test && extensions.some(normalizeCondition(rule.test))) { + // If the base test is for extensions, return early + return craRules.concat(rule); + } + + // Get any rules contained in rule.oneOf + if (!rule.test && rule.oneOf) { + craRules.push(...getRules(extensions)(rule.oneOf)); + } + + // Get any rules contained in rule.rules + if (!rule.test && rule.rules) { + craRules.push(...getRules(extensions)(rule.rules)); + } + + return craRules; + }, []); + +const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions)); + +export const getTypeScriptRules = (webpackConfigRules, configDir) => { + const rules = getRules(typeScriptExtensions)(webpackConfigRules); + // We know CRA only has one rule targetting TS for now, which is the first rule. + const babelRule = rules[0]; + // Resolves an issue where this config is parsed twice (#4903). + if (typeof babelRule.include !== 'string') return rules; + // Adds support for using TypeScript in the `.storybook` (or config) folder. + return [ + { + ...babelRule, + include: [babelRule.include, path.resolve(configDir)], + }, + ...rules.slice(1), + ]; +}; + +export function getCraWebpackConfig(mode) { + const pathToReactScripts = getReactScriptsPath(); + + const craWebpackConfig = + mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev'; + + let pathToWebpackConfig = require.resolve(path.join(pathToReactScripts, craWebpackConfig)); + + if (!fs.existsSync(pathToWebpackConfig)) { + pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config'); + } + + // eslint-disable-next-line import/no-dynamic-require,global-require + const webpackConfig = require(pathToWebpackConfig); + + if (typeof webpackConfig === 'function') { + return webpackConfig(mode); + } + + return webpackConfig; +} + +export function applyCRAWebpackConfig(baseConfig, configDir) { + // Check if the user can use TypeScript (react-scripts version 2.1+). + const hasTsSupport = isReactScriptsInstalled('2.1.0'); + + const tsExtensions = hasTsSupport ? typeScriptExtensions : []; + const extensions = [...cssExtensions, ...tsExtensions]; + + // Remove any rules from baseConfig that test true for any one of the extensions + const filteredBaseRules = baseConfig.module.rules.filter( + rule => !rule.test || !extensions.some(normalizeCondition(rule.test)) + ); + + // Load create-react-app config + const craWebpackConfig = getCraWebpackConfig(baseConfig.mode); + + const craStyleRules = getStyleRules(craWebpackConfig.module.rules); + const craTypeScriptRules = hasTsSupport + ? getTypeScriptRules(craWebpackConfig.module.rules, configDir) + : []; + + // Add css minification for production + const plugins = [...baseConfig.plugins]; + if (baseConfig.mode === 'production') { + plugins.push(new MiniCssExtractPlugin()); + } + + return { + ...baseConfig, + module: { + ...baseConfig.module, + rules: [...filteredBaseRules, ...craStyleRules, ...craTypeScriptRules], + }, + plugins, + resolve: { + ...baseConfig.resolve, + extensions: [...baseConfig.resolve.extensions, ...tsExtensions], + }, + }; +} diff --git a/app/react/src/server/cra-config.test.js b/app/react/src/server/cra-config.test.js new file mode 100644 index 000000000000..26d2796702df --- /dev/null +++ b/app/react/src/server/cra-config.test.js @@ -0,0 +1,60 @@ +import fs from 'fs'; +import { getReactScriptsPath, getTypeScriptRules } from './cra-config'; +import mockRules from './__mocks__/mockRules'; + +jest.mock('fs', () => ({ + realpathSync: jest.fn(), + existsSync: () => true, +})); +jest.mock('mini-css-extract-plugin', () => {}); + +const SCRIPT_PATH = '.bin/react-scripts'; + +describe('cra-config', () => { + beforeEach(() => { + fs.realpathSync.mockImplementationOnce(() => '/test-project'); + }); + + describe('when used with the default react-scripts package', () => { + beforeEach(() => { + fs.realpathSync.mockImplementationOnce(path => + path.replace(SCRIPT_PATH, `react-scripts/${SCRIPT_PATH}`) + ); + }); + + it('should locate the react-scripts package', () => { + expect(getReactScriptsPath({ noCache: true })).toEqual( + '/test-project/node_modules/react-scripts' + ); + }); + }); + + describe('when used with a custom react-scripts package', () => { + beforeEach(() => { + fs.realpathSync.mockImplementationOnce(path => + path.replace(SCRIPT_PATH, `custom-react-scripts/${SCRIPT_PATH}`) + ); + }); + + it('should locate the react-scripts package', () => { + expect(getReactScriptsPath({ noCache: true })).toEqual( + '/test-project/node_modules/custom-react-scripts' + ); + }); + }); + + describe('when used with TypeScript', () => { + const rules = getTypeScriptRules(mockRules, './.storybook'); + + it('should return the correct config', () => { + // Normalise the return, as we know our new rules object will be an array, whereas a string is expected. + const rulesObject = { ...rules[0], include: rules[0].include[0] }; + expect(rulesObject).toMatchObject(mockRules[2].oneOf[1]); + }); + + // Allows using TypeScript in the `.storybook` (or config) folder. + it('should add the Storybook config directory to `include`', () => { + expect(rules[0].include.findIndex(string => string.includes('.storybook'))).toEqual(1); + }); + }); +}); diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js deleted file mode 100644 index b94dfffcff6e..000000000000 --- a/app/react/src/server/cra_config.js +++ /dev/null @@ -1,91 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import semver from 'semver'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; - -import { normalizeCondition } from 'webpack/lib/RuleSet'; - -let reactScriptsPath; -function getReactScriptsPath() { - if (reactScriptsPath) return reactScriptsPath; - const appDirectory = fs.realpathSync(process.cwd()); - const reactScriptsScriptPath = fs.realpathSync( - path.join(appDirectory, '/node_modules/.bin/react-scripts') - ); - reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); - return reactScriptsPath; -} - -export function isReactScriptsInstalled() { - try { - // eslint-disable-next-line global-require, import/no-dynamic-require - const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json')); - if (semver.lt(reactScriptsJson.version, '2.0.0')) return false; - return true; - } catch (e) { - return false; - } -} - -export function getStyleRules(rules) { - // Extensions of style rules we're interested in - const extensions = ['.css', '.scss', '.sass', '.module.css', '.module.scss', '.module.sass']; - - return rules.reduce((styleRules, rule) => { - // If at least one style extension satisfies the rule test, the rule is one - // we want to extract - if (rule.test && extensions.some(normalizeCondition(rule.test))) { - // If the base test is for styles, return early - return styleRules.concat(rule); - } - - // Get any style rules contained in rule.oneOf - if (!rule.test && rule.oneOf) { - styleRules.push(...getStyleRules(rule.oneOf)); - } - - // Get any style rules contained in rule.rules - if (!rule.test && rule.rules) { - styleRules.push(...getStyleRules(rule.rules)); - } - - return styleRules; - }, []); -} - -export function getCraWebpackConfig(mode) { - if (mode === 'production') { - // eslint-disable-next-line global-require, import/no-dynamic-require - return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod')); - } - - // eslint-disable-next-line global-require, import/no-dynamic-require - return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev')); -} - -export function applyCRAWebpackConfig(baseConfig) { - // Remove any rules from baseConfig that test true for any one of the extensions - const baseRulesExcludingStyles = baseConfig.module.rules.filter( - rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test)) - ); - - // Load create-react-app config - const craWebpackConfig = getCraWebpackConfig(baseConfig.mode); - - const craStyleRules = getStyleRules(craWebpackConfig.module.rules); - - // Add css minification for production - const plugins = [...baseConfig.plugins]; - if (baseConfig.mode === 'production') { - plugins.push(new MiniCssExtractPlugin()); - } - - return { - ...baseConfig, - module: { - ...baseConfig.module, - rules: [...baseRulesExcludingStyles, ...craStyleRules], - }, - plugins, - }; -} diff --git a/app/react/src/server/framework-preset-cra-styles.js b/app/react/src/server/framework-preset-cra-styles.js deleted file mode 100644 index ad1ce7a27142..000000000000 --- a/app/react/src/server/framework-preset-cra-styles.js +++ /dev/null @@ -1,13 +0,0 @@ -import { logger } from '@storybook/node-logger'; -import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra_config'; - -export function webpackFinal(config) { - if (!isReactScriptsInstalled()) { - logger.info('=> Using base config because react-scripts is not installed.'); - return config; - } - - logger.info('=> Loading create-react-app config.'); - - return applyCRAWebpackConfig(config); -} diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.js new file mode 100644 index 000000000000..ce37e055ddab --- /dev/null +++ b/app/react/src/server/framework-preset-cra.js @@ -0,0 +1,36 @@ +import { logger } from '@storybook/node-logger'; +import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config'; + +export function webpackFinal(config, { configDir }) { + if (!isReactScriptsInstalled()) { + logger.info('=> Using base config because react-scripts is not installed.'); + return config; + } + + logger.info('=> Loading create-react-app config.'); + + return applyCRAWebpackConfig(config, configDir); +} + +export function babelDefault(config) { + if (!isReactScriptsInstalled()) { + return config; + } + + return { + ...config, + presets: [require.resolve('babel-preset-react-app')], + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + }, + }, + }, + ], + ], + }; +} diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js index 643114ff9ac6..a14cc3f4a67b 100644 --- a/app/react/src/server/options.js +++ b/app/react/src/server/options.js @@ -5,7 +5,7 @@ export default { defaultConfigName: 'create-react-app', frameworkPresets: [ require.resolve('./framework-preset-react.js'), + require.resolve('./framework-preset-cra.js'), require.resolve('./framework-preset-react-docgen.js'), - require.resolve('./framework-preset-cra-styles.js'), ], }; diff --git a/app/riot/package.json b/app/riot/package.json index ec4543ec0c2e..bbf5b098f219 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/riot", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/riot", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -27,21 +24,20 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "raw-loader": "^0.5.1", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "@babel/plugin-transform-modules-commonjs": "^7.1.0", - "@babel/plugin-transform-runtime": "^7.1.0", - "@babel/preset-env": "^7.1.0", + "@babel/plugin-transform-modules-commonjs": "^7.2.0", + "@babel/preset-env": "^7.2.0", "@babel/preset-flow": "^7.0.0", - "@babel/preset-react": "^7.0.0", - "@babel/runtime": "^7.0.0" + "@babel/preset-react": "^7.0.0" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", @@ -49,5 +45,8 @@ "riot-compiler": "^3.5.1 || ^4.0.0", "riot-hot-reload": "^1.0.0", "riot-tag-loader": "^2.0.0 || ^3.0.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/riot/src/server/framework-preset-riot.js b/app/riot/src/server/framework-preset-riot.js index d7a5786502da..820e02e015d2 100644 --- a/app/riot/src/server/framework-preset-riot.js +++ b/app/riot/src/server/framework-preset-riot.js @@ -15,5 +15,12 @@ export function webpack(config) { }, ], }, + resolve: { + ...config.resolve, + alias: { + ...config.resolve.alias, + 'riot-compiler': 'riot-compiler/dist/es6.compiler', + }, + }, }; } diff --git a/app/svelte/package.json b/app/svelte/package.json index daea00e9ceca..04ab3e4ca133 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/svelte", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/svelte", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,19 +25,24 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "svelte": "^2.13.5", + "svelte": "^2.15.3", "svelte-loader": "^2.11.0" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", "svelte": "^2.7.2", "svelte-loader": "^2.9.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/vue/package.json b/app/vue/package.json index 423f9c6e231f..c6b5043ac97f 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/vue", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/app/vue", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -28,12 +25,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/runtime": "^7.1.2", - "@storybook/core": "4.1.0-alpha.1", + "@storybook/core": "4.1.0-alpha.11", "common-tags": "^1.8.0", + "core-js": "^2.5.7", "global": "^4.3.2", "react": "^16.6.0", - "react-dom": "^16.6.0" + "react-dom": "^16.6.0", + "regenerator-runtime": "^0.12.1" }, "devDependencies": { "babel-preset-vue": "^2.0.2", @@ -46,5 +44,8 @@ "vue": ">=2.5.16", "vue-loader": ">=15.x.x", "vue-template-compiler": ">=2.5.16" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/vue/src/client/index.js b/app/vue/src/client/index.js index ff377f83f50d..88fb416f70ef 100644 --- a/app/vue/src/client/index.js +++ b/app/vue/src/client/index.js @@ -5,4 +5,5 @@ export { addParameters, configure, getStorybook, + forceReRender, } from './preview'; diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js index f6a4dbf09183..7204bfccae65 100644 --- a/app/vue/src/client/preview/render.js +++ b/app/vue/src/client/preview/render.js @@ -1,12 +1,26 @@ import { stripIndents } from 'common-tags'; import Vue from 'vue'; -let app = null; +let root = null; -function renderRoot(options) { - if (app) app.$destroy(); +function getComponentProxy(component) { + return Object.entries(component.props || {}) + .map(([name, def]) => ({ [name]: def.default })) + .reduce((wrap, prop) => ({ ...wrap, ...prop }), {}); +} + +function renderRoot(component, proxy) { + root = new Vue({ + el: '#root', + beforeCreate() { + this.proxy = proxy; + }, - app = new Vue(options); + render(h) { + const props = this.proxy; + return h('div', { attrs: { id: 'root' } }, [h(component, { props })]); + }, + }); } export default function render({ @@ -16,6 +30,7 @@ export default function render({ showMain, showError, showException, + forceRender, }) { Vue.config.errorHandler = showException; @@ -33,10 +48,16 @@ export default function render({ } showMain(); - renderRoot({ - el: '#root', - render(h) { - return h('div', { attrs: { id: 'root' } }, [h(component)]); - }, - }); + + const proxy = getComponentProxy(component); + + // at component creation || refresh by HMR + if (!root || !forceRender) { + if (root) root.$destroy(); + + renderRoot(component, proxy); + } else { + root.proxy = proxy; + root.$forceUpdate(); + } } diff --git a/dangerfile.js b/dangerfile.js index 91ac57bb1afd..b5cd656bffa7 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -22,7 +22,7 @@ const checkRequiredLabels = labels => { const requiredLabels = flatten([ prLogConfig.skipLabels || [], - Object.keys(prLogConfig.validLabels || {}), + (prLogConfig.validLabels || []).map(keyVal => keyVal[0]), ]); const blockingLabels = intersection(forbiddenLabels, labels); @@ -37,6 +37,8 @@ const checkRequiredLabels = labels => { const foundLabels = intersection(requiredLabels, labels); if (isEmpty(foundLabels)) { fail(`PR is not labeled with one of: ${JSON.stringify(requiredLabels)}`); + } else if (foundLabels.length > 1) { + fail(`Please choose only one of these labels: ${JSON.stringify(foundLabels)}`); } }; diff --git a/docs/README.md b/docs/README.md index 1d7af277fe29..e7bc1b5fac03 100644 --- a/docs/README.md +++ b/docs/README.md @@ -31,12 +31,12 @@ Documentation is written in Markdown and located inside the [`docs/src/pages`](h - Indirect action (bad): `A refactor of this code is necessary`. - Direct action (good): `This code needs to be refactored`. 4. Avoid the use of pronouns - documentation should not address the reader because not everything applies to the person reading our docs. -* Don't use `you` to refer to the user or third party. +* Don't use `you` to refer to the user or a third party. - Pronoun (bad): `You can also...` - Without pronoun (good): `Users can also...` * Don't use `we` to refer to Storybook, contributors, or Storybook users. - Pronoun (bad): `We can create this component...` - Without pronoun (good): `The component can be created...` -* Don't use `he`, `she`, `him`, `her`, etc. to refer to third party unless referring to a specific person. +* Don't use `he`, `she`, `him`, `her`, etc. to refer to a third party unless referring to a specific person. * Refer to contributors and the product as `Storybook`. * Refer to users as `users`. diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index a5214d1f5c78..9d92c7ad2553 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -14,6 +14,7 @@ module.exports = { '/basics/guide-vue/', '/basics/guide-angular/', '/basics/guide-mithril/', + '/basics/guide-ember/', '/basics/writing-stories/', '/basics/exporting-storybook/', '/basics/faq/', diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index b1e7aa6da3cb..39c0f7c7e714 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -6,11 +6,13 @@ const sm = require('sitemap'); const stripIndent = require('common-tags/lib/stripIndent'); function pagesToSitemap(pages) { - return pages.filter(p => !!p.path).map(p => ({ - url: p.path, - changefreq: 'daily', - priority: 0.7, - })); + return pages + .filter(p => !!p.path) + .map(p => ({ + url: p.path, + changefreq: 'daily', + priority: 0.7, + })); } function generateSitemap(pages) { diff --git a/docs/package.json b/docs/package.json index 9a6f3043dab2..d401e594c4c7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,9 +19,9 @@ "prepare": "npm run snyk-protect" }, "dependencies": { - "@storybook/addon-actions": "^4.0.0", - "@storybook/addon-links": "^4.0.4", - "@storybook/addons": "^3.4.11", + "@storybook/addon-actions": "^4.0.12", + "@storybook/addon-links": "^4.0.12", + "@storybook/addons": "^4.0.11", "@storybook/react": "^3.4.11", "babel-loader": "^6.4.1", "bootstrap": "^4.1.3", @@ -38,7 +38,7 @@ "global": "^4.3.2", "highlight.js": "^9.13.1", "lodash": "^4.17.11", - "marked": "^0.5.1", + "marked": "^0.5.2", "prop-types": "^15.6.2", "react": "^15.6.2", "react-document-title": "^2.0.3", @@ -47,7 +47,7 @@ "react-router": "^4.3.1", "react-stack-grid": "^0.7.1", "sitemap": "^2.1.0", - "snyk": "^1.108.0" + "snyk": "^1.113.0" }, "snyk": true } diff --git a/docs/src/pages/addons/addon-gallery/index.md b/docs/src/pages/addons/addon-gallery/index.md index 00d66bdf639e..53283e76398b 100644 --- a/docs/src/pages/addons/addon-gallery/index.md +++ b/docs/src/pages/addons/addon-gallery/index.md @@ -46,7 +46,7 @@ Storyshots is a way to automatically jest-snapshot all your stories. [More info Redirects console output (logs, errors, warnings) into Action Logger Panel. `withConsole` decorator notifies from what stories logs are coming. -### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/background) +### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/backgrounds) With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides. diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md index f9fb498e0dc1..2288eb65fbe8 100644 --- a/docs/src/pages/addons/using-addons/index.md +++ b/docs/src/pages/addons/using-addons/index.md @@ -22,6 +22,8 @@ import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-notes/register'; ``` +Once created, youl'll have to restart storybook to make the underlying webpack aware of the addons file. + This will register all the addons and you'll be able to see the actions and notes panels (in that order) when you are viewing the story. (Links do not register a tab--check individual addon docs to see which Storybook features they use!) @@ -54,4 +56,24 @@ Then you'll be able to see those notes when you are viewing the story. ![Stories with notes](../static/stories-with-notes.png) +## Global Configuration +Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that. + +```js +import { configure, addDecorator } from '@storybook/react'; +import { withOptions } from '@storybook/addon-options'; + +addDecorator( + withOptions({ + name: 'CRA Kitchen Sink', + goFullScreen: false, + showAddonsPanel: true, + showSearchBox: false + // more configuration here + }) +); +``` + +Here's an example of a [production-ready config file](https://github.com/storybooks/storybook/blob/next/examples/cra-kitchen-sink/.storybook/config.js) from the cra-kitchen example. + Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/addons/addon-gallery) to discover more addons. diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md index 66df940819fc..c194c11407f9 100644 --- a/docs/src/pages/addons/writing-addons/index.md +++ b/docs/src/pages/addons/writing-addons/index.md @@ -110,7 +110,7 @@ export withNotes = makeDecorator({ // which we send to the channel channel.emit('MYADDON/add_notes', parameters); - return story(context); + return getStory(context); } }) ``` @@ -238,7 +238,7 @@ storiesOf('Button', module) We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user! -We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withCSSContext` hoc from emotion. [Read more about theming](/configuration/theming). +We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withCSSContext` hoc from emotion. [Read more about theming](/configurations/theming). ## Re-using existing components diff --git a/docs/src/pages/basics/guide-ember/index.md b/docs/src/pages/basics/guide-ember/index.md index 0b76d9dc97a1..91f0976dec0a 100644 --- a/docs/src/pages/basics/guide-ember/index.md +++ b/docs/src/pages/basics/guide-ember/index.md @@ -90,10 +90,10 @@ storiesOf('Demo', module) return { template: hbs`` - }, - context: { - onClick: (e) => console.log(e) + `, + context: { + onClick: (e) => console.log(e) + } } }) .add('component', () => { diff --git a/docs/src/pages/basics/guide-react-native/index.md b/docs/src/pages/basics/guide-react-native/index.md index 35527dd7a765..c9f9db82501b 100644 --- a/docs/src/pages/basics/guide-react-native/index.md +++ b/docs/src/pages/basics/guide-react-native/index.md @@ -73,7 +73,7 @@ import '@storybook/addon-ondevice-notes/register'; The easiest solution is to replace your app entry with: ```js -import './storybook'; +export default from './storybook'; ``` If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed @@ -86,6 +86,7 @@ RN application, e.g. on a tab or within an admin screen. Now you can write some stories inside the `storybook/stories/index.js` file, like this: ```js +import React from 'react'; import { storiesOf } from '@storybook/react-native'; import { View, Text } from 'react-native'; @@ -102,7 +103,7 @@ const CenteredView = ({ children }) => ( ); -storiesOf('CenteredView') +storiesOf('CenteredView', module) .add('default view', () => ( Hello Storybook diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md index 30a240e65eed..ed33c1c2e415 100644 --- a/docs/src/pages/basics/guide-react/index.md +++ b/docs/src/pages/basics/guide-react/index.md @@ -5,33 +5,33 @@ title: 'Storybook for React' 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. -> This will also help you to understand how Storybook works. +This will also help you to understand how Storybook works. ## Starter Guide React -Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure as you want. +Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure it as you want. In this guide, we will set up Storybook for your React project. ## Table of contents - [Add @storybook/react](#add-storybookreact) -- [Add react, react-dom, and babel-core](#add-react-react-dom-and-babel-core) +- [Add react, react-dom, @babel/core, and babel-loader](#add-react-react-dom-babel-core-and-babel-loader) - [Create the config file](#create-the-config-file) - [Write your stories](#write-your-stories) - [Run your Storybook](#run-your-storybook) ## Add @storybook/react -First of all, you need to add `@storybook/react` to your project. To do that, simply run: +First of all, you need to add `@storybook/react` to your project. To do that, run: ```sh npm i --save-dev @storybook/react ``` -## Add react, react-dom, babel-core, and babel-loader +## Add react, react-dom, @babel/core, and babel-loader -Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency: +Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies: ```sh npm i --save react react-dom @@ -39,7 +39,7 @@ npm i --save-dev @babel/core npm i --save-dev babel-loader ``` -Then add the following NPM script to your package json in order to start the storybook later in this guide: +Then add the following NPM script to your `package.json` in order to start the storybook later in this guide: ```json { @@ -54,9 +54,9 @@ Then add the following NPM script to your package json in order to start the sto Storybook can be configured in several different ways. That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory. -For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories. +For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories. -To do that, simply create a file at `.storybook/config.js` with the following content: +To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/react'; @@ -80,26 +80,25 @@ Now you can write some stories inside the `../stories/index.js` file, like this: ```js import React from 'react'; import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; storiesOf('Button', module) .add('with text', () => ( - + )) .add('with some emoji', () => ( - + )); ``` -Story is a single state of your component. In the above case, there are two stories for the native button component: +Each story is a single state of your component. In the above case, there are two stories for the demo button component: -1. with text -2. with some emoji +1. With text +2. With some emoji ## Run your Storybook -Now everything is ready. Simply run your storybook with: +Now everything is ready. Run your storybook with: ```sh npm run storybook @@ -109,4 +108,4 @@ Then you can see all your stories, like this: ![Basic stories](../static/basic-stories.png) -Now you can change components and write stories whenever you need to. You'll get those changes into Storybook in a snap with the help of Webpack's HMR API. +Now you can change components and write stories whenever you need to. You'll see the changes in Storybook immediately since it uses Webpack's hot module reloading. diff --git a/docs/src/pages/basics/guide-vue/index.md b/docs/src/pages/basics/guide-vue/index.md index 7c50fe90e950..2fa14f4da3e7 100644 --- a/docs/src/pages/basics/guide-vue/index.md +++ b/docs/src/pages/basics/guide-vue/index.md @@ -37,8 +37,8 @@ Make sure that you have `vue`, `babel-core`, `babel-loader` in your dependencies ```sh npm i --save vue -npm i --save-dev babel-core -npm i --save-dev babel-loader +npm i --save-dev babel-loader vue-loader vue-template-compiler +npm i --save-dev @babel/core babel-preset-vue ``` ## Create the NPM script diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md index cefdd55f2c0b..49817b6b295f 100644 --- a/docs/src/pages/configurations/custom-webpack-config/index.md +++ b/docs/src/pages/configurations/custom-webpack-config/index.md @@ -6,7 +6,7 @@ title: 'Custom Webpack Config' ## Default mode -That's why we allow you to customize our webpack setup by providing a `webpack.config.js` file exporting a **webpack 2** compatible config exported as a **commonjs module**. +That's why we allow you to customize our webpack setup by providing a `webpack.config.js` file exporting a **webpack 4** compatible config exported as a **commonjs module**. There are a few ways to do it: diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md index b30d0ebd6c80..482842c52dce 100644 --- a/docs/src/pages/configurations/theming/index.md +++ b/docs/src/pages/configurations/theming/index.md @@ -7,18 +7,29 @@ Storybook's manager UI is theme-able! You can change theme variables using [addo ## Set a theme -You can do this in an decorator, addon or in `config.js`. Changing theme at runtime is supported! +You can do this in an decorator, addon or in `.storybook/config.js`. Changing theme at runtime is supported! +First, create or modify `.storybook/addons.js` to include registering addon-options: ```js -import { setOptions } from '@storybook/addon-options'; +import '@storybook/addon-options/register'; +``` + +Then, modify `.storybook/config.js` to include your new options: +```js +import { addDecorator, configure } from '@storybook/react'; +import { withOptions } from '@storybook/addon-options'; -setOptions({ - theme: {}, +addDecorator( + withOptions({ + theme: {}, + }) }); ``` When setting a theme, set a full theme object, the theme is replaced, not combined. +See more addon options at https://github.com/storybooks/storybook/tree/master/addons/options + ## Get a theme We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark theme). @@ -26,7 +37,17 @@ We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark th You can get these themes like so: ```js +import { addDecorator, configure } from '@storybook/react'; +import { withOptions } from '@storybook/addon-options'; import { themes } from '@storybook/components'; + +// Option defaults. +addDecorator( + withOptions({ + name: 'Foo', + theme: themes.dark, + }) +); ``` ## Theme variables diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 53c995bbc588..6646433de0b2 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -1,11 +1,13 @@ --- id: 'typescript-config' -title: 'Typescript Config' +title: 'TypeScript Config' --- -This is a central reference for using Storybook with Typescript. +This is a central reference for using Storybook with TypeScript. -## Dependencies you may need +## Setting up TypeScript with awesome-typescript-loader + +### Dependencies you may need ```bash yarn add -D typescript @@ -17,7 +19,7 @@ yarn add -D jest "@types/jest" ts-jest #testing We have had the best experience using `awesome-typescript-loader`, but other tutorials may use `ts-loader`, just configure accordingly. You can even use `babel-loader` with a `ts-loader` configuration. -## Setting up Typescript to work with Storybook +### Setting up TypeScript to work with Storybook We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default) by creating a `webpack.config.js` file in our Storybook configuration directory (by default, it’s `.storybook`): @@ -37,7 +39,7 @@ module.exports = (baseConfig, env, config) => { The above example shows a working Webpack config with the TSDocgen plugin also integrated; remove the optional sections if you don't plan on using them. -## `tsconfig.json` +### `tsconfig.json` ```json { @@ -71,18 +73,56 @@ The above example shows a working Webpack config with the TSDocgen plugin also i This is for the default configuration where `/stories` is a peer of `src`. If you have them all in just `src` you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`. +## Setting up TypeScript with babel-loader + +When using latest create-react-app (CRA 2.0), Babel 7 has native TypeScript support. Setup becomes easier. + +### Dependencies you may need + +```bash +yarn add -D @types/storybook__react # typings +``` + +### Setting up TypeScript to work with Storybook + +We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default) by creating a `webpack.config.js` file in our Storybook configuration directory (by default, it’s `.storybook`): + +```js +module.exports = (baseConfig, env, config) => { + config.module.rules.push({ + test: /\.(ts|tsx)$/, + loader: require.resolve('babel-loader'), + options: { + presets: [['react-app', { flow: false, typescript: true }]], + }, + }); + config.resolve.extensions.push('.ts', '.tsx'); + return config; +}; +``` + +### `tsconfig.json` + +The default `tsconfig.json` that comes with CRA works great. If your stories are outside the `src` folder, for example the `stories` folder in root, then `rootDirs": ["src", "stories"]` needs to be added to be added to `compilerOptions` so it knows what folders to compile. Make sure `jsx` is set to preserve. Should be unchanged. + ## Import tsx stories -Change `config.ts` inside the Storybook config directory (by default, it’s `.storybook`) to import stories made with Typescript: +Change `config.ts` inside the Storybook config directory (by default, it’s `.storybook`) to import stories made with TypeScript: ```js -// automatically import all files ending in *.stories.js +// automatically import all files ending in *.stories.tsx const req = require.context('../stories', true, /.stories.tsx$/); + +function loadStories() { + req.keys().forEach(req); +} + +configure(loadStories, module); ``` -## Using Typescript with the TSDocgen addon +## Using TypeScript with the TSDocgen addon -The very handy [Storybook Info addon](https://github.com/storybooks/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the Typescript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal: +The very handy [Storybook Info addon](https://github.com/storybooks/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the TypeScript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal: ```js import * as React from 'react'; @@ -190,16 +230,16 @@ This is an example `jest.config.js` file for jest: ```js module.exports = { - transform: { - ".(ts|tsx)": "ts-jest", - }, - testPathIgnorePatterns: ["/node_modules/", "/lib/"], - testRegex: "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$", - moduleFileExtensions: ["ts", "tsx", "js", "json"], + transform: { + '.(ts|tsx)': 'ts-jest', + }, + testPathIgnorePatterns: ['/node_modules/', '/lib/'], + testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$', + moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], }; ``` -## Building your Typescript Storybook +## Building your TypeScript Storybook You will need to set up some scripts - these may help: diff --git a/docs/src/pages/examples/_examples.yml b/docs/src/pages/examples/_examples.yml index f71f0c5ef3d6..77a63882ab69 100644 --- a/docs/src/pages/examples/_examples.yml +++ b/docs/src/pages/examples/_examples.yml @@ -166,3 +166,16 @@ auth0: demo: https://auth0-cosmos.now.sh/sandbox/ source: https://github.com/auth0/cosmos site: https://auth0-cosmos.now.sh/ +mockingbot: + thumbnail: mockingbot.png + title: MockingBot + description: MockingBot UI component library(ibot) + source: https://github.com/mockingbot/ibot + demo: https://ibot.guide +vanilla: + thumbnail: vanilla.png + title: Vanilla React + description: A simple implementation of Vanilla Framework using React + demo: https://vanilla-framework.github.io/vanilla-framework-react/ + source: https://github.com/vanilla-framework/vanilla-framework-react + site: https://vanillaframework.io/ diff --git a/docs/src/pages/examples/thumbnails/mockingbot.png b/docs/src/pages/examples/thumbnails/mockingbot.png new file mode 100644 index 000000000000..bbfe8bdfe8fc Binary files /dev/null and b/docs/src/pages/examples/thumbnails/mockingbot.png differ diff --git a/docs/src/pages/examples/thumbnails/vanilla.png b/docs/src/pages/examples/thumbnails/vanilla.png new file mode 100644 index 000000000000..ad67f2935a52 Binary files /dev/null and b/docs/src/pages/examples/thumbnails/vanilla.png differ diff --git a/docs/yarn.lock b/docs/yarn.lock index bbc1e407bebf..4920849a700c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -131,6 +131,21 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.2.tgz#54c5a964462be3d4d78af631363c18d6fa91ac26" integrity sha512-yprFYuno9FtNsSHVlSWd+nRlmGoAbqbeCwOryP6sC/zoCjhpArcRMYp19EvpSUSizJAlsXEwJv+wcWS9XaXdMw== +"@snyk/dep-graph@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@snyk/dep-graph/-/dep-graph-1.1.2.tgz#a0377fbb29dd42bc12d1c2493b51a7b7fe0d334a" + integrity sha512-mCoAFKtmezBL61JOzLMzqqd/sXXxp0iektEwf4zw+sM3zuG4Tnmhf8OqNO6Wscn84bMIfLlI/nvECdxvSS7MTw== + dependencies: + graphlib "^2.1.5" + lodash "^4" + source-map-support "^0.5.9" + tslib "^1.9.3" + +"@snyk/gemfile@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@snyk/gemfile/-/gemfile-1.1.0.tgz#8c254dfc7739b2e8513c44c976fc41872d5f6af0" + integrity sha512-mLwF+ccuvRZMS0SxUAxA3dAp8mB3m2FxIsBIUWFTYvzxl+E4XTZb8uFrUqXHbcxhZH1Z8taHohNTbzXZn3M8ag== + "@storybook/addon-actions@3.4.11": version "3.4.11" resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.4.11.tgz#a51418c5b684fd3df2788c19ef266845d6068baf" @@ -147,17 +162,17 @@ react-inspector "^2.2.2" uuid "^3.2.1" -"@storybook/addon-actions@^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.0.tgz#7dfd5f2c2d180d38faa29d111ed3ed31ce1e84e0" - integrity sha512-yg+oCofxOxoYq4K7V7r0fwpuIUnmGvCkwrT8Rx/TOtAVk47PqSToLWCJDmy58b+yWa9nl+EukclVpr/H9AmZVA== +"@storybook/addon-actions@^4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.12.tgz#a6ca63d73d30bceb6e2837bf0491eccc29bc8bdb" + integrity sha512-17M1VAUEPMp6RkOGqvwcyoi+xjGdufxl+NGZI/Di/O36e62SEr1L9/sRa9Ivxfo+At/xP7j7rSCXKjLA5hGfLA== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" "@emotion/styled" "^0.10.6" - "@storybook/addons" "4.0.0" - "@storybook/components" "4.0.0" - "@storybook/core-events" "4.0.0" + "@storybook/addons" "4.0.12" + "@storybook/components" "4.0.12" + "@storybook/core-events" "4.0.12" deep-equal "^1.0.1" global "^4.3.2" lodash "^4.17.11" @@ -176,39 +191,39 @@ global "^4.3.2" prop-types "^15.6.1" -"@storybook/addon-links@^4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.0.4.tgz#0b225c460335eb5da4af6d9061a82c2bb4cb9d74" - integrity sha512-f8uuwY9uqmG02Q+Zu10Hppq118JG2Ksih0BvpY2X3d2JAkcWllH0YosH6Sd5g1TgxMI+OMSXLDEsAojmmMX9MQ== +"@storybook/addon-links@^4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.0.12.tgz#da0ea2b013e05dcc61eae8812a3c4bc8201ade82" + integrity sha512-QN3mZNWXgMbpepzEOzLZloTsHeBB0IrMLM7pg/8nzpQrK+7aZfy1EwlQIExGLmNIA7xzl+2qUU3RHbIgUnUttg== dependencies: - "@storybook/addons" "4.0.4" - "@storybook/components" "4.0.4" - "@storybook/core-events" "4.0.4" + "@storybook/addons" "4.0.12" + "@storybook/components" "4.0.12" + "@storybook/core-events" "4.0.12" global "^4.3.2" prop-types "^15.6.2" -"@storybook/addons@3.4.11", "@storybook/addons@^3.4.11": +"@storybook/addons@3.4.11": version "3.4.11" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.11.tgz#f3e27c46d80ad1f171888c4aad0a19a8a032d072" integrity sha512-Uf01aZ1arcpG1prrrCrBCUYW63lDaoG+r/i3TNo1iG9ZaNc+2UHWeuiEedLfHg0fi/q7UnqMNWDiyO3AkEwwrA== -"@storybook/addons@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.0.tgz#b71b545a735b902fa62934ac98fd262b65c924f7" - integrity sha512-hIYM9I/7ZV5bojQiuOwQTPWQT/wBYB8iCY9yi3BiL1/ob/YOf8xeSmi4NGecCyPd2j0CKIB+vxvEv/6X3tgclQ== +"@storybook/addons@4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.12.tgz#3e1658875dd042095f4e4e987d385ee8558d8db6" + integrity sha512-ID+gaFFg2deybuklXrl7ZjNQ+SRaP5DJP/eri9K0cAIyTitzYg/OR5wxSeqdp5MseP1b3rdAoIW+Hkwf2F0ApA== dependencies: - "@storybook/channels" "4.0.0" - "@storybook/components" "4.0.0" + "@storybook/channels" "4.0.12" + "@storybook/components" "4.0.12" global "^4.3.2" util-deprecate "^1.0.2" -"@storybook/addons@4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.4.tgz#133609c527435aba1149ead53ca91f694db1a490" - integrity sha512-e7S5kYCytPsAM2p8dMQNUV0QEnY9P9mf6zVgbVgdZ2O1b2uMwD/ABj/BhYLgsB7gdshGrcV5vkMXAAGwMsN6Sg== +"@storybook/addons@^4.0.11": + version "4.0.11" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.11.tgz#e02cb5084d65a0a6cfc4c5521031fde150b93e2f" + integrity sha512-b187r62kzYh2WPW3aa1BVP/YvKUqh1xIUFQx8Pw8iJ7Uo5evexkI7utiu2KzWk4hmn0IBavdDshM+NykOjWM7A== dependencies: - "@storybook/channels" "4.0.4" - "@storybook/components" "4.0.4" + "@storybook/channels" "4.0.11" + "@storybook/components" "4.0.11" global "^4.3.2" util-deprecate "^1.0.2" @@ -226,15 +241,15 @@ resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.11.tgz#853ec40fdfa6c3ae8cff23f0cd86b77a719823f5" integrity sha512-49A79anI04nhMsNzyk5cF8fa3+HKZkb9RLshtaqvQmM7olQxCrks6cIdE2Y1zMBuyZxX1ARhcBCFVw+PUxkJjA== -"@storybook/channels@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.0.tgz#b712d711f67966028dbff5c57e6ddc6f53d5cbac" - integrity sha512-VJdct5WajZweZgl532ufGZKefk0kI8QI+SCWW93YEPrvgo+vGPBOlsZpWNZw0ozhESgnJwvSjNWYZYsSt/j1dQ== +"@storybook/channels@4.0.11": + version "4.0.11" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.11.tgz#e6303959364d6d66918dbcbafe0c64df1c5b79d3" + integrity sha512-Rewcss3OW1gjgURNVEb4/NSrKGL/huJ+r/PxdXgi81AX1cafj+fMHRbL9AaG5/SNtPDY/6EfIGlC0uGCUbyVOw== -"@storybook/channels@4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.4.tgz#fdf717cd726d15508ac80ff93a3893b75d3ab8b8" - integrity sha512-EeRby5oCyyYBkBrxI7Cg8F65FkYJjVK0jbGWpIugcjtnfOeP57xLcZuukcjhLjl/oaC/RYw7A/6c0nFW4kV0GQ== +"@storybook/channels@4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.12.tgz#7698b5365a85b8a57ff018da637c8bc8bb6cc737" + integrity sha512-HmdjiTeY9GO3ZTeveaAisbpXE7fMb/T7nRpR8vIJxS/9g87z/RInH88aUnCerfwrz56y+GkqrX5bpO/cAhYNvg== "@storybook/client-logger@3.4.11": version "3.4.11" @@ -250,10 +265,10 @@ glamorous "^4.12.1" prop-types "^15.6.1" -"@storybook/components@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.0.tgz#5006f5b423eb1ae8b97fc82710b532c0e1b45805" - integrity sha512-H/jXW96OTUdDuJBltt5Cx+svLFH7BnAvU+XAb+/O/55ikxLoYJjtq+HnyZx3oY/y6br6mBESdOiovZisAnffhQ== +"@storybook/components@4.0.11": + version "4.0.11" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.11.tgz#a09a22120685e324831876a620112ca16a28bdcb" + integrity sha512-oAy9NqCgq9gJeQ+YO+IXHUq9rqmnUxGae+jbM8lGJlBS0yKx1vpOsZYO/jV3qhNPcGWZzKVxQdoWH5ej4sq5TA== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" @@ -266,10 +281,10 @@ react-textarea-autosize "^7.0.4" render-fragment "^0.1.1" -"@storybook/components@4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.4.tgz#e07fc89cd7d64e0686c933da92a3e849d8c59d60" - integrity sha512-v13Tm5ACYrk01bszl0EpFGKe9YyCdQjdJOEE9laDiGS6rWEydl0T5QmzhBD6yNgf+k6gs96JylxswlyyqHe32Q== +"@storybook/components@4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.12.tgz#7174b531efcbea721ac1d90efdfa2a8c79c37e47" + integrity sha512-3vTX1ew18lgciV2N4LMyUa+msdSDMTc86pIUxT0wNr6sOxT4J5wJtCUkmUXYskA3tgxtokgt0LkrDfRsQ8I7OA== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" @@ -282,15 +297,10 @@ react-textarea-autosize "^7.0.4" render-fragment "^0.1.1" -"@storybook/core-events@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.0.tgz#9fc5e094044f161e4484139833c4cc2e743ec34c" - integrity sha512-RShVYSb8oB5ZGjxqZGAQuiHCYn+LCI9yFE2VLAc8a0UM4C+kQWxtFxIxjYgmF/ewTctz+Vl8miBAH3MhEDNXyA== - -"@storybook/core-events@4.0.4": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.4.tgz#bf457afe9aec3fb2cd66d7cad3fa5e5821e01503" - integrity sha512-+OFFYTVSZd6zjZQMCUF2HQ0hIPfel9NyBBABbPxEtbvWEx/cp4RMfk5VFVISpwYJQMhnqCUU0/t3VoLTKFtm1g== +"@storybook/core-events@4.0.12": + version "4.0.12" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.12.tgz#76330bf25e521d69947216815a3695255fade24c" + integrity sha512-TWj1xjtBv/0bRH1mPkoWAOexDkFNiBYSlV6BJXo9ozOQUEGnq+3Ii4CLK6HWfKCBL+whJNN+6DHs9CwS7HxuIQ== "@storybook/core@3.4.11": version "3.4.11" @@ -4207,6 +4217,13 @@ dir-glob@^2.0.0: arrify "^1.0.1" path-type "^3.0.0" +dockerfile-ast@0.0.12: + version "0.0.12" + resolved "https://registry.yarnpkg.com/dockerfile-ast/-/dockerfile-ast-0.0.12.tgz#6f25f6ad55eeecdd297ab68b08be1b32e64b5aeb" + integrity sha512-cIV8oXkAxpIuN5XgG0TGg07nLDgrj4olkfrdT77OTA3VypscsYHBUg/FjHxW9K3oA+CyH4Th/qtoMgTVpzSobw== + dependencies: + vscode-languageserver-types "^3.5.0" + doctrine@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" @@ -8516,7 +8533,7 @@ lodash@3.10.1: resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y= -lodash@4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: +lodash@4, lodash@^4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1: version "4.17.11" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== @@ -8692,10 +8709,10 @@ marked@^0.3.9: resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790" integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg== -marked@^0.5.1: - version "0.5.1" - resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.1.tgz#062f43b88b02ee80901e8e8d8e6a620ddb3aa752" - integrity sha512-iUkBZegCZou4AdwbKTwSW/lNDcz5OuRSl3qdcl31Ia0B2QPG0Jn+tKblh/9/eP9/6+4h27vpoh8wel/vQOV0vw== +marked@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.2.tgz#3efdb27b1fd0ecec4f5aba362bddcd18120e5ba9" + integrity sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA== math-expression-evaluator@^1.2.14: version "1.2.17" @@ -12780,12 +12797,13 @@ snyk-config@2.2.0: lodash "^4.17.5" nconf "^0.10.0" -snyk-docker-plugin@1.12.1: - version "1.12.1" - resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.1.tgz#66d896b18392b05bff3b34e2e47a19f7c0b7ce16" - integrity sha512-9/k+tZORb0CUoE+nFvG+ADc6vzHAkgiGR/7aZ35vxpuc9vW37LFWjmXZAfyoiGNOn1ICrPxSxarah8YsFEwE8Q== +snyk-docker-plugin@1.13.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.13.0.tgz#6477cb9cb87b320bb2ae958e29bf675a45166785" + integrity sha512-cPFrHgIQI0fy+w6Zuo6ubi4VOgYb+vnP6+fXMILaDFCUysrZhGX1oaiO8JGcvyhHDN9KF0GhIolClSezhWS2Cw== dependencies: debug "^3" + dockerfile-ast "0.0.12" tslib "^1" snyk-go-plugin@1.6.0: @@ -12797,10 +12815,10 @@ snyk-go-plugin@1.6.0: tmp "0.0.33" toml "^2.3.2" -snyk-gradle-plugin@2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-2.1.0.tgz#96c8c0774df6790f67ff0d2888a0a6f0da230754" - integrity sha512-9gYJluomFZ5kaww5FoBvp4zUIsr27pEJ12jQJaVf0FJ0BmyYHmbCoxvHdqjCSYS2fVtF+fmPnvw0XKQOIwA1SA== +snyk-gradle-plugin@2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-2.1.1.tgz#661591014508fdd1cbe5b91f4f8e6af50f68a9ac" + integrity sha512-aFeVC5y3XkJ5BxknHhtYo76as3xJbzSQlXACGZrQZGQ/w/UhNdM8VI1QB6Eq4uEzexleB/hcJwYxNmhI2CNCeA== dependencies: clone-deep "^0.3.0" @@ -12825,10 +12843,10 @@ snyk-mvn-plugin@2.0.0: resolved "https://registry.yarnpkg.com/snyk-mvn-plugin/-/snyk-mvn-plugin-2.0.0.tgz#875dcfe0d77b50396321552f2469ee69ca8d1416" integrity sha512-9jAhZhv+7YcqtoQYCYlgMoxK+dWBKlk+wkX27Ebg3vNddNop9q5jZitRXTjsXwfSUZHRt+Ptw1f8vei9kjzZVg== -snyk-nodejs-lockfile-parser@1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.7.0.tgz#d44c5d027051aeb5a0845c9a4c163323e4c5e1d3" - integrity sha512-57Gnw8o3HQbheb808GRsofnYPaJCbpt7n+zec+C7J/GZE6GJk+WA2u1EPsNQAsfTLQ3rxBwA1Sonhg498T4COA== +snyk-nodejs-lockfile-parser@1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.8.0.tgz#f79d33c3d37d85ac1bd71a8bfaf037974b614c9d" + integrity sha512-oby7WPZzAwusgAiNVnh84z7NP7ES/XiImk5GF03L7KrA5axv8J9jO1MN0XPBa1ODoavggGIBvtHFKUsk8Mtswg== dependencies: "@yarnpkg/lockfile" "^1.0.2" graphlib "^2.1.5" @@ -12929,11 +12947,13 @@ snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1: lru-cache "^4.0.0" then-fs "^2.0.0" -snyk@^1.108.0: - version "1.108.0" - resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.108.0.tgz#1aff9b6cbd39d27dd9895fefed45b0f225518aca" - integrity sha512-QKeERkklW4DFyd49sqbwZ4xNYXtHOPCcUjNUzDfcvXzNwyxfRKhTf43nmPw6lnIcgBesrY95hMozos4WmgYl3w== +snyk@^1.113.0: + version "1.113.0" + resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.113.0.tgz#2eace0b4cfcc25f90392afa537ce95654aeae4b6" + integrity sha512-M2Zvtfp6T5XLE9Wn7LwD+COdanvc6pOeEcbOtg/rBudqmMDNyeqt7ENT/GJ80xtCH+a1MmlwShjiHuA6x95xeQ== dependencies: + "@snyk/dep-graph" "1.1.2" + "@snyk/gemfile" "1.1.0" abbrev "^1.1.1" ansi-escapes "^3.1.0" chalk "^2.4.1" @@ -12950,12 +12970,12 @@ snyk@^1.108.0: recursive-readdir "^2.2.2" semver "^5.5.0" snyk-config "2.2.0" - snyk-docker-plugin "1.12.1" + snyk-docker-plugin "1.13.0" snyk-go-plugin "1.6.0" - snyk-gradle-plugin "2.1.0" + snyk-gradle-plugin "2.1.1" snyk-module "1.9.1" snyk-mvn-plugin "2.0.0" - snyk-nodejs-lockfile-parser "1.7.0" + snyk-nodejs-lockfile-parser "1.8.0" snyk-nuget-plugin "1.6.5" snyk-php-plugin "1.5.1" snyk-policy "1.13.1" @@ -14665,6 +14685,11 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +vscode-languageserver-types@^3.5.0: + version "3.13.0" + resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.13.0.tgz#b704b024cef059f7b326611c99b9c8753c0a18b4" + integrity sha512-BnJIxS+5+8UWiNKCP7W3g9FlE7fErFw0ofP5BXJe7c2tl0VeWh+nNHFbwAS2vmVC4a5kYxHBjRy0UeOtziemVA== + walker@~1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb" diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json index 9fcfda0150d0..8ac2c28592af 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -19,7 +19,7 @@ "prop-types": "^15.6.2", "react": "^16.2.0", "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz", - "whatwg-fetch": "^2.0.4" + "whatwg-fetch": "^3.0.0" }, "devDependencies": { "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz", @@ -41,7 +41,7 @@ "@storybook/addon-ondevice-knobs": "file:../../packs/storybook-addon-ondevice-knobs.tgz", "@storybook/addon-ondevice-notes": "file:../../packs/storybook-addon-ondevice-notes.tgz", "@storybook/ui": "file:../../packs/storybook-ui.tgz", - "jest-expo": "^30.0.0", + "jest-expo": "^31.0.0", "react-dom": "^16.2.0", "react-test-renderer": "^16.6.0" } diff --git a/examples/angular-cli/.storybook/config.ts b/examples/angular-cli/.storybook/config.ts index 2fef94e1cea6..477692e5132c 100644 --- a/examples/angular-cli/.storybook/config.ts +++ b/examples/angular-cli/.storybook/config.ts @@ -1,12 +1,14 @@ -import { configure } from '@storybook/angular'; -import { setOptions } from '@storybook/addon-options'; +import { configure, addDecorator } from '@storybook/angular'; +import { withOptions } from '@storybook/addon-options'; import addCssWarning from '../src/cssWarning'; addCssWarning(); -setOptions({ - hierarchyRootSeparator: /\|/, -}); +addDecorator( + withOptions({ + hierarchyRootSeparator: /\|/, + }) +); function loadStories() { // put welcome screen at the top of the list so it's the first one displayed diff --git a/examples/angular-cli/jest.addon-config.js b/examples/angular-cli/jest.addon-config.js new file mode 100644 index 000000000000..1515858c5387 --- /dev/null +++ b/examples/angular-cli/jest.addon-config.js @@ -0,0 +1,13 @@ +module.exports = { + coveragePathIgnorePatterns: ['/jest-config/', '/node_modules/'], + preset: 'jest-preset-angular', + setupTestFrameworkScriptFile: './jest-config/setup.ts', + snapshotSerializers: [ + '/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js', + '/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js', + ], + testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'], + transform: { + '^.+\\.(ts|js|html)$': '/../../node_modules/jest-preset-angular/preprocessor.js', + }, +}; diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js new file mode 100644 index 000000000000..41856c987271 --- /dev/null +++ b/examples/angular-cli/jest.config.js @@ -0,0 +1,15 @@ +const config = require('../../jest.config'); + +module.exports = { + ...config, + globals: { + __TRANSFORM_HTML__: true, + }, + roots: [__dirname], + transform: { + ...config.transform, + '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '/scripts/jest-ts-babel.js', + '^.+\\.(ts|html)$': '/node_modules/jest-preset-angular/preprocessor.js', + }, + moduleFileExtensions: [...config.moduleFileExtensions, 'ts', 'tsx', 'html'], +}; diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 7f3726104224..a236765e3ee6 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,11 +1,11 @@ { "name": "angular-cli", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "private": true, "license": "MIT", "scripts": { "build": "ng build", - "build-storybook": "npm run storybook:prebuild && build-storybook -s src", + "build-storybook": "npm run storybook:prebuild && build-storybook -s src/assets", "e2e": "ng e2e", "ng": "ng", "start": "ng serve", @@ -13,30 +13,9 @@ "storybook:prebuild": "npm run test:generate-output", "test": "jest", "test:coverage": "jest --coverage", - "test:generate-output": "jest --json --outputFile=addon-jest.testresults.json || true", + "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true", "test:watch": "jest --watch" }, - "jest": { - "coveragePathIgnorePatterns": [ - "/jest-config/", - "/node_modules/" - ], - "preset": "jest-preset-angular", - "setupTestFrameworkScriptFile": "./jest-config/setup.ts", - "snapshotSerializers": [ - "/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js", - "/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js" - ], - "testPathIgnorePatterns": [ - "/node_modules/", - "/storybook-static/", - "angularshots.test.js", - "dist" - ], - "transform": { - "^.+\\.(ts|js|html)$": "/../../node_modules/jest-preset-angular/preprocessor.js" - } - }, "dependencies": { "@angular/common": "^7.0.1", "@angular/compiler": "^7.0.2", @@ -54,18 +33,18 @@ "@angular-devkit/build-angular": "^0.10.3", "@angular/cli": "^7.0.3", "@angular/compiler-cli": "^7.0.1", - "@storybook/addon-actions": "4.1.0-alpha.1", - "@storybook/addon-backgrounds": "4.1.0-alpha.1", - "@storybook/addon-centered": "4.1.0-alpha.1", - "@storybook/addon-jest": "4.1.0-alpha.1", - "@storybook/addon-knobs": "4.1.0-alpha.1", - "@storybook/addon-links": "4.1.0-alpha.1", - "@storybook/addon-notes": "4.1.0-alpha.1", - "@storybook/addon-options": "4.1.0-alpha.1", - "@storybook/addon-storyshots": "4.1.0-alpha.1", - "@storybook/addon-storysource": "4.1.0-alpha.1", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/angular": "4.1.0-alpha.1", + "@storybook/addon-actions": "4.1.0-alpha.11", + "@storybook/addon-backgrounds": "4.1.0-alpha.11", + "@storybook/addon-centered": "4.1.0-alpha.11", + "@storybook/addon-jest": "4.1.0-alpha.11", + "@storybook/addon-knobs": "4.1.0-alpha.11", + "@storybook/addon-links": "4.1.0-alpha.11", + "@storybook/addon-notes": "4.1.0-alpha.11", + "@storybook/addon-options": "4.1.0-alpha.11", + "@storybook/addon-storyshots": "4.1.0-alpha.11", + "@storybook/addon-storysource": "4.1.0-alpha.11", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/angular": "4.1.0-alpha.11", "@types/core-js": "^2.5.0", "@types/jest": "^23.3.9", "@types/node": "~10.12.1", diff --git a/examples/angular-cli/src/favicon.ico b/examples/angular-cli/src/assets/favicon.ico similarity index 100% rename from examples/angular-cli/src/favicon.ico rename to examples/angular-cli/src/assets/favicon.ico diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot index 3f08d4382b6e..a22fed56c445 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot @@ -32,13 +32,13 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
  • - Laptop + Laptop
  • - Book + Book
  • - Whiskey + Whiskey
diff --git a/examples/angular-cli/src/stories/__snapshots__/metadata-combined.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/metadata-combined.stories.storyshot index f4f6520567f3..f4a53212f89a 100644 --- a/examples/angular-cli/src/stories/__snapshots__/metadata-combined.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/metadata-combined.stories.storyshot @@ -19,10 +19,10 @@ exports[`Storyshots Metadata|Combined Combined 1 1`] = `
  • - Joe + Joe
  • - Jane + Jane
@@ -49,10 +49,10 @@ exports[`Storyshots Metadata|Combined Combined 2 1`] = `
  • - Joe + Joe
  • - Jane + Jane
diff --git a/examples/angular-cli/src/stories/__snapshots__/metadata-individual.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/metadata-individual.stories.storyshot index 2e2073b999fb..25b3e0f48148 100644 --- a/examples/angular-cli/src/stories/__snapshots__/metadata-individual.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/metadata-individual.stories.storyshot @@ -19,10 +19,10 @@ exports[`Storyshots Metadata|Individual Individual 1 1`] = `
  • - Joe + Joe
  • - Jane + Jane
@@ -47,10 +47,10 @@ exports[`Storyshots Metadata|Individual Individual 2 1`] = `
  • - Jim + Jim
  • - Jill + Jill
diff --git a/examples/angular-cli/src/stories/__snapshots__/metadata-shared.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/metadata-shared.stories.storyshot index d43f8d826aa9..42116cfe07a7 100644 --- a/examples/angular-cli/src/stories/__snapshots__/metadata-shared.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/metadata-shared.stories.storyshot @@ -19,10 +19,10 @@ exports[`Storyshots Metadata|Shared Shared 1 1`] = `
  • - Joe + Joe
  • - Jane + Jane
@@ -47,10 +47,10 @@ exports[`Storyshots Metadata|Shared Shared 2 1`] = `
  • - Joe + Joe
  • - Jane + Jane
diff --git a/examples/angular-cli/src/stories/all-knobs.component.ts b/examples/angular-cli/src/stories/all-knobs.component.ts index bbd55ef0efec..4b36a9dea1c9 100644 --- a/examples/angular-cli/src/stories/all-knobs.component.ts +++ b/examples/angular-cli/src/stories/all-knobs.component.ts @@ -3,16 +3,17 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor @Component({ selector: 'storybook-simple-knobs-component', template: ` -
+

My name is {{ name }},

today is {{ today | date }}

I have a stock of {{ stock }} {{ fruit }}, costing $ {{ price }} each.

-

I'm out of {{ fruit }}.

Sorry.

+

I'm out of {{ fruit }}.

+

Sorry.

Also, I have:

    -
  • - {{ item }} -
    • +
  • {{ item }}

Nice to meet you!

Leave me alone!

diff --git a/examples/angular-cli/src/stories/custom-ng-content.stories.ts b/examples/angular-cli/src/stories/custom-ng-content.stories.ts index 5baa440d797b..4ccc2c3e46b6 100644 --- a/examples/angular-cli/src/stories/custom-ng-content.stories.ts +++ b/examples/angular-cli/src/stories/custom-ng-content.stories.ts @@ -3,7 +3,9 @@ import { storiesOf } from '@storybook/angular'; @Component({ selector: 'storybook-with-ng-content', - template: `
`, + template: ` +
+ `, }) class WithNgContentComponent {} diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts index 48a959aa4743..bdc1188fa8f7 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts +++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts @@ -6,7 +6,7 @@ const NOOP = () => {}; @Component({ selector: 'storybook-custom-cva-component', template: ` -
{{value}}
+
{{ value }}
`, providers: [ diff --git a/examples/angular-cli/src/stories/inheritance/base-button.component.ts b/examples/angular-cli/src/stories/inheritance/base-button.component.ts index 27770069a4c5..3619046fce2b 100644 --- a/examples/angular-cli/src/stories/inheritance/base-button.component.ts +++ b/examples/angular-cli/src/stories/inheritance/base-button.component.ts @@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: `storybook-base-button`, template: ` - + `, }) export class BaseButtonComponent { diff --git a/examples/angular-cli/src/stories/inheritance/icon-button.component.ts b/examples/angular-cli/src/stories/inheritance/icon-button.component.ts index eca32b1ee73b..3debb422f62d 100644 --- a/examples/angular-cli/src/stories/inheritance/icon-button.component.ts +++ b/examples/angular-cli/src/stories/inheritance/icon-button.component.ts @@ -4,7 +4,7 @@ import { BaseButtonComponent } from './base-button.component'; @Component({ selector: `storybook-icon-button`, template: ` - + `, }) export class IconButtonComponent extends BaseButtonComponent { diff --git a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts index b630795714c2..8d8addf21a31 100644 --- a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts +++ b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts @@ -2,7 +2,9 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'storybook-name', - template: `

{{ field | customPipe }}

`, + template: ` +

{{ field | customPipe }}

+ `, }) export class NameComponent { @Input() diff --git a/examples/angular-cli/src/stories/moduleMetadata/service.component.ts b/examples/angular-cli/src/stories/moduleMetadata/service.component.ts index a4b5e6c49d54..c475d44fa6d8 100644 --- a/examples/angular-cli/src/stories/moduleMetadata/service.component.ts +++ b/examples/angular-cli/src/stories/moduleMetadata/service.component.ts @@ -6,9 +6,7 @@ import { DummyService } from './dummy.service'; template: `

{{ name }}:

    -
  • - {{ item }} -
    • +
  • {{ item }}
`, }) diff --git a/examples/angular-cli/src/stories/moduleMetadata/token.component.ts b/examples/angular-cli/src/stories/moduleMetadata/token.component.ts index 5cb10e89b99b..ece1199e7b6f 100644 --- a/examples/angular-cli/src/stories/moduleMetadata/token.component.ts +++ b/examples/angular-cli/src/stories/moduleMetadata/token.component.ts @@ -9,9 +9,7 @@ export const DEFAULT_NAME = new InjectionToken('TokenComponent.DefaultNa

{{ name }}

Items:

    -
  • - {{ item }} -
    • +
  • {{ item }}
`, }) diff --git a/examples/cra-kitchen-sink/.env b/examples/cra-kitchen-sink/.env index 6f809cc2540d..e70a111949cd 100644 --- a/examples/cra-kitchen-sink/.env +++ b/examples/cra-kitchen-sink/.env @@ -1 +1,2 @@ SKIP_PREFLIGHT_CHECK=true +NODE_PATH=src \ No newline at end of file diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index 1a0e64de735f..7c6868a0f159 100644 --- a/examples/cra-kitchen-sink/.storybook/config.js +++ b/examples/cra-kitchen-sink/.storybook/config.js @@ -1,18 +1,20 @@ -import { configure } from '@storybook/react'; -import { setOptions } from '@storybook/addon-options'; +import { configure, addDecorator } from '@storybook/react'; +import { withOptions } from '@storybook/addon-options'; -setOptions({ - name: 'CRA Kitchen Sink', - url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', - goFullScreen: false, - showAddonsPanel: true, - showSearchBox: false, - addonPanelInRight: true, - sortStoriesByKind: false, - hierarchySeparator: /\./, - hierarchyRootSeparator: /\|/, - enableShortcuts: true, -}); +addDecorator( + withOptions({ + name: 'CRA Kitchen Sink', + url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', + goFullScreen: false, + showAddonsPanel: true, + showSearchBox: false, + addonPanelInRight: true, + sortStoriesByKind: false, + hierarchySeparator: /\./, + hierarchyRootSeparator: /\|/, + enableShortcuts: true, + }) +); function loadStories() { // put welcome screen at the top of the list so it's the first one displayed diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js new file mode 100644 index 000000000000..b1ffc36fb83f --- /dev/null +++ b/examples/cra-kitchen-sink/jest.config.js @@ -0,0 +1,17 @@ +const config = require('../../jest.config'); + +module.exports = { + ...config, + roots: [__dirname], + moduleNameMapper: { + '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/__mocks__/fileMock.js', + '\\.(css|scss)$': '/__mocks__/styleMock.js', + '\\.(md)$': '/__mocks__/htmlMock.js', + }, + transform: { + ...config.transform, + '^.+\\.svg$': '/node_modules/react-scripts/config/jest/fileTransform.js', + }, + moduleDirectories: ['/node_modules', 'src'], +}; diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index dd66e6b90aab..e46fc8491bb5 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "4.1.0-alpha.1", + "version": "4.1.0-alpha.11", "private": true, "scripts": { "build": "react-scripts build", @@ -18,21 +18,22 @@ "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "4.1.0-alpha.1", - "@storybook/addon-actions": "4.1.0-alpha.1", - "@storybook/addon-backgrounds": "4.1.0-alpha.1", - "@storybook/addon-centered": "4.1.0-alpha.1", - "@storybook/addon-events": "4.1.0-alpha.1", - "@storybook/addon-info": "4.1.0-alpha.1", - "@storybook/addon-jest": "4.1.0-alpha.1", - "@storybook/addon-knobs": "4.1.0-alpha.1", - "@storybook/addon-links": "4.1.0-alpha.1", - "@storybook/addon-notes": "4.1.0-alpha.1", - "@storybook/addon-options": "4.1.0-alpha.1", - "@storybook/addon-storyshots": "4.1.0-alpha.1", - "@storybook/addons": "4.1.0-alpha.1", - "@storybook/client-logger": "4.1.0-alpha.1", - "@storybook/react": "4.1.0-alpha.1", + "@emotion/snapshot-serializer": "^0.8.2", + "@storybook/addon-a11y": "4.1.0-alpha.11", + "@storybook/addon-actions": "4.1.0-alpha.11", + "@storybook/addon-backgrounds": "4.1.0-alpha.11", + "@storybook/addon-centered": "4.1.0-alpha.11", + "@storybook/addon-events": "4.1.0-alpha.11", + "@storybook/addon-info": "4.1.0-alpha.11", + "@storybook/addon-jest": "4.1.0-alpha.11", + "@storybook/addon-knobs": "4.1.0-alpha.11", + "@storybook/addon-links": "4.1.0-alpha.11", + "@storybook/addon-notes": "4.1.0-alpha.11", + "@storybook/addon-options": "4.1.0-alpha.11", + "@storybook/addon-storyshots": "4.1.0-alpha.11", + "@storybook/addons": "4.1.0-alpha.11", + "@storybook/client-logger": "4.1.0-alpha.11", + "@storybook/react": "4.1.0-alpha.11", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "enzyme-to-json": "^3.3.4", diff --git a/examples/cra-kitchen-sink/public/index.html b/examples/cra-kitchen-sink/public/index.html index aab5e3b00ce4..f952b7c582cd 100644 --- a/examples/cra-kitchen-sink/public/index.html +++ b/examples/cra-kitchen-sink/public/index.html @@ -8,7 +8,6 @@ Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. @@ -20,12 +19,10 @@ - + \ No newline at end of file diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js new file mode 100644 index 000000000000..0129759479c5 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/App.stories.js @@ -0,0 +1,7 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +// eslint-disable-next-line import/extensions,import/no-unresolved +import App from 'App'; + +storiesOf('App', module).add('full app', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js new file mode 100644 index 000000000000..701812e1e03c --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js @@ -0,0 +1,5 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import LifecycleLogger from '../components/LifecycleLogger'; + +storiesOf('Lifecycle', module).add('logging', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot new file mode 100644 index 000000000000..400883b6416f --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots App full app 1`] = ` +
+
+ +

+ Welcome to React +

+
+

+ To get started, edit + + src/App.js + + and save to reload. +

+
+`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot new file mode 100644 index 000000000000..b53b1b408776 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Lifecycle logging 1`] = ` +
+ Lifecycle methods are logged to the console +
+`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot new file mode 100644 index 000000000000..0b6f8f75b672 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots CRA Dynamic import 1`] = ` +
+ Waiting for Dynamic Import +
+`; + +exports[`Storyshots CRA Svgr 1`] = ` + + logo.svg + +`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot index 73f2c0518ecd..7aca90b808da 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot @@ -1,34 +1,63 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots App full app 1`] = ` -
-
- -

- Welcome to React -

-
-

- To get started, edit - - src/App.js - - and save to reload. -

-
-`; - exports[`Storyshots Button addons composition 1`] = ` +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: .88em; + font-family: Menlo,Monaco,"Courier New",monospace; + background-color: #fafafa; + padding: .5rem; + line-height: 1.5; + overflow-x: scroll; +} + +.emotion-2 { + overflow: hidden; + border: 1px solid #eee; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; + font-size: 13px; + padding: 3px 10px; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-2:hover { + background-color: #f4f7fa; + border-color: #ddd; +} + +.emotion-2:active { + background-color: #e9ecef; + border-color: #ccc; +} + +.emotion-0 { + -webkit-transition: -webkit-transform .2s ease; + -webkit-transition: transform .2s ease; + transition: transform .2s ease; + height: 16px; + -webkit-transform: translateY(-100%) translateY(-6px); + -ms-transform: translateY(-100%) translateY(-6px); + transform: translateY(-100%) translateY(-6px); +} + 
             

               

@@ -111,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = `
                     >
                   
                 

-                

-                  
-                

                 

@@ -181,10 +203,10 @@ exports[`Storyshots Button addons composition 1`] = `
               

             

             )
-//   .add('second', () => );
-
-// // Atomic
-
-// storiesOf('Cells/Molecules.Atoms/simple', module)
-//   .addDecorator(withKnobs)
-//   .add('with text', () => )
-//   .add('with some emoji', () => );
-
-// storiesOf('Cells/Molecules/Atoms.more', module)
-//   .add('with text2', () => )
-//   .add('with some emoji2', () => );
-
-// storiesOf('Cells/Molecules', module)
-//   .add('with text', () => )
-//   .add('with some emoji', () => );
-
-// storiesOf('Cells.Molecules.Atoms', module)
-//   .add('with text2', () => )
-//   .add('with some emoji2', () => );
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 719c97b5810e..550b203013c0 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,16 +1,11 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
 import { action } from '@storybook/addon-actions';
 import { withNotes } from '@storybook/addon-notes';
-import centered from '@storybook/addon-centered';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-import App from '../App';
 import Container from './Container';
-import LifecycleLogger from '../components/LifecycleLogger';
 
 const InfoButton = () => (
    (
 
 storiesOf('Button', module)
   .addDecorator(withNotes)
-  .add('with text', () => (
-    
-  ))
-  .add('with some emoji', () => (
-    
-  ))
+  .add('with text', () => , {
+    options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
+  })
   .add(
-    'with notes',
+    'with some emoji',
     () => (
-      
     ),
-    { notes: 'A very simple button' }
+    {
+      options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
+    }
   )
+  .add('with notes', () => , {
+    notes: 'A very simple button',
+    options: { selectedAddonPanel: 'storybook/notes/panel' },
+  })
   .add(
     'with new info',
     withInfo(
       'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
     )(context => (
       
-        {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
         click the  label in top right for info about "{context.story}"
       
-    ))
+    )),
+    {
+      options: { selectedAddonPanel: 'storybook/info/info-panel' },
+    }
   )
   .add(
     'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes('Composition: Info(Notes())')(context => (
-        

-          {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
-          click the  label in top right for info about "{context.story}"
-        

-      ))
-    )
+    withInfo('see Notes panel for composition info')(context => (
+      

+        click the  label in top right for info about "{context.story}"
+      

+    )),
+    {
+      notes: 'Composition: Info(Notes())',
+      options: { selectedAddonPanel: 'storybook/notes/panel' },
+    }
   );
-
-storiesOf('App', module).add('full app', () => );
-
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => );
-
-storiesOf('Lifecycle', module).add('logging', () => );
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
new file mode 100644
index 000000000000..fb111e7c954c
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import centered from '@storybook/addon-centered';
+import { Button } from '@storybook/react/demo';
+
+storiesOf('Some really long story kind description', module)
+  .addDecorator(centered)
+  .add('with text', () => );
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
index 257fb426bd9a..6efe04c26fbe 100644
--- a/examples/cra-kitchen-sink/src/storyshots.test.js
+++ b/examples/cra-kitchen-sink/src/storyshots.test.js
@@ -1,6 +1,6 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+import emotionSerializer from '@emotion/snapshot-serializer';
 import path from 'path';
-
 import { render as renderer, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
@@ -14,5 +14,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer()],
+  snapshotSerializers: [createSerializer(), emotionSerializer],
 });
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index d6c1169c914d..689581841717 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.11",
   "private": true,
   "scripts": {
     "build": "ember build",
@@ -9,20 +9,23 @@
     "storybook": "yarn build && start-storybook -p 9009 -s dist",
     "storybook:dev": "yarn dev & start-storybook -p 9009 -s dist"
   },
+  "dependencies": {
+    "ember-template-compiler": "^1.9.0-alpha"
+  },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@storybook/addon-a11y": "4.1.0-alpha.1",
-    "@storybook/addon-actions": "4.1.0-alpha.1",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.1",
-    "@storybook/addon-centered": "4.1.0-alpha.1",
-    "@storybook/addon-knobs": "4.1.0-alpha.1",
-    "@storybook/addon-links": "4.1.0-alpha.1",
-    "@storybook/addon-notes": "4.1.0-alpha.1",
-    "@storybook/addon-options": "4.1.0-alpha.1",
-    "@storybook/addon-storysource": "4.1.0-alpha.1",
-    "@storybook/addon-viewport": "4.1.0-alpha.1",
-    "@storybook/addons": "4.1.0-alpha.1",
-    "@storybook/ember": "4.1.0-alpha.1",
+    "@babel/core": "^7.2.0",
+    "@storybook/addon-a11y": "4.1.0-alpha.11",
+    "@storybook/addon-actions": "4.1.0-alpha.11",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.11",
+    "@storybook/addon-centered": "4.1.0-alpha.11",
+    "@storybook/addon-knobs": "4.1.0-alpha.11",
+    "@storybook/addon-links": "4.1.0-alpha.11",
+    "@storybook/addon-notes": "4.1.0-alpha.11",
+    "@storybook/addon-options": "4.1.0-alpha.11",
+    "@storybook/addon-storysource": "4.1.0-alpha.11",
+    "@storybook/addon-viewport": "4.1.0-alpha.11",
+    "@storybook/addons": "4.1.0-alpha.11",
+    "@storybook/ember": "4.1.0-alpha.11",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^5.2.0",
@@ -46,8 +49,5 @@
   },
   "engines": {
     "node": "^4.5 || 6.* || >= 7.*"
-  },
-  "dependencies": {
-    "ember-template-compiler": "^1.9.0-alpha"
   }
 }
diff --git a/examples/html-kitchen-sink/jest.config.js b/examples/html-kitchen-sink/jest.config.js
new file mode 100644
index 000000000000..96bbe6655e13
--- /dev/null
+++ b/examples/html-kitchen-sink/jest.config.js
@@ -0,0 +1,11 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '.*\\.(html)$': '/node_modules/jest-raw-loader',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'html'],
+};
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index a7a01701c950..9d8f2dc2605c 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.11",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.1.0-alpha.1",
-    "@storybook/addon-actions": "4.1.0-alpha.1",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.1",
-    "@storybook/addon-centered": "4.1.0-alpha.1",
-    "@storybook/addon-events": "4.1.0-alpha.1",
-    "@storybook/addon-jest": "4.1.0-alpha.1",
-    "@storybook/addon-knobs": "4.1.0-alpha.1",
-    "@storybook/addon-links": "4.1.0-alpha.1",
-    "@storybook/addon-notes": "4.1.0-alpha.1",
-    "@storybook/addon-options": "4.1.0-alpha.1",
-    "@storybook/addon-storyshots": "4.1.0-alpha.1",
-    "@storybook/addon-storysource": "4.1.0-alpha.1",
-    "@storybook/addon-viewport": "4.1.0-alpha.1",
-    "@storybook/addons": "4.1.0-alpha.1",
-    "@storybook/core": "4.1.0-alpha.1",
-    "@storybook/core-events": "4.1.0-alpha.1",
-    "@storybook/html": "4.1.0-alpha.1",
+    "@storybook/addon-a11y": "4.1.0-alpha.11",
+    "@storybook/addon-actions": "4.1.0-alpha.11",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.11",
+    "@storybook/addon-centered": "4.1.0-alpha.11",
+    "@storybook/addon-events": "4.1.0-alpha.11",
+    "@storybook/addon-jest": "4.1.0-alpha.11",
+    "@storybook/addon-knobs": "4.1.0-alpha.11",
+    "@storybook/addon-links": "4.1.0-alpha.11",
+    "@storybook/addon-notes": "4.1.0-alpha.11",
+    "@storybook/addon-options": "4.1.0-alpha.11",
+    "@storybook/addon-storyshots": "4.1.0-alpha.11",
+    "@storybook/addon-storysource": "4.1.0-alpha.11",
+    "@storybook/addon-viewport": "4.1.0-alpha.11",
+    "@storybook/addons": "4.1.0-alpha.11",
+    "@storybook/core": "4.1.0-alpha.11",
+    "@storybook/core-events": "4.1.0-alpha.11",
+    "@storybook/html": "4.1.0-alpha.11",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
diff --git a/examples/marko-cli/.storybook/config.js b/examples/marko-cli/.storybook/config.js
index e323e2999aec..81e684f39c3e 100644
--- a/examples/marko-cli/.storybook/config.js
+++ b/examples/marko-cli/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/marko';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/marko';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 7ad0d1ba639b..ce622de28bed 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.11",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -22,12 +22,12 @@
     "marko-starter": "^2.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.1",
-    "@storybook/addon-knobs": "4.1.0-alpha.1",
-    "@storybook/addon-options": "4.1.0-alpha.1",
-    "@storybook/addon-storysource": "4.1.0-alpha.1",
-    "@storybook/addons": "4.1.0-alpha.1",
-    "@storybook/marko": "4.1.0-alpha.1",
+    "@storybook/addon-actions": "4.1.0-alpha.11",
+    "@storybook/addon-knobs": "4.1.0-alpha.11",
+    "@storybook/addon-options": "4.1.0-alpha.11",
+    "@storybook/addon-storysource": "4.1.0-alpha.11",
+    "@storybook/addons": "4.1.0-alpha.11",
+    "@storybook/marko": "4.1.0-alpha.11",
     "prettier": "^1.14.3",
     "webpack": "^4.23.1"
   }
diff --git a/examples/mithril-kitchen-sink/.storybook/config.js b/examples/mithril-kitchen-sink/.storybook/config.js
index aff56383c053..d1f9e7f689c8 100644
--- a/examples/mithril-kitchen-sink/.storybook/config.js
+++ b/examples/mithril-kitchen-sink/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/mithril';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/mithril';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   const req = require.context('../src/stories', true, /\.stories\.js$/);
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 3b14a36b416d..cf0f54f9a45a 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.11",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,18 +10,18 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.1",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.1",
-    "@storybook/addon-centered": "4.1.0-alpha.1",
-    "@storybook/addon-knobs": "4.1.0-alpha.1",
-    "@storybook/addon-links": "4.1.0-alpha.1",
-    "@storybook/addon-notes": "4.1.0-alpha.1",
-    "@storybook/addon-options": "4.1.0-alpha.1",
-    "@storybook/addon-storyshots": "4.1.0-alpha.1",
-    "@storybook/addon-storysource": "4.1.0-alpha.1",
-    "@storybook/addon-viewport": "4.1.0-alpha.1",
-    "@storybook/addons": "4.1.0-alpha.1",
-    "@storybook/mithril": "4.1.0-alpha.1",
+    "@storybook/addon-actions": "4.1.0-alpha.11",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.11",
+    "@storybook/addon-centered": "4.1.0-alpha.11",
+    "@storybook/addon-knobs": "4.1.0-alpha.11",
+    "@storybook/addon-links": "4.1.0-alpha.11",
+    "@storybook/addon-notes": "4.1.0-alpha.11",
+    "@storybook/addon-options": "4.1.0-alpha.11",
+    "@storybook/addon-storyshots": "4.1.0-alpha.11",
+    "@storybook/addon-storysource": "4.1.0-alpha.11",
+    "@storybook/addon-viewport": "4.1.0-alpha.11",
+    "@storybook/addons": "4.1.0-alpha.11",
+    "@storybook/mithril": "4.1.0-alpha.11",
     "webpack": "^4.23.1"
   }
 }
diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
index 8d78d9d8216c..f0b7359fda1a 100644
--- a/examples/official-storybook/addons.js
+++ b/examples/official-storybook/addons.js
@@ -5,6 +5,7 @@ import '@storybook/addon-events/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-cssresources/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 9b48d7835fbb..4959ce3d5c77 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -4,6 +4,7 @@ import { configure, addDecorator } from '@storybook/react';
 import { themes } from '@storybook/components';
 import { withOptions } from '@storybook/addon-options';
 import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { withCssResources } from '@storybook/addon-cssresources';
 
 import 'react-chromatic/storybook-addon';
 import addHeadWarning from './head-warning';
@@ -35,12 +36,21 @@ addDecorator(
 );
 
 addDecorator(
-  (story, { kind }) =>
-    kind === 'Core|Errors' ? (
-      story()
-    ) : (
-      {story()}
-    )
+  withCssResources({
+    cssresources: [
+      {
+        name: `bluetheme`,
+        code: ``,
+        picked: false,
+      },
+    ],
+  })
+);
+
+addDecorator((story, { kind }) =>
+  kind === 'Core|Errors' ? story() : {story()}
 );
 
 configureViewport({
diff --git a/examples/official-storybook/image-snapshots/storyshots-image.runner.js b/examples/official-storybook/image-snapshots/storyshots-image.runner.js
index ee2e65e183f0..71df59607983 100644
--- a/examples/official-storybook/image-snapshots/storyshots-image.runner.js
+++ b/examples/official-storybook/image-snapshots/storyshots-image.runner.js
@@ -1,7 +1,7 @@
 /* This file is not suffixed by ".test.js" to not being run with all other test files.
-* This test needs the static build of the storybook to run.
-* `yarn run image-snapshots` generates the static build & uses the image snapshots behavior of storyshots.
-* */
+ * This test needs the static build of the storybook to run.
+ * `yarn run image-snapshots` generates the static build & uses the image snapshots behavior of storyshots.
+ * */
 import path from 'path';
 import fs from 'fs';
 import initStoryshots from '@storybook/addon-storyshots';
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 932b2e339a1b..49ccd754b506 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.11",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -14,28 +14,30 @@
   "devDependencies": {
     "@emotion/core": "^0.13.1",
     "@emotion/provider": "^0.11.2",
+    "@emotion/snapshot-serializer": "^0.8.2",
     "@emotion/styled": "^0.10.6",
-    "@storybook/addon-a11y": "4.1.0-alpha.1",
-    "@storybook/addon-actions": "4.1.0-alpha.1",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.1",
-    "@storybook/addon-centered": "4.1.0-alpha.1",
-    "@storybook/addon-events": "4.1.0-alpha.1",
-    "@storybook/addon-graphql": "4.1.0-alpha.1",
-    "@storybook/addon-info": "4.1.0-alpha.1",
-    "@storybook/addon-jest": "4.1.0-alpha.1",
-    "@storybook/addon-knobs": "4.1.0-alpha.1",
-    "@storybook/addon-links": "4.1.0-alpha.1",
-    "@storybook/addon-notes": "4.1.0-alpha.1",
-    "@storybook/addon-options": "4.1.0-alpha.1",
-    "@storybook/addon-storyshots": "4.1.0-alpha.1",
-    "@storybook/addon-storyshots-puppeteer": "4.1.0-alpha.1",
-    "@storybook/addon-storysource": "4.1.0-alpha.1",
-    "@storybook/addon-viewport": "4.1.0-alpha.1",
-    "@storybook/addons": "4.1.0-alpha.1",
-    "@storybook/components": "4.1.0-alpha.1",
-    "@storybook/core-events": "4.1.0-alpha.1",
-    "@storybook/node-logger": "4.1.0-alpha.1",
-    "@storybook/react": "4.1.0-alpha.1",
+    "@storybook/addon-a11y": "4.1.0-alpha.11",
+    "@storybook/addon-actions": "4.1.0-alpha.11",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.11",
+    "@storybook/addon-centered": "4.1.0-alpha.11",
+    "@storybook/addon-cssresources": "4.1.0-alpha.11",
+    "@storybook/addon-events": "4.1.0-alpha.11",
+    "@storybook/addon-graphql": "4.1.0-alpha.11",
+    "@storybook/addon-info": "4.1.0-alpha.11",
+    "@storybook/addon-jest": "4.1.0-alpha.11",
+    "@storybook/addon-knobs": "4.1.0-alpha.11",
+    "@storybook/addon-links": "4.1.0-alpha.11",
+    "@storybook/addon-notes": "4.1.0-alpha.11",
+    "@storybook/addon-options": "4.1.0-alpha.11",
+    "@storybook/addon-storyshots": "4.1.0-alpha.11",
+    "@storybook/addon-storyshots-puppeteer": "4.1.0-alpha.11",
+    "@storybook/addon-storysource": "4.1.0-alpha.11",
+    "@storybook/addon-viewport": "4.1.0-alpha.11",
+    "@storybook/addons": "4.1.0-alpha.11",
+    "@storybook/components": "4.1.0-alpha.11",
+    "@storybook/core-events": "4.1.0-alpha.11",
+    "@storybook/node-logger": "4.1.0-alpha.11",
+    "@storybook/react": "4.1.0-alpha.11",
     "cors": "^2.8.4",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.4",
diff --git a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
new file mode 100644
index 000000000000..77298e639d48
--- /dev/null
+++ b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Cssresources Camera Icon 1`] = `
+
+   Camera Icon
+
+`;
+
+exports[`Storyshots Addons|Cssresources Primary Large Button 1`] = `
+
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index c2f4ff454e2f..eb2b3abf0497 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -1,11 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Events Logger 1`] = `
+.emotion-2 {
+  padding: 20px;
+}
+
+.emotion-0 {
+  margin: 0;
+}
+
 

   

     Logger
   

@@ -14,11 +22,19 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 `;
 
 exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
+.emotion-2 {
+  padding: 20px;
+}
+
+.emotion-0 {
+  margin: 0;
+}
+
 

   

     Logger
   

diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 1d305e7e003b..b6f13985ce04 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,6 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+