GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 15:11:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/angular/support-base-url' into support-base-url

Browse Source
This commit is contained in:
Kai Röder 2018-10-08 23:58:37 +02:00
commit 7d36825036
472 changed files with 2211 additions and 14230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.bithoundrc
View File

@ -1,19 +0,0 @@
{
"ignore": [
"addons/**/.storybook/**/*.js",
"lib/cli/generators/**/.stories/**.js",
"*.ts"
],
"critics": {
"wc": {
"limit": 500
}
},
"dependencies": {
"mute": [
"shelljs",
"eslint-plugin-json",
"remark-lint-code-eslint"
]
}
}

1
.remarkignore Normal file
View File

@ -0,0 +1 @@
CHANGELOG.md

1
.teamcity/OpenSourceProjects_Storybook/Project.kt vendored
View File

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

6
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt vendored
View File

@ -37,7 +37,6 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
}
retryBuild {
delaySeconds = 60
enabled = false
}
}
@ -106,5 +105,10 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
onDependencyCancel = FailureAction.ADD_PROBLEM
}
}
dependency(OpenSourceProjects_Storybook.buildTypes.OpenSourceProjects_Storybook_CliTest) {
snapshot {
onDependencyCancel = FailureAction.ADD_PROBLEM
}
}
}
})

69
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliSmokeTest.kt vendored
View File

@ -1,69 +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
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
object OpenSourceProjects_Storybook_CliSmokeTest : BuildType({
uuid = "b1db1a3a-a4cf-46ea-8f55-98b86611f92f"
id = "OpenSourceProjects_Storybook_CliSmokeTest"
name = "CLI smoke tests"
vcs {
root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
}
steps {
script {
name = "Bootstrap"
scriptContent = """
yarn
yarn bootstrap --core
""".trimIndent()
dockerImage = "andthensome/docker-node-rsync"
}
script {
name = "Test"
scriptContent = "yarn --cwd lib/cli test -s"
dockerImage = "andthensome/docker-node-rsync"
}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:comment=^TeamCity change:**"
branchFilter = """
+:pull/*
+:release/*
+:master
+:dependencies.io-*
""".trimIndent()
}
retryBuild {}
}
features {
commitStatusPublisher {
publisher = github {
githubUrl = "https://api.github.com"
authType = personalToken {
token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
}
}
param("github_oauth_user", "Hypnosphi")
}
}
requirements {
doesNotContain("env.OS", "Windows")
}
cleanup {
artifacts(days = 1)
}
})

16
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTest.kt vendored
View File

