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

Merge branch 'next' into core/no-persist-theme

Browse Source
This commit is contained in:
Norbert de Langen 2020-03-18 14:26:45 +01:00
commit 2d59bc0c96
456 changed files with 12128 additions and 5786 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
.circleci/config.yml
View File

@ -7,7 +7,7 @@ aliases:
- image: circleci/node:10
jobs:
build:
install:
<<: *defaults
steps:
- checkout
@ -21,9 +21,6 @@ jobs:
- run:
name: Check that yarn.lock is not corrupted
command: yarn repo-dirty-check
- run:
name: Bootstrap
command: yarn bootstrap --core
- save_cache:
name: Cache core dependencies
key: core-dependencies-v4-{{ checksum "yarn.lock" }}
@ -40,64 +37,34 @@ jobs:
- dev-kits
- app
- lib
chromatic:
build:
<<: *defaults
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Run chromatic on the pre-built official example
command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
name: Bootstrap
command: yarn bootstrap --core
- persist_to_workspace:
root: .
paths:
- examples
- addons
- dev-kits
- app
- lib
chromatic:
<<: *defaults
parallelism: 10
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Run chromatic on the pre-built angular example
command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
- run:
name: Run chromatic on the pre-built cra-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
- run:
name: Run chromatic on the pre-built cra-react15 example
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
- run:
name: Run chromatic on the pre-built cra-ts-essentials example
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
- run:
name: Run chromatic on the pre-built cra-ts-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
- run:
name: Run chromatic on the pre-built dev-kits example
command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
- run:
name: Run chromatic on the pre-built ember-cli example
command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
- run:
name: Run chromatic on the pre-built html-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
- run:
name: Run chromatic on the pre-built marko-cli example
command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
- run:
name: Run chromatic on the pre-built mithril-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
- run:
name: Run chromatic on the pre-built preact-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
- run:
name: Run chromatic on the pre-built rax-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
- run:
name: Run chromatic on the pre-built riot-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
- run:
name: Run chromatic on the pre-built svelte-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
- run:
name: Run chromatic on the pre-built vue-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
- run:
name: Run chromatic on the pre-built web-components-kitchen-sink example
command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
name: examples
command: |
yarn run-chromatics
packtracker:
<<: *defaults
steps:
@ -111,7 +78,7 @@ jobs:
yarn packtracker
examples:
<<: *defaults
parallelism: 4
parallelism: 10
steps:
- checkout
- attach_workspace:
@ -292,7 +259,10 @@ jobs:
workflows:
test:
jobs:
- build
- install
- build:
requires:
- install
- lint:
requires:
- build

32
.github/workflows/tests-cli.yml vendored
View File

@ -1,6 +1,6 @@
name: CLI tests
on:
on:
push
# push:
# disabled for now:
@ -17,7 +17,7 @@ jobs:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Cache node modules
uses: actions/cache@v1
with:
@ -33,6 +33,30 @@ jobs:
- name: cli
run: |
yarn test --cli
cli-yarn-2:
name: CLI Fixtures with Yarn 2
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v2
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}-
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: install, bootstrap
run: |
yarn bootstrap --core
- name: cli with Yarn 2
run: |
cd lib/cli
yarn test-yarn-2
latest-cra:
name: Latest CRA
runs-on: ubuntu-latest
@ -40,10 +64,10 @@ jobs:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: install, bootstrap
run: |
yarn bootstrap --core
- name: latest-cra
run: |
yarn test-latest-cra
yarn test-latest-cra

6
.github/workflows/tests-puppeteer.yml vendored
View File

@ -4,14 +4,13 @@ on: [push]
jobs:
build:
name: Puppeteer & A11y tests
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Cache node modules
uses: actions/cache@v1
with:
@ -27,6 +26,9 @@ jobs:
- name: build storybook
run: |
yarn --cwd examples/official-storybook build-storybook
- name: install puppeteer
run: |
yarn --cwd examples/official-storybook add puppeteer
- name: test
run: |
yarn test --puppeteer

7
.github/workflows/tests-unit.yml vendored
View File

@ -4,14 +4,13 @@ on: [push]
jobs:
build:
name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
runs-on: ${{ matrix.os }}
name: Core Unit Tests
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v1
- uses: actions/checkout@v2
- name: Cache node modules
uses: actions/cache@v1
with:

1
.gitignore vendored
View File

@ -7,6 +7,7 @@ node_modules
*.sw*
npm-shrinkwrap.json
dist
ts3.5
.tern-port
*.DS_Store
.cache

81
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt vendored
View File

@ -1,81 +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_Bootstrap : BuildType({
uuid = "9f9177e7-9ec9-4e2e-aabb-d304fd667712"
id = "OpenSourceProjects_Storybook_Bootstrap"
name = "Bootstrap"
artifactRules = """
addons/*/dist/** => dist.zip/addons
addons/storyshots/*/dist/** => dist.zip/addons/storyshots
app/*/dist/** => dist.zip/app
dev-kits/*/dist/** => dist.zip/dev-kits
lib/*/dist/** => dist.zip/lib
lib/core/dll/** => dist.zip/lib/core/dll
""".trimIndent()
vcs {
root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
}
steps {
script {
name = "Bootstrap"
scriptContent = """
#!/bin/sh
set -e -x
yarn
yarn bootstrap --core
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:comment=^TeamCity change:**"
branchFilter = """
+:pull/*
+:release/*
+:master
+:next
+:snyk-fix-*
""".trimIndent()
enabled = false
}
retryBuild {
delaySeconds = 60
enabled = false
}
}
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/patches/buildTypes/1bda59b5-d08d-4fd8-b317-953e7d79d881.kts vendored
View File

@ -1,16 +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 = '1bda59b5-d08d-4fd8-b317-953e7d79d881' (id = 'OpenSourceProjects_Storybook_Docs')
accordingly, and delete the patch script.
*/
changeBuildType("1bda59b5-d08d-4fd8-b317-953e7d79d881") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6.kts vendored
View File

@ -1,16 +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 = '1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6' (id = 'OpenSourceProjects_Storybook_SmokeTests')
accordingly, and delete the patch script.
*/
changeBuildType("1ea2b5bd-28f6-44f5-8ab3-6c659ce8fbd6") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/2b9c73e2-0a6e-47ca-95ae-729cac42be2b.kts vendored
View File

@ -1,16 +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 = '2b9c73e2-0a6e-47ca-95ae-729cac42be2b' (id = 'OpenSourceProjects_Storybook_Build_2')
accordingly, and delete the patch script.
*/
changeBuildType("2b9c73e2-0a6e-47ca-95ae-729cac42be2b") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a737.kts vendored
View File

@ -1,16 +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 = '42cfbb9a-f35b-4f96-afae-0b508927a737' (id = 'OpenSourceProjects_Storybook_Lint')
accordingly, and delete the patch script.
*/
changeBuildType("42cfbb9a-f35b-4f96-afae-0b508927a737") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/42cfbb9a-f35b-4f96-afae-0b508927a738.kts vendored
View File

@ -1,16 +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 = '42cfbb9a-f35b-4f96-afae-0b508927a738' (id = 'OpenSourceProjects_Storybook_Lint_Warnings')
accordingly, and delete the patch script.
*/
changeBuildType("42cfbb9a-f35b-4f96-afae-0b508927a738") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular' (id = 'OpenSourceProjects_Storybook_Angular')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-angular") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic' (id = 'OpenSourceProjects_Storybook_Chromatic')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-chromatic") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra' (id = 'OpenSourceProjects_Storybook_CRA')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15' (id = 'OpenSourceProjects_Storybook_CRA_REACT15')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_react15") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts' (id = 'OpenSourceProjects_Storybook_CRA_TS')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-cra_ts") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember' (id = 'OpenSourceProjects_Storybook_Ember')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-ember") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html' (id = 'OpenSourceProjects_Storybook_HTML')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-html") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko' (id = 'OpenSourceProjects_Storybook_Marko')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-marko") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril' (id = 'OpenSourceProjects_Storybook_Mithril')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-mithril") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer' (id = 'OpenSourceProjects_Storybook_Polymer')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-polymer") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact' (id = 'OpenSourceProjects_Storybook_Preact')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-preact") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot' (id = 'OpenSourceProjects_Storybook_Riot')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-riot") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte' (id = 'OpenSourceProjects_Storybook_Svelte')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-svelte") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue' (id = 'OpenSourceProjects_Storybook_Vue')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6-vue") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/8cc5f747-4ca7-4f0d-940d-b0c422f501a6.kts vendored
View File

@ -1,16 +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 = '8cc5f747-4ca7-4f0d-940d-b0c422f501a6' (id = 'OpenSourceProjects_Storybook_Examples')
accordingly, and delete the patch script.
*/
changeBuildType("8cc5f747-4ca7-4f0d-940d-b0c422f501a6") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

22
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667711.kts vendored
View File

@ -1,22 +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 = '9f9177e7-9ec9-4e2e-aabb-d304fd667711' (id = 'OpenSourceProjects_Storybook_Test')
accordingly, and delete the patch script.
*/
changeBuildType("9f9177e7-9ec9-4e2e-aabb-d304fd667711") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
params {
add {
param("docker.node.version", "10.13")
}
}
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/9f9177e7-9ec9-4e2e-aabb-d304fd667712.kts vendored
View File

@ -1,16 +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 = '9f9177e7-9ec9-4e2e-aabb-d304fd667712' (id = 'OpenSourceProjects_Storybook_Bootstrap')
accordingly, and delete the patch script.
*/
changeBuildType("9f9177e7-9ec9-4e2e-aabb-d304fd667712") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

16
.teamcity/OpenSourceProjects_Storybook/patches/buildTypes/d4320bd8-6094-4dd6-9bed-e13d6f0d12e2.kts vendored
View File

@ -1,16 +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 = 'd4320bd8-6094-4dd6-9bed-e13d6f0d12e2' (id = 'OpenSourceProjects_Storybook_CliTestLatestCra')
accordingly, and delete the patch script.
*/
changeBuildType("d4320bd8-6094-4dd6-9bed-e13d6f0d12e2") {
check(paused == false) {
"Unexpected paused: '$paused'"
}
paused = true
}

17
.teamcity/OpenSourceProjects_Storybook/patches/projects/69382d9b-7791-418a-9ff6-1c83b86ed6b5.kts vendored
View File

@ -1,17 +0,0 @@
package OpenSourceProjects_Storybook.patches.projects
import jetbrains.buildServer.configs.kotlin.v2017_2.*
import jetbrains.buildServer.configs.kotlin.v2017_2.Project
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 project with uuid = '69382d9b-7791-418a-9ff6-1c83b86ed6b5' (id = 'OpenSourceProjects_Storybook')
accordingly, and delete the patch script.
*/
changeProject("69382d9b-7791-418a-9ff6-1c83b86ed6b5") {
check(archived == false) {
"Unexpected archived: '$archived'"
}
archived = true
}

20
.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster.kt vendored
View File

@ -1,20 +0,0 @@
package OpenSourceProjects_Storybook.vcsRoots
import jetbrains.buildServer.configs.kotlin.v2017_2.*
import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster : GitVcsRoot({
uuid = "cec03c4b-d52c-42a0-8e9e-53bde85d6b33"
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster"
name = "Main root"
url = "git@github.com:storybookjs/storybook.git"
branch = "refs/heads/next"
branchSpec = """
+:refs/(pull/*)/head
+:refs/heads/*
""".trimIndent()
authMethod = uploadedKey {
userName = "git"
uploadedKey = "Storybook bot"
}
})

16
.teamcity/OpenSourceProjects_Storybook/vcsRoots/OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1.kt vendored
View File

