diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 9731c81d692..00000000000 --- 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 00000000000..cb2010747c5 --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,50 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage' }], + '@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/.circleci/config.yml b/.circleci/config.yml index 95af3d26fe8..76cc6666676 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -120,52 +120,52 @@ jobs: name: Run react kitchen-sink (smoke test) command: | cd examples/cra-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run vue kitchen-sink (smoke test) command: | cd examples/vue-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run svelte kitchen-sink (smoke test) command: | cd examples/svelte-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run angular-cli (smoke test) command: | cd examples/angular-cli - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run ember-cli (smoke test) command: | cd examples/ember-cli - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run polymer-cli (smoke test) command: | cd examples/polymer-cli - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run marko-cli (smoke test) command: | cd examples/marko-cli - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run official-storybook (smoke test) command: | cd examples/official-storybook - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run mithril kitchen-sink (smoke test) command: | cd examples/mithril-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet - run: name: Run riot kitchen-sink (smoke test) command: | cd examples/riot-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet native-smoke-tests: <<: *defaults steps: diff --git a/.eslintignore b/.eslintignore index 73f2bb84a21..e8aacb9b8fa 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 917bf9b0070..6de2f6ae78b 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 a1bdccd96d1..0ed76d9dcdc 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 f18d4aaf868..f609d196a3e 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 53ee4bd4075..2fe164bb30e 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/OpenSourceProjects_Storybook_SmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt index bf5f2ebf439..377397880bc 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt @@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({ set -e -x cd examples/$exampleDir - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet """.trimIndent() dockerImage = "node:%docker.node.version%" } @@ -44,7 +44,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({ set -e -x cd examples/official-storybook - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet """.trimIndent() dockerImage = "node:%docker.node.version%" } diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt index c1804dab192..a742d905a4c 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt @@ -83,7 +83,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 3fbeab75b06..ae7d66dc842 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 f1a6cc83c4e..a0a179cbd40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,32 @@ +## 4.1.0-alpha.12 (December 11, 2018) + +### Bug Fixes + +* Fix storyshots by compiling JS modules ([#4967](https://github.com/storybooks/storybook/pull/4967)) +* Angular: move 'core-js/modules/es6.promise' into storyshots ([#4929](https://github.com/storybooks/storybook/pull/4929)) + ## 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 @@ -21,6 +44,68 @@ Fixes 4.0.9 * 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) @@ -31,27 +116,95 @@ Broken release (see https://github.com/storybooks/storybook/issues/4897) * Addon-knobs: Vue optimize on force render ([#4773](https://github.com/storybooks/storybook/pull/4773)) -# 4.0.7 (November 15, 2018) +## 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)) +* Vue/Angular/Mithril/Polymer: Add missing "forceReRender" and "addParameters" ([#4767](https://github.com/storybooks/storybook/pull/4767)) -# 4.0.6 (November 13, 2018) +## 4.1.0-alpha.2 (November 13, 2018) ### Features -* Add support for custom `react-scripts` packages ([#4712](https://github.com/storybooks/storybook/pull/4712)) +* 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 -* Fix NODE_PATH is not being loaded from .env ([#4706](https://github.com/storybooks/storybook/pull/4706)) +* 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)) -# 4.0.5 (November 13, 2018) +### Maintenance -Failed release +* 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)) -# 4.0.4 +### 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 + +#### Features + +- Core: add cursor images to webpack loader [#4498](https://github.com/storybooks/storybook/pull/4498) +- Storyshots-puppeteer: Allow specifying an existing browser [#4721](https://github.com/storybooks/storybook/pull/4721) +- React-native: close StoryListView after tap again in the current story [#4714](https://github.com/storybooks/storybook/pull/4714) + +#### Dependency Upgrades + +- 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.1.0-alpha.0 + +Publish failed + +## 4.0.4 2018-November-06 @@ -68,7 +221,7 @@ Failed release - 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 @@ -79,6 +232,7 @@ Failed release - Angular: Fixes component imports from dist [#4682](https://github.com/storybooks/storybook/pull/4682) - Addon-info: Improve accessibility with contrast [#4698](https://github.com/storybooks/storybook/pull/4698) - Ember: update ergonomics to not require any manual setup [#4594](https://github.com/storybooks/storybook/pull/4594) +- React-native: fix accessibility for component preview (iOS+VoiceOver) [#4601](https://github.com/storybooks/storybook/pull/4601) #### Maintenance @@ -125,7 +279,7 @@ Failed release -# 4.0.2 +## 4.0.2 2018-October-31 @@ -135,13 +289,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 @@ -177,7 +331,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 @@ -185,7 +339,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 @@ -193,7 +347,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 @@ -218,7 +372,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 @@ -233,7 +387,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 @@ -259,7 +413,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 @@ -284,7 +438,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 @@ -315,7 +469,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 @@ -372,7 +526,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 @@ -389,7 +543,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 @@ -408,7 +562,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 @@ -440,7 +594,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 @@ -448,7 +602,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 @@ -470,7 +624,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 @@ -498,13 +652,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 @@ -518,7 +672,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 @@ -548,7 +702,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 @@ -567,7 +721,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 @@ -601,7 +755,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 @@ -612,7 +766,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 @@ -620,7 +774,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 @@ -636,7 +790,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 @@ -644,7 +798,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 @@ -659,7 +813,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 @@ -680,7 +834,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 @@ -689,7 +843,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 @@ -818,7 +972,7 @@ NOTE: `3.4.9` publish failed -# 3.4.7 +## 3.4.7 2018-June-10 @@ -826,7 +980,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 @@ -904,7 +1058,7 @@ NOTE: `3.4.9` publish failed -# 3.4.6 +## 3.4.6 2018-May-26 @@ -912,7 +1066,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 @@ -931,7 +1085,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 @@ -946,7 +1100,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 @@ -970,11 +1124,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 @@ -989,7 +1143,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 @@ -1043,7 +1197,7 @@ Broken release (@storybook/core-events had not been published publicly) -# 3.4.3 +## 3.4.3 2018-April-27 @@ -1060,7 +1214,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 @@ -1193,7 +1347,7 @@ Also includes changes from 3.4.2 -# 3.4.2 +## 3.4.2 2018-April-17 @@ -1206,7 +1360,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 @@ -1386,7 +1540,7 @@ Also includes changes from 3.4.1 -# 3.4.1 +## 3.4.1 2018-April-10 @@ -1405,7 +1559,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 @@ -1502,7 +1656,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 @@ -1510,7 +1664,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 @@ -1620,7 +1774,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 @@ -1633,7 +1787,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 @@ -1710,7 +1864,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 @@ -1718,7 +1872,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 @@ -1803,7 +1957,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 @@ -2070,7 +2224,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.15 +## 3.3.15 2018-March-07 @@ -2081,7 +2235,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 @@ -2293,7 +2447,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.14 +## 3.3.14 2018-February-21 @@ -2306,7 +2460,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 @@ -2433,7 +2587,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.13 +## 3.3.13 2018-February-11 @@ -2442,7 +2596,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 @@ -2553,7 +2707,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.12 +## 3.3.12 2018-February-02 @@ -2565,7 +2719,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 @@ -2676,7 +2830,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.11 +## 3.3.11 2018-January-26 @@ -2684,7 +2838,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 @@ -2816,7 +2970,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha -# 3.3.10 +## 3.3.10 2018-January-19 @@ -2825,13 +2979,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 @@ -2914,7 +3068,7 @@ Republish `3.4.0-alpha.3` due to potential publishing errors -# 3.3.9 +## 3.3.9 2018-January-13 @@ -2924,19 +3078,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 @@ -3061,7 +3215,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 @@ -3075,7 +3229,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 @@ -3083,7 +3237,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 @@ -3091,7 +3245,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 @@ -3207,7 +3361,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 @@ -3253,7 +3407,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 @@ -3274,7 +3428,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 @@ -3308,7 +3462,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 @@ -3320,7 +3474,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 @@ -3528,7 +3682,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 @@ -3573,7 +3727,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 @@ -3585,7 +3739,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 @@ -3677,7 +3831,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 @@ -3686,7 +3840,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 @@ -3729,7 +3883,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 @@ -3781,7 +3935,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 @@ -3831,7 +3985,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 @@ -3911,7 +4065,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.18 +## 3.2.18 2017-December-18 @@ -4085,7 +4239,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.17 +## 3.2.17 2017-December-03 @@ -4200,7 +4354,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.16 +## 3.2.16 2017-November-15 @@ -4258,7 +4412,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.15 +## 3.2.15 2017-November-10 @@ -4299,7 +4453,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.14 +## 3.2.14 2017-November-01 @@ -4350,7 +4504,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.13 +## 3.2.13 2017-October-20 @@ -4441,7 +4595,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.12 +## 3.2.12 2017-October-02 @@ -4487,7 +4641,7 @@ We'll do a better job of getting out smaller releases next time around. ;-) -# 3.2.11 +## 3.2.11 2017-September-27 @@ -4504,7 +4658,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 @@ -4543,7 +4697,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 @@ -4563,7 +4717,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 @@ -4576,7 +4730,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 @@ -4592,7 +4746,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 @@ -4628,7 +4782,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 @@ -4647,7 +4801,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 @@ -4672,7 +4826,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 @@ -4685,7 +4839,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 @@ -4693,7 +4847,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 @@ -4707,7 +4861,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 @@ -4774,7 +4928,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 @@ -4800,7 +4954,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 @@ -4819,7 +4973,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 @@ -4832,7 +4986,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 @@ -4854,7 +5008,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 @@ -4879,7 +5033,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 @@ -4897,7 +5051,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 @@ -4905,7 +5059,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. @@ -4942,7 +5096,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. @@ -4972,7 +5126,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: @@ -5093,11 +5247,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 @@ -5105,11 +5259,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 @@ -5117,90 +5271,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 @@ -5212,33 +5366,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 @@ -5250,7 +5404,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 @@ -5260,13 +5414,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 @@ -5278,25 +5432,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 @@ -5305,80 +5459,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 @@ -5387,26 +5541,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 @@ -5414,86 +5568,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 @@ -5502,32 +5656,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 @@ -5538,7 +5692,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 @@ -5547,7 +5701,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 @@ -5563,7 +5717,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 @@ -5577,151 +5731,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 @@ -5733,7 +5887,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 @@ -5741,34 +5895,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 @@ -5778,7 +5932,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 @@ -5786,38 +5940,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 @@ -5825,37 +5979,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 @@ -5865,13 +6019,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) @@ -5879,7 +6033,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. @@ -5887,48 +6041,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/LICENSE b/LICENSE index fa4fd06abc7..85a6c94557e 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/README.md b/README.md index ff8e29e846f..6c5deeb524a 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. @@ -79,19 +83,19 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl ### 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 Discord](https://discord.gg/sMFvFsG) or [Sl | [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 | diff --git a/addons/a11y/README.md b/addons/a11y/README.md index df2c841e0f4..12d34e48355 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/package.json b/addons/a11y/package.json index 59afa0cd884..c45b0f8ac2e 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/client-logger": "4.0.12", - "@storybook/components": "4.0.12", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/client-logger": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "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 7d579a9b66d..49506c8ac41 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 7e1e739ce28..8b77e7ee68e 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/addon-actions", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "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 2930ef8bf1b..57fdcc32700 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", + "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 6cdee1c901b..c1591f48392 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 4506a4b4072..964649128ad 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-centered", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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 00000000000..14bec5d9814 --- /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 00000000000..75bc3685edf 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 00000000000..fd1cc94d9b8 --- /dev/null +++ b/addons/cssresources/package.json @@ -0,0 +1,42 @@ +{ + "name": "@storybook/addon-cssresources", + "version": "4.1.0-alpha.12", + "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.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", + "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 00000000000..18cdafda57c --- /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 00000000000..ca41679b800 --- /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 00000000000..6625b422a4b --- /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 00000000000..de7f8b91f72 --- /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 80934d7245e..b52b5dba11b 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "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 1fb693570ef..0d7a1376331 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/addon-google-analytics", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", + "@storybook/addons": "4.1.0-alpha.12", "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 389ac16ff73..674d3c47437 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-graphql", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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 4f5363dff5b..3b5d508a576 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-info", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/client-logger": "4.0.12", - "@storybook/components": "4.0.12", - "core-js": "2.5.7", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/client-logger": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", "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 16692901cbe..3bff0c35ba1 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2880,6 +2880,7 @@ exports[`addon Info should render component description 1`] = `
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index 34b323759d4..8916bfe7bf5 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 fcbbdbcc9b5..d5dfa4013ca 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() { diff --git a/addons/jest/docs/storybook-addon-jest.gif b/addons/jest/docs/storybook-addon-jest.gif index a2f7152536b..4b6c71b6f9f 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 d2bb53b4503..c518e0c330f 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", "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 f740dcdd228..60201de4b66 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 a0a20953f73..d9bb8210f63 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 844fb707d8b..89b9bdaec5e 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-knobs", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "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 560c5c75997..70bb67dc5a3 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 29f8466a4b6..b9c43c23c83 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-links", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "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 7f2202855f0..33aaf148a1a 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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" }, @@ -26,11 +23,14 @@ }, "dependencies": { "@emotion/styled": "^0.10.6", - "@storybook/addons": "4.0.8", + "@storybook/addons": "4.1.0-alpha.12", "marked": "^0.5.1", "prop-types": "^15.6.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index dd5807af1d2..3176bc9b2fb 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", + "@storybook/addons": "4.1.0-alpha.12", "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 02beb01f367..0917988d7d8 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", + "@storybook/addons": "4.1.0-alpha.12", "deep-equal": "^1.0.1", "prop-types": "^15.6.2", "react-native-color-picker": "^0.4.0", @@ -32,8 +29,11 @@ "react-native-switch": "^1.5.0" }, "peerDependencies": { - "@storybook/addon-knobs": "4.0.0", + "@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 df825df6434..961b88bca28 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 cba91e2c187..2206fe3e634 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", + "@storybook/addons": "4.1.0-alpha.12", "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 46fc3ca9c3b..4de59b4ac8d 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 bfdbf488fe4..e0d8ba4eb20 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-options", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.8", + "@storybook/addons": "4.1.0-alpha.12", "util-deprecate": "^1.0.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 629d82b6638..4226b707776 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.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "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.0.12", - "@storybook/addon-links": "4.0.12", - "@storybook/addons": "4.0.0", - "@storybook/react": "4.0.12", + "@storybook/addon-actions": "4.1.0-alpha.12", + "@storybook/addon-links": "4.1.0-alpha.12", + "@storybook/addons": "4.1.0-alpha.1", + "@storybook/react": "4.1.0-alpha.12", "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 981da4f36a7..9019699ac72 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/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 962e1b75de2..505b9ec41b0 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.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/node-logger": "4.1.0-alpha.12", + "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" + }, + "publishConfig": { + "access": "public" } } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index ac30c9fb520..0d31126e51b 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-storysource", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "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 f5c3d3d46fd..40dbb369c25 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 ca2c6e6a696..2d2dc110cb4 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,15 +1,12 @@ { "name": "@storybook/addon-viewport", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/components": "4.0.12", - "@storybook/core-events": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/components": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", "global": "^4.3.2", "prop-types": "^15.6.2", "util-deprecate": "^1.0.2" }, "peerDependencies": { "react": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/app/angular/package.json b/app/angular/package.json index 1d3518590f4..10b3a8ca50e 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/angular", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/node-logger": "4.0.12", + "@storybook/core": "4.1.0-alpha.12", + "@storybook/node-logger": "4.1.0-alpha.12", "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/demo/button.component.ts b/app/angular/src/demo/button.component.ts index 9ccfad39309..f3e2828cec8 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 8e1f3261991..c8348edbcec 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 04916774535..c5b25b4710f 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 882e212caec..714d9fb5a20 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 810cc9adf83..f407834ed24 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,11 +1,8 @@ { "name": "@storybook/ember", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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 d5fd3538cb7..cd3950c5c8b 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/html", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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 75484ac511d..db2632aa91e 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 b275ebcb494..1659a72f6bd 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/marko", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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 60e1df7e80c..d3589da706a 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/mithril", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@babel/plugin-transform-react-jsx": "^7.2.0", + "@storybook/core": "4.1.0-alpha.12", "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/polymer/package.json b/app/polymer/package.json index 8ed1afe84e7..f6498dc5b4a 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/polymer", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "@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/preview/globals.js b/app/polymer/src/client/preview/globals.js index a409d335bc2..ddb4205926a 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 e6cd3567211..2002702c14c 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/channel-websocket": "4.0.12", - "@storybook/channels": "4.0.12", - "@storybook/core": "4.0.12", - "@storybook/core-events": "4.0.12", - "@storybook/ui": "4.0.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/channel-websocket": "4.1.0-alpha.12", + "@storybook/channels": "4.1.0-alpha.12", + "@storybook/core": "4.1.0-alpha.12", + "@storybook/core-events": "4.1.0-alpha.12", + "@storybook/ui": "4.1.0-alpha.12", "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 7a3f945cfcf..f21620e4c41 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; ``` @@ -121,6 +121,14 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi -- should the ui be closed initialy. tabOpen: Number (0) -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons + 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. + 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/bin/storybook-start.js b/app/react-native/src/bin/storybook-start.js index ebdae9425db..b049f2815d5 100644 --- a/app/react-native/src/bin/storybook-start.js +++ b/app/react-native/src/bin/storybook-start.js @@ -5,6 +5,7 @@ import program from 'commander'; import Server from '../server'; program + .allowUnknownOption() .option('-h, --host ', 'host to listen on', 'localhost') .option('-p, --port ', 'port to listen on', 7007) .option('-s, --secured', 'whether server is running on https') 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 9874e510bdc..1b01c00a0c1 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 8d1e82887e6..ab39f6cd539 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 a53522b648e..750f26ab9c0 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,12 +72,39 @@ 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) { const { events } = this.props; @@ -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 fe376bbb181..5cac48f5cab 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 b0bd0312117..1f0f7f6ad65 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -1,7 +1,7 @@ -/* eslint-disable react/no-this-in-sfc, no-underscore-dangle */ +/* eslint-disable no-underscore-dangle */ import React from 'react'; -import { NativeModules } from 'react-native'; +import { AsyncStorage, NativeModules } from 'react-native'; import parse from 'url-parse'; import addons from '@storybook/addons'; @@ -12,6 +12,8 @@ import { StoryStore, ClientApi } from '@storybook/core/client'; import OnDeviceUI from './components/OnDeviceUI'; import StoryView from './components/StoryView'; +const STORAGE_KEY = 'lastOpenedStory'; + export default class Preview { constructor() { this._addons = {}; @@ -44,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; @@ -75,7 +77,9 @@ export default class Preview { url, async: onDeviceUI, onError: () => { - this._setInitialStory(); + // 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; }, @@ -88,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 @@ -112,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} /> ); } @@ -133,15 +143,33 @@ export default class Preview { channel.emit(Events.GET_CURRENT_STORY); } - _setInitialStory = () => { - const story = this._getInitialStory(); + _setInitialStory = async (initialSelection, shouldPersistSelection = true) => { + const story = await this._getInitialStory(initialSelection, shouldPersistSelection)(); + if (story) { this._selectStory(story); } }; - _getInitialStory = () => { + _getInitialStory = (initialSelection, shouldPersistSelection = true) => async () => { + let story = null; + if (initialSelection && this._checkStory(initialSelection)) { + story = initialSelection; + } else if (shouldPersistSelection) { + const value = await AsyncStorage.getItem(STORAGE_KEY); + const previousStory = JSON.parse(value); + + if (this._checkStory(previousStory)) { + story = previousStory; + } + } + + if (story) { + return this._getStory(story); + } + const dump = this._stories.dumpStoryBook(); + const nonEmptyKind = dump.find(kind => kind.stories.length > 0); if (nonEmptyKind) { return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] }); @@ -156,8 +184,31 @@ export default class Preview { return { ...selection, storyFn }; } - _selectStory(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, this._getStory(selection)); + channel.emit(Events.SELECT_STORY, story); + } + + _checkStory(selection) { + if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) { + console.warn('invalid storybook selection'); // eslint-disable-line no-console + return null; + } + + const story = this._getStory(selection); + + if (story.storyFn === null) { + console.warn('invalid storybook selection'); // eslint-disable-line no-console + return null; + } + + return story; } } diff --git a/app/react-native/src/server/config/babel.js b/app/react-native/src/server/config/babel.js index 7c4414c5fa4..f3471ce0234 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 09720b78ff2..77da36c090b 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 9b4885aae08..cfb98c47a3a 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/react", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", - "@storybook/node-logger": "4.0.12", + "@storybook/core": "4.1.0-alpha.12", + "@storybook/node-logger": "4.1.0-alpha.12", + "@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 ac7fc8f90a6..1f7c80bda80 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 00000000000..cba87bb5e2d --- /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 90dda3f2dba..dd322227ad6 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( diff --git a/app/react/src/server/__mocks__/mockRules.js b/app/react/src/server/__mocks__/mockRules.js new file mode 100644 index 00000000000..11319ec0536 --- /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 00000000000..d85b0bad023 --- /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 00000000000..26d2796702d --- /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 b94dfffcff6..00000000000 --- 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 ad1ce7a2714..00000000000 --- 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 00000000000..ce37e055dda --- /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 643114ff9ac..a14cc3f4a67 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 ba83e01fef8..8bbd847c296 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/riot", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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 d7a5786502d..820e02e015d 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 1ed6d072d8a..0ae7cea084f 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/svelte", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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 d4c7908c625..81dff15dc4c 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,14 +1,11 @@ { "name": "@storybook/vue", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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.0.12", + "@storybook/core": "4.1.0-alpha.12", "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/dangerfile.js b/dangerfile.js index f798a2e3cbc..b5cd656bffa 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -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/gatsby-node.js b/docs/gatsby-node.js index b1e7aa6da3c..39c0f7c7e71 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 5fd5ec48068..bcda0475b66 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,16 +19,16 @@ "prepare": "npm run snyk-protect" }, "dependencies": { - "@storybook/addon-actions": "^4.0.0", - "@storybook/addon-links": "^3.4.11", - "@storybook/addons": "^3.4.11", + "@storybook/addon-actions": "^4.0.9", + "@storybook/addon-links": "^4.0.9", + "@storybook/addons": "^4.0.9", "@storybook/react": "^3.4.11", "babel-loader": "^6.4.1", "bootstrap": "^4.1.3", "common-tags": "^1.8.0", "gatsby": "^1.9.279", "gatsby-link": "^1.6.45", - "gatsby-plugin-sharp": "^2.0.10", + "gatsby-plugin-sharp": "^2.0.12", "gatsby-remark-autolink-headers": "^1.4.19", "gatsby-remark-copy-linked-files": "^1.5.37", "gatsby-remark-images": "^1.5.67", @@ -36,9 +36,9 @@ "gatsby-source-filesystem": "^1.5.39", "gatsby-transformer-remark": "^1.7.44", "global": "^4.3.2", - "highlight.js": "^9.13.0", + "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", @@ -46,8 +46,8 @@ "react-helmet": "^5.2.0", "react-router": "^4.3.1", "react-stack-grid": "^0.7.1", - "sitemap": "^2.0.1", - "snyk": "^1.104.0" + "sitemap": "^2.1.0", + "snyk": "^1.110.2" }, "snyk": true } diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md index 3e7f2472e4b..2288eb65fbe 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!) diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md index 613e080f0ab..ed33c1c2e41 100644 --- a/docs/src/pages/basics/guide-react/index.md +++ b/docs/src/pages/basics/guide-react/index.md @@ -15,11 +15,11 @@ In this guide, we will set up Storybook for your React project. ## Table of contents -- [Add @storybook/react](#add-storybookreact) -- [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](#add-storybookreact) +- [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 @@ -29,13 +29,13 @@ First of all, you need to add `@storybook/react` to your project. To do that, ru 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 peer dependencies: +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 -npm i --save-dev babel-core +npm i --save-dev @babel/core npm i --save-dev babel-loader ``` @@ -51,7 +51,7 @@ Then add the following NPM script to your `package.json` in order to start the s ## Create the config file -Storybook can be configured in several different ways. +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 a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories. @@ -83,14 +83,12 @@ import { storiesOf } from '@storybook/react'; import { Button } from '@storybook/react/demo'; storiesOf('Button', module) - .add('with text', () => ) + .add('with text', () => ( + + )) .add('with some emoji', () => ( - - )); + + )); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: diff --git a/docs/src/pages/configurations/standalone-options/index.md b/docs/src/pages/configurations/standalone-options/index.md index 3304204dd3c..ead9289bb3f 100644 --- a/docs/src/pages/configurations/standalone-options/index.md +++ b/docs/src/pages/configurations/standalone-options/index.md @@ -86,4 +86,5 @@ storybook({ port: 9009, configDir: './.storybook', }); -``` \ No newline at end of file +``` + diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md index bd6abf727b9..482842c52dc 100644 --- a/docs/src/pages/configurations/theming/index.md +++ b/docs/src/pages/configurations/theming/index.md @@ -78,7 +78,17 @@ overlayBackground: applied to overlay `background`, // 'linear-gradient(to botto All options above are single key options, in other words, they are variables, and their usage is fixed. We will extend the theming ability in the future and possibly add more deep theming ability. -Right now we have identified the most likely thing you might want to change the appearance of more then just 1 variable so we allow you the deep-theme the header using: `brand`. +Right now we allow to deep theme: `stories nav panel`. Below are the varaiables that are used to deep theme `stories nav panel`. + +storiesNav: deep theme for `stories nav` + +``` +storiesNav: { + backgroundColor: 'aqua', +} +``` + +brand: deep theme for brand including `brand name` and `shortcuts` ``` brand: { @@ -86,6 +96,69 @@ brand: { } ``` +brandLink: deep theme for only `brand name` + +``` +brandLink: { + border: 'none' +} +``` + +filter: deep thene for `stories filter section` + +``` +filter: { + backgroundColor: 'red', +} +``` + +treeHeader: deep thene for `tree header` + +``` +treeHeader: { + color: 'blue', +} +``` + +treeMenuHeader: deep thene for `tree menu header` of each menu + +``` +treeMenuHeader: { + color: 'aqua', +} +``` + +menuLink: deep thene for `menu link` of each story + +``` +menuLink: { + color: 'black', +} +``` + +activeMenuLink: deep thene for `active menu link` for the active story + +``` +activeMenuLink: { + fontWeight: 'light', +} +``` + +treeArrow: deep theme for `tree arrow`. This accepts an object which receives `height`, `width`, `base` and `wrapper` + +``` +treeArrow: { + height: 5, + width: 5, + base: { + fontSize: '12px' + }, + wrapper: { + backgroundColor: 'white' + } +} +``` + The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors! ## Adding more theme variables for addons diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index 931818793b7..6646433de0b 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,9 +73,41 @@ 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.tsx @@ -86,9 +120,9 @@ function loadStories() { 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'; @@ -196,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 9f01c1747ca..77a63882ab6 100644 --- a/docs/src/pages/examples/_examples.yml +++ b/docs/src/pages/examples/_examples.yml @@ -172,3 +172,10 @@ 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/vanilla.png b/docs/src/pages/examples/thumbnails/vanilla.png new file mode 100644 index 00000000000..ad67f2935a5 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 f6de5c402c1..5e34b0135ed 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -147,17 +147,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.9": + version "4.0.9" + resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.9.tgz#6733e37641329751a7b90722f71893dc019d20b5" + integrity sha512-CRMofmt1wF8D2MLxXlm/IKSfDpNatooUliRo57jaHMa+0F+alDQbujgQJR7mAvHVN/MFQQ2Go+5PXDnfijKkHw== 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.9" + "@storybook/components" "4.0.9" + "@storybook/core-events" "4.0.8" deep-equal "^1.0.1" global "^4.3.2" lodash "^4.17.11" @@ -166,7 +166,7 @@ react-inspector "^2.3.0" uuid "^3.3.2" -"@storybook/addon-links@3.4.11", "@storybook/addon-links@^3.4.11": +"@storybook/addon-links@3.4.11": version "3.4.11" resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.4.11.tgz#097b4fcf4b3af3903762ac0d7e65c5d37d14af88" integrity sha512-DFTBj359ANqKJBhcSw2zAojlWF4A4+U48sKOhcPZ96qwPPtZwMtUR1TYxP+6ssfEP4tlA9zs4dn0+yRye+ydNQ== @@ -176,18 +176,29 @@ global "^4.3.2" prop-types "^15.6.1" -"@storybook/addons@3.4.11", "@storybook/addons@^3.4.11": +"@storybook/addon-links@^4.0.9": + version "4.0.9" + resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.0.9.tgz#72f594c46d70d9e7008888517765fa452c338cd6" + integrity sha512-n5KUirtb5r8YcXXV/pLjx0wf9E9YbzUfaaj76Z4hNkLegtG/9AJCXe0paFqwFXM7gi2nQR0ldWopdZqgVpV77g== + dependencies: + "@storybook/addons" "4.0.9" + "@storybook/components" "4.0.9" + "@storybook/core-events" "4.0.8" + global "^4.3.2" + prop-types "^15.6.2" + +"@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.9", "@storybook/addons@^4.0.9": + version "4.0.9" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.9.tgz#cfa18fe10ddda454dbbc3aae17562e46d04d3955" + integrity sha512-D+RsN1fNywgk46UxG6Lue+p9Egf7/DpgEJtQb6RS+UoyOF24p3FlwWMh36kpRfSSgGqFZ+a0jIKhXuRSr31UNQ== dependencies: - "@storybook/channels" "4.0.0" - "@storybook/components" "4.0.0" + "@storybook/channels" "4.0.8" + "@storybook/components" "4.0.9" global "^4.3.2" util-deprecate "^1.0.2" @@ -205,10 +216,10 @@ 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.8": + version "4.0.8" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.8.tgz#36d96ad714c685f144fd1f1e5394faf0e0291032" + integrity sha512-nGMVPN4eOJlAXxS2u3a5aj7YJ4ChhlLx0+4HC6xaU5Uv+PaL6ba0gh84Zd9K73JnTSPPMq/4Mg3oncZumyeN9Q== "@storybook/client-logger@3.4.11": version "3.4.11" @@ -224,10 +235,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.9": + version "4.0.9" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.9.tgz#c5cc9f52768fd7a6078d9601cecacd0e357dc130" + integrity sha512-EoPJitDUBkNdg4UiWyrmU6IkpLmJTjJO6KD382isHXA7qCxBJQTPb2m3GXy35KKF510NtJ9H0l4k5x7yg5Wzng== dependencies: "@emotion/core" "^0.13.1" "@emotion/provider" "^0.11.2" @@ -240,10 +251,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.8": + version "4.0.8" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.8.tgz#7af80f1c3eb32ae0eafe789be651c684dcfefd7b" + integrity sha512-S7g2oGnJKvLDpwcHFJ+efXww6zS7W3krimsqApf3foBfi3CVPLNJ9hrag30UGtnxQ3LDpkMj/aU4bkCWY7NRYA== "@storybook/core@3.4.11": version "3.4.11" @@ -4160,6 +4171,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" @@ -4398,7 +4416,7 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" -email-validator@^2.0.3: +email-validator@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed" integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ== @@ -5694,10 +5712,10 @@ gatsby-plugin-sharp@^1.6.48: sharp "^0.20.0" svgo "^0.7.2" -gatsby-plugin-sharp@^2.0.10: - version "2.0.10" - resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.10.tgz#5ce703a1d9bc8f70a84a940914404566e747d6f2" - integrity sha512-pUzV/unNX2IFSNlz9u3a/uDevcJMCcril9So7bY+kZrQIb5RbDd2vnZiMebzv7RxfKVa/tpIbPbrZcEaVWVvvQ== +gatsby-plugin-sharp@^2.0.12: + version "2.0.12" + resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.12.tgz#c791b29f153e481b8287605bf171331daaba7cb8" + integrity sha512-E3LmPQVY7n27oiWJRvw+C1V9ijR9V3Y2xBl9dFL3NoueLyZmlk0hFRG8gTpCr9e3va04b+tV33mATetcy7mLHw== dependencies: "@babel/runtime" "^7.0.0" async "^2.1.2" @@ -6312,7 +6330,7 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2 resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU= -graphlib@^2.1.1: +graphlib@^2.1.1, graphlib@^2.1.5: version "2.1.5" resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.5.tgz#6afe1afcc5148555ec799e499056795bd6938c87" integrity sha512-XvtbqCcw+EM5SqQrIetIKKD+uZVNQtDPD1goIg7K73RuRZtVI5rYMdcCVSHm/AS1sCBZ7vt0p5WgXouucHQaOA== @@ -6650,10 +6668,10 @@ he@1.1.x: resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0= -highlight.js@^9.13.0: - version "9.13.0" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.0.tgz#ee96d5c5f4c456e440f2dbdb2752211dff56f671" - integrity sha512-2B90kcNnErqRTmzdZw6IPLEC9CdsiIMhj+r8L3LJKRCgtEJ+LY5yzWuQCVnADTI0wwocQinFzaaL/JjTQNqI/g== +highlight.js@^9.13.1: + version "9.13.1" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e" + integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A== history@^4.6.2, history@^4.7.2: version "4.7.2" @@ -6705,7 +6723,7 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1: dependencies: parse-passwd "^1.0.0" -hosted-git-info@^2.1.4, hosted-git-info@^2.5.0: +hosted-git-info@^2.1.4, hosted-git-info@^2.5.0, hosted-git-info@^2.7.1: version "2.7.1" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047" integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w== @@ -7785,7 +7803,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@^3.10.0, js-yaml@^3.5.2, js-yaml@^3.5.3, js-yaml@^3.9.0: +js-yaml@^3.10.0, js-yaml@^3.12.0, js-yaml@^3.5.2, js-yaml@^3.9.0: version "3.12.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A== @@ -8238,7 +8256,7 @@ lodash.clone@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6" integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y= -lodash.clonedeep@^4.3.0, lodash.clonedeep@^4.3.1, lodash.clonedeep@^4.5.0: +lodash.clonedeep@^4.3.0, lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= @@ -8645,10 +8663,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" @@ -12369,7 +12387,7 @@ semver-truncate@^1.0.0: dependencies: semver "^5.3.0" -"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1: +"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg== @@ -12675,10 +12693,10 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" -sitemap@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-2.0.1.tgz#24f9ae89efeadd80e85e91b7247165497a5e655b" - integrity sha512-MRCugXgkX9BoKweEljgPPqEfvezcHdzjxLI2nKmemlkfsOiGumJBrjotEF+BtMaq7a/AREGXIMok+0GntJgdhw== +sitemap@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-2.1.0.tgz#1633cb88c196d755ad94becfb1c1bcacc6d3425a" + integrity sha512-AkfA7RDVCITQo+j5CpXsMJlZ/8ENO2NtgMHYIh+YMvex2Hao/oe3MQgNa03p0aWY6srCfUA1Q02OgiWCAiuccA== dependencies: lodash "^4.17.10" url-join "^4.0.0" @@ -12733,12 +12751,13 @@ snyk-config@2.2.0: lodash "^4.17.5" nconf "^0.10.0" -snyk-docker-plugin@1.12.0: - version "1.12.0" - resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.0.tgz#6cbf61416946936cbb7bf07bb8293bf7dcdd33be" - integrity sha512-QqKq2bGdnf1L2PNGQrHoqcoaV/PIlJv1qjKIzwA93gfhToKGkgJ31oPXwfef/l9N+ui0Y44c4POBHFbFf8PlJw== +snyk-docker-plugin@1.12.3: + version "1.12.3" + resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.3.tgz#a4a7c81a8e4e3c6a6cc303d4bc9aa98645274bca" + integrity sha512-ZbvaFCPCd0wxhqxjzU/iyf39tKlq2nvI9nPW32uZV3RGdHrkQH55BzCtBCF9d0dapxX+PKgae/4u2BKNw8hd9Q== dependencies: debug "^3" + dockerfile-ast "0.0.12" tslib "^1" snyk-go-plugin@1.6.0: @@ -12750,14 +12769,22 @@ 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" -snyk-module@1.8.2, snyk-module@^1.6.0, snyk-module@^1.8.2: +snyk-module@1.9.1, snyk-module@^1.9.1: + version "1.9.1" + resolved "https://registry.yarnpkg.com/snyk-module/-/snyk-module-1.9.1.tgz#b2a78f736600b0ab680f1703466ed7309c980804" + integrity sha512-A+CCyBSa4IKok5uEhqT+hV/35RO6APFNLqk9DRRHg7xW2/j//nPX8wTSZUPF8QeRNEk/sX+6df7M1y6PBHGSHA== + dependencies: + debug "^3.1.0" + hosted-git-info "^2.7.1" + +snyk-module@^1.6.0: version "1.8.2" resolved "https://registry.yarnpkg.com/snyk-module/-/snyk-module-1.8.2.tgz#bd3c11b46a90b8ccb0a04a18b387b1d0e5b10291" integrity sha512-XqhdbZ/CUuJ5gSaYdYfapLqx9qm2Mp6nyRMBCLXe9tJSiohOJsc9fQuUDbdOiRCqpA4BD6WLl+qlwOJmJoszBg== @@ -12770,15 +12797,17 @@ 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.5.3: - version "1.5.3" - resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.5.3.tgz#af66ed7351bea42d206d93a95b68b10259416d0b" - integrity sha512-hVUUxRm7f8mN3RdTbeZGJn+w4VMKb7ke4/OB8Qhr4O5S04AMb4YOcsZ80niur05VUykPT32IyFwyGRTBi99WUw== +snyk-nodejs-lockfile-parser@1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.7.1.tgz#499fd29db9a9185e3cb90a314b204fa1244fffb6" + integrity sha512-0gHELqMhzUxb/t3Tg6d6G9LTDioOXCrEMt9aetOeV8wD/ZRL5VFNjwcdrm8qILLqzDFaFjFIyMc66c0OL4zFAQ== dependencies: "@yarnpkg/lockfile" "^1.0.2" + graphlib "^2.1.5" lodash "4.17.10" source-map-support "^0.5.7" tslib "^1.9.3" + uuid "^3.3.2" snyk-nuget-plugin@1.6.5: version "1.6.5" @@ -12799,19 +12828,19 @@ snyk-php-plugin@1.5.1: lodash "^4.17.5" path "0.12.7" -snyk-policy@1.12.0: - version "1.12.0" - resolved "https://registry.yarnpkg.com/snyk-policy/-/snyk-policy-1.12.0.tgz#5167cbc4a28b2046b82234f866e49ee4fea1f52a" - integrity sha512-CEioNnDzccHyid7UIVl3bJ1dnG4co4ofI+KxuC1mo0IUXy64gxnBTeVoZF5gVLWbAyxGxSeW8f0+8GmWMHVb7w== +snyk-policy@1.13.1: + version "1.13.1" + resolved "https://registry.yarnpkg.com/snyk-policy/-/snyk-policy-1.13.1.tgz#2366cc485e83a6b43f23f45b36085726e0bf448b" + integrity sha512-l9evS3Yk70xyvajjg+I6Ij7fr7gxpVRMZl0J1xNpWps/IVu4DSGih3aMmXi47VJozr4A/eFyj7R1lIr2GhqJCA== dependencies: debug "^3.1.0" - email-validator "^2.0.3" - js-yaml "^3.5.3" - lodash.clonedeep "^4.3.1" - semver "^5.5.0" - snyk-module "^1.8.2" + email-validator "^2.0.4" + js-yaml "^3.12.0" + lodash.clonedeep "^4.5.0" + semver "^5.6.0" + snyk-module "^1.9.1" snyk-resolve "^1.0.1" - snyk-try-require "^1.1.1" + snyk-try-require "^1.3.1" then-fs "^2.0.0" snyk-python-plugin@1.9.0: @@ -12862,7 +12891,7 @@ snyk-tree@^1.0.0: dependencies: archy "^1.0.0" -snyk-try-require@1.3.1, snyk-try-require@^1.1.1: +snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/snyk-try-require/-/snyk-try-require-1.3.1.tgz#6e026f92e64af7fcccea1ee53d524841e418a212" integrity sha1-bgJvkuZK9/zM6h7lPVJIQeQYohI= @@ -12872,10 +12901,10 @@ snyk-try-require@1.3.1, snyk-try-require@^1.1.1: lru-cache "^4.0.0" then-fs "^2.0.0" -snyk@^1.104.0: - version "1.104.1" - resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.104.1.tgz#aff4a717b99eed424f8df2b928b67ac0b77b3748" - integrity sha512-K72W1O57nnSE+XokbuxC7Q0T9tAaMF6V/CoHv6ifAQlOvOkj/0rFbA8zMNMgzRs4LfQj183Zt5D0B0cyFDrKJQ== +snyk@^1.110.2: + version "1.110.2" + resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.110.2.tgz#0d8366ac8880abd8b60e6c6d3dc2074fb91a45f5" + integrity sha512-SQE4sudrscd48EoRJqy5h5S6c8YBiOw0r0Se3rfg1l6ElJGgCB9je6XEzfe+UmfES06D7ueFYepiQPxTwH4Qww== dependencies: abbrev "^1.1.1" ansi-escapes "^3.1.0" @@ -12893,15 +12922,15 @@ snyk@^1.104.0: recursive-readdir "^2.2.2" semver "^5.5.0" snyk-config "2.2.0" - snyk-docker-plugin "1.12.0" + snyk-docker-plugin "1.12.3" snyk-go-plugin "1.6.0" - snyk-gradle-plugin "2.1.0" - snyk-module "1.8.2" + snyk-gradle-plugin "2.1.1" + snyk-module "1.9.1" snyk-mvn-plugin "2.0.0" - snyk-nodejs-lockfile-parser "1.5.3" + snyk-nodejs-lockfile-parser "1.7.1" snyk-nuget-plugin "1.6.5" snyk-php-plugin "1.5.1" - snyk-policy "1.12.0" + snyk-policy "1.13.1" snyk-python-plugin "1.9.0" snyk-resolve "1.0.1" snyk-resolve-deps "4.0.2" @@ -14608,6 +14637,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 fa898df8898..8ac2c28592a 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -15,11 +15,11 @@ "preset": "jest-expo" }, "dependencies": { - "expo": "^30.0.1", + "expo": "^31.0.4", "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 2fef94e1cea..477692e5132 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/.storybook/tsconfig.json b/examples/angular-cli/.storybook/tsconfig.json index 6d196e52c50..0fe3eca4868 100644 --- a/examples/angular-cli/.storybook/tsconfig.json +++ b/examples/angular-cli/.storybook/tsconfig.json @@ -1,10 +1,5 @@ { "extends": "../src/tsconfig.app.json", - "exclude": [ - "../src/test.ts", - "../src/**/*.spec.ts" - ], - "include": [ - "../src/**/*" - ] + "exclude": ["../src/test.ts", "../src/**/*.spec.ts"], + "include": ["../src/**/*"] } diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index ccb0e0b7a68..55dd798c44b 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,11 +1,11 @@ { "name": "angular-cli", - "version": "4.0.12", + "version": "4.1.0-alpha.12", "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", @@ -33,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.0.12", - "@storybook/addon-backgrounds": "4.0.12", - "@storybook/addon-centered": "4.0.12", - "@storybook/addon-jest": "4.0.12", - "@storybook/addon-knobs": "4.0.12", - "@storybook/addon-links": "4.0.12", - "@storybook/addon-notes": "4.0.12", - "@storybook/addon-options": "4.0.12", - "@storybook/addon-storyshots": "4.0.12", - "@storybook/addon-storysource": "4.0.12", - "@storybook/addons": "4.0.12", - "@storybook/angular": "4.0.12", + "@storybook/addon-actions": "4.1.0-alpha.12", + "@storybook/addon-backgrounds": "4.1.0-alpha.12", + "@storybook/addon-centered": "4.1.0-alpha.12", + "@storybook/addon-jest": "4.1.0-alpha.12", + "@storybook/addon-knobs": "4.1.0-alpha.12", + "@storybook/addon-links": "4.1.0-alpha.12", + "@storybook/addon-notes": "4.1.0-alpha.12", + "@storybook/addon-options": "4.1.0-alpha.12", + "@storybook/addon-storyshots": "4.1.0-alpha.12", + "@storybook/addon-storysource": "4.1.0-alpha.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/angular": "4.1.0-alpha.12", "@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 3f08d4382b6..a22fed56c44 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 f4f6520567f..f4a53212f89 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 2e2073b999f..25b3e0f4814 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 d43f8d826aa..42116cfe07a 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 bbd55ef0efe..4b36a9dea1c 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 5baa440d797..4ccc2c3e46b 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 48a959aa474..bdc1188fa8f 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 27770069a4c..3619046fce2 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 eca32b1ee73..3debb422f62 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 b630795714c..8d8addf21a3 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 a4b5e6c49d5..c475d44fa6d 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 5cb10e89b99..ece1199e7b6 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/angular-cli/tsconfig.json b/examples/angular-cli/tsconfig.json index 2deb4d47d76..d0f3d8e160b 100644 --- a/examples/angular-cli/tsconfig.json +++ b/examples/angular-cli/tsconfig.json @@ -11,13 +11,7 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", - "typeRoots": [ - "../../node_modules/@types", - "node_modules/@types" - ], - "lib": [ - "es2017", - "dom" - ] + "typeRoots": ["../../node_modules/@types", "node_modules/@types"], + "lib": ["es2017", "dom"] } } diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index 1a0e64de735..7c6868a0f15 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 index 50cc5a0e365..b1ffc36fb83 100644 --- a/examples/cra-kitchen-sink/jest.config.js +++ b/examples/cra-kitchen-sink/jest.config.js @@ -3,5 +3,15 @@ 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 7c239c90c2d..2d7f6a68de1 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.0.12", + "version": "4.1.0-alpha.12", "private": true, "scripts": { "build": "react-scripts build", @@ -18,21 +18,22 @@ "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "4.0.12", - "@storybook/addon-actions": "4.0.12", - "@storybook/addon-backgrounds": "4.0.12", - "@storybook/addon-centered": "4.0.12", - "@storybook/addon-events": "4.0.12", - "@storybook/addon-info": "4.0.12", - "@storybook/addon-jest": "4.0.12", - "@storybook/addon-knobs": "4.0.12", - "@storybook/addon-links": "4.0.12", - "@storybook/addon-notes": "4.0.12", - "@storybook/addon-options": "4.0.12", - "@storybook/addon-storyshots": "4.0.12", - "@storybook/addons": "4.0.12", - "@storybook/client-logger": "4.0.12", - "@storybook/react": "4.0.12", + "@emotion/snapshot-serializer": "^0.8.2", + "@storybook/addon-a11y": "4.1.0-alpha.12", + "@storybook/addon-actions": "4.1.0-alpha.12", + "@storybook/addon-backgrounds": "4.1.0-alpha.12", + "@storybook/addon-centered": "4.1.0-alpha.12", + "@storybook/addon-events": "4.1.0-alpha.12", + "@storybook/addon-info": "4.1.0-alpha.12", + "@storybook/addon-jest": "4.1.0-alpha.12", + "@storybook/addon-knobs": "4.1.0-alpha.12", + "@storybook/addon-links": "4.1.0-alpha.12", + "@storybook/addon-notes": "4.1.0-alpha.12", + "@storybook/addon-options": "4.1.0-alpha.12", + "@storybook/addon-storyshots": "4.1.0-alpha.12", + "@storybook/addons": "4.1.0-alpha.12", + "@storybook/client-logger": "4.1.0-alpha.12", + "@storybook/react": "4.1.0-alpha.12", "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 a916247feed..ec668f00d89 100644 --- a/examples/cra-kitchen-sink/public/index.html +++ b/examples/cra-kitchen-sink/public/index.html @@ -25,4 +25,4 @@ To create a production bundle, use `npm run build`. --> - + \ 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 00000000000..0129759479c --- /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 00000000000..701812e1e03 --- /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 00000000000..400883b6416 --- /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 00000000000..b53b1b40877 --- /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 00000000000..0b6f8f75b67 --- /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 73f2c0518ec..7aca90b808d 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 719c97b5810..550b203013c 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 00000000000..fb111e7c954
--- /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 257fb426bd9..6efe04c26fb 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 89ed46df740..fdaa4e8c897 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "4.0.12",
+  "version": "4.1.0-alpha.12",
   "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.0.12",
-    "@storybook/addon-actions": "4.0.12",
-    "@storybook/addon-backgrounds": "4.0.12",
-    "@storybook/addon-centered": "4.0.12",
-    "@storybook/addon-knobs": "4.0.12",
-    "@storybook/addon-links": "4.0.12",
-    "@storybook/addon-notes": "4.0.12",
-    "@storybook/addon-options": "4.0.12",
-    "@storybook/addon-storysource": "4.0.12",
-    "@storybook/addon-viewport": "4.0.12",
-    "@storybook/addons": "4.0.12",
-    "@storybook/ember": "4.0.12",
+    "@babel/core": "^7.2.0",
+    "@storybook/addon-a11y": "4.1.0-alpha.12",
+    "@storybook/addon-actions": "4.1.0-alpha.12",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.12",
+    "@storybook/addon-centered": "4.1.0-alpha.12",
+    "@storybook/addon-knobs": "4.1.0-alpha.12",
+    "@storybook/addon-links": "4.1.0-alpha.12",
+    "@storybook/addon-notes": "4.1.0-alpha.12",
+    "@storybook/addon-options": "4.1.0-alpha.12",
+    "@storybook/addon-storysource": "4.1.0-alpha.12",
+    "@storybook/addon-viewport": "4.1.0-alpha.12",
+    "@storybook/addons": "4.1.0-alpha.12",
+    "@storybook/ember": "4.1.0-alpha.12",
     "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/package.json b/examples/html-kitchen-sink/package.json
index bab8d99db38..6fd74976cb8 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.0.12",
+  "version": "4.1.0-alpha.12",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.0.12",
-    "@storybook/addon-actions": "4.0.12",
-    "@storybook/addon-backgrounds": "4.0.12",
-    "@storybook/addon-centered": "4.0.12",
-    "@storybook/addon-events": "4.0.12",
-    "@storybook/addon-jest": "4.0.12",
-    "@storybook/addon-knobs": "4.0.12",
-    "@storybook/addon-links": "4.0.12",
-    "@storybook/addon-notes": "4.0.12",
-    "@storybook/addon-options": "4.0.12",
-    "@storybook/addon-storyshots": "4.0.12",
-    "@storybook/addon-storysource": "4.0.12",
-    "@storybook/addon-viewport": "4.0.12",
-    "@storybook/addons": "4.0.12",
-    "@storybook/core": "4.0.12",
-    "@storybook/core-events": "4.0.12",
-    "@storybook/html": "4.0.12",
+    "@storybook/addon-a11y": "4.1.0-alpha.12",
+    "@storybook/addon-actions": "4.1.0-alpha.12",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.12",
+    "@storybook/addon-centered": "4.1.0-alpha.12",
+    "@storybook/addon-events": "4.1.0-alpha.12",
+    "@storybook/addon-jest": "4.1.0-alpha.12",
+    "@storybook/addon-knobs": "4.1.0-alpha.12",
+    "@storybook/addon-links": "4.1.0-alpha.12",
+    "@storybook/addon-notes": "4.1.0-alpha.12",
+    "@storybook/addon-options": "4.1.0-alpha.12",
+    "@storybook/addon-storyshots": "4.1.0-alpha.12",
+    "@storybook/addon-storysource": "4.1.0-alpha.12",
+    "@storybook/addon-viewport": "4.1.0-alpha.12",
+    "@storybook/addons": "4.1.0-alpha.12",
+    "@storybook/core": "4.1.0-alpha.12",
+    "@storybook/core-events": "4.1.0-alpha.12",
+    "@storybook/html": "4.1.0-alpha.12",
     "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 e323e2999ae..81e684f39c3 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 0be91d94ae5..2bb2dd7e872 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "4.0.12",
+  "version": "4.1.0-alpha.12",
   "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.0.12",
-    "@storybook/addon-knobs": "4.0.12",
-    "@storybook/addon-options": "4.0.12",
-    "@storybook/addon-storysource": "4.0.12",
-    "@storybook/addons": "4.0.12",
-    "@storybook/marko": "4.0.12",
+    "@storybook/addon-actions": "4.1.0-alpha.12",
+    "@storybook/addon-knobs": "4.1.0-alpha.12",
+    "@storybook/addon-options": "4.1.0-alpha.12",
+    "@storybook/addon-storysource": "4.1.0-alpha.12",
+    "@storybook/addons": "4.1.0-alpha.12",
+    "@storybook/marko": "4.1.0-alpha.12",
     "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 aff56383c05..d1f9e7f689c 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 b50d9bae574..f1bba64fd2a 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "4.0.12",
+  "version": "4.1.0-alpha.12",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,18 +10,18 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.12",
-    "@storybook/addon-backgrounds": "4.0.12",
-    "@storybook/addon-centered": "4.0.12",
-    "@storybook/addon-knobs": "4.0.12",
-    "@storybook/addon-links": "4.0.12",
-    "@storybook/addon-notes": "4.0.12",
-    "@storybook/addon-options": "4.0.12",
-    "@storybook/addon-storyshots": "4.0.12",
-    "@storybook/addon-storysource": "4.0.12",
-    "@storybook/addon-viewport": "4.0.12",
-    "@storybook/addons": "4.0.12",
-    "@storybook/mithril": "4.0.12",
+    "@storybook/addon-actions": "4.1.0-alpha.12",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.12",
+    "@storybook/addon-centered": "4.1.0-alpha.12",
+    "@storybook/addon-knobs": "4.1.0-alpha.12",
+    "@storybook/addon-links": "4.1.0-alpha.12",
+    "@storybook/addon-notes": "4.1.0-alpha.12",
+    "@storybook/addon-options": "4.1.0-alpha.12",
+    "@storybook/addon-storyshots": "4.1.0-alpha.12",
+    "@storybook/addon-storysource": "4.1.0-alpha.12",
+    "@storybook/addon-viewport": "4.1.0-alpha.12",
+    "@storybook/addons": "4.1.0-alpha.12",
+    "@storybook/mithril": "4.1.0-alpha.12",
     "webpack": "^4.23.1"
   }
 }
diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
index 8d78d9d8216..f0b7359fda1 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 9b48d7835fb..4959ce3d5c7 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 ee2e65e183f..71df5960798 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 1f6394c64cd..9c2190add4a 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "4.0.12",
+  "version": "4.1.0-alpha.12",
   "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.0.12",
-    "@storybook/addon-actions": "4.0.12",
-    "@storybook/addon-backgrounds": "4.0.12",
-    "@storybook/addon-centered": "4.0.12",
-    "@storybook/addon-events": "4.0.12",
-    "@storybook/addon-graphql": "4.0.12",
-    "@storybook/addon-info": "4.0.12",
-    "@storybook/addon-jest": "4.0.12",
-    "@storybook/addon-knobs": "4.0.12",
-    "@storybook/addon-links": "4.0.12",
-    "@storybook/addon-notes": "4.0.12",
-    "@storybook/addon-options": "4.0.12",
-    "@storybook/addon-storyshots": "4.0.12",
-    "@storybook/addon-storyshots-puppeteer": "4.0.12",
-    "@storybook/addon-storysource": "4.0.12",
-    "@storybook/addon-viewport": "4.0.12",
-    "@storybook/addons": "4.0.12",
-    "@storybook/components": "4.0.12",
-    "@storybook/core-events": "4.0.12",
-    "@storybook/node-logger": "4.0.12",
-    "@storybook/react": "4.0.12",
+    "@storybook/addon-a11y": "4.1.0-alpha.12",
+    "@storybook/addon-actions": "4.1.0-alpha.12",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.12",
+    "@storybook/addon-centered": "4.1.0-alpha.12",
+    "@storybook/addon-cssresources": "4.1.0-alpha.12",
+    "@storybook/addon-events": "4.1.0-alpha.12",
+    "@storybook/addon-graphql": "4.1.0-alpha.12",
+    "@storybook/addon-info": "4.1.0-alpha.12",
+    "@storybook/addon-jest": "4.1.0-alpha.12",
+    "@storybook/addon-knobs": "4.1.0-alpha.12",
+    "@storybook/addon-links": "4.1.0-alpha.12",
+    "@storybook/addon-notes": "4.1.0-alpha.12",
+    "@storybook/addon-options": "4.1.0-alpha.12",
+    "@storybook/addon-storyshots": "4.1.0-alpha.12",
+    "@storybook/addon-storyshots-puppeteer": "4.1.0-alpha.12",
+    "@storybook/addon-storysource": "4.1.0-alpha.12",
+    "@storybook/addon-viewport": "4.1.0-alpha.12",
+    "@storybook/addons": "4.1.0-alpha.12",
+    "@storybook/components": "4.1.0-alpha.12",
+    "@storybook/core-events": "4.1.0-alpha.12",
+    "@storybook/node-logger": "4.1.0-alpha.12",
+    "@storybook/react": "4.1.0-alpha.12",
     "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 00000000000..77298e639d4
--- /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 c2f4ff454e2..eb2b3abf049 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 1d305e7e003..b6f13985ce0 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;
+}
+