Merge branch 'next' into pr/cam-stitt/6698

.teamcity/OpenSourceProjects_Storybook/Project.kt

@@ -23,7 +23,6 @@ object Project : Project({
     buildType(OpenSourceProjects_Storybook_Examples)
     buildType(OpenSourceProjects_Storybook_Docs)
     buildType(OpenSourceProjects_Storybook_Build_2)
-    buildType(OpenSourceProjects_Storybook_CliTest)
     buildType(OpenSourceProjects_Storybook_Test)
     buildType(OpenSourceProjects_Storybook_Lint)
     buildType(OpenSourceProjects_Storybook_Lint_Warnings)

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt

@@ -111,10 +111,5 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
                 onDependencyCancel = FailureAction.ADD_PROBLEM
             }
         }
-        dependency(OpenSourceProjects_Storybook.buildTypes.OpenSourceProjects_Storybook_CliTest) {
-            snapshot {
-                onDependencyCancel = FailureAction.ADD_PROBLEM
-            }
-        }
     }
 })

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTest.kt

@@ -1,63 +0,0 @@
-package OpenSourceProjects_Storybook.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
-
-object OpenSourceProjects_Storybook_CliTest : BuildType({
-    uuid = "b1db1a3a-a4cf-46ea-8f55-98b86611f92e"
-    id = "OpenSourceProjects_Storybook_CliTest"
-    name = "CLI test"
-
-    vcs {
-        root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
-
-    }
-
-    steps {
-        script {
-            name = "Test"
-            scriptContent = """
-                #!/bin/sh
-
-                set -e -x
-
-                yarn
-                yarn test --cli --teamcity
-            """.trimIndent()
-            dockerImage = "node:%docker.node.version%"
-        }
-    }
-
-    features {
-        commitStatusPublisher {
-            publisher = github {
-                githubUrl = "https://api.github.com"
-                authType = personalToken {
-                    token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
-                }
-            }
-            param("github_oauth_user", "Hypnosphi")
-        }
-    }
-
-    dependencies {
-        dependency(OpenSourceProjects_Storybook.buildTypes.OpenSourceProjects_Storybook_Bootstrap) {
-            snapshot {
-                onDependencyFailure = FailureAction.FAIL_TO_START
-            }
-
-            artifacts {
-                artifactRules = "dist.zip!**"
-            }
-        }
-    }
-
-    requirements {
-        doesNotContain("env.OS", "Windows")
-    }
-
-    cleanup {
-        artifacts(days = 1)
-    }
-})

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -9,6 +9,7 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.failureConditions.failOnMetr
 enum class StorybookApp(val appName: String, val exampleDir: String, val merged: Boolean = true) {
     CRA("CRA", "cra-kitchen-sink"),
     CRA_TS("CRA TS", "cra-ts-kitchen-sink"),
+    CRA_REACT15("CRA REACT15", "cra-react15", false),
     VUE("Vue", "vue-kitchen-sink"),
     ANGULAR("Angular", "angular-cli"),
     POLYMER("Polymer", "polymer-cli"),

.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/b1db1a3a-a4cf-46ea-8f55-98b86611f92e.kts

@@ -1,17 +0,0 @@
-package OpenSourceProjects_Storybook.patches.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
-
-/*
-This patch script was generated by TeamCity on settings change in UI.
-To apply the patch, change the buildType with uuid = 'b1db1a3a-a4cf-46ea-8f55-98b86611f92e' (id = 'OpenSourceProjects_Storybook_CliTest')
-accordingly, and delete the patch script.
-*/
-changeBuildType("b1db1a3a-a4cf-46ea-8f55-98b86611f92e") {
-    params {
-        add {
-            param("docker.node.version", "latest")
-        }
-    }
-}

ADDONS_SUPPORT.md

@@ -2,8 +2,8 @@
 
 | | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)                         |+| |+|+|+|+|+|+| | |+|+|