@ -1,16 +0,0 @@
package OpenSourceProjects_Storybook.vcsRoots
import jetbrains.buildServer.configs.kotlin.v2017_2.*
import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1 : GitVcsRoot({
uuid = "5cacf90a-381a-4c73-9aa3-57f6439b545e"
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1"
name = "https://github.com/storybookjs/storybook#refs/heads/master (1)"
url = "git@github.com:storybookjs/storybook.git"
branch = "refs/heads/next"
authMethod = uploadedKey {
userName = "git"
uploadedKey = "Storybook bot"
}
})

107
.teamcity/pom.xml vendored Normal file
View File

@ -0,0 +1,107 @@
<?xml version="1.0"?>
<project>
<modelVersion>4.0.0</modelVersion>
<name>Hosted_Root Config DSL Script</name>
<groupId>Hosted_Root</groupId>
<artifactId>Hosted_Root_dsl</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.jetbrains.teamcity</groupId>
<artifactId>configs-dsl-kotlin-parent</artifactId>
<version>1.0-SNAPSHOT</version>
</parent>
<repositories>
<repository>
<id>jetbrains-all</id>
<url>https://download.jetbrains.com/teamcity-repository</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
<repository>
<id>teamcity-server</id>
<url>https://storybook.beta.teamcity.com/app/dsl-plugins-repository</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>JetBrains</id>
<url>https://download.jetbrains.com/teamcity-repository</url>
</pluginRepository>
</pluginRepositories>
<build>
<sourceDirectory>${basedir}</sourceDirectory>
<plugins>
<plugin>
<artifactId>kotlin-maven-plugin</artifactId>
<groupId>org.jetbrains.kotlin</groupId>
<version>${kotlin.version}</version>
<configuration/>
<executions>
<execution>
<id>compile</id>
<phase>process-sources</phase>
<goals>
<goal>compile</goal>
</goals>
</execution>
<execution>
<id>test-compile</id>
<phase>process-test-sources</phase>
<goals>
<goal>test-compile</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.jetbrains.teamcity</groupId>
<artifactId>teamcity-configs-maven-plugin</artifactId>
<version>${teamcity.dsl.version}</version>
<configuration>
<format>kotlin</format>
<dstDir>target/generated-configs</dstDir>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>org.jetbrains.teamcity</groupId>
<artifactId>configs-dsl-kotlin</artifactId>
<version>${teamcity.dsl.version}</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.jetbrains.teamcity</groupId>
<artifactId>configs-dsl-kotlin-plugins</artifactId>
<version>1.0-SNAPSHOT</version>
<type>pom</type>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-stdlib-jdk8</artifactId>
<version>${kotlin.version}</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.jetbrains.kotlin</groupId>
<artifactId>kotlin-script-runtime</artifactId>
<version>${kotlin.version}</version>
<scope>compile</scope>
</dependency>
</dependencies>
<properties>
<teamcity.dsl.version>2019.2.2-SNAPSHOT</teamcity.dsl.version>
</properties>
</project>

614
.teamcity/settings.kts vendored Normal file
View File

