mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Merge branch 'next' into pr/cam-stitt/6698
This commit is contained in:
Norbert de Langen
commit
152d836322
@ -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)
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -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)
|
||||
}
|
||||
})
|
||||
@ -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"),
|
||||
|
||||
@ -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")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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) |+| |+|+|+|+|+|+| | |+|+|
|
||||
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[actions](addons/actions) |+|+*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|+|
|
||||
|[contexts](addons/contexts) |+| |+| | | | | | | | |+|
|
||||
|
||||
63
CHANGELOG.md
63
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))
|
||||
* Angular: Allow optional component declaration ([#6346](https://github.com/storybooks/storybook/pull/6346))
|
||||
- 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))
|
||||
|
||||
### 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))
|
||||
* 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-a11y: Design enhancements ([#6563](https://github.com/storybooks/storybook/pull/6563))
|
||||
- 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))
|
||||
- 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))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 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 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: `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 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))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* 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: deploy to local registry ([#6619](https://github.com/storybooks/storybook/pull/6619))
|
||||
- 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: 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 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 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 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)
|
||||
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"axe-core": "^3.2.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.5",
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export * from './constants';
|
||||
export * from './models';
|
||||
export * from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.4",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36"
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"global": "*",
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4"
|
||||
|
||||
@ -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/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -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/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^7.0.0",
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4",
|
||||
|
||||
@ -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/client-api": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/client-api": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^2.6.5",
|
||||
"escape-html": "^1.0.3",
|
||||
|
||||
@ -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/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/router": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/router": "5.1.0-alpha.39",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/router": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/router": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.9.3",
|
||||
|
||||
32
addons/ondevice-actions/README.md
Normal file
32
addons/ondevice-actions/README.md
Normal file
@ -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.
|
||||
38
addons/ondevice-actions/package.json
Normal file
38
addons/ondevice-actions/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
1
addons/ondevice-actions/register.js
Normal file
1
addons/ondevice-actions/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist').register();
|
||||
173
addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
Normal file
173
addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
Normal file
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
13
addons/ondevice-actions/src/index.tsx
Normal file
13
addons/ondevice-actions/src/index.tsx
Normal file
@ -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} />,
|
||||
});
|
||||
});
|
||||
}
|
||||
8
addons/ondevice-actions/tsconfig.json
Normal file
8
addons/ondevice-actions/tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/__tests__/**/*"]
|
||||
}
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 {
|
||||
component,
|
||||
template,
|
||||
props,
|
||||
moduleMetadata = {},
|
||||
requiresComponentDeclaration = true,
|
||||
} = storyObj;
|
||||
const { component, template, props, moduleMetadata = {} } = storyObj;
|
||||
|
||||
const isCreatingComponentFromTemplate = Boolean(template);
|
||||
|
||||
@ -46,10 +86,17 @@ export const initModuleData = (storyObj: NgStory): any => {
|
||||
? createComponentFromTemplate(template)
|
||||
: component;
|
||||
|
||||
const componentDeclarations =
|
||||
isCreatingComponentFromTemplate || requiresComponentDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
const componentRequiesDeclaration =
|
||||
isCreatingComponentFromTemplate ||
|
||||
!getExistenceOfComponentInModules(
|
||||
component,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
);
|
||||
|
||||
const componentDeclarations = componentRequiesDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
|
||||
const story = {
|
||||
component: AnnotatedComponent,
|
||||
|
||||
@ -12,7 +12,6 @@ export interface ICollection {
|
||||
|
||||
export interface NgStory {
|
||||
component?: any;
|
||||
requiresComponentDeclaration?: boolean;
|
||||
props: ICollection;
|
||||
propsMeta?: ICollection;
|
||||
moduleMetadata?: NgModuleMetadata;
|
||||
|
||||
@ -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/router": "5.1.0-alpha.36",
|
||||
"@storybook/node-logger": "5.1.0-alpha.39",
|
||||
"@storybook/router": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"jest-image-snapshot": "^2.8.1",
|
||||
"puppeteer": "^1.12.2",
|
||||
|
||||
@ -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/components": "5.1.0-alpha.36",
|
||||
"@storybook/router": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/router": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -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/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/components": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/components": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
1
app/angular/index.d.ts
vendored
1
app/angular/index.d.ts
vendored
@ -45,7 +45,6 @@ export interface IStory {
|
||||
props?: ICollection;
|
||||
moduleMetadata?: Partial<NgModuleMetadata>;
|
||||
component?: any;
|
||||
requiresComponentDeclaration?: boolean;
|
||||
template?: string;
|
||||
}
|
||||
|
||||
|
||||
@ -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/node-logger": "5.1.0-alpha.36",
|
||||
"@storybook/core": "5.1.0-alpha.39",
|
||||
"@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",
|
||||
|
||||
@ -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 {
|
||||
component,
|
||||
template,
|
||||
props,
|
||||
styles,
|
||||
moduleMetadata = {},
|
||||
requiresComponentDeclaration = true,
|
||||
} = storyObj;
|
||||
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
|
||||
|
||||
const isCreatingComponentFromTemplate = Boolean(template);
|
||||
|
||||
@ -64,10 +104,17 @@ const initModule = (storyFn: IStoryFn) => {
|
||||
? createComponentFromTemplate(template, styles)
|
||||
: component;
|
||||
|
||||
const componentDeclarations =
|
||||
isCreatingComponentFromTemplate || requiresComponentDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
const componentRequiesDeclaration =
|
||||
isCreatingComponentFromTemplate ||
|
||||
!getExistenceOfComponentInModules(
|
||||
component,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
);
|
||||
|
||||
const componentDeclarations = componentRequiesDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
|
||||
const story = {
|
||||
component: AnnotatedComponent,
|
||||
|
||||
@ -12,7 +12,6 @@ export interface ICollection {
|
||||
|
||||
export interface NgStory {
|
||||
component?: any;
|
||||
requiresComponentDeclaration?: boolean;
|
||||
props: ICollection;
|
||||
propsMeta?: ICollection;
|
||||
moduleMetadata?: NgModuleMetadata;
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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/api": "5.1.0-alpha.36",
|
||||
"@storybook/channel-websocket": "5.1.0-alpha.36",
|
||||
"@storybook/core": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/ui": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/api": "5.1.0-alpha.39",
|
||||
"@storybook/channel-websocket": "5.1.0-alpha.39",
|
||||
"@storybook/core": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/ui": "5.1.0-alpha.39",
|
||||
"commander": "^2.19.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
|
||||
@ -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];
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
api.emit(Events.SET_CURRENT_STORY, { kind, story });
|
||||
}
|
||||
return <PreviewHelp />;
|
||||
}}
|
||||
@ -75,9 +61,7 @@ export default class ReactProvider extends Provider {
|
||||
|
||||
handleAPI(api) {
|
||||
addons.loadAddons(api);
|
||||
|
||||
api.onStory((kind, story) => {
|
||||
this.selection = { kind, story };
|
||||
api.on(Events.STORY_CHANGED, () => {
|
||||
api.emit(Events.SET_CURRENT_STORY, this.selection);
|
||||
});
|
||||
api.on(Events.GET_CURRENT_STORY, () => {
|
||||
|
||||
@ -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",
|
||||
"@storybook/channel-websocket": "5.1.0-alpha.36",
|
||||
"@storybook/channels": "5.1.0-alpha.36",
|
||||
"@storybook/client-api": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@emotion/native": "^10.0.10",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/channel-websocket": "5.1.0-alpha.39",
|
||||
"@storybook/channels": "5.1.0-alpha.39",
|
||||
"@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"
|
||||
},
|
||||
|
||||
@ -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 }
|
||||
}
|
||||
>
|
||||
|
||||
@ -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]}>
|
||||
<Text style={style.text}>No addons loaded.</Text>
|
||||
</View>
|
||||
<NoAddonContainer>
|
||||
<Label>No addons loaded.</Label>
|
||||
</NoAddonContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={style.flex}>
|
||||
<Container>
|
||||
<AddonsList
|
||||
onPressAddon={this.onPressAddon}
|
||||
panels={this.panels}
|
||||
addonSelected={addonSelected}
|
||||
/>
|
||||
<AddonWrapper addonSelected={addonSelected} panels={this.panels} />
|
||||
</View>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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({
|
||||
list: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: 'white',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e6e6e6',
|
||||
},
|
||||
});
|
||||
const Container = styled.View`
|
||||
flex-direction: row;
|
||||
border-bottom-width: 1;
|
||||
border-bottom-color: ${(props: EmotionProps) => props.theme.borderColor};
|
||||
`;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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}>
|
||||
{panels[id].render({ active: selected, key: id })}
|
||||
</ScrollView>
|
||||
<ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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 = [
|
||||
style.flex,
|
||||
tabOpen !== 0 && style.previewMinimized,
|
||||
getPreviewScale(this.animatedValue, slideBetweenAnimation),
|
||||
];
|
||||
const previewStyles = [{ flex: 1 }, 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)}>
|
||||
|
||||
@ -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({
|
||||
bar: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 8,
|
||||
backgroundColor: 'white',
|
||||
borderBottomWidth: 1,
|
||||
borderTopWidth: 1,
|
||||
borderBottomColor: '#e6e6e6',
|
||||
borderTopColor: '#e6e6e6',
|
||||
},
|
||||
});
|
||||
const Container = styled.View`
|
||||
flex-direction: row;
|
||||
padding-horizontal: 8;
|
||||
background: ${(props: EmotionProps) => props.theme.backgroundColor};
|
||||
border-top-width: 1;
|
||||
border-bottom-width: 1;
|
||||
border-color: ${(props: EmotionProps) => props.theme.borderColor};
|
||||
`;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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({
|
||||
text: {
|
||||
color: '#999999',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 10,
|
||||
fontSize: 11,
|
||||
},
|
||||
underline: {
|
||||
height: 3,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
});
|
||||
type EmotionButtonProps = EmotionProps & { active: boolean };
|
||||
|
||||
const ActiveBorder = styled.View`
|
||||
background: ${(props: EmotionButtonProps) =>
|
||||
props.active ? props.theme.borderColor : 'transparent'};
|
||||
height: 3;
|
||||
`;
|
||||
|
||||
const ButtonText = styled.Text`
|
||||
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}>
|
||||
<Text
|
||||
style={[
|
||||
style.text,
|
||||
active && {
|
||||
color: 'rgb(68, 68, 68)',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
<View
|
||||
style={[
|
||||
style.underline,
|
||||
active && {
|
||||
backgroundColor: '#e6e6e6',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<TouchableOpacity onPress={this.onPress} activeOpacity={0.8}>
|
||||
<ButtonText active={active}>{children}</ButtonText>
|
||||
<ActiveBorder active={active} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Text, TouchableOpacity } from 'react-native';
|
||||
import style from '../style';
|
||||
import { TouchableOpacity } from 'react-native';
|
||||
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>
|
||||
</TouchableOpacity>
|
||||
<HideIcon>□</HideIcon>
|
||||
</Touchable>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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({
|
||||
panel: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
borderWidth: 1,
|
||||
borderTopWidth: 1,
|
||||
borderBottomWidth: 0,
|
||||
borderColor: '#e6e6e6',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
});
|
||||
const Container: typeof Animated.View = styled(Animated.View)`
|
||||
background: ${(props: EmotionProps) => props.theme.backgroundColor};
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
style: any[];
|
||||
@ -18,7 +13,7 @@ interface Props {
|
||||
|
||||
export default class Panel extends PureComponent<Props> {
|
||||
render() {
|
||||
const { children, style: propsStyle } = this.props;
|
||||
return <Animated.View style={[style.panel, ...propsStyle]}>{children}</Animated.View>;
|
||||
const { children, style } = this.props;
|
||||
return <Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
19
app/react-native/src/preview/components/Shared/text.ts
Normal file
19
app/react-native/src/preview/components/Shared/text.ts
Normal file
@ -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};
|
||||
`;
|
||||
13
app/react-native/src/preview/components/Shared/theme.ts
Normal file
13
app/react-native/src/preview/components/Shared/theme.ts
Normal file
@ -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;
|
||||
}
|
||||
@ -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}>
|
||||
<Text style={[style.headerText, selected && style.headerTextSelected]}>{title}</Text>
|
||||
</View>
|
||||
<HeaderContainer key={title}>
|
||||
<Header selected={selected}>{title}</Header>
|
||||
</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>
|
||||
</TouchableOpacity>
|
||||
<Name selected={selected}>{title}</Name>
|
||||
</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}>
|
||||
<TextInput
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<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}
|
||||
|
||||
@ -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',
|
||||
},
|
||||
});
|
||||
@ -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>
|
||||
) : (
|
||||
|
||||
@ -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',
|
||||
},
|
||||
});
|
||||
@ -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
|
||||
stories={preview._stories}
|
||||
url={webUrl}
|
||||
isUIHidden={params.isUIHidden}
|
||||
tabOpen={params.tabOpen}
|
||||
getInitialStory={
|
||||
setInitialStory
|
||||
? preview._getInitialStory(initialSelection, shouldPersistSelection)
|
||||
: null
|
||||
}
|
||||
shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
|
||||
keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
|
||||
/>
|
||||
<ThemeProvider theme={appliedTheme}>
|
||||
<OnDeviceUI
|
||||
stories={preview._stories}
|
||||
url={webUrl}
|
||||
isUIHidden={params.isUIHidden}
|
||||
tabOpen={params.tabOpen}
|
||||
getInitialStory={
|
||||
setInitialStory
|
||||
? preview._getInitialStory(initialSelection, shouldPersistSelection)
|
||||
: null
|
||||
}
|
||||
shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
|
||||
keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return <StoryView url={webUrl} listenToEvents />;
|
||||
return (
|
||||
<ThemeProvider theme={appliedTheme}>
|
||||
<StoryView url={webUrl} listenToEvents />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
3
app/react-native/src/typings.d.ts
vendored
3
app/react-native/src/typings.d.ts
vendored
@ -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';
|
||||
|
||||
@ -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/node-logger": "5.1.0-alpha.36",
|
||||
"@storybook/core": "5.1.0-alpha.39",
|
||||
"@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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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))"}}
|
||||
@ -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-ondevice-backgrounds": "5.1.0-alpha.36",
|
||||
"@storybook/addon-ondevice-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-ondevice-notes": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/react-native": "5.1.0-alpha.36",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-ondevice-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.39",
|
||||
"@storybook/addon-ondevice-knobs": "5.1.0-alpha.39",
|
||||
"@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",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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-backgrounds": "5.1.0-alpha.36",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.36",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.36",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-links": "5.1.0-alpha.36",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/angular": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.39",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.39",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-links": "5.1.0-alpha.39",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.39",
|
||||
"@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",
|
||||
|
||||
@ -33,17 +33,12 @@ storiesOf('Custom|Feature Module as Context', module)
|
||||
};
|
||||
return {
|
||||
component: ChipsGroupComponent,
|
||||
requiresComponentDeclaration: false,
|
||||
props,
|
||||
};
|
||||
},
|
||||
{
|
||||
notes: `
|
||||
This component includes a child component, a pipe, and a default provider, all which come from
|
||||
the specified feature module.
|
||||
|
||||
This behavior is possible by setting the "requiresComponentDeclaration" flag to false.
|
||||
`.replace(/ {1,}/g, ' '),
|
||||
notes: `This component includes a child component, a pipe, and a default provider, all which come from
|
||||
the specified feature module.`,
|
||||
}
|
||||
)
|
||||
.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,
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { configure, addParameters, addDecorator } from '@storybook/react';
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
import { withA11y } from '@storybook/addon-a11y';
|
||||
|
||||
addDecorator(withA11y);
|
||||
|
||||
@ -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-actions": "5.1.0-alpha.36",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.36",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.36",
|
||||
"@storybook/addon-events": "5.1.0-alpha.36",
|
||||
"@storybook/addon-info": "5.1.0-alpha.36",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.36",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-links": "5.1.0-alpha.36",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/client-logger": "5.1.0-alpha.36",
|
||||
"@storybook/react": "5.1.0-alpha.36",
|
||||
"@storybook/theming": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.39",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.39",
|
||||
"@storybook/addon-events": "5.1.0-alpha.39",
|
||||
"@storybook/addon-info": "5.1.0-alpha.39",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-links": "5.1.0-alpha.39",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.39",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/client-logger": "5.1.0-alpha.39",
|
||||
"@storybook/react": "5.1.0-alpha.39",
|
||||
"@storybook/theming": "5.1.0-alpha.39",
|
||||
"react-scripts": "^2.1.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-options/register';
|
||||
import '@storybook/addon-a11y/register';
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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-info": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/react": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-info": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@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",
|
||||
|
||||
@ -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: /\/|\./,
|
||||
|
||||
@ -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-actions": "5.1.0-alpha.36",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.36",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.36",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-links": "5.1.0-alpha.36",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.36",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/ember": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.39",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-links": "5.1.0-alpha.39",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.39",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.39",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/ember": "5.1.0-alpha.39",
|
||||
"babel-loader": "^8",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"cross-env": "^5.2.0",
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -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-actions": "5.1.0-alpha.36",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.36",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.36",
|
||||
"@storybook/addon-events": "5.1.0-alpha.36",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.36",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-links": "5.1.0-alpha.36",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.36",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/core": "5.1.0-alpha.36",
|
||||
"@storybook/core-events": "5.1.0-alpha.36",
|
||||
"@storybook/html": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-backgrounds": "5.1.0-alpha.39",
|
||||
"@storybook/addon-centered": "5.1.0-alpha.39",
|
||||
"@storybook/addon-events": "5.1.0-alpha.39",
|
||||
"@storybook/addon-jest": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-links": "5.1.0-alpha.39",
|
||||
"@storybook/addon-notes": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storyshots": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.39",
|
||||
"@storybook/addon-viewport": "5.1.0-alpha.39",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/core": "5.1.0-alpha.39",
|
||||
"@storybook/core-events": "5.1.0-alpha.39",
|
||||
"@storybook/html": "5.1.0-alpha.39",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"format-json": "^1.0.3",
|
||||
"global": "^4.3.2"
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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: /\|/,
|
||||
|
||||
@ -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-knobs": "5.1.0-alpha.36",
|
||||
"@storybook/addon-options": "5.1.0-alpha.36",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.36",
|
||||
"@storybook/addons": "5.1.0-alpha.36",
|
||||
"@storybook/marko": "5.1.0-alpha.36",
|
||||
"@storybook/addon-a11y": "5.1.0-alpha.39",
|
||||
"@storybook/addon-actions": "5.1.0-alpha.39",
|
||||
"@storybook/addon-knobs": "5.1.0-alpha.39",
|
||||
"@storybook/addon-options": "5.1.0-alpha.39",
|
||||
"@storybook/addon-storysource": "5.1.0-alpha.39",
|
||||
"@storybook/addons": "5.1.0-alpha.39",
|
||||
"@storybook/marko": "5.1.0-alpha.39",
|
||||
"prettier": "^1.16.4",
|
||||
"webpack": "^4.28.0"
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user