@ -21,6 +21,8 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
script {
name = "Bootstrap"
scriptContent = """
set -e -x
yarn
yarn bootstrap --core
""".trimIndent()
@ -33,20 +35,6 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:comment=^TeamCity change:**"
branchFilter = """
+:pull/*
+:release/*
+:master
+:dependencies.io-*
""".trimIndent()
}
retryBuild {}
}
features {
commitStatusPublisher {
publisher = github {

2
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt vendored
View File

@ -4,6 +4,7 @@ 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
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
@ -37,6 +38,7 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:comment=^TeamCity change:**"
}
retryBuild {}
}
features {

40
CHANGELOG.md
View File

@ -1,3 +1,43 @@
# 4.0.0-alpha.22
2018-September-19
#### Features
- Storyshots: story params support [#4176](https://github.com/storybooks/storybook/pull/4176)
- Addon-options: story params support [#3965](https://github.com/storybooks/storybook/pull/3965)
- Presets - API generalization [#4173](https://github.com/storybooks/storybook/pull/4173)
- start-storybook: open browser tab on first compilation [#4149](https://github.com/storybooks/storybook/pull/4149)
- start-storybook: suggest an alternative when the port is occupied [#4146](https://github.com/storybooks/storybook/pull/4146)
- Merge webpack optimisation configs [#4121](https://github.com/storybooks/storybook/pull/4121)
#### Bug Fixes
- Angular cli - fix prebuild [#4187](https://github.com/storybooks/storybook/pull/4187)
- Presets - add babelDefault extension [#4155](https://github.com/storybooks/storybook/pull/4155)
- CHANGE index.html.ejs to use files over chunks && UPGRADE generate-page-webpack-plugin [#4134](https://github.com/storybooks/storybook/pull/4134)
- Allow replacing of stories (with warning rather than error) [#4061](https://github.com/storybooks/storybook/pull/4061)
#### Maintenance
- CLI refactor [#4168](https://github.com/storybooks/storybook/pull/4168)
- Fix linter warnings [#4172](https://github.com/storybooks/storybook/pull/4172)
- Remove gh-pages deploy in favor of netlify [#4128](https://github.com/storybooks/storybook/pull/4128)
#### Dependency Upgrades
- [core]: widen `airbnb-js-shims` dep range [#4189](https://github.com/storybooks/storybook/pull/4189)
- Updating react-split-pane to version 0.1.84 [#4153](https://github.com/storybooks/storybook/pull/4153)
- Riot tag loader missing in cli [#4122](https://github.com/storybooks/storybook/pull/4122)
# 3.4.11
2018-September-17
#### Dependencies
- Allow v1 or v2 in airbnb-js-shims [#4190](https://github.com/storybooks/storybook/pull/4190)
# 4.0.0-alpha.21
2018-September-07

8
CONTRIBUTING.md
View File

@ -312,6 +312,14 @@ The current manual release sequence is as follows:
- Clean, build and publish the release
- Cut and paste the changelog to the github release page, and mark it as a (pre-) release
**NOTE:** The very first time you publish a scoped package (`@storybook/x`) you need to make sure that it's package.json contains the following
```js
"publishConfig": {
"access": "public"
}
```
This sequence applies to both releases and pre-releases, but differs slightly between the two.
**NOTE: This is a work in progress. Don't try this unless you know what you're doing. We hope to automate this in CI, so this process is designed with that in mind.**

2
MIGRATION.md
View File

@ -207,7 +207,7 @@ To update your app to use the new package names, you can use the cli:
npm install --global @storybook/cli
# if you run this inside a v2 app, it should perform the necessary codemods.
getstorybook
storybook init
```
#### Details

9
README.md
View File

@ -41,6 +41,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct
- [Addons](#addons)
- [Live Examples](#live-examples) 💪
- [Badges](#badges)
- [Community](#community)
- [Contributing](#contributing)
- [Development scripts](#development-scripts)
- [Backers](#backers)
@ -150,6 +151,14 @@ We have a badge ! Link it to your live Storybook example.
[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
```
## Community
- Tweeting via [@storybookjs](https://twitter.com/storybookjs)
- Blogging at [Medium](https://medium.com/storybookjs)
- Chatting on [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
- Discussions on [Discord](https://discord.gg/sMFvFsG)
- Streaming saved at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
## Contributing
[![Good First Issue](https://img.shields.io/github/issues/storybooks/storybook/good%20first%20issue.svg)](https://github.com/storybooks/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)

13
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -11,6 +11,9 @@
"verify"
],
"homepage": "https://github.com/storybooks/storybook#readme",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -26,10 +29,10 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/client-logger": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"axe-core": "^3.0.3",
"global": "^4.3.2",
"prop-types": "^15.6.2"

11
addons/actions/package.json
View File

@ -1,11 +1,14 @@
{
"name": "@storybook/addon-actions",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -23,9 +26,9 @@
"@emotion/core": "^0.13.0",
"@emotion/provider": "0.11.1",
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"deep-equal": "^1.0.1",
"global": "^4.3.2",
"lodash.isequal": "^4.5.0",

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -8,7 +8,10 @@
"react",
"storybook"
],
"homepage": "https://storybook.js.org",
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/backgrounds",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -25,15 +28,12 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"vue": "^2.5.17"
},
"peerDependencies": {
"react": "*"
}

17
addons/centered/package.json
View File

@ -1,7 +1,22 @@
{
"name": "@storybook/addon-centered",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/centered",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
"main": "dist/index.js",

15
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -8,9 +8,16 @@
"react",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/events",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "git@github.com:storybooks/storybook.git"
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"main": "dist/index.js",
@ -20,8 +27,8 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"format-json": "^1.0.3",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4",

6
addons/graphql/package.json
View File

@ -1,11 +1,15 @@
{
"name": "@storybook/addon-graphql",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},

19
addons/info/package.json
View File

@ -1,7 +1,18 @@
{
"name": "@storybook/addon-info",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/info",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -14,9 +25,9 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/client-logger": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"core-js": "2.5.7",
"global": "^4.3.2",
"marksy": "^6.0.3",

114
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -1,6 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`addon Info should render <Info /> and external markdown 1`] = `
.emotion-4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: .88em;
font-family: Menlo,Monaco,"Courier New",monospace;
background-color: #fafafa;
padding: .5rem;
line-height: 1.5;
overflow-x: scroll;
}
.emotion-2 {
overflow: hidden;
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 13px;
padding: 3px 10px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.emotion-2:hover {
background-color: #f4f7fa;
border-color: #ddd;
}
.emotion-2:active {
background-color: #e9ecef;
border-color: #ccc;
}
.emotion-0 {
-webkit-transition: -webkit-transform .2s ease;
-webkit-transition: transform .2s ease;
transition: transform .2s ease;
height: 16px;
-webkit-transform: translateY(-100%) translateY(-6px);
-ms-transform: translateY(-100%) translateY(-6px);
transform: translateY(-100%) translateY(-6px);
}
<deprecated>
<Story
PropTable={[Function]}
@ -1262,6 +1319,63 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
`;
exports[`addon Info should render <Info /> and markdown 1`] = `
.emotion-4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: .88em;
font-family: Menlo,Monaco,"Courier New",monospace;
background-color: #fafafa;
padding: .5rem;
line-height: 1.5;
overflow-x: scroll;
}
.emotion-2 {
overflow: hidden;
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 13px;
padding: 3px 10px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.emotion-2:hover {
background-color: #f4f7fa;
border-color: #ddd;
}
.emotion-2:active {
background-color: #e9ecef;
border-color: #ccc;
}
.emotion-0 {
-webkit-transition: -webkit-transform .2s ease;
-webkit-transition: transform .2s ease;
transition: transform .2s ease;
height: 16px;
-webkit-transform: translateY(-100%) translateY(-6px);
-ms-transform: translateY(-100%) translateY(-6px);
transform: translateY(-100%) translateY(-6px);
}
<deprecated>
<Story
PropTable={[Function]}

17
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -11,11 +11,16 @@
"storybook",
"unit-testing"
],
"homepage": "https://storybook.js.org",
"bugs": "https://github.com/storybooks/storybook",
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/jest",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/storybooks/storybook"
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
@ -26,8 +31,8 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"

22
addons/knobs/package.json
View File

@ -1,7 +1,18 @@
{
"name": "@storybook/addon-knobs",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/knobs",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -14,9 +25,9 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"copy-to-clipboard": "^3.0.8",
"escape-html": "^1.0.3",
"fast-deep-equal": "^2.0.1",
@ -28,9 +39,6 @@
"react-lifecycles-compat": "^3.0.4",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"vue": "^2.5.17"
},
"peerDependencies": {
"react": "*"
}

12
addons/links/package.json
View File

@ -1,11 +1,15 @@
{
"name": "@storybook/addon-links",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/links",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -20,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"global": "^4.3.2",
"prop-types": "^15.6.2"
},

11
addons/notes/package.json
View File

@ -1,12 +1,19 @@
{
"name": "@storybook/addon-notes",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
"notes",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/notes",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -19,7 +26,7 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"marked": "^0.5.0",
"prop-types": "^15.6.2"
},

8
addons/options/package.json
View File

@ -1,11 +1,15 @@
{
"name": "@storybook/addon-options",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Options addon for storybook",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/options",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -19,7 +23,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"util-deprecate": "^1.0.2"
},
"peerDependencies": {

120
addons/storyshots/storyshots-core/README.md
View File

@ -185,6 +185,122 @@ initStoryshots({
})
```
### StoryShots for async rendered components
You can make use of [Jest done callback](https://jestjs.io/docs/en/asynchronous) to test components that render asynchronously. This callback is passed as param to test method passed to `initStoryshots(...)` when the `asyncJest` option is given as true.
#### Example
The following example shows how we can use the **done callback** to take StoryShots of a [Relay](http://facebook.github.io/relay/) component. Each kind of story is written into its own snapshot file with the use of `getSnapshotFileName`.
Add _stories of UserForm_ in the file: UserForm.story.jsx
```jsx
/* global module */
import React from "react";
import { QueryRenderer } from "react-relay";
import { storiesOf } from "@storybook/react";
// Use the same queries used in YOUR app routes
import { newUserFormQuery, editUserFormQuery } from "app/routes";
import UserFormContainer from "app/users/UserForm";
// YOUR function to generate a Relay Environment mock.
// See https://github.com/1stdibs/relay-mock-network-layer for more info
import getEnvironment from "test/support/relay-environment-mock";
// User test data YOU generated for your tests
import { user } from "test/support/data/index";
// Use this function to return a new Environment for each story
const Environment = () =>
getEnvironment({
mocks: {
Node: () => ({ __typename: "User" }),
User: () => user
}
});
/**
NOTICE that the QueryRenderer render its children via its render props.
If we don't take the StoryShot async then we will only see the QueryRenderer in the StoryShot.
The following QueryRenderer returns null in the first render (it can be a loading indicator instead in real file) and then when it gets the data to respond to query, it renders again with props containing the data for the Component
*/
const renderStory = (query, environment, variables = {}) => (
<QueryRenderer
environment={environment}
query={query}
variables={variables}
render={({ props, error }) => {
if (error) {
console.error(error);
} else if (props) {
return <UserFormContainer {...props} />;
}
return null;
}}
/>
);
storiesOf("users/UserForm", module)
.add("New User", () => {
const environment = new Environment();
return renderStory(newUserFormQuery, environment);
})
.add("Editing User", () => {
const environment = new Environment();
return renderStory(editUserFormQuery, environment, { id: user.id });
})
```
Then, init Storyshots for async component in the file: StoryShots.test.js
```jsx
import initStoryshots, { Stories2SnapsConverter } from "@storybook/addon-storyshots";
import { mount } from "enzyme";
import toJson from "enzyme-to-json";
// Runner
initStoryshots({
asyncJest: true, // this is the option that activates the async behaviour
test: ({
story,
context,
done // --> callback passed to test method when asyncJest option is true
}) => {
const converter = new Stories2SnapsConverter();
const snapshotFilename = converter.getSnapshotFileName(context);
const storyElement = story.render(context);
// mount the story
const tree = mount(storyElement);
// wait until the mount is updated, in our app mostly by Relay
// but maybe something else updating the state of the component
// somewhere
const waitTime = 1;
setTimeout(() => {
if (snapshotFilename) {
expect(toJson(tree.update())).toMatchSpecificSnapshot(snapshotFilename);
}
done();
}, waitTime)
},
// other options here
});
```
NOTICE that When using the `asyncJest: true` option, you also must specify a `test` method that calls the `done()` callback.
This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
Whenever you change you're data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
## Options
### `config`
@ -429,3 +545,7 @@ initStoryshots({
}
});
```
### `asyncJest`
Enables Jest `done()` callback in the StoryShots tests for async testing. See [StoryShots for async rendered components](#storyshots-for-async-rendered-components) for more info.

21
addons/storyshots/storyshots-core/package.json
View File

@ -1,7 +1,18 @@
{
"name": "@storybook/addon-storyshots",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshorts/storyshots-core",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -17,17 +28,17 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"glob": "^7.1.3",
"global": "^4.3.2",
"jest-specific-snapshot": "^1.0.0",
"read-pkg-up": "^4.0.0"
},
"devDependencies": {
"@storybook/addon-actions": "4.0.0-alpha.21",
"@storybook/addon-links": "4.0.0-alpha.21",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.20",
"@storybook/react": "4.0.0-alpha.21",
"@storybook/react": "4.0.0-alpha.22",
"enzyme-to-json": "^3.3.4",
"react": "^16.4.2"
}

2
addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.js
View File

@ -23,6 +23,7 @@ function getIntegrityOptions({ integrityOptions }) {
function ensureOptionsDefaults(options) {
const {
suite = 'Storyshots',
asyncJest,
storyNameRegex,
storyKindRegex,
renderer,
@ -34,6 +35,7 @@ function ensureOptionsDefaults(options) {
const integrityOptions = getIntegrityOptions(options);
return {
asyncJest,
suite,
storyNameRegex,
storyKindRegex,

2
addons/storyshots/storyshots-core/src/api/index.js
View File

@ -32,6 +32,7 @@ function testStorySnapshots(options = {}) {
}
const {
asyncJest,
suite,
storyNameRegex,
storyKindRegex,
@ -50,6 +51,7 @@ function testStorySnapshots(options = {}) {
snapshotsTests({
groups: storiesGroups,
asyncJest,
suite,
framework,
storyKindRegex,

38
addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.js
View File

@ -1,17 +1,35 @@
import { describe, it } from 'global';
function snapshotTest({ story, kind, fileName, framework, testMethod, testMethodParams }) {
function snapshotTest({
asyncJest,
story,
kind,
fileName,
framework,
testMethod,
testMethodParams,
}) {
const { name } = story;
const context = { fileName, kind, story: name, framework };
it(name, () => {
const context = { fileName, kind, story: name, framework };
return testMethod({
story,
context,
...testMethodParams,
});
});
if (asyncJest === true) {
it(name, done =>
testMethod({
done,
story,
context,
...testMethodParams,
})
);
} else {
it(name, () =>
testMethod({
story,
context,
...testMethodParams,
})
);
}
}
function snapshotTestSuite({ kind, stories, suite, storyNameRegex, ...restParams }) {

90
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -1,6 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<ForwardRef
onClick={[Function]}
>
@ -23,6 +33,16 @@ exports[`Storyshots Another Button with some emoji 1`] = `
`;
exports[`Storyshots Another Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<ForwardRef
onClick={[Function]}
>
@ -39,7 +59,23 @@ exports[`Storyshots Another Button with text 1`] = `
</ForwardRef>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<AsyncTestComponent>
<h1 />
</AsyncTestComponent>
`;
exports[`Storyshots Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<ForwardRef
onClick={[Function]}
>
@ -62,6 +98,16 @@ exports[`Storyshots Button with some emoji 1`] = `
`;
exports[`Storyshots Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<ForwardRef
onClick={[Function]}
>
@ -79,6 +125,50 @@ exports[`Storyshots Button with text 1`] = `
`;
exports[`Storyshots Welcome to Storybook 1`] = `
.emotion-18 {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
}
.emotion-2 {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.emotion-4 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
border-top: none;
border-right: none;
border-left: none;
background-color: transparent;
padding: 0;
cursor: pointer;
font: inherit;
}
.emotion-12 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
}
.emotion-16 {
opacity: 0.5;
}
<Welcome
showApp={[Function]}
>

6
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
View File

@ -21,6 +21,12 @@ exports[`Storyshots Another Button with text 1`] = `
</Styled(button)>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
<Styled(button)
onClick={[Function]}

6
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
View File

@ -21,6 +21,12 @@ exports[`Storyshots Another Button with text 1`] = `
</Styled(button)>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
<Styled(button)
onClick={[Function]}

31
addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
export const EXPECTED_VALUE = 'THIS IS SO DONE';
export const TIMEOUT = 5;
class AsyncTestComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
value: EXPECTED_VALUE,
});
}, TIMEOUT);
}
render() {
const { value } = this.state;
return <h1>{value}</h1>;
}
}
storiesOf('Async', module).add(`with ${TIMEOUT}ms timeout simulating async operation`, () => (
<AsyncTestComponent />
));

9
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<AsyncTestComponent>
<h1>
THIS IS SO DONE
</h1>
</AsyncTestComponent>
`;

7
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;

7
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;

47
addons/storyshots/storyshots-core/stories/storyshot.async.test.js Normal file
View File

@ -0,0 +1,47 @@
import path from 'path';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import initStoryshots, { Stories2SnapsConverter } from '../src';
import { TIMEOUT, EXPECTED_VALUE } from './required_with_context/Async.stories';
initStoryshots({
asyncJest: true,
framework: 'react',
integrityOptions: false,
configPath: path.join(__dirname, '..', '.storybook'),
// When async is true we need to provide a test method that
// calls done() when at the end of the test method
test: ({ story, context, done }) => {
expect(done).toBeDefined();
// This is a storyOf Async (see ./required_with_context/Async.stories)
if (context.kind === 'Async') {
const converter = new Stories2SnapsConverter({ snapshotExtension: '.async.storyshot' });
const snapshotFilename = converter.getSnapshotFileName(context);
const storyElement = story.render(context);
// Mount the component
let wrapper = mount(storyElement);
// The Async component should not contain the expected value
expect(wrapper.find('AsyncTestComponent').contains(EXPECTED_VALUE)).toBe(false);
// wait until the "Async" component is updated
setTimeout(() => {
// Update the wrapper with the changes in the underlying component
wrapper = wrapper.update();
// Assert the expected value and the corresponding snapshot
expect(wrapper.find('AsyncTestComponent').contains(EXPECTED_VALUE)).toBe(true);
expect(toJson(wrapper)).toMatchSpecificSnapshot(snapshotFilename);
// finally mark test as done
done();
}, TIMEOUT);
} else {
// If not async just mark the test as done
done();
}
},
});

3
addons/storyshots/storyshots-core/stories/storyshot.test.js
View File

@ -4,7 +4,8 @@ import initStoryshots, { multiSnapshotWithOptions } from '../src';
// with react-test-renderer
initStoryshots({
framework: 'react',
integrityOptions: { cwd: __dirname },
// Ignore integrityOptions for async.storyshot because only run when asyncJest is true
integrityOptions: { cwd: __dirname, ignore: ['**/**.async.storyshot'] },
configPath: path.join(__dirname, '..', '.storybook'),
test: multiSnapshotWithOptions(),
});

2
addons/storyshots/storyshots-puppeteer/README.md
View File

@ -34,7 +34,7 @@ import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
```
The above config will use _<https://my-specific-domain.com:9010>_ for screenshots.
The above config will use _<https://my-specific-domain.com:9010>_ for screenshots. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
You may also use a local static build of storybook if you do not want to run the webpack dev-server:

15
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,7 +1,18 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshorts/storyshots-puppeteer",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -14,7 +25,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/node-logger": "4.0.0-alpha.21",
"@storybook/node-logger": "4.0.0-alpha.22",
"jest-image-snapshot": "^2.5.0",
"puppeteer": "^1.6.2"
},

49
addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js Normal file
View File

@ -0,0 +1,49 @@
import { constructUrl } from '../url';
describe('Construct URL for Storyshots', () => {
it('can use a url without path and without query params', () => {
expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory'
);
});
it('can use a url without path (but slash) and without query params', () => {
expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory'
);
});
it('can use a url without path and with query params', () => {
expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
);
});
it('can use a url without path (buth slash) and with query params', () => {
expect(constructUrl('http://localhost:9001/?hello=world', 'someKind', 'someStory')).toEqual(
'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
);
});
it('can use a url with some path and query params', () => {
expect(
constructUrl('http://localhost:9001/nice-path?hello=world', 'someKind', 'someStory')
).toEqual(
'http://localhost:9001/nice-path/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
);
});
it('can use a url with some path (slash) and query params', () => {
expect(
constructUrl('http://localhost:9001/nice-path/?hello=world', 'someKind', 'someStory')
).toEqual(
'http://localhost:9001/nice-path/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
);
});
it('can use a url with file protocol', () => {
expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
'file://users/storybook/iframe.html?selectedKind=someKind&selectedStory=someStory'
);
});
});

7
addons/storyshots/storyshots-puppeteer/src/index.js
View File

@ -1,6 +1,7 @@
import puppeteer from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { logger } from '@storybook/node-logger';
import { constructUrl } from './url';
expect.extend({ toMatchImageSnapshot });
@ -43,11 +44,7 @@ export const imageSnapshot = (customConfig = {}) => {
return;
}
const encodedKind = encodeURIComponent(kind);
const encodedStoryName = encodeURIComponent(story);
const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
const url = storybookUrl + storyUrl;
const url = constructUrl(storybookUrl, kind, story);
if (!browser || !page) {
logger.error(

11
addons/storyshots/storyshots-puppeteer/src/url.js Normal file
View File

@ -0,0 +1,11 @@
import { URL } from 'url';
export const constructUrl = (storybookUrl, kind, story) => {
const encodedKind = encodeURIComponent(kind);
const encodedStoryName = encodeURIComponent(story);
const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
const { protocol, host, pathname, search } = new URL(storybookUrl);
const pname = pathname.replace(/\/$/, ''); // removes trailing /
const query = search.replace('?', '&'); // convert leading ? to &
return `${protocol}//${host}${pname}${storyUrl}${query}`;
};

10
addons/storysource/package.json
View File

@ -1,11 +1,15 @@
{
"name": "@storybook/addon-storysource",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Stories addon for storybook",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storysource",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -21,8 +25,8 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"estraverse": "^4.2.0",
"loader-utils": "^1.1.0",
"prettier": "^1.14.0",

20
addons/viewport/package.json
View File

@ -1,10 +1,22 @@
{
"name": "@storybook/addon-viewport",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/viewport",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"main": "preview.js",
"scripts": {
@ -12,9 +24,9 @@
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/components": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"

2
app/angular/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-angular-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

15
app/angular/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/angular",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/angular",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -23,10 +29,11 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/node-logger": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/node-logger": "4.0.0-alpha.22",
"angular2-template-loader": "^0.6.2",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"fork-ts-checker-webpack-plugin": "^0.4.9",
"core-js": "^2.5.7",
"global": "^4.3.2",
"react": "^16.4.2",
@ -44,6 +51,6 @@
"@angular/forms": ">=6.0.0",
"@angular/platform-browser": ">=6.0.0",
"@angular/platform-browser-dynamic": ">=6.0.0",
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6"
"babel-loader": "^7.0.0 || ^8.0.0"
}
}

6
app/angular/src/server/angular-cli_config.js vendored
View File

@ -28,12 +28,12 @@ function getTsConfigOptions(tsConfigPath) {
function getAngularCliParts(cliWebpackConfigOptions) {
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
const ngcliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
try {
return {
cliCommonConfig: ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
cliStyleConfig: ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
};
} catch (e) {
return null;

13
app/angular/src/server/create-fork-ts-checker-plugin.js vendored Normal file
View File

@ -0,0 +1,13 @@
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { logger } from '@storybook/node-logger';
export default function(tsLoaderOptions) {
if (tsLoaderOptions && tsLoaderOptions.configFile) {
return new ForkTsCheckerWebpackPlugin({
tsconfig: tsLoaderOptions.configFile,
});
}
logger.info('=> Using default options for ForkTsCheckerWebpackPlugin');
return new ForkTsCheckerWebpackPlugin();
}

31
app/angular/src/server/create-fork-ts-checker-plugin.test.js Normal file
View File

@ -0,0 +1,31 @@
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import getTsLoaderOptions from './ts_config';
import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: () => 'tsconfig.json',
}));
const setupFiles = files => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
describe('create-fork-ts-checker-plugin.test', () => {
it('should create a ForkTsCheckerWebpackPlugin instance', () => {
setupFiles({ 'tsconfig.json': '{}' });
const tsLoaderOptions = getTsLoaderOptions('.foo');
const instance = createForkTsCheckerInstance(tsLoaderOptions);
expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
expect(instance.tsconfig).toEqual(tsLoaderOptions.configFile);
});
it('should create a ForkTsCheckerWebpackPlugin instance without passing options', () => {
const instance = createForkTsCheckerInstance({});
expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
});
});

7
app/angular/src/server/framework-preset-angular.js vendored
View File

@ -1,8 +1,10 @@
import path from 'path';
import { ContextReplacementPlugin } from 'webpack';
import loadTsConfig from './ts_config';
import getTsLoaderOptions from './ts_config';
import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
export function webpack(config, { configDir }) {
const tsLoaderOptions = getTsLoaderOptions(configDir);
return {
...config,
module: {
@ -14,7 +16,7 @@ export function webpack(config, { configDir }) {
use: [
{
loader: require.resolve('ts-loader'),
options: loadTsConfig(configDir),
options: tsLoaderOptions,
},
require.resolve('angular2-template-loader'),
],
@ -45,6 +47,7 @@ export function webpack(config, { configDir }) {
/@angular(\\|\/)core(\\|\/)fesm5/,
path.resolve(__dirname, '..')
),
createForkTsCheckerInstance(tsLoaderOptions),
],
};
}

13
app/angular/src/server/ts_config.js vendored
View File

@ -13,13 +13,14 @@ function resolveTsConfig(tsConfigPath) {
}
export default function(configDir) {
const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
const tsLoaderOptions = {
transpileOnly: true,
};
const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
if (!configFile) {
return {};
if (configFilePath) {
tsLoaderOptions.configFile = configFilePath;
}
return {
configFile,
};
return tsLoaderOptions;
}

13
app/angular/src/server/ts_config.test.js
View File

@ -1,4 +1,4 @@
import loadTsConfig from './ts_config';
import getTsLoaderOptions from './ts_config';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
@ -15,18 +15,21 @@ describe('ts_config', () => {
it('should return the config with the path to the tsconfig.json', () => {
setupFiles({ 'tsconfig.json': '{}' });
const config = loadTsConfig('.foo');
const config = getTsLoaderOptions('.foo');
expect(config).toEqual({
transpileOnly: true,
configFile: 'tsconfig.json',
});
});
it('should return empty object when there is no tsconfig.json', () => {
it('should return object with transpileOnly: true when there is no tsconfig.json', () => {
setupFiles({});
const config = loadTsConfig('.foo');
const config = getTsLoaderOptions('.foo');
expect(config).toEqual({});
expect(config).toEqual({
transpileOnly: true,
});
});
});

4
app/html/README.md
View File

@ -13,9 +13,9 @@ So you can develop UI components in isolation without worrying about app specifi
## Getting Started
```sh
npm i -g @storybook/cli
npm i -g @storybook/cli@alpha
cd my-app
getstorybook --html
storybook init --html
```
For more information visit: [storybook.js.org](https://storybook.js.org)

12
app/html/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/html",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/html",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -22,7 +28,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"html-loader": "^0.5.5",
@ -30,6 +36,6 @@
"react-dom": "^16.4.2"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6"
"babel-loader": "^7.0.0 || ^8.0.0"
}
}

2
app/marko/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-marko-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

12
app/marko/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/marko",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -23,7 +29,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"marko-loader": "^1.3.3",
@ -32,7 +38,7 @@
"react-dom": "^16.4.2"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"marko": "^4.10.0",
"marko-widgets": "^7.0.1"
}

2
app/mithril/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-mithril-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

12
app/mithril/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/mithril",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -24,7 +30,7 @@
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",
@ -34,7 +40,7 @@
"mithril": "^1.1.6"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"mithril": "^1.1.6"
}
}

2
app/polymer/README.md
View File

@ -15,7 +15,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-polymer-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

14
app/polymer/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/polymer",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/polymer",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -23,7 +29,7 @@
"dependencies": {
"@babel/polyfill": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"global": "^4.3.2",
@ -36,8 +42,8 @@
"polymer-webpack-loader": "^2.0.3"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"lit-html": "0.10.0",
"polymer-webpack-loader": "2.0.2"
"polymer-webpack-loader": "^2.0.2"
}
}

15
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -8,6 +8,9 @@
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -25,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/channel-websocket": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core-events": "4.0.0-alpha.21",
"@storybook/ui": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/channel-websocket": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@storybook/ui": "4.0.0-alpha.22",
"babel-loader": "^7.1.5",
"babel-plugin-macros": "^2.3.0",
"babel-plugin-syntax-async-functions": "^6.13.0",

6
app/react-native/readme.md
View File

@ -8,11 +8,11 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
## Getting Started
The `getstorybook` tool can be used to add Storybook to your React Native app. Install the `getstorybook` tool if necessary and run it from your project directory with these commands:
The `storybook` CLI tool can be used to add Storybook to your React Native app. Install the `storybook` tool if necessary and run it from your project directory with these commands:
```shell
npm -g i @storybook/cli
getstorybook
storybook init
```
After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook)
@ -20,7 +20,7 @@ to see the next step.
## Create React Native App (CRNA)
If you run `getstorybook` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
If you run `storybook init` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:

2
app/react/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-react-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

13
app/react/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/react",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -26,17 +32,16 @@
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@emotion/styled": "0.10.5",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"babel-plugin-react-docgen": "^2.0.0-babel7.0",
"common-tags": "^1.8.0",
"emotion": "^9.2.6",
"global": "^4.3.2",
"lodash.flattendeep": "^4.4.0",
"prop-types": "^15.6.2",
"react-dev-utils": "6.0.0-next.3e165448"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"react": ">=15.0.0",
"react-dom": ">=15.0.0"
}

2
app/riot/README.md
View File

@ -15,7 +15,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

21
app/riot/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/riot",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/riot",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -22,7 +28,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"moment": "^2.22.2",
@ -31,16 +37,15 @@
"react-dom": "^16.4.2"
},
"devDependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/plugin-transform-modules-commonjs": "^7.1.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.0.0",
"cross-env": "^5.2.0"
"@babel/runtime": "^7.0.0"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"riot": "^3.0.0 || ^4.0.0",
"riot-compiler": "^3.5.1 || ^4.0.0",
"riot-hot-reload": "^1.0.0",

2
app/svelte/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-svelte-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

12
app/svelte/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/svelte",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/svelte",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -22,7 +28,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",
@ -33,7 +39,7 @@
"svelte-loader": "^2.11.0"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"babel-loader": "^7.0.0 || ^8.0.0",
"svelte": "^2.7.2",
"svelte-loader": "^2.9.1"
}

2
app/vue/README.md
View File

@ -13,7 +13,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
npm i -g @storybook/cli
cd my-vue-app
getstorybook
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

18
app/vue/package.json
View File

@ -1,8 +1,14 @@
{
"name": "@storybook/vue",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybooks/storybook/tree/master/app/vue",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
@ -23,7 +29,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.21",
"@storybook/core": "4.0.0-alpha.22",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",
@ -36,9 +42,9 @@
"vue-template-compiler": "^2.5.17"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
"vue": "2.5.16",
"vue-loader": "15.x.x",
"vue-template-compiler": "2.5.16"
"babel-loader": "^7.0.0 || ^8.0.0",
"vue": ">=2.5.16",
"vue-loader": ">=15.x.x",
"vue-template-compiler": ">=2.5.16"
}
}

2
docs/gatsby-config.js
View File

@ -34,7 +34,7 @@ module.exports = {
'/testing/react-ui-testing/',
'/testing/structural-testing/',
'/testing/interaction-testing/',
'/testing/css-style-testing/',
'/testing/automated-visual-testing/',
'/testing/manual-testing/',
],
addons: [

2
docs/package.json
View File

@ -24,7 +24,7 @@
"@storybook/addons": "^3.4.8",
"@storybook/react": "^3.4.8",
"babel-loader": "^6.4.1",
"bootstrap": "^3.3.7",
"bootstrap": "^4.1.3",
"gatsby": "^1.9.273",
"gatsby-link": "^1.6.45",
"gatsby-plugin-sharp": "^1.6.48",

2
docs/src/components/Footer/index.js
View File

@ -7,7 +7,7 @@ import './style.css';
const Footer = () => (
<div id="footer" className="row">
<div className="col-md-12">
<div className="row logos">
<div className="logos">
<div className="col-xs-12">
<center>
Maintained by the <Link to="/basics/community/">Storybook Community</Link>.

6
docs/src/components/Header/index.js
View File

@ -27,20 +27,20 @@ class Header extends React.Component {
render() {
const { currentSection } = this.props;
let titleClassname = 'pull-left';
let titleClassname = 'float-left';
if (currentSection === 'home') {
titleClassname += ' hide';
}
return (
<div id="header" className="row">
<div className="col-xs-12">
<div className="col-xs-12 col-md-12">
<div id="header-title" className={titleClassname}>
<Link to="/">
<img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
</Link>
</div>
<div id="header-links" className="pull-right">
<div id="header-links" className="float-right">
{this.renderSections()}
</div>
</div>

4
docs/src/components/Header/style.css
View File

@ -25,13 +25,13 @@
margin: 50px 0 20px;
}
#header .pull-right {
#header .float-right {
float: none !important;
clear: both !important;
text-align: center;
}
#header .pull-left {
#header .float-left {
float: none !important;
clear: both !important;
}

2
docs/src/components/Homepage/Demo/index.js
View File

@ -4,7 +4,7 @@ import './style.css';
const Demo = () => (
<div id="demo" className="row">
<div className="col-xs-12">
<div className="col-xs-12 col-sm-12">
<center>
<img className="demo-img" src={demoImg} alt="" />
</center>

4
docs/src/components/Homepage/Heading/index.js
View File

@ -5,9 +5,9 @@ import storybookLogo from '../../../design/homepage/storybook-logo.svg';
const Heading = () => (
<div id="heading" className="row">
<div className="col-xs-12">
<div className="col-xs-12 col-sm-12">
<img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
<h3 className="sb-tagline">
<h3 className="mt-4 sb-tagline">
The UI Development Environment
<br />
You'll ♥️ to use

2
docs/src/components/Homepage/MainLinks/index.js
View File

@ -48,7 +48,7 @@ class MainLinks extends React.Component {
transform: 'rotateY(180deg)',
}}
/>
<div className="col-xs-12 read-docs">
<div className="col-xs-12 col-sm-12 read-docs">
<h2 style={{ color: '#6DABF5' }}>Documentation</h2>
<div
className="form-group has-feedback"

22
docs/src/components/Homepage/MainLinks/style.css
View File

@ -32,6 +32,28 @@
margin: 40px auto;
}
.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
font-size: inherit;
height: auto;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
@media only screen and (max-width: 700px) {
#main-links .col-xs-6 {
margin: auto !important;

6
docs/src/pages/addons/addon-gallery/index.md
View File

@ -146,3 +146,9 @@ styled components theme selection.
### [AngularJS](https://github.com/titonobre/storybook-addon-angularjs)
Create stories with AngularJS(1.x) components.
### [JSS theme](https://github.com/vertexbz/storybook-addon-jss-theme)
JSS theme selection.
### [React live edit](https://github.com/vertexbz/storybook-addon-react-live-edit)
Provides live react story editing and preview.

2
docs/src/pages/addons/api/index.md
View File

@ -140,7 +140,7 @@ addonAPI.register('my-organisation/my-addon', storybookAPI => {
});
```
### storybookAPI.getURLState(overrideParams)
### storybookAPI.getUrlState(overrideParams)
This method allows you to get application url state with some changed params. For example, if you want to get a link to a particular story:

2
docs/src/pages/addons/writing-addons/index.md
View File

@ -118,7 +118,7 @@ Then add the following code to the register.js.
```js
import React from 'react';
import addons from '@storybook/addons';
import styled from 'emotion';
import styled from '@emotion/styled';
const NotesPanel = styled.div({
margin: 10,

25
docs/src/pages/basics/guide-angular/index.md
View File

@ -73,6 +73,31 @@ That'll load stories in `../src/stories/index.ts`.
Just like that, you can load stories from wherever you want to.
## Storybook TypeScript configuration
**Note:** You only need this if you are using Storybook `>= 4.0.0-alpha.23`.
`@storybook/angular` is using [ForkTsCheckerWebpackPlugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to boost the build performance.
This makes it necessary to create a `tsconfig.json` file at `.storybook/tsconfig.json` with the following content:
```json
{
"extends": "../tsconfig.json",
"exclude": [
"../src/test.ts",
"../src/**/*.spec.ts",
"../projects/**/*.spec.ts"
],
"include": [
"../src/**/*",
"../projects/**/*"
]
}
```
> Only files that are included in the `include` or `files` section are checked for semantic TypeScript errors.
> For more information visit the [ForkTsCheckerWebpackPlugin documentation](https://github.com/Realytics/fork-ts-checker-webpack-plugin#modules-resolution).
## Write your stories
Now you can write some stories inside the `../src/stories/index.ts` file, like this:

200
docs/src/pages/testing/automated-visual-testing/index.md Normal file
View File

@ -0,0 +1,200 @@
---
id: 'automated-visual-testing'
title: 'Automated Visual Testing'
---
Automated Visual Testing is a quality assurance process meant to automatically verify that a UI visually appears as intended. There are many alternative names for this process, such as Visual Regression Testing, Visual Validation Testing, Visual UI Testing, or just simply Visual Testing, but in all cases we're talking about confirming the thing your users will see—the actual pixels—without caring about how it's generated.
## Benefits
The largest benefit to Automated Visual Testing is that they can often supersede other, more brittle tests. Instead of asserting specific CSS rules, selectors, and HTML markup, you assert that something visually appears as expected. If you refactor style, markup, or state logic, but visually nothing changes, you wouldn't need to modify any tests or update visual baselines! In a majority of cases, what a user _sees_ is what you really care about, not how it was achieved.
Another potential benefit is with cross-browser testing. If you perform your visual tests against multiple browsers, they can potentially catch regressions a developer didn't because it appeared correct in their preferred development browser.
## Challenges
The biggest challenge with Automated Visual Testing is that humans and machines perceive pixels differently. Two screenshots of a UI could appear entirely identical to a human but 100% different to a simple 1:1, naive diffing algorithm.
For example, changes in [anti-aliasing](https://en.wikipedia.org/wiki/Spatial_anti-aliasing) are common, even if human eyes don't notice them.
![Menu before and after differences](../static/image-diff-1.png)
![Close-up of menu before and after differences](../static/image-diff-2.png)
Even though we didn't change any CSS and the menus appear visually the same to our eyes, if we just compare their pixels 1:1 we find that lots of it has changed! This can happen between browser versions, underlying hardware changes on your cloud platform, and more.
Similar situations happen all the time, such as how images, drop shadows, etc are rendered.
Some more robust libraries and services solve this by using a combination of [Machine Learning](https://wikipedia.org/wiki/Machine_learning) and [heuristics](https://wikipedia.org/wiki/Heuristic_(computer_science)). The machine is trained what is and is not an acceptable variation.
For example, every graphics card renders text and images differently at the pixel level. Your machine will likely have a different graphics card than the testing server and the other developers. While the naked eye can't tell the difference, a machine needs to be trained to "see" them like we do.
Another issue is that these tests are often slow compared to more lightweight unit tests that don't require a full browser. So you might only run them when you commit, push, and/or on your Continuous Integration (CI) server.
## Libraries and Services with Storybook Integration
There are many libraries and services that have Storybook integrations out-of-box, with varying levels of sophistication. Some even use complex Machine Learning instead of 1:1 pixel comparison.
Here are some in alphabetical order:
- [Applitools](https://applitools.com/storybook)
- [Chromatic](https://www.chromaticqa.com)
- [Loki](https://loki.js.org/)
- [Percy](https://docs.percy.io/docs/storybook-for-react)
- [Screener](https://screener.io/v2/docs)
- [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with its [seamless integration](https://github.com/storybooks/storybook/tree/master/addons/storyshots#configure-storyshots-for-image-snapshots) with [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
## Custom Solutions
There are a number of popular libraries that don't offer out-of-box integration with Storybook, but still can be used to visual test it. [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini), for example, but there are quite a few!
Storybook's web server supports the ability to render a component story standalone, in any particular state, without any of the Storybook layout elements. With these special URLs you can either create your own screenshots and diff them, or use a library which does that work for you.
Let's take a look at an example, in this case using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)—but the idea is similar for most of them.
> Most custom solutions, including jest-image-snapshot, do 1:1 pixel comparisons which may suffer from issues described in the **Challenges** section above.
### Example using Puppeteer and Jest
Here's a sample Storybook we'd like to visually test:
![Storybook Screenshot](../static/storybook-screenshot.png)
The Storybook UI has a bunch of elements you wouldn't want to include in your visual test. Besides being extraneous, your tests could incorrectly fail when you add a new, unrelated story or state because it would show up in the side menu.
Instead, we'll want to render a component's story by itself. Let's assume the above Storybook runs on port 9009 and we can access it via http://localhost:9009/.
Now let's pick a single story: the "with text" story of the Button.
The URL for that story contains a number of query parameters, but the first two are the most important: http://localhost:9009/?selectedKind=Button&selectedStory=with+text
- selectedKind=Button
- selectedStory=with+text
Using these two parameters we can generate the URL to render the story by itself. Instead of the URL's path being the homepage/index we use `/iframe.html`:
http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text
![Storybook iframe Screenshot](../static/storybook-iframe-screenshot.png)
Now that we know how to render the story by itself, let's get our testing environment all set up.
For this example, we're going to use a number of packages:
* [jest](https://jestjs.io/)
- Testing framework by Facebook
* [puppeteer](https://developers.google.com/web/tools/puppeteer/)
- Library by Google for controlling a [headless](https://wikipedia.org/wiki/Headless_software) Chrome browser.
* [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer)
- Integration between Jest and Puppeteer
* [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
- Image snapshot assertion helper
* [start-server-and-test](https://github.com/bahmutov/start-server-and-test)
- Used to start/stop our Storybook server automatically for our tests
> Even though we're choosing Jest/Puppeteer in this example, the principles are the same with other solutions.
Let's go ahead and add all of these:
```
npm install --save-dev jest puppeteer jest-puppeteer jest-image-snapshot start-server-and-test
```
There's a bit of setup code that needs to run before your tests, so we'll need to configure a Jest setup file to run first, if you haven't already. This is done with the [`setupTestFrameworkScriptFile` config property](https://jestjs.io/docs/en/configuration.html#setuptestframeworkscriptfile-string), either in your package.json or in your `jest.config.js`. We'll also set `"preset": "jest-puppeteer"` so that we get the nice integration from jest-puppeteer.
#### `integration/jest.config.js`
```js
module.exports = {
preset: 'jest-puppeteer',
testRegex: './*\\.test\\.js$',
setupTestFrameworkScriptFile: './setupTests.js'
};
```
With our configuration in place, we can create our file at `integration/setupTests.js` and add the necessary setup logic:
#### `integration/setupTests.js`
```js
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
```
Finally, we'll create some npm scripts for us to kick everything off with [start-server-and-test](https://github.com/bahmutov/start-server-and-test):
#### `package.json`
```json
{
"name": "my-app",
"scripts": {
"jest:integration": "jest -c integration/jest.config.js",
"test:integration": "start-server-and-test storybook http-get://localhost:9009 jest:integration",
"storybook": "start-storybook -p 9009 -s public",
}
}
```
Now we're ready to write our first visual snapshot test!
#### `integration/Button.test.js`
```js
describe('Button', () => {
it('visually looks correct', async () => {
// APIs from jest-puppeteer
await page.goto('http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text');
const image = await page.screenshot();
// API from jest-image-snapshot
expect(image).toMatchImageSnapshot();
});
});
```
Go ahead and run it:
```bash
npm run test:integration
```
```
info Storybook started on => http://localhost:9009/
PASS integration/app.test.js
Button
✓ visually looks correct (699ms)
› 1 snapshot written.
Snapshot Summary
› 1 snapshot written from 1 test suite.
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 written, 1 total
Time: 1.528s, estimated 2s
Ran all test suites.
```
The first time we run a test it will create a new image snapshot to use as the baseline for subsequent test runs. Try changing the style of your story's component and running it again. You should get something like this:
```
FAIL integration/app.test.js
Button
✕ visually looks correct (880ms)
● Button › visually looks correct
Expected image to match or be a close match to snapshot but was 0.03625% different from snapshot (174 differing pixels).
See diff for details: /my-app/integration/__image_snapshots__/__diff_output__/app-test-js-button-visually-looks-correct-1-diff.png
```
If this should become the new baseline, we can tell Jest to update them:
```
npm run jest:integration -- -updateSnapshot
```
We're all set, but keep in mind the [challenges](#challenges) of doing 1:1 pixel matching!

35
docs/src/pages/testing/css-style-testing/index.md
View File

@ -1,35 +0,0 @@
---
id: 'css-style-testing'
title: 'CSS/Style Testing'
---
We can also use Storybook as the base for CSS/Style testing with stories as the base. For information on how to correctly apply all of your styles as well as styles from CSS frameworks like Boostrap, Semantic UI or similar check the [configurations section](https://storybook.js.org/configurations/default-config/#css-support). Back to CSS/Style testing: let's have a look at the following Storybook.
![Storybook Screenshot](../static/storybook-screenshot.png)
In that, you can see the Storybook's manager UI. It has UI elements that are not related to your app. However, there's a way to access just a single story.
For an example, let's assume the above storybook runs on port 9009 and we can access it via [http://localhost:9009](http://localhost:9009/).
Then Let's pick a single story: the "with text" story of the Button. So, in this case:
- selectedKind = Button
- selectedStory = with text
Then, we can see the above story using the following URL:
<http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text&dataId=0>
![Storybook Iframe Screenshot](../static/storybook-iframe-screenshot.png)
Just like that, you can access all of the stories in your Storybook and use them as a base for visual regression testing.
## Supported CSS/Style Testing Frameworks
There are several frameworks that have out of the box Storybook integrations:
- [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with its [seamless integration](https://github.com/storybooks/storybook/tree/master/addons/storyshots#configure-storyshots-for-image-snapshots) with [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
- [Loki](https://loki.js.org/)
- [Percy](https://docs.percy.io/docs/storybook-for-react)
- [Screener](https://screener.io/v2/docs)
- [Chromatic](https://www.chromaticqa.com)
Additionally frameworks which are based on URL as the input source such as [BackstopJS](https://github.com/garris/BackstopJS) or [Gemini](https://github.com/gemini-testing/gemini) can be used.

2
docs/src/pages/testing/react-ui-testing/index.md
View File

@ -85,5 +85,5 @@ Let's look at how Storybook can help you do the above mentioned different asp
- [Structural Testing with StoryShots](/testing/structural-testing)
- [Interaction Testing with Specs Addon](/testing/interaction-testing)
- [Storybook as the Base for CSS/Style Testing](/testing/css-style-testing)
- [Storybook as the Base for Automated Visual Testing](/testing/automated-visual-testing)
- [Storybook for Manual UI Testing](/testing/manual-testing)

BIN
docs/src/pages/testing/static/image-diff-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
docs/src/pages/testing/static/image-diff-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
docs/src/pages/testing/static/image-diff-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

6
docs/yarn.lock
View File

@ -1961,9 +1961,9 @@ boom@5.x.x:
dependencies:
hoek "4.x.x"
bootstrap@^3.3.7:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
bootstrap@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
bowser@^1.0.0, bowser@^1.7.3:
version "1.7.3"

1
examples/angular-cli/.gitignore vendored
View File

@ -37,3 +37,4 @@ testem.log
# System Files
.DS_Store
Thumbs.db
addon-jest.testresults.json

1
examples/angular-cli/addon-jest.testresults.json
View File

@ -1 +0,0 @@
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":2,"numPassedTests":6,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTotalTestSuites":2,"numTotalTests":6,"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeys":[],"unmatched":0,"updated":0},"startTime":1530735099028,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1530735101239,"message":"","name":"/Users/jetbrains/IdeaProjects/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1530735099689,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1530735101514,"message":"","name":"/Users/jetbrains/IdeaProjects/storybook/examples/angular-cli/dist/app/app.component.spec.ts","startTime":1530735101249,"status":"passed","summary":""}],"wasInterrupted":false}

2
examples/angular-cli/angularshots.test.js
View File

@ -1,6 +1,8 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
jest.mock('./addon-jest.testresults.json', () => ({}), { virtual: true });
initStoryshots({
framework: 'angular',
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },

33
examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"private": true,
"license": "MIT",
"scripts": {
@ -29,12 +29,11 @@
],
"testPathIgnorePatterns": [
"/node_modules/",
"/build/",
"/storybook-static/",
"angularshots.test.js"
"angularshots.test.js",
"dist"
],
"transform": {
".(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
"^.+\\.(ts|js|html)$": "<rootDir>/../../node_modules/jest-preset-angular/preprocessor.js"
}
},
@ -55,20 +54,18 @@
"@angular-devkit/build-angular": "^0.7.5",
"@angular/cli": "^6.1.5",
"@angular/compiler-cli": "^6.1.4",
"@storybook/addon-actions": "4.0.0-alpha.21",
"@storybook/addon-backgrounds": "4.0.0-alpha.21",
"@storybook/addon-centered": "4.0.0-alpha.21",
"@storybook/addon-jest": "4.0.0-alpha.21",
"@storybook/addon-knobs": "4.0.0-alpha.21",
"@storybook/addon-links": "4.0.0-alpha.21",
"@storybook/addon-notes": "4.0.0-alpha.21",
"@storybook/addon-options": "4.0.0-alpha.21",
"@storybook/addon-storyshots": "4.0.0-alpha.21",
"@storybook/addon-storysource": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/angular": "4.0.0-alpha.21",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "^2.0.3",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-backgrounds": "4.0.0-alpha.22",
"@storybook/addon-centered": "4.0.0-alpha.22",
"@storybook/addon-jest": "4.0.0-alpha.22",
"@storybook/addon-knobs": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addon-notes": "4.0.0-alpha.22",
"@storybook/addon-options": "4.0.0-alpha.22",
"@storybook/addon-storyshots": "4.0.0-alpha.22",
"@storybook/addon-storysource": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/angular": "4.0.0-alpha.22",
"@types/jest": "^23.3.1",
"@types/node": "~10.9.2",
"@types/storybook__addon-options": "^3.2.2",

32
examples/cra-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -18,21 +18,21 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
"@storybook/addon-a11y": "4.0.0-alpha.21",
"@storybook/addon-actions": "4.0.0-alpha.21",
"@storybook/addon-backgrounds": "4.0.0-alpha.21",
"@storybook/addon-centered": "4.0.0-alpha.21",
"@storybook/addon-events": "4.0.0-alpha.21",
"@storybook/addon-info": "4.0.0-alpha.21",
"@storybook/addon-jest": "4.0.0-alpha.21",
"@storybook/addon-knobs": "4.0.0-alpha.21",
"@storybook/addon-links": "4.0.0-alpha.21",
"@storybook/addon-notes": "4.0.0-alpha.21",
"@storybook/addon-options": "4.0.0-alpha.21",
"@storybook/addon-storyshots": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/client-logger": "4.0.0-alpha.21",
"@storybook/react": "4.0.0-alpha.21",
"@storybook/addon-a11y": "4.0.0-alpha.22",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-backgrounds": "4.0.0-alpha.22",
"@storybook/addon-centered": "4.0.0-alpha.22",
"@storybook/addon-events": "4.0.0-alpha.22",
"@storybook/addon-info": "4.0.0-alpha.22",
"@storybook/addon-jest": "4.0.0-alpha.22",
"@storybook/addon-knobs": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addon-notes": "4.0.0-alpha.22",
"@storybook/addon-options": "4.0.0-alpha.22",
"@storybook/addon-storyshots": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/react": "4.0.0-alpha.22",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.0",
"enzyme-to-json": "^3.3.4",

2
examples/crna-kitchen-sink/README.md
View File

@ -1,3 +1,3 @@
# CRNA Kitchen Sink
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli).
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [storybook CLI](https://www.npmjs.com/package/@storybook/cli).

36
examples/html-kitchen-sink/package.json
View File

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

2
examples/marko-cli/README.md
View File

@ -1,3 +1,3 @@
# Marko Kitchen Sink
This project was bootstrapped with [Marko cli (create command)](https://github.com/marko-js/marko-cli) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli).
This project was bootstrapped with [Marko cli (create command)](https://github.com/marko-js/marko-cli) and storybook using [storybook CLI](https://www.npmjs.com/package/@storybook/cli).

14
examples/marko-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "marko-cli",
"version": "4.0.0-alpha.21",
"version": "4.0.0-alpha.22",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@ -22,12 +22,12 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
"@storybook/addon-actions": "4.0.0-alpha.21",
"@storybook/addon-knobs": "4.0.0-alpha.21",
"@storybook/addon-options": "4.0.0-alpha.21",
"@storybook/addon-storysource": "4.0.0-alpha.21",
"@storybook/addons": "4.0.0-alpha.21",
"@storybook/marko": "4.0.0-alpha.21",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-knobs": "4.0.0-alpha.22",
"@storybook/addon-options": "4.0.0-alpha.22",
"@storybook/addon-storysource": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/marko": "4.0.0-alpha.22",
"prettier": "^1.14.0",
"webpack": "^4.17.1"
}

Some files were not shown because too many files have changed in this diff Show More