@ -0,0 +1,614 @@
import jetbrains.buildServer.configs.kotlin.v2019_2.*
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.PullRequests
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.commitStatusPublisher
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.pullRequests
import jetbrains.buildServer.configs.kotlin.v2019_2.buildFeatures.swabra
import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.ScriptBuildStep
import jetbrains.buildServer.configs.kotlin.v2019_2.buildSteps.script
import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.BuildFailureOnMetric
import jetbrains.buildServer.configs.kotlin.v2019_2.failureConditions.failOnMetricChange
import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.buildReportTab
import jetbrains.buildServer.configs.kotlin.v2019_2.projectFeatures.githubConnection
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.VcsTrigger
import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.vcs
/*
The settings script is an entry point for defining a TeamCity
project hierarchy. The script should contain a single call to the
project() function with a Project instance or an init function as
an argument.
VcsRoots, BuildTypes, Templates, and subprojects can be
registered inside the project using the vcsRoot(), buildType(),
template(), and subProject() methods respectively.
To debug settings scripts in command-line, run the
mvnDebug org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate
command and attach your debugger to the port 8000.
To debug in IntelliJ Idea, open the 'Maven Projects' tool window (View
-> Tool Windows -> Maven Projects), find the generate task node
(Plugins -> teamcity-configs -> teamcity-configs:generate), the
'Debug' option is available in the context menu for the task.
*/
version = "2019.2"
project {
template(Common)
defaultTemplate = Common
buildType(TestWorkflow)
buildType(Build)
buildType(E2E)
buildType(SmokeTests)
buildType(Frontpage)
buildType(Docs)
buildType(Lint)
buildType(Test)
buildType(Coverage)
subProject(ExamplesProject)
buildTypesOrderIds = arrayListOf(
RelativeId("TestWorkflow"),
RelativeId("Build"),
RelativeId("E2E"),
RelativeId("SmokeTests"),
RelativeId("Frontpage"),
RelativeId("Docs"),
RelativeId("Lint"),
RelativeId("Test"),
RelativeId("Coverage")
)
features {
githubConnection {
id = "PROJECT_EXT_6"
displayName = "GitHub.com"
clientId = "800d730c725f771d6d2a"
clientSecret = "credentialsJSON:d1a5af15-1200-46c6-b0f1-f35bd466d909"
}
buildReportTab {
id = "PROJECT_EXT_8"
title = "Official"
startPage = "built-storybooks.tar.gz!official-storybook/index.html"
}
}
}
object Common: Template({
name = "Common"
vcs {
root(DslContext.settingsRoot)
checkoutMode = CheckoutMode.ON_AGENT
checkoutDir = "storybook/%teamcity.build.branch%"
}
features {
commitStatusPublisher {
id = "Commit status publisher"
publisher = github {
githubUrl = "https://api.github.com"
authType = personalToken {
token = "credentialsJSON:5273320e-14be-4317-951e-a54c4dcca35d"
}
}
param("github_oauth_user", "Hypnosphi")
}
swabra {
id = "swabra"
verbose = true
paths = """
-:.cache
-:node_modules
-:**/node_modules
""".trimIndent()
}
pullRequests {
id = "Pull requests"
provider = github {
authType = vcsRoot()
filterAuthorRole = PullRequests.GitHubRoleFilter.EVERYBODY
}
}
}
})
object Build : BuildType({
name = "Build"
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn repo-dirty-check
yarn bootstrap --core
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
artifactRules = """
+:**/dist/** => dist.tar.gz
+:**/dll/** => dist.tar.gz
-:**/node_modules/** => dist.tar.gz
""".trimIndent()
})
object ExamplesProject : Project({
name = "Examples"
template(ExamplesTemplate)
buildType(Examples1)
buildType(Examples2)
buildType(Examples3)
buildType(Examples4)
buildType(Examples5)
buildType(AggregateExamples)
})
object ExamplesTemplate : Template({
name = "Examples Template"
dependencies {
dependency(Build) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "dist.tar.gz!** => ."
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
rm -rf built-storybooks
mkdir -p built-storybooks
yarn build-storybooks
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
artifactRules = "built-storybooks => built-storybooks.tar.gz"
params {
param("env.CIRCLE_NODE_TOTAL", "5")
}
})
object Examples1 : BuildType({
name = "Examples 1"
templates = listOf(ExamplesTemplate)
params {
param("env.CIRCLE_NODE_INDEX", "0")
}
disableSettings("Commit status publisher")
})
object Examples2 : BuildType({
name = "Examples 2"
templates = listOf(ExamplesTemplate)
params {
param("env.CIRCLE_NODE_INDEX", "1")
}
disableSettings("Commit status publisher")
})
object Examples3 : BuildType({
name = "Examples 3"
templates = listOf(ExamplesTemplate)
params {
param("env.CIRCLE_NODE_INDEX", "2")
}
disableSettings("Commit status publisher")
})
object Examples4 : BuildType({
name = "Examples 4"
templates = listOf(ExamplesTemplate)
params {
param("env.CIRCLE_NODE_INDEX", "3")
}
disableSettings("Commit status publisher")
})
object Examples5 : BuildType({
name = "Examples 5"
templates = listOf(ExamplesTemplate)
params {
param("env.CIRCLE_NODE_INDEX", "4")
}
disableSettings("Commit status publisher")
})
object AggregateExamples : BuildType({
name = "Aggregate Examples"
dependencies {
dependency(Examples1) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
dependency(Examples2) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
dependency(Examples3) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
dependency(Examples4) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
dependency(Examples5) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
artifactRules = "built-storybooks => built-storybooks.tar.gz"
})
object E2E : BuildType({
name = "E2E"
dependencies {
dependency(AggregateExamples) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn cypress install
yarn serve-storybooks &
yarn await-serve-storybooks
yarn cypress run --reporter teamcity || :
yarn ts-node --transpile-only cypress/report-teamcity-metadata.ts || :
""".trimIndent()
dockerImage = "cypress/base:10.18.1"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
artifactRules = """
cypress/screenshots => screenshots.tar.gz
cypress/videos => videos.tar.gz
""".trimIndent()
failureConditions {
failOnMetricChange {
metric = BuildFailureOnMetric.MetricType.TEST_COUNT
units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
comparison = BuildFailureOnMetric.MetricComparison.LESS
compareTo = value()
}
}
})
object SmokeTests : BuildType({
name = "Smoke Tests"
dependencies {
dependency(Build) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "dist.tar.gz!** => ."
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
cd examples/cra-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../cra-ts-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../vue-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../svelte-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../angular-cli
yarn storybook --smoke-test --quiet
cd ../ember-cli
yarn storybook --smoke-test --quiet
cd ../marko-cli
yarn storybook --smoke-test --quiet
cd ../official-storybook
yarn storybook --smoke-test --quiet
cd ../mithril-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../riot-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../preact-kitchen-sink
yarn storybook --smoke-test --quiet
cd ../cra-react15
yarn storybook --smoke-test --quiet
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object Frontpage : BuildType({
name = "Frontpage"
type = Type.DEPLOYMENT
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn bootstrap --install
node ./scripts/build-frontpage.js
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:.teamcity/**"
branchFilter = "+:master"
}
}
})
object Docs : BuildType({
name = "Docs"
type = Type.DEPLOYMENT
steps {
script {
workingDir = "docs"
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn build
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:.teamcity/**"
branchFilter = """
+:<default>
+:next
+:master
+:pull/*
""".trimIndent()
}
}
})
object Lint : BuildType({
name = "Lint"
dependencies {
dependency(Build) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "dist.tar.gz!** => ."
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
# TODO remove after merging
mkdir temp-eslint-teamcity
cd temp-eslint-teamcity
yarn init -y
yarn add -D eslint-teamcity
cd ..
yarn lint:js --format ./temp-eslint-teamcity/node_modules/eslint-teamcity/index.js .
yarn lint:md .
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
failureConditions {
failOnMetricChange {
metric = BuildFailureOnMetric.MetricType.INSPECTION_ERROR_COUNT
threshold = 0
units = BuildFailureOnMetric.MetricUnit.DEFAULT_UNIT
comparison = BuildFailureOnMetric.MetricComparison.MORE
compareTo = value()
}
}
})
object Test : BuildType({
name = "Test"
dependencies {
dependency(Build) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "dist.tar.gz!** => ."
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
# TODO remove after merging
mkdir temp-jest-teamcity
cd temp-jest-teamcity
yarn init -y
yarn add -D jest-teamcity
cd ..
yarn jest --coverage -w 2 --reporters=${'$'}PWD/temp-jest-teamcity/node_modules/jest-teamcity
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
artifactRules = "coverage => coverage.tar.gz"
})
object Coverage : BuildType({
name = "Coverage"
dependencies {
dependency(Test) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "coverage.tar.gz!** => coverage"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn coverage
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object TestWorkflow : BuildType({
name = "Test Workflow"
type = Type.COMPOSITE
maxRunningBuilds = 2
dependencies {
snapshot(E2E) {}
snapshot(SmokeTests) {}
snapshot(Lint) {}
snapshot(Coverage) {}
}
triggers {
vcs {
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
triggerRules = "-:.teamcity/**"
branchFilter = """
+:<default>
+:next
+:master
+:pull/*
""".trimIndent()
}
}
})

21
ADDONS_SUPPORT.md
View File

@ -7,19 +7,28 @@
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
| [centered](addons/centered) | + | | + | + | + | + | | + | | + | + | + |
| [contexts](addons/contexts) | + | | + | | | | | | | | + | + |
| [events](addons/events) | + | | + | + | + | + | + | | | + | + | + |
| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + |
| [design assets](addons/design-assets) | + | | + | + | + | + | + | + | + | + | + | + |
| [graphql](addons/graphql) | + | | | | | | | | | | | |
| [docs](addons/docs) | + | | + | + | + | + | + | + | + | + | + | + |
| [events](addons/events) | + | | + | + | + | + | + | | | + | + | + |
| [google-analytics](addons/google-analytics) | + | + | + | + | + | + | + | + | + | + | + | + |
| [info](addons/info) | + | | | | | | | | | | | |
| [graphql](addons/graphql) | + | | | | | | | | | | | |
| [jest](addons/jest) | + | + | + | + | + | + | + | + | + | + | + | + |
| [knobs](addons/knobs) | + | +\* | + | + | + | + | + | + | + | + | + | + |
| [links](addons/links) | + | + | + | + | + | + | | + | + | + | + | + |
| [notes](addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + |
| [options](addons/options) | + | + | + | + | + | + | | + | + | + | + | + |
| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + |
| [query params](addons/queryparams) | + | | + | + | + | + | + | + | + | + | + | + |
| [storyshots](addons/storyshots) | + | + | + | + | | + | | + | + | | + | + |
| [storysource](addons/storysource) | + | | + | + | + | + | + | + | + | + | + | + |
| [viewport](addons/viewport) | + | | + | + | + | + | + | + | + | + | + | + |
`*` - React Native on device addon (addons/onDevice-\<name>)
`*` - React Native on device addon (addons/onDevice-\<name>)
## Deprecated Addons
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
| [info](https://github.com/storybookjs/storybook/tree/master/addons/info) | + | | | | | | | | | | | |
| [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + |
`*` - React Native on device addon (addons/onDevice-\<name>)

220
CHANGELOG.md
View File

@ -1,3 +1,223 @@
## 5.3.17 (March 14, 2020)
### Bug Fixes
- Components: Change react-syntax-highlighter from esm to cjs ([#9780](https://github.com/storybookjs/storybook/pull/9780))
## 5.3.16 (March 14, 2020)
Failed NPM publish
## 5.3.15 (March 14, 2020)
### Bug Fixes
- Core: Disables html-webpack-plugin's option to remove script tag types ([#10042](https://github.com/storybookjs/storybook/pull/10042))
- Addon-actions: Style ActionLogger to preserve whitespace ([#10046](https://github.com/storybookjs/storybook/pull/10046))
### Maintenance
- CI: Fix GitHub unit test workflow ([#9971](https://github.com/storybookjs/storybook/pull/9971))
### Dependency Upgrades
- Security: Remove usage of a vulnerable version of serialize-javascript ([#10071](https://github.com/storybookjs/storybook/pull/10071))
## 6.0.0-alpha.27 (March 13, 2020)
### Features
- Addon-toolbars: Global args support in the toolbar ([#10028](https://github.com/storybookjs/storybook/pull/10028))
- Addon-actions: Add Storybook Args support ([#10029](https://github.com/storybookjs/storybook/pull/10029))
- Core: Add globalArgs/globalArgTypes `preview.js` exports ([#10123](https://github.com/storybookjs/storybook/pull/10123))
## 6.0.0-alpha.26 (March 12, 2020)
### Breaking Changes
- Remove deprecated decorators and loaders ([#9951](https://github.com/storybookjs/storybook/pull/9951))
### Features
- Core: Improve support for main.ts/preview.ts files ([#10099](https://github.com/storybookjs/storybook/pull/10099))
- Addon-docs: Theme with `docs.theme` parameter ([#10114](https://github.com/storybookjs/storybook/pull/10114))
- Addon-docs: Svelte example ([#7673](https://github.com/storybookjs/storybook/pull/7673))
### Maintenance
- CSF: Promote args/argTypes to first-class metadata ([#10117](https://github.com/storybookjs/storybook/pull/10117))
## 6.0.0-alpha.25 (March 11, 2020)
NOTE: `6.0.0-alpha.24` broken due to bad merge. Sorry!
### Bug Fixes
- Core: Fix initialization of global args ([#10106](https://github.com/storybookjs/storybook/pull/10106))
## 6.0.0-alpha.24 (March 11, 2020)
### Features
- Addon-docs: formatSource snippet customization function ([#10089](https://github.com/storybookjs/storybook/pull/10089))
- Core: Add global args feature ([#10015](https://github.com/storybookjs/storybook/pull/10015))
- UI: Migrate from simplebar to overlaybars ([#9375](https://github.com/storybookjs/storybook/pull/9375))
### Bug Fixes
- Core: Fix StoryInput parameters typings ([#10013](https://github.com/storybookjs/storybook/pull/10013))
- Changed import of react-syntax-highlighter from esm to cjs ([#9292](https://github.com/storybookjs/storybook/pull/9292))
### Maintenance
- Buidld: Setup TeamCity Cloud ([#9875](https://github.com/storybookjs/storybook/pull/9875))
- Tech/improvements ([#10096](https://github.com/storybookjs/storybook/pull/10096))
- Core: Move event handlers into module init ([#10085](https://github.com/storybookjs/storybook/pull/10085))
### Dependency Upgrades
- Bump axe-core from 3.5.1 to 3.5.2 ([#10090](https://github.com/storybookjs/storybook/pull/10090))
## 6.0.0-alpha.23 (March 11, 2020)
Failed publish
## 6.0.0-alpha.22 (March 10, 2020)
### Breaking Changes
- MDX: Compile to improved source-loader format ([#10084](https://github.com/storybookjs/storybook/pull/10084))
### Features
- Core: Add args feature ([#10014](https://github.com/storybookjs/storybook/pull/10014))
### Maintenance
- Tech/improvements ([#10083](https://github.com/storybookjs/storybook/pull/10083))
- Few minor improvements extracted from the inception feature PR ([#10072](https://github.com/storybookjs/storybook/pull/10072))
- Tech/improvements ([#10070](https://github.com/storybookjs/storybook/pull/10070))
### Dependency Upgrades
- Yarn 2: Add missing dependencies ([#10012](https://github.com/storybookjs/storybook/pull/10012))
- Security: Remove usage of a vulnerable version of serialize-javascript ([#10071](https://github.com/storybookjs/storybook/pull/10071))
## 6.0.0-alpha.21 (March 5, 2020)
### Breaking Changes
- Core: Overhaul start.js and event emitting/listening ([#9914](https://github.com/storybookjs/storybook/pull/9914))
### Features
- CLI: Support js / jsx / ts / tsx stories in React CSF template ([#10003](https://github.com/storybookjs/storybook/pull/10003))
- Cra-kitchen-sink : Add Named Color Palette Example(MDX) ([#9709](https://github.com/storybookjs/storybook/pull/9709))
- Addon-Queryparams: Add addon preset ([#9949](https://github.com/storybookjs/storybook/pull/9949))
### Bug Fixes
- Addon-actions: Style ActionLogger to preserve whitespace ([#10046](https://github.com/storybookjs/storybook/pull/10046))
- Core: Disables html-webpack-plugin's option to remove script tag types ([#10042](https://github.com/storybookjs/storybook/pull/10042))
### Maintenance
- Tech: Misc improvements ([#10052](https://github.com/storybookjs/storybook/pull/10052))
- Tech: Misc improvements extracted from composition ([#10040](https://github.com/storybookjs/storybook/pull/10040))
- CI: change parallelism ([#10041](https://github.com/storybookjs/storybook/pull/10041))
- Storybook-official: try moving options to `manager.js` ([#9323](https://github.com/storybookjs/storybook/pull/9323))
- Misc: Add missing dependencies ([#9965](https://github.com/storybookjs/storybook/pull/9965))
- CI: Fix GitHub unit test workflow ([#9971](https://github.com/storybookjs/storybook/pull/9971))
### Dependency Upgrades
- Upgrade reach router ([#10016](https://github.com/storybookjs/storybook/pull/10016))
## 6.0.0-alpha.20 (February 27, 2020)
### Bug Fixes
- Core: Fix `configFilename` containing backticks ([#9960](https://github.com/storybookjs/storybook/pull/9960))
### Maintenance
- Core: Add stories to demonstrate `layout` ([#9940](https://github.com/storybookjs/storybook/pull/9940))
## 5.3.14 (February 25, 2020)
### Bug Fixes
- Centered: remove `typesVersions` attribute ([#9907](https://github.com/storybookjs/storybook/pull/9907))
- Props: Fix typescript unspecified default value ([#9873](https://github.com/storybookjs/storybook/pull/9873))
- Core: Use telejson for websockets channel ([#9867](https://github.com/storybookjs/storybook/pull/9867))
- Storyshots: Fix support for jsx/tsx config files ([#9834](https://github.com/storybookjs/storybook/pull/9834))
- MDX: Fix custom classes getting stripped ([#8897](https://github.com/storybookjs/storybook/pull/8897))
- Typescript: Add downlevel dts for 3.5 ([#9847](https://github.com/storybookjs/storybook/pull/9847))
## 6.0.0-alpha.19 (February 24, 2020)
### Features
- Addon-links: Add preset ([#9932](https://github.com/storybookjs/storybook/pull/9932))
### Bug Fixes
- Addon-docs: Restore IE11 compat on Windows by transpiling acorn-jsx ([#9790](https://github.com/storybookjs/storybook/pull/9790))
## 6.0.0-alpha.18 (February 22, 2020)
### Features
- Addon-knobs: Add `disableForceUpdate` option ([#9447](https://github.com/storybookjs/storybook/pull/9447))
## 6.0.0-alpha.17 (February 21, 2020)
### Bug Fixes
- Props: Fix typescript unspecified default value ([#9873](https://github.com/storybookjs/storybook/pull/9873))
- Centered: remove `typesVersions` attribute ([#9907](https://github.com/storybookjs/storybook/pull/9907))
### Maintenance
- Misc: Add missing dependencies or peerDependencies ([#9916](https://github.com/storybookjs/storybook/pull/9916))
## 6.0.0-alpha.16 (February 21, 2020)
Failed NPM publish
## 6.0.0-alpha.15 (February 20, 2020)
### Breaking Changes
- Refactor Client API: pull metadata handling code into the store. ([#9877](https://github.com/storybookjs/storybook/pull/9877))
### Features
- Core: Add skip dispose option to ClientApi ([#9868](https://github.com/storybookjs/storybook/pull/9868))
## 6.0.0-alpha.14 (February 19, 2020)
### Features
- CLI: Add Yarn 2 compatibility ([#9866](https://github.com/storybookjs/storybook/pull/9866))
### Bug Fixes
- Typescript: Add downlevel dts for TS3.5 support ([#9902](https://github.com/storybookjs/storybook/pull/9902))
- CLI: capture unknown arguments the native way ([#9888](https://github.com/storybookjs/storybook/pull/9888))
- Core: Use telejson for websockets channel ([#9867](https://github.com/storybookjs/storybook/pull/9867))
### Maintenance
- Build: Upgrade to latest version of eslint config ([#9882](https://github.com/storybookjs/storybook/pull/9882))
- Typescript: Misc improvements ([#9879](https://github.com/storybookjs/storybook/pull/9879))
- Misc: Project root cleanup ([#9880](https://github.com/storybookjs/storybook/pull/9880))
### Dependency Upgrades
- Bump webpack-cli from 3.3.10 to 3.3.11 ([#9895](https://github.com/storybookjs/storybook/pull/9895))
- Migrate to leven ([#9881](https://github.com/storybookjs/storybook/pull/9881))
## 6.0.0-alpha.13 (February 15, 2020)
### Bug Fixes

14
CONTRIBUTING.md
View File

@ -126,8 +126,22 @@ It can be immensely helpful to get feedback in your editor, if you're using VsCo
"eslint.alwaysShowStatus": true
```
This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
### 2d. Run Cypress tests
First make sure the repo is bootstrapped.
Then run `yarn build-storybooks`, this creates a static website from all examples.
Then run `yarn serve-storybooks`, this will run the static site on the port cypress expects.
Then run `yarn add cypress -W --optional`. When this has completed cypress should be installed on your system. If it is already on your system, this step can be skipped.
Then run `yarn cypress open` if you want to see the tests run in the UI, or `yarn cypress run` to run the tests headless.
### Reproductions
#### In the monorepo

368
MIGRATION.md
View File

@ -1,91 +1,174 @@
# Migration
<h1>Migration</h1>
- [Migration](#migration)
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
- [New addon presets](#new-addon-presets)
- [Removed legacy story APIs](#removed-legacy-story-apis)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Create React App preset](#create-react-app-preset)
- [Description doc block](#description-doc-block)
- [React Native Async Storage](#react-native-async-storage)
- [Deprecate displayName parameter](#deprecate-displayname-parameter)
- [Unified docs preset](#unified-docs-preset)
- [Simplified hierarchy separators](#simplified-hierarchy-separators)
- [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
- [Source-loader](#source-loader)
- [Default viewports](#default-viewports)
- [Grid toolbar-feature](#grid-toolbar-feature)
- [Docs mode docgen](#docs-mode-docgen)
- [storySort option](#storysort-option)
- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
- [babel.config.js support](#babelconfigjs-support)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
- [CoreJS 3](#corejs-3)
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
- [sortStoriesByKind](#sortstoriesbykind)
- [Webpack config simplification](#webpack-config-simplification)
- [Theming overhaul](#theming-overhaul)
- [Story hierarchy defaults](#story-hierarchy-defaults)
- [Options addon deprecated](#options-addon-deprecated)
- [Individual story decorators](#individual-story-decorators)
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
- [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
- [Addon viewport uses parameters](#addon-viewport-uses-parameters)
- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
- [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
- [New URL structure](#new-url-structure)
- [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
- [Vue integration](#vue-integration)
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
- [Private addon config](#private-addon-config)
- [React 15.x](#react-15x)
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
- [React 16.3+](#react-163)
- [Generic addons](#generic-addons)
- [Knobs select ordering](#knobs-select-ordering)
- [Knobs URL parameters](#knobs-url-parameters)
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
- [Removed addWithInfo](#removed-addwithinfo)
- [Removed RN packager](#removed-rn-packager)
- [Removed RN addons](#removed-rn-addons)
- [Storyshots Changes](#storyshots-changes)
- [Webpack 4](#webpack-4)
- [Babel 7](#babel-7)
- [Create-react-app](#create-react-app)
- [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
- [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
- [start-storybook opens browser](#start-storybook-opens-browser)
- [CLI Rename](#cli-rename)
- [Addon story parameters](#addon-story-parameters)
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
- [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
- [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
- [Refactored Knobs](#refactored-knobs)
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
- [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
- [Updated Addons API](#updated-addons-api)
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
- [Moved TypeScript definitions](#moved-typescript-definitions)
- [Deprecated head.html](#deprecated-headhtml)
- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
- [Webpack upgrade](#webpack-upgrade)
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
- [React.FC interfaces](#reactfc-interfaces)
- [Imported types](#imported-types)
- [Rolling back](#rolling-back)
- [New addon presets](#new-addon-presets)
- [Removed Deprecated APIs](#removed-deprecated-apis)
- [Client API changes](#client-api-changes)
- [Removed Legacy Story APIs](#removed-legacy-story-apis)
- [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
- [Changed Parameter Handling](#changed-parameter-handling)
- [Simplified Render Context](#simplified-render-context)
- [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
- [Improved story source handling](#improved-story-source-handling)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
- [Using preview.js](#using-previewjs)
- [Using manager.js](#using-managerjs)
- [Create React App preset](#create-react-app-preset)
- [Description doc block](#description-doc-block)
- [React Native Async Storage](#react-native-async-storage)
- [Deprecate displayName parameter](#deprecate-displayname-parameter)
- [Unified docs preset](#unified-docs-preset)
- [Simplified hierarchy separators](#simplified-hierarchy-separators)
- [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
- [Source-loader](#source-loader)
- [Default viewports](#default-viewports)
- [Grid toolbar-feature](#grid-toolbar-feature)
- [Docs mode docgen](#docs-mode-docgen)
- [storySort option](#storysort-option)
- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
- [babel.config.js support](#babelconfigjs-support)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
- [CoreJS 3](#corejs-3)
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
- [sortStoriesByKind](#sortstoriesbykind)
- [Webpack config simplification](#webpack-config-simplification)
- [Theming overhaul](#theming-overhaul)
- [Story hierarchy defaults](#story-hierarchy-defaults)
- [Options addon deprecated](#options-addon-deprecated)
- [Individual story decorators](#individual-story-decorators)
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
- [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
- [Addon viewport uses parameters](#addon-viewport-uses-parameters)
- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
- [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
- [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
- [New URL structure](#new-url-structure)
- [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
- [Vue integration](#vue-integration)
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
- [Private addon config](#private-addon-config)
- [React 15.x](#react-15x)
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
- [React 16.3+](#react-163)
- [Generic addons](#generic-addons)
- [Knobs select ordering](#knobs-select-ordering)
- [Knobs URL parameters](#knobs-url-parameters)
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
- [Removed addWithInfo](#removed-addwithinfo)
- [Removed RN packager](#removed-rn-packager)
- [Removed RN addons](#removed-rn-addons)
- [Storyshots Changes](#storyshots-changes)
- [Webpack 4](#webpack-4)
- [Babel 7](#babel-7)
- [Create-react-app](#create-react-app)
- [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
- [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
- [start-storybook opens browser](#start-storybook-opens-browser)
- [CLI Rename](#cli-rename)
- [Addon story parameters](#addon-story-parameters)
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
- [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
- [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
- [Refactored Knobs](#refactored-knobs)
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
- [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
- [Updated Addons API](#updated-addons-api)
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
- [Moved TypeScript definitions](#moved-typescript-definitions)
- [Deprecated head.html](#deprecated-headhtml)
- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
- [Webpack upgrade](#webpack-upgrade)
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From version 5.3.x to 6.0.x
### React prop tables with Typescript
Starting in 6.0 we are changing our recommended setup for extracting prop tables in `addon-docs` for React projects using TypeScript.
In earlier versions, we recommended `react-docgen-typescript-loader` (`RDTL`) and bundled it with `@storybook/preset-create-react-app` and `@storybook/preset-typescript` for this reason. We now recommend `babel-plugin-react-docgen`, which is already bundled as part of `@storybook/react`.
As a consequence we've removed `RDTL` from the presets, which is a breaking change. We made this change because `react-docgen` now supports TypeScript natively, and fewer dependencies simplifies things for everybody.
We will be updating this section with migration information as we collect information from our users, and fixing issues as they come up throughout the 6.0 prerelease process. We are cataloging known issues [here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#known-limitations).
#### React.FC interfaces
The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
```tsx
import React, { FC } from 'react';
interface IProps { ... };
const MyComponent: FC<IProps> = ({ ... }) => ...
```
The following workaround is needed:
```tsx
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
```
Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
#### Imported types
Another major issue is support for imported types.
```tsx
import React, { FC } from 'react';
import SomeType from './someFile';
type NewType = SomeType & { foo: string };
const MyComponent: FC<NewType> = ...
```
This was also an issue in `RDTL` so it doesn't get worse with `react-docgen`. There's an open PR for this https://github.com/reactjs/react-docgen/pull/352 which you can upvote if it affects you.
#### Rolling back
In the meantime, if you're not ready to make the move you have two options:
1. Pin your to a specific preset version: `preset-create-react-app@1.5.2` or `preset-typescript@1.2.2`
2. OR: Manually configure your setup to add back `react-docgen-typescript-loader`, add the following to your `.storybook/main.js`:
```js
module.exports = {
webpack: async (config, { configType }) => ({
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.tsx?$/,
loader: require.resolve('react-docgen-typescript-loader'),
options: {}, // your options here
},
],
},
}),
};
```
### New addon presets
In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.
This breaking change currently applies to: `addon-a11y`, `addon-knobs`.
This breaking change currently applies to: `addon-a11y`, `addon-knobs`, `addon-links`, `addon-queryparams`.
Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
@ -99,12 +182,12 @@ module.exports = {
In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator:
```js
import { withA11Y } from '../index';
import { withA11y } from '../index';
addDecorator(withA11Y);
addDecorator(withA11y);
```
Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator. However, if you are upgrading
Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
@ -126,7 +209,21 @@ MyNonCheckedStory.story = {
};
```
### Removed Legacy Story APIs
### Removed Deprecated APIs
In 6.0 we removed a number of APIs that were previously deprecated.
See the migration guides for further details:
- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
- [Source-loader](#source-loader)
- [Unified docs preset](#unified-docs-preset)
- [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
### Client API changes
#### Removed Legacy Story APIs
In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't publicly accessible):
@ -134,6 +231,89 @@ In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't p
Although these were private APIs, if you were using them, you could probably use the newer APIs (which are still private): `getStoriesForKind`, `getRawStory`, `removeStoryKind`, `remove`.
#### Can no longer add decorators/parameters after stories
You can no longer add decorators and parameters globally after you added your first story, and you can no longer add decorators and parameters to a kind after you've added your first story to it.
It's unclear and confusing what would happened if you did. If you want to disable a decorator for certain stories, use a parameter to do so:
```js
export StoryOne = ...;
StoryOne.story = { parameters: { addon: { disable: true } } };
```
If you want to use a parameter for a subset of stories in a kind, simply use a variable to do so:
```js
const commonParameters = { x: { y: 'z' } };
export StoryOne = ...;
StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
```
#### Changed Parameter Handling
There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
_All parameters are now merged recursively to arbitrary depth._
In 5.3 we sometimes merged parameters all the way down and sometimes did not depending on where you added them. It was confusing. If you were relying on this behaviour, let us know.
_Array parameters are no longer "merged"._
If you override an array parameter, the override will be the end product. If you want the old behaviour (appending a new value to an array parameter), export the original and use array spread. This will give you maximum flexibility:
```js
import { allBackgrounds } from './util/allBackgrounds';
export StoryOne = ...;
StoryOne.story = { parameters: { backgrounds: [...allBackgrounds, '#zyx' ] } };
```
_You cannot set parameters from decorators_
Parameters are intended to be statically set at story load time. So setting them via a decorator doesn't quite make sense. If you were using this to control the rendering of a story, chances are using the new `args` feature is a more idiomatic way to do this.
### Simplified Render Context
The `RenderContext` that is passed to framework rendering layers in order to render a story has been simplified, dropping a few members that were not used by frameworks to render stories. In particular, the following have been removed:
- `selectedKind`/`selectedStory` -- replaced by `kind`/`name`
- `configApi`
- `storyStore`
- `channel`
- `clientApi`
### Story Store immutable outside of configuration
You can no longer change the contents of the StoryStore outside of a `configure()` call. This is to ensure that any changes are properly published to the manager. If you want to add stories "out of band" you can call `store.startConfiguring()` and `store.finishConfiguring()` to ensure that your changes are published.
### Improved story source handling
The story source code handling has been improved in both `addon-storysource` and `addon-docs`.
In 5.x some users used an undocumented _internal_ API, `mdxSource` to customize source snippetization in `addon-docs`. This has been removed in 6.0.
The preferred way to customize source snippets for stories is now:
```js
export const Example = () => <Button />;
Example.story = {
parameters: {
storySource: {
source: 'custom source',
},
},
};
```
The MDX analog:
```jsx
<Story name="Example" parameters={{ storySource: { source: 'custom source' } }}>
<Button />
</Story>
```
## From version 5.2.x to 5.3.x
### To main.js configuration
@ -703,6 +883,26 @@ Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA
See the [a11y addon README](https://github.com/storybookjs/storybook/blob/master/addons/a11y/README.md) for more information.
### Addon centered decorator deprecated
If you previously had:
```js
import centered from '@storybook/addon-centered';
```
You should replace it with the React or Vue version as appropriate
```js
import centered from '@storybook/addon-centered/react';
```
or
```js
import centered from '@storybook/addon-centered/vue';
```
### New keyboard shortcuts defaults
Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can:

47
README.md
View File

@ -109,21 +109,21 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
### Supported Frameworks
| Framework | Demo | |
| -------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [React](app/react) | [v5.1.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) |
| [React Native](app/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) |
| [Vue](app/vue) | [v5.1.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v5.1.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) |
| [Marionette.js](app/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette) |
| [Mithril](app/mithril) | [v5.1.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) |
| [Marko](app/marko) | [v5.1.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) |
| [HTML](app/html) | [v5.1.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) |
| [Svelte](app/svelte) | [v5.1.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) |
| [Riot](app/riot) | [v5.1.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) |
| [Ember](app/ember) | [v5.1.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) |
| [Preact](app/preact) | [v5.1.0](https://storybooks-preact.netlify.com/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) |
| [Rax](app/rax) | [v5.1.0](https://storybooks-rax.netlify.com/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) |
| Framework | Demo | |
| -------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [React](app/react) | [v5.3.0](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) |
| [React Native](app/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) |
| [Vue](app/vue) | [v5.3.0](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v5.3.0](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) |
| [Marionette.js](app/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette) |
| [Mithril](app/mithril) | [v5.3.0](https://storybookjs.netlify.com/mithril-kitchen-sink/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) |
| [Marko](app/marko) | [v5.3.0](https://storybookjs.netlify.com/marko-cli/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) |
| [HTML](app/html) | [v5.3.0](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) |
| [Svelte](app/svelte) | [v5.3.0](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) |
| [Riot](app/riot) | [v5.3.0](https://storybookjs.netlify.com/riot-kitchen-sink/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) |
| [Ember](app/ember) | [v5.3.0](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) |
| [Preact](app/preact) | [v5.3.0](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) |
| [Rax](app/rax) | [v5.3.0](https://storybookjs.netlify.com/rax-kitchen-sink/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) |
### Sub Projects
@ -141,21 +141,32 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
| [contexts](addons/contexts/) | Interactively inject component contexts for stories in the Storybook UI |
| [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe |
| [design assets](addons/design-assets/) | View images, videos, weblinks alongside your story |
| [docs](addons/docs/) | Add high quality documentation to your components |
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
| [google-analytics](addons/google-analytics) | Reports google analytics on stories |
| [info](addons/info/) | Annotate stories with extra component usage information |
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
| [knobs](addons/knobs/) | Interactively edit component prop data in the Storybook UI |
| [links](addons/links/) | Create links between stories |
| [notes](addons/notes/) | Annotate Storybook stories with notes |
| [options](addons/options/) | Customize the Storybook UI in code |
| [query params](addons/queryparams/) | Mock query params |
| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook |
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
### Deprecated Addons
| Addons | |
| ------------------------------------------- | -------------------------------------------------------------------------- |
| [info](https://github.com/storybookjs/storybook/tree/master/addons/info) | Annotate stories with extra component usage information |
| [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes) | Annotate Storybook stories with notes |
In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.
If you're using info/notes, we highly recommend you to migrate to [docs](addons/docs/) instead, and [here is a guide](addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
## Badges & Presentation materials
We have a badge! Link it to your live Storybook example.

18
addons/a11y/README.md
View File

@ -18,20 +18,15 @@ Add this line to your `main.js` file (create this file inside your storybook con
```js
module.exports = {
addons: ['@storybook/addon-a11y/register'],
addons: ['@storybook/addon-a11y'],
};
```
import the `withA11y` decorator to check your stories for violations within your components.
```js
import React from 'react';
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'button',
decorators: [withA11y],
};
export const accessible = () => <button>Accessible button</button>;
@ -41,13 +36,14 @@ export const inaccessible = () => (
);
```
## Using the preset
Add the decorator to all stories:
If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
```js
module.exports = {
addons: ['@storybook/addon-a11y'],
export const MyNonCheckedStory = () => <SomeComponent />;
MyNonCheckedStory.story = {
parameters: {
a11y: { disable: true },
},
};
```

39
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -26,40 +26,47 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/client-api": "6.0.0-alpha.13",
"@storybook/client-logger": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/client-api": "6.0.0-alpha.27",
"@storybook/client-logger": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"axe-core": "^3.3.2",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"react": "^16.8.3",
"react-redux": "^7.0.2",
"react-sizeme": "^2.5.2",
"redux": "^4.0.1",
"ts-dedent": "^1.1.1",
"util-deprecate": "^1.0.2"
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"@types/react-redux": "^7.0.6",
"@types/webpack-env": "^1.15.1"
"@types/webpack-env": "^1.15.1",
"enzyme": "^3.11.0"
},
"peerDependencies": {
"react-dom": "*",
"regenerator-runtime": "*"
"react": "*",
"react-dom": "*"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

2
addons/a11y/src/components/A11YPanel.tsx
View File

@ -26,7 +26,7 @@ const Icon = styled(Icons)({
marginRight: 4,
});
const RotatingIcon = styled(Icon)(({ theme }) => ({
const RotatingIcon = styled(Icon)<{}>(({ theme }) => ({
animation: `${theme.animation.rotate360} 1s linear infinite;`,
}));

35
addons/a11y/src/index.ts
View File

@ -1,7 +1,5 @@
import { document } from 'global';
import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import addons, { makeDecorator } from '@storybook/addons';
import { EVENTS, PARAM_KEY } from './constants';
@ -14,7 +12,7 @@ interface Setup {
manual: boolean;
}
let setup: Setup = { element: undefined, config: {}, options: {}, manual: false };
const setup: Setup = { element: undefined, config: {}, options: {}, manual: false };
const getElement = () => {
const storyRoot = document.getElementById('story-root');
@ -74,34 +72,3 @@ export const withA11y = makeDecorator({
return getStory(context);
},
});
// TODO: REMOVE at v6.0.0
export const withA11Y = deprecate(
// @ts-ignore
(...args: any[]) => withA11y(...args),
'withA11Y has been renamed withA11y'
);
// TODO: REMOVE at v6.0.0
export const checkA11y = deprecate(
// @ts-ignore
(...args: any[]) => withA11y(...args),
'checkA11y has been renamed withA11y'
);
// TODO: REMOVE at v6.0.0
export const configureA11y = deprecate(
(config: any) => {
setup = config;
},
dedent`
configureA11y is deprecated, please configure addon-a11y using the addParameter api:
addParameters({
a11y: {
// ... axe options
element: '#root', // optional selector which element to inspect
},
});
`
);

5
addons/a11y/src/preset/addDecorator.ts
View File

@ -1,4 +1,3 @@
import { addDecorator } from '@storybook/client-api';
import { withA11Y } from '../index';
import { withA11y } from '../index';
addDecorator(withA11Y);
export const decorators = [withA11y];

85
addons/actions/README.md
View File

@ -18,10 +18,45 @@ Then, add following content to `.storybook/main.js`
```js
module.exports = {
addons: ['@storybook/addon-actions/register']
}
addons: ['@storybook/addon-actions'],
};
```
## Actions args
Starting in SB6.0, we recommend using story parameters to specify actions which get passed into your story as [Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing) (passed as the first argument when `passArgsFirst` is set to `true`).
The first option is to specify `argTypes` for your story with an `action` field. Take the following example:
```js
import Button from './button';
export default {
title: 'Button',
argTypes: { onClick: { action: 'clicked' } },
};
export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
```
Alternatively, suppose you have a naming convention, like `onX` for event handlers. The following configuration automatically creates actions for each `onX` `argType` (which you can either specify manually or generate automatically using [Storybook Docs](https://www.npmjs.com/package/@storybook/addon-docs).
```js
import Button from './button';
export default {
title: 'Button',
component: Button,
parameters: { actions: { argTypesRegex: '^on.*' } },
};
export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
```
> **NOTE:** If you're generating `argTypes` in using another addon (like Docs, which is the common behavior) you'll need to make sure that the actions addon loads **AFTER** the other addon. You can do this by listing it later in the `addons` registration code in `.storybook/main.js`.
## Manually-specified actions
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
@ -35,9 +70,7 @@ export default {
component: Button,
};
export const defaultView = () => (
<Button onClick={action('button-click')}>Hello World!</Button>
);
export const defaultView = () => <Button onClick={action('button-click')}>Hello World!</Button>;
```
## Multiple actions
@ -59,13 +92,9 @@ const eventsFromNames = actions('onClick', 'onMouseOver');
// This will lead to { onClick: action('clicked'), ... }
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
export const first = () => (
<Button {...eventsFromNames}>Hello World!</Button>
);
export const first = () => <Button {...eventsFromNames}>Hello World!</Button>;
export const second = () => (
<Button {...eventsFromObject}>Hello World!</Button>
);
export const second = () => <Button {...eventsFromObject}>Hello World!</Button>;
```
## Action Decorators
@ -85,22 +114,16 @@ export default {
const firstArg = decorate([args => args.slice(0, 1)]);
export const first = () => (
<Button onClick={firstArg.action('button-click')}>Hello World!</Button>
);
export const first = () => <Button onClick={firstArg.action('button-click')}>Hello World!</Button>;
```
## Configuration
Arguments which are passed to the action call will have to be serialized while be "transferred"
over the channel.
Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible
to configure a maximum depth.
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.
The action logger, by default, will log all actions fired during the lifetime of the story. After a while
this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should
be logged.
The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.
To apply the configuration globally use the `configureActions` function in your `preview.js` file.
@ -115,6 +138,7 @@ configureActions({
```
To apply the configuration per action use:
```js
action('my-action', {
depth: 5,
@ -123,16 +147,15 @@ action('my-action', {
### Available Options
|Name|Type|Description|Default|
|---|---|---|---|
|`depth`|Number|Configures the transferred depth of any logged objects.|`10`|
|`clearOnStoryChange`|Boolean|Flag whether to clear the action logger when switching away from the current story.|`true`|
|`limit`|Number|Limits the number of items logged in the action logger|`50`|
| Name | Type | Description | Default |
| -------------------- | ------- | ----------------------------------------------------------------------------------- | ------- |
| `depth` | Number | Configures the transferred depth of any logged objects. | `10` |
| `clearOnStoryChange` | Boolean | Flag whether to clear the action logger when switching away from the current story. | `true` |
| `limit` | Number | Limits the number of items logged in the action logger | `50` |
## withActions decorator
You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions)
Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions). Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
```js
import { withActions } from '@storybook/addon-actions';
@ -140,10 +163,8 @@ import Button from './button';
export default {
title: 'Button',
decorators: [withActions('mouseover', 'click .btn')]
decorators: [withActions('mouseover', 'click .btn')],
};
export const first = () => (
<Button className="btn">Hello World!</Button>
);
export const first = () => <Button className="btn">Hello World!</Button>;
```

30
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -21,18 +21,19 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/client-api": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/client-api": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"fast-deep-equal": "^3.1.1",
"global": "^4.3.2",
@ -40,6 +41,7 @@
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-inspector": "^4.0.0",
"regenerator-runtime": "^0.13.3",
"uuid": "^3.3.2"
},
"devDependencies": {
@ -48,11 +50,17 @@
"@types/webpack-env": "^1.15.1"
},
"peerDependencies": {
"react-dom": "*",
"regenerator-runtime": "*"
"react-dom": "*"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

1
addons/actions/preset.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/preset');

1
addons/actions/src/components/ActionLogger/style.tsx
View File

@ -8,6 +8,7 @@ export const Action = styled.div({
borderBottom: '1px solid transparent',
transition: 'all 0.1s',
alignItems: 'flex-start',
whiteSpace: 'pre',
});
export const Counter = styled.div<{}>(({ theme }) => ({

67
addons/actions/src/preset/addArgs.test.ts Normal file
View File

@ -0,0 +1,67 @@
import { StoryContext } from '@storybook/addons';
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgs';
describe('actions parameter enhancers', () => {
describe('actions.argTypesRegex parameter', () => {
const baseParameters = {
argTypes: { onClick: {}, onFocus: {}, somethingElse: {} },
actions: { argTypesRegex: '^on.*' },
};
it('should add actions that match a pattern', () => {
const parameters = baseParameters;
const { args } = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onFocus']);
});
it('should prioritize pre-existing args', () => {
const parameters = {
...baseParameters,
args: { onClick: 'pre-existing arg' },
};
const { args } = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onFocus']);
expect(args.onClick).toEqual('pre-existing arg');
});
it('should do nothing if actions are disabled', () => {
const parameters = {
...baseParameters,
actions: { ...baseParameters.actions, disable: true },
};
const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(result).toBeFalsy();
});
});
describe('argTypes.action parameter', () => {
const baseParameters = {
argTypes: {
onClick: { action: 'clicked!' },
onBlur: { action: 'blurred!' },
},
};
it('should add actions based on action.args', () => {
const parameters = baseParameters;
const { args } = addActionsFromArgTypes({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onBlur']);
});
it('should prioritize pre-existing args', () => {
const parameters = {
...baseParameters,
args: { onClick: 'pre-existing arg' },
};
const { args } = addActionsFromArgTypes({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onBlur']);
expect(args.onClick).toEqual('pre-existing arg');
});
it('should do nothing if actions are disabled', () => {
const parameters = { ...baseParameters, actions: { disable: true } };
const result = addActionsFromArgTypes({ parameters } as StoryContext);
expect(result).toBeFalsy();
});
});
});

57
addons/actions/src/preset/addArgs.ts Normal file
View File

@ -0,0 +1,57 @@
import { ParameterEnhancer, combineParameters } from '@storybook/client-api';
import { Args, ArgType } from '@storybook/addons';
import { action } from '../index';
// interface ActionsParameter {
// disable?: boolean;
// argTypesRegex?: RegExp;
// }
/**
* Automatically add action args for argTypes whose name
* matches a regex, such as `^on.*` for react-style `onClick` etc.
*/
export const inferActionsFromArgTypesRegex: ParameterEnhancer = context => {
const { args, actions, argTypes } = context.parameters;
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
return null;
}
const argTypesRegex = new RegExp(actions.argTypesRegex);
const actionArgs = Object.keys(argTypes).reduce((acc, name) => {
if (argTypesRegex.test(name)) {
acc[name] = action(name);
}
return acc;
}, {} as Args);
return {
args: combineParameters(actionArgs, args),
};
};
/**
* Add action args for list of strings.
*/
export const addActionsFromArgTypes: ParameterEnhancer = context => {
const { args, argTypes, actions } = context.parameters;
if (actions?.disable || !argTypes) {
return null;
}
const actionArgs = Object.keys(argTypes).reduce((acc, argName) => {
const argType: ArgType = argTypes[argName];
if (argType.action) {
const message = typeof argType.action === 'string' ? argType.action : argName;
acc[argName] = action(message);
}
return acc;
}, {} as Args);
return {
args: combineParameters(actionArgs, args),
};
};
export const parameterEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];

7
addons/actions/src/preset/index.ts Normal file
View File

@ -0,0 +1,7 @@
export function managerEntries(entry: any[] = [], options: any) {
return [...entry, require.resolve('../../register')];
}
export function config(entry: any[] = []) {
return [...entry, require.resolve('./addArgs')];
}

10
addons/actions/tsconfig.json
View File

@ -2,12 +2,8 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"]
"types": ["webpack-env", "jest"]
},
"include": [
"src/**/*"
],
"exclude": [
"src/__tests__/**/*"
]
"include": ["src/**/*"],
"exclude": ["src/__tests__/**/*", "src/**/*.test.ts"]
}

2
addons/backgrounds/README.md
View File

@ -20,7 +20,7 @@ Add following content to it:
```js
module.exports = {
addons: ['@storybook/addon-backgrounds/register']
addons: ['@storybook/addon-backgrounds']
}
```

32
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -25,33 +25,39 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/client-logger": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/client-logger": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",
"util-deprecate": "^1.0.2"
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"@types/util-deprecate": "^1.0.0",
"@types/webpack-env": "^1.15.1"
},
"peerDependencies": {
"react-dom": "*",
"regenerator-runtime": "*"
"react-dom": "*"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

2
addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -64,7 +64,7 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
};
const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
const story = state.storiesHash[state.storyId];
const story = api.getData(state.storyId);
const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
const selected = state.addons[PARAM_KEY] || null;