+|[a11y](addons/a11y)                         |+| |+|+|+|+|+|+|+|+|+|+|
-|[actions](addons/actions)                   |+|+|+|+|+|+|+|+|+|+|+|+|
+|[actions](addons/actions)                   |+|+*|+|+|+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)           |+|*|+|+|+|+|+|+|+|+|+|+|
 |[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
 |[contexts](addons/contexts)                 |+| |+| | | | | | | | |+|

CHANGELOG.md

@@ -1,3 +1,30 @@
+## 5.1.0-alpha.39 (May 2, 2019)
+
+### Features
+
+- React-native: Ondevice actions ([#6594](https://github.com/storybooks/storybook/pull/6594))
+- React-native: Use emotion to style RN UI ([#6603](https://github.com/storybooks/storybook/pull/6603))
+
+### Bug Fixes
+
+- API: Mimic PureComponent behavior for Consumer children ([#6412](https://github.com/storybooks/storybook/pull/6412))
+
+## 5.1.0-alpha.38 (May 2, 2019)
+
+Failed publish
+
+## 5.1.0-alpha.37 (May 1, 2019)
+
+### Bug Fixes
+
+- Core: Fix regression with deep linking ([#6688](https://github.com/storybooks/storybook/pull/6688))
+- Addon-contexts: No cancel option in UI if the context have no param ([#6669](https://github.com/storybooks/storybook/pull/6669))
+- CLI: Fix `sb init` for projects with frozen lock files ([#6629](https://github.com/storybooks/storybook/pull/6629))
+
+### Maintenance
+
+- CLI: Refactor how we install dev dependencies in cli ([#6695](https://github.com/storybooks/storybook/pull/6695))
+
 ## 5.0.11 (April 28, 2019)
 
 ### Bug Fixes
@@ -14,44 +41,44 @@
 
 ### Features
 
-* Addon-contexts: Preact support ([#6660](https://github.com/storybooks/storybook/pull/6660))
+- Addon-contexts: Preact support ([#6660](https://github.com/storybooks/storybook/pull/6660))
-* Angular: Allow optional component declaration ([#6346](https://github.com/storybooks/storybook/pull/6346))
+- Angular: Allow optional component declaration ([#6346](https://github.com/storybooks/storybook/pull/6346))
 
 ### Bug Fixes
 
-* CLI: Fix `sb init` for projects with frozen lock files ([#6629](https://github.com/storybooks/storybook/pull/6629))
+- CLI: Fix `sb init` for projects with frozen lock files ([#6629](https://github.com/storybooks/storybook/pull/6629))
 
 ### Dependency Upgrades
 
-* [Snyk] Fix for 1 vulnerable dependencies ([#6647](https://github.com/storybooks/storybook/pull/6647))
+- [Snyk] Fix for 1 vulnerable dependencies ([#6647](https://github.com/storybooks/storybook/pull/6647))
 
 ## 5.1.0-alpha.35 (April 27, 2019)
 
 ### Features
 
-* Addon-notes: use @storybook/router <Link> to render links in notes ([#6398](https://github.com/storybooks/storybook/pull/6398))
+- Addon-notes: use @storybook/router <Link> to render links in notes ([#6398](https://github.com/storybooks/storybook/pull/6398))
-* Angular: Support default `storybook` project configuration ([#6484](https://github.com/storybooks/storybook/pull/6484))
+- Angular: Support default `storybook` project configuration ([#6484](https://github.com/storybooks/storybook/pull/6484))
-* Addon-contexts: Improve Vue integration ([#6632](https://github.com/storybooks/storybook/pull/6632))
+- Addon-contexts: Improve Vue integration ([#6632](https://github.com/storybooks/storybook/pull/6632))
-* Addon-a11y: Design enhancements ([#6563](https://github.com/storybooks/storybook/pull/6563))
+- Addon-a11y: Design enhancements ([#6563](https://github.com/storybooks/storybook/pull/6563))
 
 ### Bug Fixes
 
-* UI: `active` PropTypes on MobileLayout ([#6241](https://github.com/storybooks/storybook/pull/6241))
+- UI: `active` PropTypes on MobileLayout ([#6241](https://github.com/storybooks/storybook/pull/6241))
-* Core: Fix css import when sideEffects is false ([#6650](https://github.com/storybooks/storybook/pull/6650))
+- Core: Fix css import when sideEffects is false ([#6650](https://github.com/storybooks/storybook/pull/6650))
-* Core: Fix infinite loop with special characters in kind names ([#6607](https://github.com/storybooks/storybook/pull/6607))
+- Core: Fix infinite loop with special characters in kind names ([#6607](https://github.com/storybooks/storybook/pull/6607))
-* UI: Fix 'Escape' onKeyUp event doesn't work ([#6578](https://github.com/storybooks/storybook/pull/6578))
+- UI: Fix 'Escape' onKeyUp event doesn't work ([#6578](https://github.com/storybooks/storybook/pull/6578))
 
 ### Maintenance
 
-* UI: Add missing props in stories ([#6353](https://github.com/storybooks/storybook/pull/6353))
+- UI: Add missing props in stories ([#6353](https://github.com/storybooks/storybook/pull/6353))
-* Build: tslint, and use eslint for everything ([#6621](https://github.com/storybooks/storybook/pull/6621))
+- Build: tslint, and use eslint for everything ([#6621](https://github.com/storybooks/storybook/pull/6621))
-* Build: deploy to local registry ([#6619](https://github.com/storybooks/storybook/pull/6619))
+- Build: deploy to local registry ([#6619](https://github.com/storybooks/storybook/pull/6619))
 
 ### Dependency Upgrades
 
-* Bump ts-node from 8.0.3 to 8.1.0 ([#6585](https://github.com/storybooks/storybook/pull/6585))
+- Bump ts-node from 8.0.3 to 8.1.0 ([#6585](https://github.com/storybooks/storybook/pull/6585))
-* Bump semver from 5.7.0 to 6.0.0 ([#6580](https://github.com/storybooks/storybook/pull/6580))
+- Bump semver from 5.7.0 to 6.0.0 ([#6580](https://github.com/storybooks/storybook/pull/6580))
-* Bump react-color from 2.17.0 to 2.17.1 ([#6583](https://github.com/storybooks/storybook/pull/6583))
+- Bump react-color from 2.17.0 to 2.17.1 ([#6583](https://github.com/storybooks/storybook/pull/6583))
 
 ## 5.1.0-alpha.34 (April 24, 2019)
 

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,12 +26,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "axe-core": "^3.2.2",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",

addons/a11y/src/components/A11YPanel.tsx

@@ -48,7 +48,8 @@ const Incomplete = styled.span(({ theme }) => ({
 
 const Loader = styled(({ className }) => (
   <div className={className}>
-    <Icon inline icon="sync" status="running" /> Please wait while a11y scan is running ...
+    <Icon inline icon="sync" status="running" /> Please wait while the accessibility scan is running
+    ...
   </div>
 ))({
   display: 'flex',

addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

@@ -96,7 +96,7 @@ exports[`A11YPanel should render loader when it's running 1`] = `
           </Svg>
         </Icons>
       </Styled(Icons)>
-       Please wait while a11y scan is running ...
+       Please wait while the accessibility scan is running ...
     </div>
   </Component>
 </Loader>

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -21,11 +21,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",

addons/actions/src/index.ts

@@ -1,4 +1,5 @@
 export * from './constants';
+export * from './models';
 export * from './preview';
 
 if (module && module.hot && module.hot.decline) {

addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -25,12 +25,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook decorator to center components",
   "keywords": [
     "addon",

addons/contexts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-contexts",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook Addon Contexts",
   "keywords": [
     "storybook",
@@ -28,10 +28,10 @@
     "dev:check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36"
+    "@storybook/core-events": "5.1.0-alpha.39"
   },
   "peerDependencies": {
     "global": "*",

addons/cssresources/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-cssresources",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A storybook addon to switch between css resources at runtime for your story",
   "keywords": [
     "addon",
@@ -25,10 +25,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "react": "^16.8.4"

addons/events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -24,9 +24,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "format-json": "^1.0.3",
     "prop-types": "^15.7.2",

addons/google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-google-analytics",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook addon for google analytics",
   "keywords": [
     "addon",
@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "react-ga": "^2.5.7"

addons/graphql/package.json

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

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A Storybook addon to show additional information for your stories.",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "marksy": "^7.0.0",

addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -28,11 +28,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "react": "^16.8.4",

addons/knobs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook Addon Prop Editor Component",
   "keywords": [
     "addon",
@@ -22,11 +22,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/client-api": "5.1.0-alpha.36",
+    "@storybook/client-api": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^2.6.5",
     "escape-html": "^1.0.3",

addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -22,9 +22,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/router": "5.1.0-alpha.36",
+    "@storybook/router": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

addons/notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -23,13 +23,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/router": "5.1.0-alpha.36",
+    "@storybook/router": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.3",

addons/ondevice-actions/README.md

@@ -0,0 +1,32 @@
+# Storybook Actions Addon for react-native
+
+Storybook Actions Addon allows you to log events/actions inside stories in [Storybook](https://storybook.js.org).
+
+[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
+
+**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions).
+Refer to its documentation to understand how to use actions**
+
+## Installation
+
+```sh
+yarn add -D @storybook/addon-ondevice-actions @storybook/addon-actions
+```
+
+## Configuration
+
+Create a file called `rn-addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@storybook/addon-ondevice-actions/register';
+```
+
+Then import `rn-addons.js` next to your `getStorybookUI` call.
+
+```js
+import './rn-addons';
+```
+
+See [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.

addons/ondevice-actions/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@storybook/addon-ondevice-actions",
+  "version": "5.1.0-alpha.39",
+  "description": "Action Logger addon for react-native storybook",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.1.0-alpha.39",
+    "@storybook/core-events": "5.1.0-alpha.39",
+    "core-js": "^2.5.7",
+    "fast-deep-equal": "^2.0.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "5.1.0-alpha.39"
+  },
+  "peerDependencies": {
+    "@storybook/addon-actions": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

addons/ondevice-actions/register.js

@@ -0,0 +1 @@
+require('./dist').register();

addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Button, View, Text } from 'react-native';
+
+const theme = {
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+
+  ARROW_COLOR: '#6e6e6e',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+};
+
+class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
+  state = { expanded: false };
+  render() {
+    const { name, value } = this.props;
+    const { expanded } = this.state;
+    const toggle = (
+      <View style={{ width: 40, height: 40 }}>
+        {name &&
+        ((Array.isArray(value) && value.length) ||
+          (value &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            Object.keys(value).length)) ? (
+          <Button
+            onPress={() => this.setState(s => ({ expanded: !s.expanded }))}
+            title={!expanded ? '▶' : '▼'}
+          />
+        ) : null}
+      </View>
+    );
+
+    const nameComponent = name ? (
+      <Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
+    ) : null;
+
+    if (Array.isArray(value)) {
+      if (name) {
+        return (
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {toggle}
+              {nameComponent}
+              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+            </View>
+            {expanded ? (
+              <View style={{ marginLeft: 40 }}>
+                {value.map((v, i) => (
+                  <View key={i} style={{ marginLeft: 40 }}>
+                    <Inspect value={v} />
+                  </View>
+                ))}
+                <View style={{ marginLeft: 20 }}>
+                  <Text>{']'}</Text>
+                </View>
+              </View>
+            ) : null}
+          </>
+        );
+      }
+      return (
+        <View>
+          <Text>{'['}</Text>
+          {value.map((v, i) => (
+            <View key={i} style={{ marginLeft: 20 }}>
+              <Inspect value={v} />
+            </View>
+          ))}
+          <Text>{']'}</Text>
+        </View>
+      );
+    }
+    if (value && typeof value === 'object' && !(value instanceof RegExp)) {
+      if (name) {
+        return (
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {toggle}
+              {nameComponent}
+              <Text>
+                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+              </Text>
+            </View>
+            {expanded ? (
+              <View style={{ marginLeft: 40 }}>
+                {Object.entries(value).map(([key, v]) => (
+                  <View key={key}>
+                    <Inspect name={key} value={v} />
+                  </View>
+                ))}
+                <View style={{ marginLeft: 20 }}>
+                  <Text>{'}'}</Text>
+                </View>
+              </View>
+            ) : null}
+          </>
+        );
+      }
+      return (
+        <View>
+          <Text>{'{'}</Text>
+          {Object.entries(value).map(([key, v]) => (
+            <View key={key}>
+              <Inspect name={key} value={v} />
+            </View>
+          ))}
+          <Text>{'}'}</Text>
+        </View>
+      );
+    }
+    if (name) {
+      return (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {toggle}
+          {nameComponent}
+          <Text>{': '}</Text>
+          <Value value={value} />
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Value value={value} />
+      </View>
+    );
+  }
+}
+
+function Value({ value }: { value: any }) {
+  if (value === null) {
+    return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
+  }
+  if (value === undefined) {
+    return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
+  }
+  if (value instanceof RegExp) {
+    return (
+      <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
+        {'/' + value.source + '/' + value.flags}
+      </Text>
+    );
+  }
+  switch (typeof value) {
+    case 'string':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'number':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'boolean':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'function':
+      return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+  }
+  return <Text>{JSON.stringify(value)}</Text>;
+}
+
+export default Inspect;

addons/ondevice-actions/src/components/ActionLogger/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, View, Text, ScrollView } from 'react-native';
+import { ActionDisplay } from '@storybook/addon-actions';
+import Inspect from './Inspect';
+
+interface ActionLoggerProps {
+  actions: ActionDisplay[];
+  onClear: () => void;
+}
+
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
+  <ScrollView>
+    <ScrollView horizontal>
+      <View>
+        {actions.map((action: ActionDisplay) => (
+          <View key={action.id} style={{ flexDirection: 'row' }}>
+            <View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
+            <View style={{ flexGrow: 1 }}>
+              <Inspect name={action.data.name} value={action.data.args || action.data} />
+            </View>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+    <View>
+      <Button onPress={onClear} title="CLEAR" />
+    </View>
+  </ScrollView>
+);
+
+export default ActionLogger;

addons/ondevice-actions/src/containers/ActionLogger/index.tsx

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+import { addons } from '@storybook/addons';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { ActionDisplay, EVENT_ID } from '@storybook/addon-actions';
+
+import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
+
+interface ActionLoggerProps {
+  active: boolean;
+}
+
+interface ActionLoggerState {
+  actions: ActionDisplay[];
+}
+
+const safeDeepEqual = (a: any, b: any): boolean => {
+  try {
+    return deepEqual(a, b);
+  } catch (e) {
+    return false;
+  }
+};
+
+export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
+  private channel = addons.getChannel();
+
+  constructor(props: ActionLoggerProps) {
+    super(props);
+
+    this.state = { actions: [] };
+  }
+
+  componentDidMount() {
+    this.channel.addListener(EVENT_ID, this.addAction);
+    this.channel.addListener(STORY_RENDERED, this.handleStoryChange);
+  }
+
+  componentWillUnmount() {
+    this.channel.removeListener(STORY_RENDERED, this.handleStoryChange);
+    this.channel.removeListener(EVENT_ID, this.addAction);
+  }
+
+  handleStoryChange = () => {
+    const { actions } = this.state;
+    if (actions.length > 0 && actions[0].options.clearOnStoryChange) {
+      this.clearActions();
+    }
+  };
+
+  addAction = (action: ActionDisplay) => {
+    this.setState((prevState: ActionLoggerState) => {
+      const actions = [...prevState.actions];
+      const previous = actions.length && actions[0];
+      if (previous && safeDeepEqual(previous.data, action.data)) {
+        previous.count++; // eslint-disable-line
+      } else {
+        action.count = 1; // eslint-disable-line
+        actions.unshift(action);
+      }
+      return { actions: actions.slice(0, action.options.limit) };
+    });
+  };
+
+  clearActions = () => {
+    this.setState({ actions: [] });
+  };
+
+  render() {
+    const { actions = [] } = this.state;
+    const { active } = this.props;
+    const props = {
+      actions,
+      onClear: this.clearActions,
+    };
+    return active ? <ActionLoggerComponent {...props} /> : null;
+  }
+}

addons/ondevice-actions/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from '@storybook/addon-actions';
+import ActionLogger from './containers/ActionLogger';
+
+export function register() {
+  addons.register(ADDON_ID, () => {
+    addons.addPanel(PANEL_ID, {
+      title: 'Actions',
+      render: ({ active, key }) => <ActionLogger key={key} active={active} />,
+    });
+  });
+}

addons/ondevice-actions/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
+}

addons/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -24,7 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "prop-types": "^15.7.2"
   },

addons/ondevice-knobs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-knobs",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Display storybook story knobs on your deviced.",
   "keywords": [
     "addon",
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",

addons/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -20,7 +20,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "prop-types": "^15.7.2",
     "react-native-simple-markdown": "^1.1.0"

addons/options/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Options addon for storybook",
   "keywords": [
     "addon",
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "util-deprecate": "^1.0.2"
   },

addons/storyshots/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "keywords": [
     "addon",
@@ -25,7 +25,7 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "glob": "^7.1.3",
     "global": "^4.3.2",

addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Component, Type } from '@angular/core';
+import { Component, Type, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
@@ -30,15 +30,55 @@ const createComponentFromTemplate = (template: string) => {
     template,
   })(componentClass);
 };
+const extractNgModuleMetadata = (importItem: any): NgModule => {
+  const decoratorKey = '__annotations__';
+  const decorators: any[] =
+    Reflect && Reflect.getOwnPropertyDescriptor
+      ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
+      : importItem[decoratorKey];
+
+  if (!decorators || decorators.length === 0) {
+    return null;
+  }
+
+  const ngModuleDecorator: NgModule | undefined = decorators.find(
+    decorator => decorator instanceof NgModule
+  );
+  if (!ngModuleDecorator) {
+    return null;
+  }
+  return ngModuleDecorator;
+};
+
+const getExistenceOfComponentInModules = (
+  component: any,
+  declarations: any[],
+  imports: any[]
+): boolean => {
+  if (declarations && declarations.some(declaration => declaration === component)) {
+    // Found component in declarations array
+    return true;
+  }
+  if (!imports) {
+    return false;
+  }
+
+  return imports.some(importItem => {
+    const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+    if (!extractedNgModuleMetadata) {
+      // Not an NgModule
+      return false;
+    }
+    return getExistenceOfComponentInModules(
+      component,
+      extractedNgModuleMetadata.declarations,
+      extractedNgModuleMetadata.imports
+    );
+  });
+};
 
 export const initModuleData = (storyObj: NgStory): any => {
-  const {
+  const { component, template, props, moduleMetadata = {} } = storyObj;
-    component,
-    template,
-    props,
-    moduleMetadata = {},
-    requiresComponentDeclaration = true,
-  } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
 
@@ -46,10 +86,17 @@ export const initModuleData = (storyObj: NgStory): any => {
     ? createComponentFromTemplate(template)
     : component;
 
-  const componentDeclarations =
+  const componentRequiesDeclaration =
-    isCreatingComponentFromTemplate || requiresComponentDeclaration
+    isCreatingComponentFromTemplate ||
-      ? [AppComponent, AnnotatedComponent]
+    !getExistenceOfComponentInModules(
-      : [AppComponent];
+      component,
+      moduleMetadata.declarations,
+      moduleMetadata.imports
+    );
+
+  const componentDeclarations = componentRequiesDeclaration
+    ? [AppComponent, AnnotatedComponent]
+    : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,

addons/storyshots/storyshots-core/src/frameworks/angular/types.ts

@@ -12,7 +12,6 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
-  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

addons/storyshots/storyshots-puppeteer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Image snappshots addition to StoryShots base on puppeteer",
   "keywords": [
     "addon",
@@ -22,8 +22,8 @@
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/node-logger": "5.1.0-alpha.36",
+    "@storybook/node-logger": "5.1.0-alpha.39",
-    "@storybook/router": "5.1.0-alpha.36",
+    "@storybook/router": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "jest-image-snapshot": "^2.8.1",
     "puppeteer": "^1.12.2",

addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Stories addon for storybook",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/router": "5.1.0-alpha.36",
+    "@storybook/router": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.2.3",

addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "addon",
@@ -21,11 +21,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/components": "5.1.0-alpha.36",
+    "@storybook/components": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",

app/angular/index.d.ts

@@ -45,7 +45,6 @@ export interface IStory {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
-  requiresComponentDeclaration?: boolean;
   template?: string;
 }
 

app/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,8 +26,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
-    "@storybook/node-logger": "5.1.0-alpha.36",
+    "@storybook/node-logger": "5.1.0-alpha.39",
     "angular2-template-loader": "^0.6.2",
     "core-js": "^2.6.5",
     "fork-ts-checker-webpack-plugin": "^0.5.2",

app/angular/src/client/preview/angular/helpers.ts

@@ -47,16 +47,56 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
   })(componentClass);
 };
 
+const extractNgModuleMetadata = (importItem: any): NgModule => {
+  const decoratorKey = '__annotations__';
+  const decorators: any[] =
+    Reflect && Reflect.getOwnPropertyDescriptor
+      ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
+      : importItem[decoratorKey];
+
+  if (!decorators || decorators.length === 0) {
+    return null;
+  }
+
+  const ngModuleDecorator: NgModule | undefined = decorators.find(
+    decorator => decorator instanceof NgModule
+  );
+  if (!ngModuleDecorator) {
+    return null;
+  }
+  return ngModuleDecorator;
+};
+
+const getExistenceOfComponentInModules = (
+  component: any,
+  declarations: any[],
+  imports: any[]
+): boolean => {
+  if (declarations && declarations.some(declaration => declaration === component)) {
+    // Found component in declarations array
+    return true;
+  }
+  if (!imports) {
+    return false;
+  }
+
+  return imports.some(importItem => {
+    const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+    if (!extractedNgModuleMetadata) {
+      // Not an NgModule
+      return false;
+    }
+    return getExistenceOfComponentInModules(
+      component,
+      extractedNgModuleMetadata.declarations,
+      extractedNgModuleMetadata.imports
+    );
+  });
+};
+
 const initModule = (storyFn: IStoryFn) => {
   const storyObj = storyFn();
-  const {
+  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
-    component,
-    template,
-    props,
-    styles,
-    moduleMetadata = {},
-    requiresComponentDeclaration = true,
-  } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
 
@@ -64,10 +104,17 @@ const initModule = (storyFn: IStoryFn) => {
     ? createComponentFromTemplate(template, styles)
     : component;
 
-  const componentDeclarations =
+  const componentRequiesDeclaration =
-    isCreatingComponentFromTemplate || requiresComponentDeclaration
+    isCreatingComponentFromTemplate ||
-      ? [AppComponent, AnnotatedComponent]
+    !getExistenceOfComponentInModules(
-      : [AppComponent];
+      component,
+      moduleMetadata.declarations,
+      moduleMetadata.imports
+    );
+
+  const componentDeclarations = componentRequiesDeclaration
+    ? [AppComponent, AnnotatedComponent]
+    : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,

app/angular/src/client/preview/angular/types.ts

@@ -12,7 +12,6 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
-  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

app/ember/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
   "bugs": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ember/test-helpers": "^1.5.0",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/marko/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/mithril/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/polymer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/polymer",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",

app/preact/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/react-native-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-server",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -24,12 +24,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/api": "5.1.0-alpha.36",
+    "@storybook/api": "5.1.0-alpha.39",
-    "@storybook/channel-websocket": "5.1.0-alpha.36",
+    "@storybook/channel-websocket": "5.1.0-alpha.39",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/ui": "5.1.0-alpha.36",
+    "@storybook/ui": "5.1.0-alpha.39",
     "commander": "^2.19.0",
     "global": "^4.3.2",
     "react": "^16.6.0",

app/react-native-server/src/client/manager/provider.js

@@ -39,7 +39,6 @@ export default class ReactProvider extends Provider {
     this.addons = addons;
     this.channel = channel;
     this.options = options;
-    this.selection = null;
   }
 
   getElements(type) {
@@ -48,24 +47,11 @@ export default class ReactProvider extends Provider {
 
   renderPreview() {
     return (
-      <Consumer filter={mapper}>
+      <Consumer filter={mapper} pure>
         {({ storiesHash, storyId, api }) => {
           if (storiesHash[storyId]) {
             const { kind, story } = storiesHash[storyId];
-
+            api.emit(Events.SET_CURRENT_STORY, { kind, story });
-            if (!this.selection || this.selection.kind !== kind || this.selection.story !== story) {
-              this.selection = { kind, story };
-              // TODO: isn't this event sent twice now?
-              api.emit(Events.SET_CURRENT_STORY, { kind, story });
-            }
-
-            // FIXME: getPreview not implemented yet.
-            if (addons.getPreview) {
-              const renderPreview = addons.getPreview();
-              if (renderPreview) {
-                return renderPreview(kind, story);
-              }
-            }
           }
           return <PreviewHelp />;
         }}
@@ -75,9 +61,7 @@ export default class ReactProvider extends Provider {
 
   handleAPI(api) {
     addons.loadAddons(api);
-
+    api.on(Events.STORY_CHANGED, () => {
-    api.onStory((kind, story) => {
-      this.selection = { kind, story };
       api.emit(Events.SET_CURRENT_STORY, this.selection);
     });
     api.on(Events.GET_CURRENT_STORY, () => {

app/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -22,11 +22,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@emotion/native": "^10.0.10",
-    "@storybook/channel-websocket": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/channels": "5.1.0-alpha.36",
+    "@storybook/channel-websocket": "5.1.0-alpha.39",
-    "@storybook/client-api": "5.1.0-alpha.36",
+    "@storybook/channels": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/client-api": "5.1.0-alpha.39",
+    "@storybook/core-events": "5.1.0-alpha.39",
     "react-native-swipe-gestures": "^1.0.3",
     "rn-host-detect": "^1.1.5"
   },

app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx

@@ -8,7 +8,6 @@ import {
   LayoutChangeEvent,
   KeyboardEvent,
 } from 'react-native';
-import style from './style';
 
 export interface PreviewDimens {
   previewWidth: number;
@@ -85,11 +84,11 @@ export default class AbsolutePositionedKeyboardAwareView extends PureComponent<P
     const { children, previewWidth, previewHeight } = this.props;
 
     return (
-      <View style={style.flex} onLayout={this.onLayoutHandler}>
+      <View style={{ flex: 1 }} onLayout={this.onLayoutHandler}>
         <View
           style={
             previewWidth === 0
-              ? style.flex
+              ? { flex: 1 }
               : { position: 'absolute', width: previewWidth, height: previewHeight }
           }
         >

app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx

@@ -1,9 +1,21 @@
 import React, { PureComponent } from 'react';
-import { View, Text } from 'react-native';
+import styled from '@emotion/native';
 import addons from '@storybook/addons';
 import AddonsList from './list';
 import AddonWrapper from './wrapper';
-import style from '../style';
+import { Label } from '../../Shared/text';
+import { EmotionProps } from '../../Shared/theme';
+
+const NoAddonContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Container = styled.View`
+  flex: 1;
+  background: ${(props: EmotionProps) => props.theme.backgroundColor};
+`;
 
 export default class Addons extends PureComponent<{}, { addonSelected: string }> {
   panels = addons.getElements('panel');
@@ -25,21 +37,21 @@ export default class Addons extends PureComponent<{}, { addonSelected: string }>
 
     if (Object.keys(this.panels).length === 0) {
       return (
-        <View style={[style.flex, style.center]}>
+        <NoAddonContainer>
-          <Text style={style.text}>No addons loaded.</Text>
+          <Label>No addons loaded.</Label>
-        </View>
+        </NoAddonContainer>
       );
     }
 
     return (
-      <View style={style.flex}>
+      <Container>
         <AddonsList
           onPressAddon={this.onPressAddon}
           panels={this.panels}
           addonSelected={addonSelected}
         />
         <AddonWrapper addonSelected={addonSelected} panels={this.panels} />
-      </View>
+      </Container>
     );
   }
 }

app/react-native/src/preview/components/OnDeviceUI/addons/list.tsx

@@ -1,16 +1,15 @@
 import React, { PureComponent } from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { ScrollView } from 'react-native';
+import styled from '@emotion/native';
 import { Collection } from '@storybook/addons';
 import Button from '../navigation/button';
+import { EmotionProps } from '../../Shared/theme';
 
-const style = StyleSheet.create({
+const Container = styled.View`
-  list: {
+  flex-direction: row;
-    flexDirection: 'row',
+  border-bottom-width: 1;
-    backgroundColor: 'white',
+  border-bottom-color: ${(props: EmotionProps) => props.theme.borderColor};
-    borderBottomWidth: 1,
+`;
-    borderBottomColor: '#e6e6e6',
-  },
-});
 
 export interface Props {
   panels: Collection;
@@ -24,7 +23,7 @@ export default class AddonList extends PureComponent<Props> {
 
     return (
       <Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
-        {title}
+        {title.toUpperCase()}
       </Button>
     );
   };
@@ -34,11 +33,11 @@ export default class AddonList extends PureComponent<Props> {
     const addonKeys = Object.keys(panels);
 
     return (
-      <View style={style.list}>
+      <Container>
         <ScrollView showsHorizontalScrollIndicator={false} horizontal>
           {addonKeys.map(id => this.renderTab(id, panels[id].title))}
         </ScrollView>
-      </View>
+      </Container>
     );
   }
 }

app/react-native/src/preview/components/OnDeviceUI/addons/tab.tsx

@@ -1,26 +0,0 @@
-import React, { PureComponent } from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-
-import style from '../style';
-
-export interface Props {
-  id: string;
-  title: string;
-  onPress: (id: string) => void;
-}
-
-export default class Tab extends PureComponent<Props> {
-  onPressHandler = () => {
-    const { onPress, id } = this.props;
-    onPress(id);
-  };
-
-  render() {
-    const { title } = this.props;
-    return (
-      <TouchableOpacity style={style.tab} onPress={this.onPressHandler}>
-        <Text style={style.text}>{title}</Text>
-      </TouchableOpacity>
-    );
-  }
-}

app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.tsx

@@ -1,13 +1,24 @@
 import React, { PureComponent } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
 import { Collection } from '@storybook/addons';
-import style from '../style';
 
 export interface Props {
   panels: Collection;
   addonSelected: string;
 }
 
+const style = StyleSheet.create({
+  invisible: {
+    height: 0,
+    width: 0,
+    opacity: 0,
+    position: 'absolute',
+  },
+  flex: {
+    flex: 1,
+  },
+});
+
 export default class Wrapper extends PureComponent<Props> {
   static defaultProps = {
     addonSelected: '',
@@ -23,9 +34,7 @@ export default class Wrapper extends PureComponent<Props> {
 
       return (
         <View key={id} style={selected ? style.flex : style.invisible}>
-          <ScrollView style={style.flex}>
+          <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
-            {panels[id].render({ active: selected, key: id })}
-          </ScrollView>
         </View>
       );
     });

app/react-native/src/preview/components/OnDeviceUI/animation.ts

@@ -1,5 +1,5 @@
 import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
-import { Animated, ViewProps } from 'react-native';
+import { Animated } from 'react-native';
 
 const PREVIEW_SCALE = 0.3;
 

app/react-native/src/preview/components/OnDeviceUI/index.tsx

@@ -1,5 +1,13 @@
 import React, { PureComponent } from 'react';
-import { Keyboard, KeyboardAvoidingView, Platform, Animated, TouchableOpacity } from 'react-native';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Animated,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import styled from '@emotion/native';
 import Events from '@storybook/core-events';
 import addons from '@storybook/addons';
 import Channel from '@storybook/channels';
@@ -18,7 +26,7 @@ import {
   getAddonPanelPosition,
   getNavigatorPanelPosition,
 } from './animation';
-import style from './style';
+import { EmotionProps } from '../Shared/theme';
 
 const ANIMATION_DURATION = 300;
 const IS_IOS = Platform.OS === 'ios';
@@ -42,6 +50,18 @@ interface OnDeviceUIState {
   previewHeight: number;
 }
 
+type EmotionPreviewProps = EmotionProps & TouchableOpacityProps;
+
+const Preview: typeof TouchableOpacity = styled.TouchableOpacity`
+  flex: 1;
+  border-left-width: ${(props: EmotionPreviewProps) => (props.disabled ? '0' : '1')};
+  border-top-width: ${(props: EmotionPreviewProps) => (props.disabled ? '0' : '1')};
+  border-right-width: ${(props: EmotionPreviewProps) => (props.disabled ? '0' : '1')};
+  border-bottom-width: ${(props: EmotionPreviewProps) => (props.disabled ? '0' : '1')};
+  border-color: ${(props: EmotionPreviewProps) =>
+    props.disabled ? 'transparent' : props.theme.previewBorderColor};
+`;
+
 export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceUIState> {
   animatedValue: Animated.Value;
   channel: Channel;
@@ -145,22 +165,18 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     } = this.state;
 
     const previewWrapperStyles = [
-      style.flex,
+      { flex: 1 },
       getPreviewPosition(this.animatedValue, previewWidth, previewHeight, slideBetweenAnimation),
     ];
 
-    const previewStyles = [
+    const previewStyles = [{ flex: 1 }, getPreviewScale(this.animatedValue, slideBetweenAnimation)];
-      style.flex,
-      tabOpen !== 0 && style.previewMinimized,
-      getPreviewScale(this.animatedValue, slideBetweenAnimation),
-    ];
 
     return (
       <KeyboardAvoidingView
         enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
         behavior={IS_IOS ? 'padding' : null}
         keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
-        style={style.flex}
+        style={{ flex: 1 }}
       >
         <AbsolutePositionedKeyboardAwareView
           onLayout={this.onLayout}
@@ -169,9 +185,8 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
         >
           <Animated.View style={previewWrapperStyles}>
             <Animated.View style={previewStyles}>
-              <TouchableOpacity
+              <Preview
                 accessible={false}
-                style={style.flex}
                 disabled={tabOpen === PREVIEW}
                 onPress={this.handleOpenPreview}
               >
@@ -181,7 +196,7 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
                   storyFn={storyFn}
                   listenToEvents={false}
                 />
-              </TouchableOpacity>
+              </Preview>
             </Animated.View>
           </Animated.View>
           <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>

app/react-native/src/preview/components/OnDeviceUI/navigation/bar.tsx

@@ -1,19 +1,17 @@
 import React, { PureComponent } from 'react';
-import { StyleSheet, View } from 'react-native';
+import styled from '@emotion/native';
 import Button from './button';
 import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { EmotionProps } from '../../Shared/theme';
 
-const style = StyleSheet.create({
+const Container = styled.View`
-  bar: {
+  flex-direction: row;
-    flexDirection: 'row',
+  padding-horizontal: 8;
-    paddingHorizontal: 8,
+  background: ${(props: EmotionProps) => props.theme.backgroundColor};
-    backgroundColor: 'white',
+  border-top-width: 1;
-    borderBottomWidth: 1,
+  border-bottom-width: 1;
-    borderTopWidth: 1,
+  border-color: ${(props: EmotionProps) => props.theme.borderColor};
-    borderBottomColor: '#e6e6e6',
+`;
-    borderTopColor: '#e6e6e6',
-  },
-});
 
 export interface Props {
   index: number;
@@ -24,7 +22,7 @@ export default class Bar extends PureComponent<Props> {
   render() {
     const { index, onPress } = this.props;
     return (
-      <View style={style.bar}>
+      <Container>
         <Button onPress={onPress} id={NAVIGATOR} active={index === NAVIGATOR}>
           NAVIGATOR
         </Button>
@@ -34,7 +32,7 @@ export default class Bar extends PureComponent<Props> {
         <Button onPress={onPress} id={ADDONS} active={index === ADDONS}>
           ADDONS
         </Button>
-      </View>
+      </Container>
     );
   }
 }

app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx

@@ -1,18 +1,23 @@
 import React, { PureComponent } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+import { EmotionProps } from '../../Shared/theme';
 
-const style = StyleSheet.create({
+type EmotionButtonProps = EmotionProps & { active: boolean };
-  text: {
+
-    color: '#999999',
+const ActiveBorder = styled.View`
-    paddingHorizontal: 8,
+  background: ${(props: EmotionButtonProps) =>
-    paddingVertical: 10,
+    props.active ? props.theme.borderColor : 'transparent'};
-    fontSize: 11,
+  height: 3;
-  },
+`;
-  underline: {
+
-    height: 3,
+const ButtonText = styled.Text`
-    backgroundColor: 'transparent',
+  color: ${(props: EmotionButtonProps) =>
-  },
+    props.active ? props.theme.buttonActiveTextColor : props.theme.buttonTextColor};
-});
+  padding-horizontal: 8;
+  padding-vertical: 10;
+  font-size: 11;
+`;
 
 interface Props {
   id: number | string;
@@ -30,25 +35,9 @@ export default class Button extends PureComponent<Props> {
     const { active, children } = this.props;
 
     return (
-      <TouchableOpacity onPress={this.onPress}>
+      <TouchableOpacity onPress={this.onPress} activeOpacity={0.8}>
-        <Text
+        <ButtonText active={active}>{children}</ButtonText>
-          style={[
+        <ActiveBorder active={active} />
-            style.text,
-            active && {
-              color: 'rgb(68, 68, 68)',
-            },
-          ]}
-        >
-          {children}
-        </Text>
-        <View
-          style={[
-            style.underline,
-            active && {
-              backgroundColor: '#e6e6e6',
-            },
-          ]}
-        />
       </TouchableOpacity>
     );
   }

app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.tsx

@@ -1,24 +1,37 @@
 import React, { PureComponent } from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
-import style from '../style';
+import styled from '@emotion/native';
+import { EmotionProps } from '../../Shared/theme';
 
 interface Props {
   onPress: () => void;
 }
 
+const Touchable: typeof TouchableOpacity = styled.TouchableOpacity`
+  background: transparent;
+  position: absolute;
+  right: 8;
+  bottom: 12;
+  z-index: 100;
+`;
+
+const HideIcon = styled.Text`
+  font-size: 14;
+  color: ${(props: EmotionProps) => props.theme.buttonTextColor};
+`;
+
 export default class VisibilityButton extends PureComponent<Props> {
   render() {
     const { onPress } = this.props;
     return (
-      <TouchableOpacity
+      <Touchable
         onPress={onPress}
         testID="Storybook.OnDeviceUI.toggleUI"
         accessibilityLabel="Storybook.OnDeviceUI.toggleUI"
-        style={style.hideButton}
         hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
       >
-        <Text style={style.hideButtonText}>□</Text>
+        <HideIcon>□</HideIcon>
-      </TouchableOpacity>
+      </Touchable>
     );
   }
 }

app/react-native/src/preview/components/OnDeviceUI/panel.tsx

@@ -1,16 +1,11 @@
 import React, { PureComponent } from 'react';
-import { StyleSheet, Animated, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Animated } from 'react-native';
+import styled from '@emotion/native';
+import { EmotionProps } from '../Shared/theme';
 
-const style = StyleSheet.create({
+const Container: typeof Animated.View = styled(Animated.View)`
-  panel: {
+  background: ${(props: EmotionProps) => props.theme.backgroundColor};
-    ...StyleSheet.absoluteFillObject,
+`;
-    borderWidth: 1,
-    borderTopWidth: 1,
-    borderBottomWidth: 0,
-    borderColor: '#e6e6e6',
-    backgroundColor: '#ffffff',
-  },
-});
 
 interface Props {
   style: any[];
@@ -18,7 +13,7 @@ interface Props {
 
 export default class Panel extends PureComponent<Props> {
   render() {
-    const { children, style: propsStyle } = this.props;
+    const { children, style } = this.props;
-    return <Animated.View style={[style.panel, ...propsStyle]}>{children}</Animated.View>;
+    return <Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>;
   }
 }

app/react-native/src/preview/components/OnDeviceUI/style.ts

@@ -1,49 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  main: {
-    flex: 1,
-  },
-  headerText: {
-    marginLeft: 10,
-    fontSize: 20,
-    color: 'black',
-  },
-  text: {
-    fontSize: 18,
-  },
-  center: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  hideButtonText: {
-    fontSize: 14,
-    color: '#999999',
-  },
-  hideButton: {
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    right: 8,
-    bottom: 12,
-    zIndex: 100,
-  },
-  previewMinimized: {
-    borderWidth: 1,
-    borderColor: '#b3b3b3',
-  },
-  tab: {
-    marginRight: 15,
-  },
-  addonList: {
-    flexDirection: 'row',
-  },
-  invisible: {
-    height: 0,
-    width: 0,
-    opacity: 0,
-    position: 'absolute',
-  },
-  flex: {
-    flex: 1,
-  },
-});

app/react-native/src/preview/components/Shared/text.ts

@@ -0,0 +1,19 @@
+import styled from '@emotion/native';
+import { EmotionProps } from './theme';
+
+export const Header = styled.Text`
+  font-size: 20;
+  color: ${(props: EmotionProps) => props.theme.headerTextColor};
+  ${(props: any) => props.selected && 'font-weight: bold;'}
+`;
+
+export const Name = styled.Text`
+  font-size: 16;
+  color: ${(props: EmotionProps) => props.theme.headerTextColor};
+  ${(props: any) => props.selected && 'font-weight: bold;'}
+`;
+
+export const Label = styled.Text`
+  font-size: 18;
+  color: ${(props: EmotionProps) => props.theme.labelColor};
+`;

app/react-native/src/preview/components/Shared/theme.ts

@@ -0,0 +1,13 @@
+export const theme = {
+  backgroundColor: 'white',
+  headerTextColor: 'black',
+  labelColor: 'black',
+  borderColor: '#e6e6e6',
+  previewBorderColor: '#b3b3b3',
+  buttonTextColor: '#999999',
+  buttonActiveTextColor: '#444444',
+};
+
+export interface EmotionProps {
+  theme: typeof theme;
+}

app/react-native/src/preview/components/StoryListView/index.tsx

@@ -1,8 +1,28 @@
 import React, { Component } from 'react';
-import { SectionList, Text, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
+import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
+import styled from '@emotion/native';
 import Events from '@storybook/core-events';
 import addons from '@storybook/addons';
-import style from './style';
+import { EmotionProps } from '../Shared/theme';
+import { Header, Name } from '../Shared/text';
+
+const SearchBar: typeof TextInput = styled.TextInput`
+  background: ${(props: EmotionProps) => props.theme.borderColor};
+  color: ${(props: EmotionProps) => props.theme.buttonActiveTextColor};
+  border-top-left-radius: 5;
+  border-top-right-radius: 5;
+  border-bottom-left-radius: 5;
+  border-bottom-right-radius: 5;
+  font-size: 16;
+  margin-horizontal: 5;
+  margin-vertical: 5;
+  padding-horizontal: 5;
+  padding-vertical: 5;
+`;
+
+const HeaderContainer = styled.View`
+  padding-vertical: 5;
+`;
 
 interface SectionProps {
   title: string;
@@ -13,9 +33,9 @@ const SectionHeader: React.FunctionComponent<SectionProps> = ({
   title,
   selected,
 }: SectionProps) => (
-  <View key={title} style={style.header}>
+  <HeaderContainer key={title}>
-    <Text style={[style.headerText, selected && style.headerTextSelected]}>{title}</Text>
+    <Header selected={selected}>{title}</Header>
-  </View>
+  </HeaderContainer>
 );
 
 interface ListItemProps {
@@ -25,16 +45,21 @@ interface ListItemProps {
   onPress: () => void;
 }
 
+const ItemTouchable: typeof TouchableOpacity = styled.TouchableOpacity`
+  padding-horizontal: 16;
+  padding-vertical: 5;
+`;
+
 const ListItem: React.FunctionComponent<ListItemProps> = ({ kind, title, selected, onPress }) => (
-  <TouchableOpacity
+  <ItemTouchable
     key={title}
-    style={style.item}
     onPress={onPress}
+    activeOpacity={0.8}
     testID={`Storybook.ListItem.${kind}.${title}`}
     accessibilityLabel={`Storybook.ListItem.${title}`}
   >
-    <Text style={[style.itemText, selected && style.itemTextSelected]}>{title}</Text>
+    <Name selected={selected}>{title}</Name>
-  </TouchableOpacity>
+  </ItemTouchable>
 );
 
 interface Props {
@@ -48,6 +73,10 @@ interface State {
   originalData: any[];
 }
 
+const List: typeof SectionList = styled.SectionList`
+  flex: 1;
+  margin-bottom: 40;
+`;
 export default class StoryListView extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -127,18 +156,16 @@ export default class StoryListView extends Component<Props, State> {
     const { data } = this.state;
 
     return (
-      <SafeAreaView style={style.flex}>
+      <SafeAreaView style={{ flex: 1 }}>
-        <TextInput
+        <SearchBar
           clearButtonMode="while-editing"
           disableFullscreenUI
           onChangeText={this.handleChangeSearchText}
           placeholder="Filter"
           returnKeyType="search"
-          style={style.searchBar}
         />
-        <SectionList
+        <List
           testID="Storybook.ListView"
-          style={style.sectionList}
           renderItem={({ item }) => (
             <ListItem
               title={item.name}

app/react-native/src/preview/components/StoryListView/style.ts

@@ -1,38 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  searchBar: {
-    backgroundColor: '#eee',
-    borderRadius: 5,
-    fontSize: 16,
-    marginHorizontal: 5,
-    marginVertical: 5,
-    padding: 5,
-  },
-  flex: {
-    flex: 1,
-  },
-  sectionList: {
-    flex: 1,
-    marginBottom: 40,
-  },
-  header: {
-    paddingVertical: 5,
-  },
-  headerText: {
-    fontSize: 20,
-  },
-  headerTextSelected: {
-    fontWeight: 'bold',
-  },
-  item: {
-    paddingVertical: 5,
-    paddingHorizontal: 16,
-  },
-  itemText: {
-    fontSize: 16,
-  },
-  itemTextSelected: {
-    fontWeight: 'bold',
-  },
-});

app/react-native/src/preview/components/StoryView/index.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
+import styled from '@emotion/native';
 import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
-import style from './style';
 
 interface Props {
   listenToEvents: boolean;
@@ -16,6 +16,14 @@ interface State {
   selection?: any;
 }
 
+const HelpContainer = styled.View`
+  flex: 1;
+  padding-horizontal: 15;
+  padding-vertical: 15;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default class StoryView extends Component<Props, State> {
   componentDidMount() {
     if (this.props.listenToEvents) {
@@ -46,7 +54,7 @@ export default class StoryView extends Component<Props, State> {
   renderHelp = () => {
     const { url } = this.props;
     return (
-      <View style={style.help}>
+      <HelpContainer>
         {url && url.length ? (
           <Text>
             Please open the Storybook UI ({url}) with a web browser and select a story for preview.
@@ -56,14 +64,14 @@ export default class StoryView extends Component<Props, State> {
             Please open the Storybook UI with a web browser and select a story for preview.
           </Text>
         )}
-      </View>
+      </HelpContainer>
     );
   };
 
   renderOnDeviceUIHelp = () => (
-    <View style={style.help}>
+    <HelpContainer>
       <Text>Please open navigator and select a story to preview.</Text>
-    </View>
+    </HelpContainer>
   );
 
   render() {
@@ -84,7 +92,7 @@ export default class StoryView extends Component<Props, State> {
     const { kind, story } = selection;
 
     return storyFn ? (
-      <View key={`${kind}:::${story}`} style={style.main}>
+      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
         {storyFn()}
       </View>
     ) : (
@@ -97,7 +105,7 @@ export default class StoryView extends Component<Props, State> {
     const { kind, story } = selection;
 
     return storyFn ? (
-      <View key={`${kind}:::${story}`} style={style.main}>
+      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
         {storyFn()}
       </View>
     ) : (

app/react-native/src/preview/components/StoryView/style.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native';
-export default StyleSheet.create({
-  main: {
-    flex: 1,
-  },
-  help: {
-    flex: 1,
-    padding: 15,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

app/react-native/src/preview/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AsyncStorage } from 'react-native';
+import { ThemeProvider } from 'emotion-theming';
 // @ts-ignore
 import getHost from 'rn-host-detect';
 import addons from '@storybook/addons';
@@ -10,10 +11,11 @@ import createChannel from '@storybook/channel-websocket';
 import { StoryStore, ClientApi } from '@storybook/client-api';
 import OnDeviceUI from './components/OnDeviceUI';
 import StoryView from './components/StoryView';
+import { theme, EmotionProps } from './components/Shared/theme';
 
 const STORAGE_KEY = 'lastOpenedStory';
 
-export interface Params {
+export type Params = {
   onDeviceUI: boolean;
   resetStorybook: boolean;
   disableWebsockets: boolean;
@@ -27,7 +29,7 @@ export interface Params {
   isUIHidden: boolean;
   shouldDisableKeyboardAvoidingView: boolean;
   keyboardAvoidingViewVerticalOffset: number;
-}
+} & EmotionProps;
 
 export default class Preview {
   currentStory: any;
@@ -122,29 +124,37 @@ export default class Preview {
 
     addons.loadAddons(this._clientApi);
 
+    const appliedTheme = { ...theme, ...params.theme };
+
     // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
     // eslint-disable-next-line react/prefer-stateless-function
     return class StorybookRoot extends React.PureComponent {
       render() {
         if (onDeviceUI) {
           return (
-            <OnDeviceUI
+            <ThemeProvider theme={appliedTheme}>
-              stories={preview._stories}
+              <OnDeviceUI
-              url={webUrl}
+                stories={preview._stories}
-              isUIHidden={params.isUIHidden}
+                url={webUrl}
-              tabOpen={params.tabOpen}
+                isUIHidden={params.isUIHidden}
-              getInitialStory={
+                tabOpen={params.tabOpen}
-                setInitialStory
+                getInitialStory={
-                  ? preview._getInitialStory(initialSelection, shouldPersistSelection)
+                  setInitialStory
-                  : null
+                    ? preview._getInitialStory(initialSelection, shouldPersistSelection)
-              }
+                    : null
-              shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
+                }
-              keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
+                shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
-            />
+                keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
+              />
+            </ThemeProvider>
           );
         }
 
-        return <StoryView url={webUrl} listenToEvents />;
+        return (
+          <ThemeProvider theme={appliedTheme}>
+            <StoryView url={webUrl} listenToEvents />
+          </ThemeProvider>
+        );
       }
     };
   };

app/react-native/src/typings.d.ts

@@ -25,3 +25,6 @@ declare module 'react-native-swipe-gestures' {
 
   export default GestureRecognizer;
 }
+
+// https://github.com/emotion-js/emotion/pull/1176/
+declare module '@emotion/native';

app/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,8 +29,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
-    "@storybook/node-logger": "5.1.0-alpha.36",
+    "@storybook/node-logger": "5.1.0-alpha.39",
     "@svgr/webpack": "^4.0.3",
     "babel-plugin-named-asset-import": "^0.3.1",
     "babel-plugin-react-docgen": "^3.0.0",

app/riot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/riot",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

app/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

docs/src/pages/basics/exporting-storybook/index.md

@@ -28,7 +28,7 @@ Now you can deploy the content in the `.out` directory wherever you want.
 To test it locally:
 
 ```sh
-npx serve .
+npx http-server .out
 ```
 
 ## Deploying to GitHub Pages

docs/src/versions/next.json

@@ -1 +1 @@
-{"version":"5.1.0-alpha.36","info":{"plain":"### Features\n\n* Addon-contexts: Preact support ([#6660](https://github.com/storybooks/storybook/pull/6660))\n* Angular: Allow optional component declaration ([#6346](https://github.com/storybooks/storybook/pull/6346))\n\n### Bug Fixes\n\n* CLI: Fix `sb init` for projects with frozen lock files ([#6629](https://github.com/storybooks/storybook/pull/6629))\n\n### Dependency Upgrades\n\n* [Snyk] Fix for 1 vulnerable dependencies ([#6647](https://github.com/storybooks/storybook/pull/6647))"}}
+{"version":"5.1.0-alpha.39","info":{"plain":"### Features\n\n- React-native: Ondevice actions ([#6594](https://github.com/storybooks/storybook/pull/6594))\n- React-native: Use emotion to style RN UI ([#6603](https://github.com/storybooks/storybook/pull/6603))\n\n### Bug Fixes\n\n- API: Mimic PureComponent behavior for Consumer children ([#6412](https://github.com/storybooks/storybook/pull/6412))"}}

examples-native/crna-kitchen-sink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crna-kitchen-sink",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -24,12 +24,14 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-ondevice-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-ondevice-actions": "5.1.0-alpha.39",
-    "@storybook/addon-ondevice-notes": "5.1.0-alpha.36",
+    "@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addon-ondevice-knobs": "5.1.0-alpha.39",
-    "@storybook/react-native": "5.1.0-alpha.36",
+    "@storybook/addon-ondevice-notes": "5.1.0-alpha.39",
+    "@storybook/addons": "5.1.0-alpha.39",
+    "@storybook/react-native": "5.1.0-alpha.39",
     "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-expo": "^5.1.1",

examples-native/crna-kitchen-sink/storybook/index.js

@@ -6,5 +6,17 @@ configure(() => {
   require('./stories');
 }, module);
 
+// const darkTheme = {
+//   backgroundColor: 'black',
+//   headerTextColor: 'white',
+//   labelColor: 'white',
+//   borderColor: 'white',
+//   previewBorderColor: 'gray',
+//   buttonTextColor: 'white',
+//   buttonActiveTextColor: 'white',
+// };
+
+// const StorybookUIRoot = getStorybookUI({ theme: darkTheme });
+
 const StorybookUIRoot = getStorybookUI();
 export default StorybookUIRoot;

examples-native/crna-kitchen-sink/storybook/rn-addons.js

@@ -1,3 +1,4 @@
+require('@storybook/addon-ondevice-actions/register');
 require('@storybook/addon-ondevice-knobs/register');
 require('@storybook/addon-ondevice-notes/register');
 require('@storybook/addon-ondevice-backgrounds/register');

examples/angular-cli/.storybook/addons.ts

@@ -6,3 +6,4 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-jest/register';
 import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-a11y/register';

examples/angular-cli/.storybook/config.ts

@@ -1,7 +1,9 @@
 /* eslint-disable global-require */
-import { configure, addParameters } from '@storybook/angular';
+import { configure, addParameters, addDecorator } from '@storybook/angular';
+import { withA11y } from '@storybook/addon-a11y';
 import addCssWarning from '../src/cssWarning';
 
+addDecorator(withA11y);
 addCssWarning();
 
 addParameters({

examples/angular-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -34,18 +34,19 @@
     "@angular-devkit/build-angular": "^0.13.4",
     "@angular/cli": "^7.3.6",
     "@angular/compiler-cli": "^7.2.6",
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-backgrounds": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-centered": "5.1.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.1.0-alpha.39",
-    "@storybook/addon-jest": "5.1.0-alpha.36",
+    "@storybook/addon-centered": "5.1.0-alpha.39",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-jest": "5.1.0-alpha.39",
-    "@storybook/addon-links": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-notes": "5.1.0-alpha.36",
+    "@storybook/addon-links": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-notes": "5.1.0-alpha.39",
-    "@storybook/addon-storyshots": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/addon-storysource": "5.1.0-alpha.36",
+    "@storybook/addon-storyshots": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addon-storysource": "5.1.0-alpha.39",
-    "@storybook/angular": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
+    "@storybook/angular": "5.1.0-alpha.39",
     "@types/core-js": "^2.5.0",
     "@types/jest": "^24.0.11",
     "@types/node": "~11.13.4",

examples/angular-cli/src/stories/module-context/module-context.stories.ts

@@ -33,17 +33,12 @@ storiesOf('Custom|Feature Module as Context', module)
       };
       return {
         component: ChipsGroupComponent,
-        requiresComponentDeclaration: false,
         props,
       };
     },
     {
-      notes: `
+      notes: `This component includes a child component, a pipe, and a default provider, all which come from 
-        This component includes a child component, a pipe, and a default provider, all which come from 
+        the specified feature module.`,
-        the specified feature module.
-
-        This behavior is possible by setting the "requiresComponentDeclaration" flag to false.
-      `.replace(/ {1,}/g, ' '),
     }
   )
   .add('Component with default providers', () => {
@@ -53,7 +48,6 @@ storiesOf('Custom|Feature Module as Context', module)
     };
     return {
       component: ChipComponent,
-      requiresComponentDeclaration: false,
       props,
     };
   })
@@ -72,7 +66,6 @@ storiesOf('Custom|Feature Module as Context', module)
           },
         ],
       },
-      requiresComponentDeclaration: false,
       props,
     };
   });

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,6 +1,5 @@
 import { configure, addParameters, addDecorator } from '@storybook/react';
 import { create } from '@storybook/theming';
-
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);

examples/cra-kitchen-sink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -19,22 +19,22 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-backgrounds": "5.1.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.1.0-alpha.39",
-    "@storybook/addon-centered": "5.1.0-alpha.36",
+    "@storybook/addon-centered": "5.1.0-alpha.39",
-    "@storybook/addon-events": "5.1.0-alpha.36",
+    "@storybook/addon-events": "5.1.0-alpha.39",
-    "@storybook/addon-info": "5.1.0-alpha.36",
+    "@storybook/addon-info": "5.1.0-alpha.39",
-    "@storybook/addon-jest": "5.1.0-alpha.36",
+    "@storybook/addon-jest": "5.1.0-alpha.39",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-links": "5.1.0-alpha.36",
+    "@storybook/addon-links": "5.1.0-alpha.39",
-    "@storybook/addon-notes": "5.1.0-alpha.36",
+    "@storybook/addon-notes": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/addon-storyshots": "5.1.0-alpha.36",
+    "@storybook/addon-storyshots": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/client-logger": "5.1.0-alpha.36",
+    "@storybook/client-logger": "5.1.0-alpha.39",
-    "@storybook/react": "5.1.0-alpha.36",
+    "@storybook/react": "5.1.0-alpha.39",
-    "@storybook/theming": "5.1.0-alpha.36",
+    "@storybook/theming": "5.1.0-alpha.39",
     "react-scripts": "^2.1.8"
   }
 }

examples/cra-ts-kitchen-sink/.storybook/addons.js

@@ -1,2 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-a11y/register';

examples/cra-ts-kitchen-sink/.storybook/config.js

@@ -1,6 +1,8 @@
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
+import { withA11y } from '@storybook/addon-a11y';
 
+addDecorator(withA11y);
 addParameters({
   options: {
     brandTitle: 'CRA TypeScript Kitchen Sink',

examples/cra-ts-kitchen-sink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-kitchen-sink",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -14,11 +14,12 @@
     "react-dom": "^16.8.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-info": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-info": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/react": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
+    "@storybook/react": "5.1.0-alpha.39",
     "@types/enzyme": "^3.9.0",
     "@types/react": "^16.8.4",
     "@types/react-dom": "^16.8.2",

examples/ember-cli/.storybook/config.js

@@ -1,5 +1,7 @@
-import { configure, addParameters } from '@storybook/ember';
+import { configure, addParameters, addDecorator } from '@storybook/ember';
+import { withA11y } from '@storybook/addon-a11y';
 
+addDecorator(withA11y);
 addParameters({
   options: {
     hierarchySeparator: /\/|\./,

examples/ember-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "scripts": {
     "build": "ember build",
@@ -15,18 +15,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-backgrounds": "5.1.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.1.0-alpha.39",
-    "@storybook/addon-centered": "5.1.0-alpha.36",
+    "@storybook/addon-centered": "5.1.0-alpha.39",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-links": "5.1.0-alpha.36",
+    "@storybook/addon-links": "5.1.0-alpha.39",
-    "@storybook/addon-notes": "5.1.0-alpha.36",
+    "@storybook/addon-notes": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/addon-storysource": "5.1.0-alpha.36",
+    "@storybook/addon-storysource": "5.1.0-alpha.39",
-    "@storybook/addon-viewport": "5.1.0-alpha.36",
+    "@storybook/addon-viewport": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/ember": "5.1.0-alpha.36",
+    "@storybook/ember": "5.1.0-alpha.39",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^5.2.0",

examples/html-kitchen-sink/.storybook/config.js

@@ -1,6 +1,16 @@
-import { configure, addParameters } from '@storybook/html';
+import { configure, addParameters, addDecorator } from '@storybook/html';
+import { withA11y } from '@storybook/addon-a11y';
+
+addDecorator(withA11y);
 
 addParameters({
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
   html: {
     preventForcedRender: false, // default
   },

examples/html-kitchen-sink/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,23 +14,23 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-backgrounds": "5.1.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.1.0-alpha.39",
-    "@storybook/addon-centered": "5.1.0-alpha.36",
+    "@storybook/addon-centered": "5.1.0-alpha.39",
-    "@storybook/addon-events": "5.1.0-alpha.36",
+    "@storybook/addon-events": "5.1.0-alpha.39",
-    "@storybook/addon-jest": "5.1.0-alpha.36",
+    "@storybook/addon-jest": "5.1.0-alpha.39",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-links": "5.1.0-alpha.36",
+    "@storybook/addon-links": "5.1.0-alpha.39",
-    "@storybook/addon-notes": "5.1.0-alpha.36",
+    "@storybook/addon-notes": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/addon-storyshots": "5.1.0-alpha.36",
+    "@storybook/addon-storyshots": "5.1.0-alpha.39",
-    "@storybook/addon-storysource": "5.1.0-alpha.36",
+    "@storybook/addon-storysource": "5.1.0-alpha.39",
-    "@storybook/addon-viewport": "5.1.0-alpha.36",
+    "@storybook/addon-viewport": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
-    "@storybook/core": "5.1.0-alpha.36",
+    "@storybook/core": "5.1.0-alpha.39",
-    "@storybook/core-events": "5.1.0-alpha.36",
+    "@storybook/core-events": "5.1.0-alpha.39",
-    "@storybook/html": "5.1.0-alpha.36",
+    "@storybook/html": "5.1.0-alpha.39",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2"

examples/marko-cli/.storybook/addons.js

@@ -2,3 +2,4 @@ import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-a11y/register';

examples/marko-cli/.storybook/config.js

@@ -1,5 +1,7 @@
-import { configure, addParameters } from '@storybook/marko';
+import { configure, addParameters, addDecorator } from '@storybook/marko';
+import { withA11y } from '@storybook/addon-a11y';
 
+addDecorator(withA11y);
 addParameters({
   options: {
     hierarchyRootSeparator: /\|/,

examples/marko-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "5.1.0-alpha.36",
+  "version": "5.1.0-alpha.39",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -24,12 +24,13 @@
     "marko-starter": "^2.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.0-alpha.36",
+    "@storybook/addon-a11y": "5.1.0-alpha.39",
-    "@storybook/addon-knobs": "5.1.0-alpha.36",
+    "@storybook/addon-actions": "5.1.0-alpha.39",
-    "@storybook/addon-options": "5.1.0-alpha.36",
+    "@storybook/addon-knobs": "5.1.0-alpha.39",
-    "@storybook/addon-storysource": "5.1.0-alpha.36",
+    "@storybook/addon-options": "5.1.0-alpha.39",
-    "@storybook/addons": "5.1.0-alpha.36",
+    "@storybook/addon-storysource": "5.1.0-alpha.39",
-    "@storybook/marko": "5.1.0-alpha.36",
+    "@storybook/addons": "5.1.0-alpha.39",
+    "@storybook/marko": "5.1.0-alpha.39",
     "prettier": "^1.16.4",
     "webpack": "^4.28.0"
   }