17
addons/backgrounds/src/index.ts
View File

@ -1,20 +1,3 @@
import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';
import deprecate from 'util-deprecate';
// This decorator is kept purely so we produce a decorator that is compatible with both
// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)`
export const withBackgrounds = deprecate(
makeDecorator({
name: 'withBackgrounds',
parameterName: 'backgrounds',
wrapper: (getStory: StoryGetter, context: StoryContext) => {
return getStory(context);
},
}),
`Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options})
Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
);
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}

36
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
@ -23,27 +23,51 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"@types/mithril": "^1.1.16",
"@types/webpack-env": "^1.15.1",
"mithril": "*",
"preact": "*",
"rax": "*",
"rax-view": "*",
"react": "*"
},
"peerDependencies": {
"react-dom": "*",
"regenerator-runtime": "*"
"mithril": "*",
"preact": "*",
"rax": "*",
"rax-view": "*",
"react": "*",
"react-dom": "*"
},
"peerDependenciesMeta": {
"mithril": {
"optional": true
},
"preact": {
"optional": true
},
"rax": {
"optional": true
},
"rax-view": {
"optional": true
},
"react": {
"optional": true
}
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
}

21
addons/centered/src/index.ts
View File

@ -1,24 +1,3 @@
import { window } from 'global';
import deprecate from 'util-deprecate';
import ReactCentered from './react';
import VueCentered from './vue';
// TODO: REMOVE this entire file in V6.0.0
const Centered = deprecate(
() => (window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered),
`
Using "import centered from '@storybook/addon-centered'" is deprecated.
Please use either:
"import centered from '@storybook/addon-centered/react'"
or
"import centered from '@storybook/addon-centered/vue'"
`
)();
export default Centered;
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}

1
addons/centered/src/mithril.tsx
View File

@ -1,5 +1,4 @@
/** @jsx m */
/* eslint-disable import/no-extraneous-dependencies */
import m, { ComponentTypes } from 'mithril';
import { makeDecorator } from '@storybook/addons';
import parameters from './parameters';

1
addons/centered/src/preact.tsx
View File

@ -1,5 +1,4 @@
/** @jsx h */
/* eslint-disable import/no-extraneous-dependencies */
import { Component, h } from 'preact';
import { makeDecorator } from '@storybook/addons';
import parameters from './parameters';

1
addons/centered/src/rax.js
View File

@ -1,5 +1,4 @@
/** @jsx createElement */
/* eslint-disable import/no-extraneous-dependencies */
import { createElement } from 'rax';
import View from 'rax-view';
import { makeDecorator } from '@storybook/addons';

1
addons/centered/src/react.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies */
import React, { ReactNode } from 'react';
import { makeDecorator, StoryFn } from '@storybook/addons';
import parameters from './parameters';

25
addons/contexts/README.md
View File

@ -51,7 +51,7 @@ within `.storybook/main.js`:
```js
module.exports = {
addons: ['@storybook/addon-contexts/register']
addons: ['@storybook/addon-contexts']
}
```
@ -78,17 +78,36 @@ export default {
};
```
Finally, you may want to modify the default setups at per story level. Here is how you can do this:
Finally, you may want to create new contextual environments or disable default setups at the story level. To create a new contextual environment at the story level:
```js
export const defaultView = () => <div />; // sample story in CSF format
defaultView.story = {
parameters: {
contexts: [{ /* contextual environment defined using the API below */ }]
}
};
```
To disable a default setup at the story level:
```js
export const defaultView = () => <div />;
defaultView.story = {
parameters: {
context: [{}]
contexts: [
{
title: '[title of contextual environment defined in contexts.js]'
options: { disable: true }
}
]
}
};
```
To override the default option for a default setup at the story level, see [this suggestion](https://discordapp.com/channels/486522875931656193/501692020226654208/687359410577604732).
## ⚙️ Setups
### Overview

30
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "Storybook Addon Contexts",
"keywords": [
"preact",
@ -20,20 +20,26 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"dev:check-types": "tsc --noEmit",
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0"
"qs": "^6.6.0",
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"@types/enzyme": "^3.10.5",
"enzyme": "^3.11.0"
},
"peerDependencies": {
"global": "*",
@ -42,7 +48,6 @@
"rax": "*",
"react": "*",
"react-dom": "*",
"regenerator-runtime": "*",
"vue": "*"
},
"peerDependenciesMeta": {
@ -59,5 +64,12 @@
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

2
addons/cssresources/README.md
View File

@ -20,7 +20,7 @@ Add following content to it:
```js
module.exports = {
addons: ['@storybook/addon-cssresources/register'],
addons: ['@storybook/addon-cssresources'],
};
```

35
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -25,31 +25,42 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"
"react": "^16.8.3",
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"@types/webpack-env": "^1.15.1"
"@types/webpack-env": "^1.15.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"react-dom": "^16.12.0"
},
"peerDependencies": {
"react": "*",
"react-dom": "*",
"regenerator-runtime": "*"
"react-dom": "*"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

2
addons/design-assets/README.md
View File

@ -15,7 +15,7 @@ within `.storybook/main.js`:
```js
module.exports = {
addons: ['@storybook/addon-design-assets/register']
addons: ['@storybook/addon-design-assets']
}
```

30
addons/design-assets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -27,30 +27,38 @@
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/client-logger": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/client-logger": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",
"regenerator-runtime": "^0.13.3",
"ts-dedent": "^1.1.1",
"use-image": "^1.0.3"
},
"peerDependencies": {
"react-dom": "*",
"regenerator-runtime": "*"
"react-dom": "*"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

4
addons/docs/README.md
View File

@ -164,7 +164,7 @@ The `configureJSX` option is useful when you're writing your docs in MDX and you
## Manual configuration
If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
```js
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
@ -208,7 +208,7 @@ module.exports = {
};
```
Finally, you'll need to set up DocsPage in `.storybook/preview.js`:
You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
```js
import { addParameters } from '@storybook/react';

2
addons/docs/angular/README.md
View File

@ -103,7 +103,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:
```ts
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.(js|ts|mdx)'],
};
```

1
addons/docs/angular/preset.js vendored
View File

@ -1 +0,0 @@
module.exports = require('../dist/frameworks/common/makePreset').default('angular');

43
addons/docs/docs/docspage.md
View File

@ -19,6 +19,7 @@ When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config d
- [Stories](#stories)
- [Slot functions](#slot-functions)
- [Replacing DocsPage](#replacing-docspage)
- [Remixing DocsPage using doc blocks](#remixing-docspage-using-doc-blocks)
- [Story file names](#story-file-names)
- [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
- [More resources](#more-resources)
@ -207,8 +208,8 @@ Here is the `SlotContext` type definition:
```ts
export interface SlotContext {
id?: string;
selectedKind?: string;
selectedStory?: string;
kind?: string;
name?: string;
parameters?: any;
storyStore?: any;
}
@ -263,6 +264,44 @@ basic.story = {
}
```
### Remixing DocsPage using doc blocks
Here's an example of rebuilding `DocsPage` out of doc blocks:
```js
import React from 'react';
import {
Title,
Subtitle,
Description,
Primary,
Props,
Stories,
} from '@storybook/addon-docs/blocks';
import { DocgenButton } from '../../components/DocgenButton';
export default {
title: 'Addons/Docs/stories docs blocks',
component: DocgenButton,
parameters: {
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<Props />
<Stories />
</>
),
},
},
};
```
You can interleave your own components to customize the auto-generated contents of the page, or pass in different options to the blocks to customize their appearance. For more info see the examples in [official-storybook](https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js).
## Story file names
Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.

19
addons/docs/docs/props-tables.md
View File

@ -10,6 +10,7 @@ Storybook Docs automatically generates props tables for components in supported
- [Reporting a bug](#reporting-a-bug)
- [Known limitations](#known-limitations)
- [React](#react)
- [Fully support React.FC](#fully-support-reactfc)
- [Vue](#vue)
- [Angular](#angular)
- [Web components](#web-components)
@ -73,6 +74,24 @@ This package relies on a variety of sub-packages to extract property information
SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables.
#### Fully support React.FC
The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**:
```tsx
import React, { FC } from 'react';
interface IProps { ... };
const MyComponent: FC<IProps> = ({ ... }) => ...
```
The following workaround is needed:
```tsx
const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
```
Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix!
### Vue
SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.

36
addons/docs/docs/recipes.md
View File

@ -14,6 +14,7 @@
- [DocsPage](#docspage)
- [MDX Stories](#mdx-stories)
- [Controlling a story's view mode](#controlling-a-storys-view-mode)
- [Customizing source snippets](#customizing-source-snippets)
- [More resources](#more-resources)
## Component Story Format (CSF) with DocsPage
@ -58,7 +59,7 @@ basic.story = {
```md
import { Meta, Story } from '@storybook/addon-docs/blocks';
import \* as stories from './Button.stories.js';
import * as stories from './Button.stories.js';
import { SomeComponent } from 'path/to/SomeComponent';
<Meta title="Demo/Button" component={Button} />
@ -205,7 +206,7 @@ foo.story = { parameters: { docs: { disable: true } } };
User writes documentation & stories side-by-side in a single MDX file, and wants those stories to show up in the canvas but not in the docs themselves. They want something similar to the recipe "CSF stories with MDX docs" but want to do everything in MDX:
```js
<Story name="foo" parameters={{ docs: { disable: true }} >
<Story name="foo" parameters={{ docs: { disable: true } }}>
<Button>foo</Button>
</Story>
```
@ -235,6 +236,37 @@ addParameters({
});
```
## Customizing source snippets
As of SB 6.0, there are two ways to customize how Docs renders source code, via story parameter or via a formatting function.
If you override the `docs.source.code` parameter, the `Source` block will render whatever string is added:
```js
const Example = () => <Button />;
Example.story = {
parameters: {
docs: { source: { code: 'some arbitrary string' } },
},
};
```
Alternatively, you can provide a function in the `docs.formatSource` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
```js
const SOURCE_REGEX = /^\(\) => `(.*)`$/;
export const parameters = {
docs: {
formatSource: (src, storyId) => {
const match = SOURCE_REGEX.exec(src);
return match ? match[1] : src;
},
},
};
```
These two methods are complementary. The former is useful for story-specific, and the latter is useful for global formatting.
## More resources
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)

28
addons/docs/docs/theming.md
View File

@ -9,23 +9,31 @@
## Storybook theming
Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configurations/theming/), but is themed independently from the main UI.
> In the documentation it will say you can theme storybook in `manager.js`, That's a newer more optimal way to theme storybook, but it's currently incompatible with docs.
>
> We're working on making it compatible in 6.0.0, so for now use the method described below.
Here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`:
Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
```js
import { addParameters } from '@storybook/react';
import { addons } from '@storybook/addons';
// or a custom theme
import { themes } from '@storybook/theming';
addParameters({
options: {
addons.setConfig({
theme: themes.dark,
});
```
Here's how you'd specify the same theme for docs in `.storybook/preview.js`:
```js
import { themes } from '@storybook/theming';
// or global addParameters
export const parameters = {
docs: {
theme: themes.dark,
},
});
};
```
## CSS escape hatches

1
addons/docs/html/preset.js
View File

@ -1 +0,0 @@
module.exports = require('../dist/frameworks/common/makePreset').default('html');

66
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "6.0.0-alpha.13",
"version": "6.0.0-alpha.27",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -31,7 +31,8 @@
"web-components/**/*",
"README.md",
"*.js",
"*.d.ts"
"*.d.ts",
"ts3.5/**/*"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
@ -40,19 +41,22 @@
"@babel/generator": "^7.8.4",
"@babel/parser": "^7.8.4",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.8.4",
"@egoist/vue-to-react": "^1.1.0",
"@jest/transform": "^25.1.0",
"@mdx-js/loader": "^1.5.1",
"@mdx-js/mdx": "^1.5.1",
"@mdx-js/react": "^1.5.1",
"@storybook/addons": "6.0.0-alpha.13",
"@storybook/api": "6.0.0-alpha.13",
"@storybook/components": "6.0.0-alpha.13",
"@storybook/core-events": "6.0.0-alpha.13",
"@storybook/addons": "6.0.0-alpha.27",
"@storybook/api": "6.0.0-alpha.27",
"@storybook/client-api": "6.0.0-alpha.27",
"@storybook/components": "6.0.0-alpha.27",
"@storybook/core-events": "6.0.0-alpha.27",
"@storybook/csf": "0.0.1",
"@storybook/postinstall": "6.0.0-alpha.13",
"@storybook/source-loader": "6.0.0-alpha.13",
"@storybook/theming": "6.0.0-alpha.13",
"@storybook/node-logger": "6.0.0-alpha.27",
"@storybook/postinstall": "6.0.0-alpha.27",
"@storybook/source-loader": "6.0.0-alpha.27",
"@storybook/theming": "6.0.0-alpha.27",
"acorn": "^7.1.0",
"acorn-jsx": "^5.1.0",
"acorn-walk": "^7.0.0",
@ -65,6 +69,7 @@
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react-element-to-jsx-string": "^14.1.0",
"regenerator-runtime": "^0.13.3",
"remark-external-links": "^5.0.0",
"remark-slug": "^5.1.2",
"ts-dedent": "^1.1.1",
@ -73,32 +78,63 @@
"vue-docgen-loader": "^1.4.0"
},
"devDependencies": {
"@storybook/react": "6.0.0-alpha.13",
"@storybook/web-components": "6.0.0-alpha.13",
"@angular/core": "^8.2.8",
"@babel/core": "^7.8.4",
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/react": "6.0.0-alpha.27",
"@storybook/web-components": "6.0.0-alpha.27",
"@types/doctrine": "^0.0.3",
"@types/enzyme": "^3.10.3",
"@types/jest": "^25.1.1",
"@types/prop-types": "^15.5.9",
"@types/util-deprecate": "^1.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-react-docgen": "^4.1.0",
"cross-spawn": "^7.0.1",
"fs-extra": "^8.1.0",
"jest": "^25.1.0",
"jest-specific-snapshot": "^2.0.0",
"lit-element": "^2.2.1",
"lit-html": "^1.0.0",
"prettier": "^1.18.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-is": "^16.12.0",
"require-from-string": "^2.0.2",
"rxjs": "^6.5.4",
"styled-components": "^5.0.1",
"tmp": "^0.1.0",
"web-component-analyzer": "^1.0.3"
"web-component-analyzer": "^1.0.3",
"webpack": "^4.33.0",
"zone.js": "^0.10.2"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0",
"babel-loader": "^8.0.0",
"react": "^16.9.0",
"react": ">=16.3.0",
"react-dom": "*",
"react-is": "^16.8.0",
"regenerator-runtime": "*"
"vue": "^2.6.10",
"webpack": ">=4"
},
"peerDependenciesMeta": {
"vue": {
"optional": true
},
"webpack": {
"optional": true
}
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
"typesVersions": {
"<=3.5": {
"*": [
"ts3.5/*"
]
}
}
}

1
addons/docs/postinstall/presets.js
View File

@ -1,6 +1,5 @@
import fs from 'fs';
import { presetsAddPreset, getFrameworks } from '@storybook/postinstall';
// eslint-disable-next-line import/no-extraneous-dependencies
import { logger } from '@storybook/node-logger';
export default function transformer(file, api) {

1
addons/docs/react/preset.js
View File

@ -1 +0,0 @@
module.exports = require('../dist/frameworks/common/makePreset').default('react');

20
addons/docs/src/blocks/DocsContainer.tsx
View File

@ -1,5 +1,7 @@
import React, { FunctionComponent, useEffect } from 'react';
import { document, window } from 'global';
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import { MDXProvider } from '@mdx-js/react';
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
import { DocsWrapper, DocsContent } from '@storybook/components';
@ -23,10 +25,20 @@ const defaultComponents = {
export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
const { id: storyId = null, parameters = {} } = context || {};
const options = parameters.options || {};
const theme = ensureTheme(options.theme);
const { components: userComponents = null } = parameters.docs || {};
const allComponents = { ...defaultComponents, ...userComponents };
const { options = {}, docs = {} } = parameters;
let themeVars = docs.theme;
if (!themeVars && options.theme) {
deprecate(
() => {},
dedent`
options.theme => Deprecated: use story.parameters.docs.theme instead.
See https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming for details.
`
)();
themeVars = options.theme;
}
const theme = ensureTheme(themeVars);
const allComponents = { ...defaultComponents, ...docs.components };
useEffect(() => {
let url;

4
addons/docs/src/blocks/DocsContext.ts
View File

@ -2,8 +2,8 @@ import { Context, createContext } from 'react';
export interface DocsContextProps {
id?: string;
selectedKind?: string;
selectedStory?: string;
kind?: string;
name?: string;
/**
* mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's

18
addons/docs/src/blocks/DocsPage.test.ts
View File

@ -5,20 +5,20 @@ describe('defaultTitleSlot', () => {
const parameters = {
options: { showRoots: true },
};
expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('a|b');
expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('c.d');
expect(defaultTitleSlot({ kind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ kind: 'a|b', parameters })).toBe('a|b');
expect(defaultTitleSlot({ kind: 'a/b/c.d', parameters })).toBe('c.d');
});
it('no showRoots', () => {
const parameters = {};
expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
expect(defaultTitleSlot({ kind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ kind: 'a|b', parameters })).toBe('b');
expect(defaultTitleSlot({ kind: 'a/b/c.d', parameters })).toBe('d');
});
it('empty options', () => {
const parameters = { options: {} };
expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
expect(defaultTitleSlot({ kind: 'a/b/c', parameters })).toBe('c');
expect(defaultTitleSlot({ kind: 'a|b', parameters })).toBe('b');
expect(defaultTitleSlot({ kind: 'a/b/c.d', parameters })).toBe('d');
});
});

41
addons/docs/src/blocks/Source.tsx
View File

@ -24,41 +24,6 @@ type NoneProps = CommonProps;
type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
interface Location {
line: number;
col: number;
}
interface StorySource {
source: string;
locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
}
const extract = (targetId: string, { source, locationsMap }: StorySource) => {
if (!locationsMap) {
return source;
}
const location = locationsMap[targetId];
// FIXME: bad locationsMap generated for module export functions whose titles are overridden
if (!location) return null;
const { startBody: start, endBody: end } = location;
const lines = source.split('\n');
if (start.line === end.line && lines[start.line - 1] !== undefined) {
return lines[start.line - 1].substring(start.col, end.col);
}
// NOTE: storysource locations are 1-based not 0-based!
const startLine = lines[start.line - 1];
const endLine = lines[end.line - 1];
if (startLine === undefined || endLine === undefined) {
return source;
}
return [
startLine.substring(start.col),
...lines.slice(start.line, end.line - 1),
endLine.substring(0, end.col),
].join('\n');
};
export const getSourceProps = (
props: SourceProps,
{ id: currentId, storyStore }: DocsContextProps
@ -74,11 +39,7 @@ export const getSourceProps = (
source = targetIds
.map(sourceId => {
const data = storyStore.fromId(sourceId);
if (data && data.parameters) {
const { mdxSource, storySource } = data.parameters;
return mdxSource || (storySource && extract(sourceId, storySource));
}
return '';
return data.parameters.docs?.source?.code || '';
})
.join('\n\n');
}

12
addons/docs/src/blocks/Title.tsx
View File

@ -8,7 +8,7 @@ interface TitleProps {
slot?: StringSlot;
children?: JSX.Element | string;
}
export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
export const defaultTitleSlot: StringSlot = ({ kind, parameters }) => {
const {
showRoots,
hierarchyRootSeparator: rootSeparator = '|',
@ -17,27 +17,27 @@ export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
let groups;
if (typeof showRoots !== 'undefined') {
groups = selectedKind.split('/');
groups = kind.split('/');
} else {
// This covers off all the remaining cases:
// - If the separators were set above, we should use them
// - If they weren't set, we should only should use the old defaults if the kind contains '.' or '|',
// which for this particular splitting is the only case in which it actually matters.
({ groups } = parseKind(selectedKind, { rootSeparator, groupSeparator }));
({ groups } = parseKind(kind, { rootSeparator, groupSeparator }));
}
return (groups && groups[groups.length - 1]) || selectedKind;
return (groups && groups[groups.length - 1]) || kind;
};
export const Title: FunctionComponent<TitleProps> = ({ slot, children }) => {
const context = useContext(DocsContext);
const { selectedKind, parameters } = context;
const { kind, parameters } = context;
let text: JSX.Element | string = children;
if (!text) {
if (slot) {
text = slot(context);
} else {
text = defaultTitleSlot({ selectedKind, parameters });
text = defaultTitleSlot({ kind, parameters });
}
}
return text ? <PureTitle className="sbdocs-title">{text}</PureTitle> : null;

4
addons/docs/src/blocks/shared.ts
View File

@ -18,8 +18,8 @@ export type DocsStoryProps = StoryData & {
export interface SlotContext {
id?: string;
selectedKind?: string;
selectedStory?: string;
kind?: string;
name?: string;
parameters?: any;
storyStore?: any;
}

4
addons/docs/src/blocks/utils.ts
View File

@ -3,14 +3,14 @@ import { DocsContextProps } from './DocsContext';
import { StoryData, Component } from './shared';
export const getDocsStories = (context: DocsContextProps): StoryData[] => {
const { storyStore, selectedKind } = context;
const { storyStore, kind } = context;
if (!storyStore) {
return [];
}
return storyStore
.getStoriesForKind(selectedKind)
.getStoriesForKind(kind)
.filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
};

1
addons/docs/src/frameworks/angular/config.ts
View File

@ -1,4 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/client-api';
import { extractProps, extractComponentDescription } from './compodoc';

10
addons/docs/src/frameworks/common/config.ts
View File

@ -1,10 +1,12 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/client-api';
/* eslint-disable-next-line import/no-extraneous-dependencies */
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { enhanceSource } from './enhanceSource';
addParameters({
export const parameters = {
docs: {
container: DocsContainer,
page: DocsPage,
},
});
};
export const parameterEnhancers = [enhanceSource];

82
addons/docs/src/frameworks/common/enhanceSource.test.ts Normal file
View File

@ -0,0 +1,82 @@
import { StoryContext } from '@storybook/addons';
import { enhanceSource } from './enhanceSource';
const emptyContext: StoryContext = {
id: 'foo--bar',
kind: 'foo',
name: 'bar',
args: {},
globalArgs: {},
parameters: {},
};
const formatSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
describe('addon-docs enhanceSource', () => {
describe('no source loaded', () => {
const baseContext = emptyContext;
it('no formatSource', () => {
expect(enhanceSource(baseContext)).toBeNull();
});
it('formatSource', () => {
const parameters = { ...baseContext.parameters, docs: { formatSource } };
expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
});
});
describe('custom/mdx source loaded', () => {
const baseContext = {
...emptyContext,
parameters: { storySource: { source: 'storySource.source' } },
};
it('no formatSource', () => {
expect(enhanceSource(baseContext)).toEqual({
docs: { source: { code: 'storySource.source' } },
});
});
it('formatSource', () => {
const parameters = { ...baseContext.parameters, docs: { formatSource } };
expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
code: 'formatted: storySource.source',
});
});
});
describe('storysource source loaded w/ locationsMap', () => {
const baseContext = {
...emptyContext,
parameters: {
storySource: {
source: 'storySource.source',
locationsMap: {
'foo--bar': { startBody: { line: 1, col: 5 }, endBody: { line: 1, col: 11 } },
},
},
},
};
it('no formatSource', () => {
expect(enhanceSource(baseContext)).toEqual({ docs: { source: { code: 'Source' } } });
});
it('formatSource', () => {
const parameters = { ...baseContext.parameters, docs: { formatSource } };
expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
code: 'formatted: Source',
});
});
});
describe('custom docs.source provided', () => {
const baseContext = {
...emptyContext,
parameters: {
storySource: { source: 'storySource.source' },
docs: { source: { code: 'docs.source.code' } },
},
};
it('no formatSource', () => {
expect(enhanceSource(baseContext)).toBeNull();
});
it('formatSource', () => {
const { source } = baseContext.parameters.docs;
const parameters = { ...baseContext.parameters, docs: { source, formatSource } };
expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
});
});
});

53
addons/docs/src/frameworks/common/enhanceSource.ts Normal file
View File

@ -0,0 +1,53 @@
import { ParameterEnhancer, combineParameters } from '@storybook/client-api';
interface Location {
line: number;
col: number;
}
interface StorySource {
source: string;
locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
}
const extract = (targetId: string, { source, locationsMap }: StorySource) => {
if (!locationsMap) {
return source;
}
const location = locationsMap[targetId];
// FIXME: bad locationsMap generated for module export functions whose titles are overridden
if (!location) return null;
const { startBody: start, endBody: end } = location;
const lines = source.split('\n');
if (start.line === end.line && lines[start.line - 1] !== undefined) {
return lines[start.line - 1].substring(start.col, end.col);
}
// NOTE: storysource locations are 1-based not 0-based!
const startLine = lines[start.line - 1];
const endLine = lines[end.line - 1];
if (startLine === undefined || endLine === undefined) {
return source;
}
return [
startLine.substring(start.col),
...lines.slice(start.line, end.line - 1),
endLine.substring(0, end.col),
].join('\n');
};
export const enhanceSource: ParameterEnhancer = context => {
const { id, parameters } = context;
const { storySource, docs = {} } = parameters;
const { formatSource } = docs;
// no input or user has manually overridden the output
if (!storySource?.source || docs.source?.code) {
return null;
}
const input = extract(id, storySource);
const code = formatSource ? formatSource(input, id) : input;
return { docs: combineParameters(docs, { source: { code } }) };
};

17
addons/docs/src/frameworks/common/makePreset.ts
View File

@ -1,17 +0,0 @@
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import * as common from '../../preset';
const makePreset = (framework: string) => {
deprecate(
() => {},
dedent`
Framework-specific presets are no longer-needed as of Storybook 5.3 and will be removed in 6.0.
Please use '@storybook/addon-docs/preset' instead of '@storybook/addon-docs/${framework}/preset'.
`
)();
return common;
};
export default makePreset;

5
addons/docs/src/frameworks/common/preset.ts
View File

@ -1,5 +1,6 @@
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line import/no-extraneous-dependencies
import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin';
import path from 'path';
import remarkSlug from 'remark-slug';
import remarkExternalLinks from 'remark-external-links';
@ -52,7 +53,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
...(module.rules || []),
{
test: /\.js$/,
include: /node_modules\/acorn-jsx/,
include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
use: [
{
loader: 'babel-loader',

1
addons/docs/src/frameworks/ember/config.js
View File

@ -1,4 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/client-api';
import { extractProps, extractComponentDescription } from './jsondoc';

5
addons/docs/src/frameworks/ember/jsondoc.js
View File

@ -26,5 +26,10 @@ export const extractProps = componentName => {
export const extractComponentDescription = componentName => {
const json = getJSONDoc();
const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
if (!componentDoc) {
return '';
}
return componentDoc.attributes.description;
};

36
addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot Normal file
View File

@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 10017-ts-union 1`] = `
"import React from 'react';
const Avatar = ({
icon
}) => {
return React.createElement(\\"div\\", {
className: \\"hello\\"
}, \\"Hello Component \\", icon);
};
export const component = Avatar;
Avatar.__docgenInfo = {
\\"description\\": \\"\\",
\\"methods\\": [],
\\"displayName\\": \\"Avatar\\",
\\"props\\": {
\\"icon\\": {
\\"required\\": true,
\\"tsType\\": {
\\"name\\": \\"union\\",
\\"raw\\": \\"React.ReactNode | string\\",
\\"elements\\": [{
\\"name\\": \\"ReactReactNode\\",
\\"raw\\": \\"React.ReactNode\\"
}, {
\\"name\\": \\"string\\"
}]
},
\\"description\\": \\"specify icon=\\\\\\"search\\\\\\" or icon={IconComponent}\\"
}
}
};"
`;

12
addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
interface AvatarProps {
/** specify icon="search" or icon={IconComponent} */
icon: React.ReactNode | string;
}
const Avatar = ({ icon }: AvatarProps) => {
return <div className="hello">Hello Component {icon}</div>;
};
export const component = Avatar;

18
addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot Normal file
View File

@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 10017-ts-union 1`] = `
Object {
"rows": Array [
Object {
"defaultValue": null,
"description": "specify icon=\\"search\\" or icon={IconComponent}",
"name": "icon",
"required": true,
"type": Object {
"detail": undefined,
"summary": "union",
},
},
],
}
`;

5
addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot
View File

@ -4,10 +4,7 @@ exports[`react component properties 8143-ts-imported-types 1`] = `
Object {
"rows": Array [
Object {
"defaultValue": Object {
"detail": undefined,
"summary": "0",
},
"defaultValue": null,
"description": "",
"name": "bar",
"required": true,

1
addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot
View File

@ -14,6 +14,7 @@ React.createElement(\\"button\\", {
Button.__docgenInfo = {
\\"description\\": \\"\\",
\\"methods\\": [],
\\"displayName\\": \\"Button\\",
\\"props\\": {
\\"disabled\\": {
\\"defaultValue\\": {

5
addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot
View File

@ -17,10 +17,7 @@ Object {
},
},
Object {
"defaultValue": Object {
"detail": undefined,
"summary": "1",
},
"defaultValue": null,
"description": "A message alerting about Empire activities.",
"name": "message",
"required": true,

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