From 47818ac476f2a1b29563b842532e9190c24f08c6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 10 Aug 2020 17:37:34 +0800 Subject: [PATCH 01/13] Update version.ts to 6.0.0-rc.30 --- addons/a11y/package.json | 2 +- addons/actions/package.json | 2 +- addons/backgrounds/package.json | 2 +- addons/controls/package.json | 2 +- addons/cssresources/package.json | 2 +- addons/design-assets/package.json | 2 +- addons/docs/package.json | 2 +- addons/essentials/package.json | 2 +- addons/events/package.json | 2 +- addons/google-analytics/package.json | 2 +- addons/graphql/package.json | 2 +- addons/jest/package.json | 2 +- addons/knobs/package.json | 2 +- addons/links/package.json | 2 +- addons/queryparams/package.json | 2 +- .../storyshots/storyshots-core/package.json | 2 +- .../storyshots-puppeteer/package.json | 2 +- addons/storysource/package.json | 2 +- addons/toolbars/package.json | 2 +- addons/viewport/package.json | 2 +- app/angular/package.json | 2 +- app/aurelia/package.json | 2 +- app/ember/package.json | 2 +- app/html/package.json | 2 +- app/marionette/package.json | 2 +- app/marko/package.json | 2 +- app/mithril/package.json | 2 +- app/preact/package.json | 2 +- app/rax/package.json | 2 +- app/react/package.json | 2 +- app/riot/package.json | 2 +- app/server/package.json | 2 +- app/svelte/package.json | 2 +- app/vue/package.json | 2 +- app/web-components/package.json | 2 +- dev-kits/addon-decorator/package.json | 2 +- dev-kits/addon-parameter/package.json | 2 +- dev-kits/addon-preview-wrapper/package.json | 2 +- dev-kits/addon-roundtrip/package.json | 2 +- lib/addons/package.json | 2 +- lib/api/package.json | 2 +- lib/api/src/version.ts | 2 +- lib/channel-postmessage/package.json | 2 +- lib/channel-websocket/package.json | 2 +- lib/channels/package.json | 2 +- lib/cli-sb/package.json | 2 +- lib/cli-storybook/package.json | 2 +- lib/cli/package.json | 2 +- lib/cli/versions.json | 106 +++++++++--------- lib/client-api/package.json | 2 +- lib/client-logger/package.json | 2 +- lib/codemod/package.json | 2 +- lib/components/package.json | 2 +- lib/core-events/package.json | 2 +- lib/core/package.json | 2 +- lib/node-logger/package.json | 2 +- lib/postinstall/package.json | 2 +- lib/router/package.json | 2 +- lib/source-loader/package.json | 2 +- lib/theming/package.json | 2 +- lib/ui/package.json | 2 +- 61 files changed, 113 insertions(+), 113 deletions(-) diff --git a/addons/a11y/package.json b/addons/a11y/package.json index ab2a08fe131c..9989b0c1d876 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -63,7 +63,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/actions/package.json b/addons/actions/package.json index 0514be037bb8..da5c25698637 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -58,7 +58,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index eaec638b6e09..ee6adbd6d61f 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -52,7 +52,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/controls/package.json b/addons/controls/package.json index 449921408142..266c0b2a73d7 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -46,5 +46,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 757ca463ce0e..72d30c576ea7 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -55,7 +55,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index 9df78a22348c..9f00cd432fc9 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/docs/package.json b/addons/docs/package.json index 8941f0d8a58e..dfbea5862083 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -144,7 +144,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/essentials/package.json b/addons/essentials/package.json index ee4cfb6b9755..e30c2f2f9271 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/events/package.json b/addons/events/package.json index ca835b16f5e0..a5fd5f2a9a1b 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -55,7 +55,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index b3dd01ba3094..db759b35afc1 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -35,5 +35,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 78ff6d10b0af..6bc0b482e98a 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -50,7 +50,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/jest/package.json b/addons/jest/package.json index 00ef67f1ffac..3afa9dc9d058 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -57,7 +57,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/knobs/package.json b/addons/knobs/package.json index d0ff44f99fea..a29258bce091 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -65,7 +65,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/links/package.json b/addons/links/package.json index a38380ad0f27..47cc8aa05bb5 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json index 77f2a4749f54..41082b529332 100644 --- a/addons/queryparams/package.json +++ b/addons/queryparams/package.json @@ -52,7 +52,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 49f0f1ae4abf..b1a85a922108 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -64,7 +64,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 334ac8251537..0275b8518d5a 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/addons/storysource/package.json b/addons/storysource/package.json index d98e3ff2469f..7d0295b65de3 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -57,5 +57,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 4867abce138f..4f05e9bb28ca 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -43,5 +43,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/addons/viewport/package.json b/addons/viewport/package.json index b822b630859c..603b78ae00a6 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -48,7 +48,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/angular/package.json b/app/angular/package.json index bd1ae870da9a..ec2eb063733d 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -75,7 +75,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/aurelia/package.json b/app/aurelia/package.json index 6a14dbb910f2..a261ce115c51 100644 --- a/app/aurelia/package.json +++ b/app/aurelia/package.json @@ -55,5 +55,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/ember/package.json b/app/ember/package.json index eef9a6e4b359..1c21af190f54 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -52,5 +52,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/html/package.json b/app/html/package.json index 2eec5edd1455..3dd53768fcdc 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -54,7 +54,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/marionette/package.json b/app/marionette/package.json index c6bfadc09fe5..022f1b16150c 100644 --- a/app/marionette/package.json +++ b/app/marionette/package.json @@ -49,5 +49,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/marko/package.json b/app/marko/package.json index de08149e763e..203565c35754 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -54,5 +54,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/mithril/package.json b/app/mithril/package.json index 78baa5b0dbc3..4a1834194b66 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -60,7 +60,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/preact/package.json b/app/preact/package.json index 9449fc5e7aef..051feef9cccb 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -58,7 +58,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/rax/package.json b/app/rax/package.json index cad82c88e16c..17eca3279574 100644 --- a/app/rax/package.json +++ b/app/rax/package.json @@ -54,5 +54,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/react/package.json b/app/react/package.json index b681bc02d3d6..9335bcc3845a 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -71,7 +71,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/riot/package.json b/app/riot/package.json index fdb4efde0641..40ec09e9bf2d 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -63,5 +63,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/server/package.json b/app/server/package.json index e187187d2cf1..2c1caa3e2bdc 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -54,5 +54,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/app/svelte/package.json b/app/svelte/package.json index 8d3d4b837065..4b30319c26be 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -59,7 +59,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/vue/package.json b/app/vue/package.json index a71726978199..7d42db5bb3aa 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -70,7 +70,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/app/web-components/package.json b/app/web-components/package.json index 20ad0190a129..766fbf74decb 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -63,7 +63,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/dev-kits/addon-decorator/package.json b/dev-kits/addon-decorator/package.json index 7a618c9ea592..12b50afbb828 100644 --- a/dev-kits/addon-decorator/package.json +++ b/dev-kits/addon-decorator/package.json @@ -32,7 +32,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json index 71b4c12a4d3f..cc7be2e57f90 100644 --- a/dev-kits/addon-parameter/package.json +++ b/dev-kits/addon-parameter/package.json @@ -38,7 +38,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/dev-kits/addon-preview-wrapper/package.json b/dev-kits/addon-preview-wrapper/package.json index 3967173a836b..f92f7bf09bd9 100644 --- a/dev-kits/addon-preview-wrapper/package.json +++ b/dev-kits/addon-preview-wrapper/package.json @@ -30,7 +30,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json index 5f40029e2317..603e060327e3 100644 --- a/dev-kits/addon-roundtrip/package.json +++ b/dev-kits/addon-roundtrip/package.json @@ -39,7 +39,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/addons/package.json b/lib/addons/package.json index c056aa78b7bf..0d93cc4706eb 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -45,7 +45,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/api/package.json b/lib/api/package.json index 40a6eb520f71..2dce7b6da01b 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -61,7 +61,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 43379ab9d4c6..2918ea2c9f81 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.0.0-rc.29'; +export const version = '6.0.0-rc.30'; diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index 0c4d33a4ca35..bbc2bac9de9c 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -39,7 +39,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index 6c5126a705ee..8bf1888dc558 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -36,7 +36,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/channels/package.json b/lib/channels/package.json index ea4942d7bb21..e65b9bb9554f 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -35,7 +35,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json index a69480a40fb0..6e282bedc983 100644 --- a/lib/cli-sb/package.json +++ b/lib/cli-sb/package.json @@ -27,5 +27,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json index f206db3dd5c1..704e5b8c785f 100644 --- a/lib/cli-storybook/package.json +++ b/lib/cli-storybook/package.json @@ -28,5 +28,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/cli/package.json b/lib/cli/package.json index 0d9a777bffa1..733778e1219e 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -77,5 +77,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/cli/versions.json b/lib/cli/versions.json index d34e64a32c82..f0615d08e39e 100644 --- a/lib/cli/versions.json +++ b/lib/cli/versions.json @@ -1,55 +1,55 @@ { - "@storybook/addon-a11y": "6.0.0-rc.29", - "@storybook/addon-actions": "6.0.0-rc.29", - "@storybook/addon-backgrounds": "6.0.0-rc.29", - "@storybook/addon-controls": "6.0.0-rc.29", - "@storybook/addon-cssresources": "6.0.0-rc.29", - "@storybook/addon-design-assets": "6.0.0-rc.29", - "@storybook/addon-docs": "6.0.0-rc.29", - "@storybook/addon-essentials": "6.0.0-rc.29", - "@storybook/addon-events": "6.0.0-rc.29", - "@storybook/addon-google-analytics": "6.0.0-rc.29", - "@storybook/addon-graphql": "6.0.0-rc.29", - "@storybook/addon-jest": "6.0.0-rc.29", - "@storybook/addon-knobs": "6.0.0-rc.29", - "@storybook/addon-links": "6.0.0-rc.29", - "@storybook/addon-queryparams": "6.0.0-rc.29", - "@storybook/addon-storyshots": "6.0.0-rc.29", - "@storybook/addon-storyshots-puppeteer": "6.0.0-rc.29", - "@storybook/addon-storysource": "6.0.0-rc.29", - "@storybook/addon-toolbars": "6.0.0-rc.29", - "@storybook/addon-viewport": "6.0.0-rc.29", - "@storybook/addons": "6.0.0-rc.29", - "@storybook/angular": "6.0.0-rc.29", - "@storybook/api": "6.0.0-rc.29", - "@storybook/aurelia": "6.0.0-rc.29", - "@storybook/channel-postmessage": "6.0.0-rc.29", - "@storybook/channel-websocket": "6.0.0-rc.29", - "@storybook/channels": "6.0.0-rc.29", - "@storybook/cli": "6.0.0-rc.29", - "@storybook/client-api": "6.0.0-rc.29", - "@storybook/client-logger": "6.0.0-rc.29", - "@storybook/codemod": "6.0.0-rc.29", - "@storybook/components": "6.0.0-rc.29", - "@storybook/core": "6.0.0-rc.29", - "@storybook/core-events": "6.0.0-rc.29", - "@storybook/ember": "6.0.0-rc.29", - "@storybook/html": "6.0.0-rc.29", - "@storybook/marionette": "6.0.0-rc.29", - "@storybook/marko": "6.0.0-rc.29", - "@storybook/mithril": "6.0.0-rc.29", - "@storybook/node-logger": "6.0.0-rc.29", - "@storybook/postinstall": "6.0.0-rc.29", - "@storybook/preact": "6.0.0-rc.29", - "@storybook/rax": "6.0.0-rc.29", - "@storybook/react": "6.0.0-rc.29", - "@storybook/riot": "6.0.0-rc.29", - "@storybook/router": "6.0.0-rc.29", - "@storybook/server": "6.0.0-rc.29", - "@storybook/source-loader": "6.0.0-rc.29", - "@storybook/svelte": "6.0.0-rc.29", - "@storybook/theming": "6.0.0-rc.29", - "@storybook/ui": "6.0.0-rc.29", - "@storybook/vue": "6.0.0-rc.29", - "@storybook/web-components": "6.0.0-rc.29" + "@storybook/addon-a11y": "6.0.0-rc.30", + "@storybook/addon-actions": "6.0.0-rc.30", + "@storybook/addon-backgrounds": "6.0.0-rc.30", + "@storybook/addon-controls": "6.0.0-rc.30", + "@storybook/addon-cssresources": "6.0.0-rc.30", + "@storybook/addon-design-assets": "6.0.0-rc.30", + "@storybook/addon-docs": "6.0.0-rc.30", + "@storybook/addon-essentials": "6.0.0-rc.30", + "@storybook/addon-events": "6.0.0-rc.30", + "@storybook/addon-google-analytics": "6.0.0-rc.30", + "@storybook/addon-graphql": "6.0.0-rc.30", + "@storybook/addon-jest": "6.0.0-rc.30", + "@storybook/addon-knobs": "6.0.0-rc.30", + "@storybook/addon-links": "6.0.0-rc.30", + "@storybook/addon-queryparams": "6.0.0-rc.30", + "@storybook/addon-storyshots": "6.0.0-rc.30", + "@storybook/addon-storyshots-puppeteer": "6.0.0-rc.30", + "@storybook/addon-storysource": "6.0.0-rc.30", + "@storybook/addon-toolbars": "6.0.0-rc.30", + "@storybook/addon-viewport": "6.0.0-rc.30", + "@storybook/addons": "6.0.0-rc.30", + "@storybook/angular": "6.0.0-rc.30", + "@storybook/api": "6.0.0-rc.30", + "@storybook/aurelia": "6.0.0-rc.30", + "@storybook/channel-postmessage": "6.0.0-rc.30", + "@storybook/channel-websocket": "6.0.0-rc.30", + "@storybook/channels": "6.0.0-rc.30", + "@storybook/cli": "6.0.0-rc.30", + "@storybook/client-api": "6.0.0-rc.30", + "@storybook/client-logger": "6.0.0-rc.30", + "@storybook/codemod": "6.0.0-rc.30", + "@storybook/components": "6.0.0-rc.30", + "@storybook/core": "6.0.0-rc.30", + "@storybook/core-events": "6.0.0-rc.30", + "@storybook/ember": "6.0.0-rc.30", + "@storybook/html": "6.0.0-rc.30", + "@storybook/marionette": "6.0.0-rc.30", + "@storybook/marko": "6.0.0-rc.30", + "@storybook/mithril": "6.0.0-rc.30", + "@storybook/node-logger": "6.0.0-rc.30", + "@storybook/postinstall": "6.0.0-rc.30", + "@storybook/preact": "6.0.0-rc.30", + "@storybook/rax": "6.0.0-rc.30", + "@storybook/react": "6.0.0-rc.30", + "@storybook/riot": "6.0.0-rc.30", + "@storybook/router": "6.0.0-rc.30", + "@storybook/server": "6.0.0-rc.30", + "@storybook/source-loader": "6.0.0-rc.30", + "@storybook/svelte": "6.0.0-rc.30", + "@storybook/theming": "6.0.0-rc.30", + "@storybook/ui": "6.0.0-rc.30", + "@storybook/vue": "6.0.0-rc.30", + "@storybook/web-components": "6.0.0-rc.30" } diff --git a/lib/client-api/package.json b/lib/client-api/package.json index 491c59f142b4..7b5e8ab8378d 100644 --- a/lib/client-api/package.json +++ b/lib/client-api/package.json @@ -53,7 +53,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index 3c4e91ece01e..126d54c63453 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -34,7 +34,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 96e81cb7bbe4..687af56b6028 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -47,5 +47,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/components/package.json b/lib/components/package.json index 9d146cb1c950..38bf342c42fa 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -64,7 +64,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/core-events/package.json b/lib/core-events/package.json index a2722de6150b..289266024eb4 100644 --- a/lib/core-events/package.json +++ b/lib/core-events/package.json @@ -33,7 +33,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/core/package.json b/lib/core/package.json index c15b4a39807b..86e6cf7025a7 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -138,5 +138,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json index 63ee73894730..7cc2cb0ed7b0 100644 --- a/lib/node-logger/package.json +++ b/lib/node-logger/package.json @@ -40,7 +40,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json index cac83f57cfbd..32a4069f83a1 100644 --- a/lib/postinstall/package.json +++ b/lib/postinstall/package.json @@ -39,7 +39,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/router/package.json b/lib/router/package.json index 9f1d398c9813..51e25deef785 100644 --- a/lib/router/package.json +++ b/lib/router/package.json @@ -42,7 +42,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json index 943800feb36c..53c7c6940899 100644 --- a/lib/source-loader/package.json +++ b/lib/source-loader/package.json @@ -47,5 +47,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b" + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b" } diff --git a/lib/theming/package.json b/lib/theming/package.json index d751891bdc37..b20ce953c5b0 100644 --- a/lib/theming/package.json +++ b/lib/theming/package.json @@ -48,7 +48,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ diff --git a/lib/ui/package.json b/lib/ui/package.json index 5f543da31de6..a01f1708bbf3 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -76,7 +76,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d31e743fc15970ad5722abf4678e03be82bf8b8b", + "gitHead": "46bf85714342208cf612aee130f8876ce56ba46b", "typesVersions": { "<=3.5": { "*": [ From 373caffc80ea17fd463f538fc8a695c8d65a94a3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 10 Aug 2020 17:40:13 +0800 Subject: [PATCH 02/13] 6.0.0-rc.30 next.json version file --- docs/src/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json index 3bac5e149178..4d5eb425efa3 100644 --- a/docs/src/versions/next.json +++ b/docs/src/versions/next.json @@ -1 +1 @@ -{"version":"6.0.0-rc.29","info":{"plain":"### Features\n\n- CLI: Add CSF types for Angular ([#11825](https://github.com/storybookjs/storybook/pull/11825))\n\n### Bug Fixes\n\n- Core: Fix serialization of `undefined` ([#11829](https://github.com/storybookjs/storybook/pull/11829))"}} \ No newline at end of file +{"version":"6.0.0-rc.30","info":{"plain":"### Bug Fixes\n\n- Storyshots: Don't ship typescript files in dist ([#11792](https://github.com/storybookjs/storybook/pull/11792))\n\n### Maintenance\n\n- 6.0 documentation overhaul ([#11861](https://github.com/storybookjs/storybook/pull/11861))"}} \ No newline at end of file From a72d2edc20b183c2617641e8a8796f7120390644 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 10 Aug 2020 23:12:34 +1000 Subject: [PATCH 03/13] Add install snippets --- docs/get-started/install.md | 21 ++++++++++++++++++- .../installation-problems/angular.mdx | 1 + .../installation-problems/ember.mdx | 1 + .../installation-problems/html.mdx | 1 + .../installation-problems/marko.mdx | 1 + .../installation-problems/mithril.mdx | 1 + .../installation-problems/preact.mdx | 1 + .../get-started/installation-problems/rax.mdx | 1 + .../installation-problems/react.mdx | 1 + .../installation-problems/riot.mdx | 1 + .../installation-problems/svelte.mdx | 1 + .../get-started/installation-problems/vue.mdx | 1 + .../installation-problems/web-components.mdx | 1 + 13 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 docs/get-started/installation-problems/angular.mdx create mode 100644 docs/get-started/installation-problems/ember.mdx create mode 100644 docs/get-started/installation-problems/html.mdx create mode 100644 docs/get-started/installation-problems/marko.mdx create mode 100644 docs/get-started/installation-problems/mithril.mdx create mode 100644 docs/get-started/installation-problems/preact.mdx create mode 100644 docs/get-started/installation-problems/rax.mdx create mode 100644 docs/get-started/installation-problems/react.mdx create mode 100644 docs/get-started/installation-problems/riot.mdx create mode 100644 docs/get-started/installation-problems/svelte.mdx create mode 100644 docs/get-started/installation-problems/vue.mdx create mode 100644 docs/get-started/installation-problems/web-components.mdx diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 4de6be42efc1..ced1453f762e 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -68,7 +68,26 @@ For instance you can use: - `--type vue` to setup Storybook with the Vue configuration options. - `--type angular` to setup Storybook with the Angular configuration options. -If there's an installation problem, check the README for your framework (e.g Storybook for React). + + + + + If all else fails, try asking for [help](https://storybook.js.org/support/) diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx new file mode 100644 index 000000000000..9cb61e6cbc09 --- /dev/null +++ b/docs/get-started/installation-problems/angular.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Angular framework](../../app/angular/README.md). diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx new file mode 100644 index 000000000000..bc83291e9fb7 --- /dev/null +++ b/docs/get-started/installation-problems/ember.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Ember framework](../../app/ember/README.md). diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx new file mode 100644 index 000000000000..a5e321071048 --- /dev/null +++ b/docs/get-started/installation-problems/html.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the HTML framework](../../app/html/README.md). diff --git a/docs/get-started/installation-problems/marko.mdx b/docs/get-started/installation-problems/marko.mdx new file mode 100644 index 000000000000..f6c02bccc6f9 --- /dev/null +++ b/docs/get-started/installation-problems/marko.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Marko framework](../../app/marko/README.md). diff --git a/docs/get-started/installation-problems/mithril.mdx b/docs/get-started/installation-problems/mithril.mdx new file mode 100644 index 000000000000..201cbd380e6f --- /dev/null +++ b/docs/get-started/installation-problems/mithril.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Mithril framework](../../app/mithril/README.md). diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx new file mode 100644 index 000000000000..d33de4b31119 --- /dev/null +++ b/docs/get-started/installation-problems/preact.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Preact framework](../../app/preact/README.md). diff --git a/docs/get-started/installation-problems/rax.mdx b/docs/get-started/installation-problems/rax.mdx new file mode 100644 index 000000000000..ccca04d2f5f0 --- /dev/null +++ b/docs/get-started/installation-problems/rax.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Rax framework](../../app/rax/README.md). diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx new file mode 100644 index 000000000000..07c07d03d6fe --- /dev/null +++ b/docs/get-started/installation-problems/react.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the React framework](../../app/react/README.md). diff --git a/docs/get-started/installation-problems/riot.mdx b/docs/get-started/installation-problems/riot.mdx new file mode 100644 index 000000000000..e6ec6ecf364c --- /dev/null +++ b/docs/get-started/installation-problems/riot.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Riot framework](../../app/riot/README.md). diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx new file mode 100644 index 000000000000..0d0776b2a41b --- /dev/null +++ b/docs/get-started/installation-problems/svelte.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Svelte framework](../../app/svelte/README.md). diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx new file mode 100644 index 000000000000..80137e146157 --- /dev/null +++ b/docs/get-started/installation-problems/vue.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Vue framework](../../app/vue/README.md). diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx new file mode 100644 index 000000000000..679fa60eb088 --- /dev/null +++ b/docs/get-started/installation-problems/web-components.mdx @@ -0,0 +1 @@ +If there's an installation problem, check the [README for the Web Components framework](../../app/web-components/README.md). From 3c35389882c332d6127dfd8b0afc2dc4b766c646 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 10 Aug 2020 18:49:55 -0400 Subject: [PATCH 04/13] break out integration.md into separate pages --- docs/configure/babel.md | 21 ++ docs/configure/images-and-assets.md | 85 ++++++++ docs/configure/integration.md | 287 ---------------------------- docs/configure/styling-and-css.md | 35 ++++ docs/configure/typescript.md | 38 ++++ docs/configure/webpack.md | 110 +++++++++++ docs/toc.js | 29 ++- 7 files changed, 317 insertions(+), 288 deletions(-) create mode 100644 docs/configure/babel.md create mode 100644 docs/configure/images-and-assets.md delete mode 100644 docs/configure/integration.md create mode 100644 docs/configure/styling-and-css.md create mode 100644 docs/configure/typescript.md create mode 100644 docs/configure/webpack.md diff --git a/docs/configure/babel.md b/docs/configure/babel.md new file mode 100644 index 000000000000..bc6d921282d7 --- /dev/null +++ b/docs/configure/babel.md @@ -0,0 +1,21 @@ +--- +title: 'Babel' +--- + +Storybook’s webpack config by [default](#default-configuration) sets up [Babel](https://babeljs.io/) for ES6 transpiling. Storybook works with evergreen browsers and IE11 by default. + +Here are some key features of Storybook's Babel configurations. + +### Default configuration + +We have added ES2016 support with Babel for transpiling your JS code. + +In addition to that, we've added a few additional features, like object spreading and async await. + +Check out our [source](https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/common/babel.js) to learn more about these plugins. + +### Custom configuration + +If your project has a `.babelrc` file, we'll use that instead of the default config file. + +You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only. diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md new file mode 100644 index 000000000000..9ed9413a1264 --- /dev/null +++ b/docs/configure/images-and-assets.md @@ -0,0 +1,85 @@ +--- +title: 'Images and assets' +--- + +Components often rely on images, videos, and other assets to render as the user expects. There are many ways to use these assets in your story files. + +### Import assets into stories + +You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files. + +Afterwards you can use any asset in your stories: + + + + + + + +### Serving static files via Storybook + +We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. + +Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so: + + + + + + + +Here `./public` is your static directory. Now use it in a component or story like this. + + + + + + + +You can also pass a list of directories separated by commas without spaces instead of a single directory. + + + + + + + +### Reference assets from a CDN + +Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service. + + + + + + + +### Absolute versus relative paths + +Sometimes, you may want to deploy your storybook into a subpath, like `https://example.com/storybook`. + +In this case, you need to have all your images and media files with relative paths. Otherwise, the browser cannot locate those files. + +If you load static content via importing, this is automatic and you do not have to do anything. + +If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element. diff --git a/docs/configure/integration.md b/docs/configure/integration.md deleted file mode 100644 index 74718644faa1..000000000000 --- a/docs/configure/integration.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: 'Integration' ---- - -## Webpack - -Storybook displays your components in a custom web application built using [webpack](https://webpack.js.org/). Webpack is a complex tool but our default configuration is intended to cover off the majority of use cases. There are also [addons](/addons) available that extend the configuration for other common use cases. - -You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file. - -The value should be an async function that receives a webpack config and eventually returns a webpack config. - -### Default configuration - -By default, Storybook's webpack configuration will allow you to: - -#### Import Images and other static files - -You can import images and other local files and have them built into the Storybook: - - - - - - - -#### Import JSON as JavaScript - -You can import `.json` files and have them expanded to a JavaScript object: - - - - - - - -If you want to know the exact details of the webpack config, the best way is to run: - - - - - - - -### Extending Storybook’s webpack config - -To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./overview.md#configure-story-rendering). - -The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, this will have information about where config came from, whether we're in production of development mode etc. - -For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support: - - - - - - - -Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has a completely separate webpack config for its own UI (also referred to as the "manager"), so the customizations you make only applies to the rendering of your stories, i.e. you can completely replace `config.module.rules` if you want. - -Nevertheless, edit `config` with care. Make sure to preserve the following config options: - -- **entry** -- **output** - -Furthermore, `config` requires the `HtmlWebpackplugin` to generate the preview page, so rather than overwriting `config.plugins` you should probably append to it (or overwrite it with care), see [the following issue](https://github.com/storybookjs/storybook/issues/6020) for examples on how to handle this: - - - - - - - -Finally, if your custom webpack config uses a loader that does not explicitly include specific file extensions via the `test` property, it is necessary to `exclude` the `.ejs` file extension from that loader. - -If you're using a non-standard Storybook config directory, you should put `main.js` there instead of `.storybook` and update the `include` path to make sure that it resolves to your project root. - -### Using your existing config - -If you have an existing webpack config for your project and want to reuse this app's configuration, you can import your main webpack config into Storybook's [`.storybook/main.js`](./overview.md#configure-story-rendering) and merge both: - -The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's `webpack.config.js`: - - - - - - - -## Babel - -Storybook’s webpack config by [default](#default-configuration) sets up [Babel](https://babeljs.io/) for ES6 transpiling. Storybook works with evergreen browsers and IE11 by default. - -Here are some key features of Storybook's Babel configurations. - -### Default configuration - -We have added ES2016 support with Babel for transpiling your JS code. - -In addition to that, we've added a few additional features, like object spreading and async await. - -Check out our [source](https://github.com/storybookjs/storybook/blob/master/lib/core/src/server/common/babel.js) to learn more about these plugins. - -### Custom configuration - -If your project has a `.babelrc` file, we'll use that instead of the default config file. - -You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only. - -## TypeScript - -Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. - -### Default configuration - -The base Typescript configuration uses [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for Typescript transpilation, and optionally [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) for checking. - -Each framework uses the base configuration unless otherwise specified: - -- Angular ignores the base and uses `ts-loader` and `ngx-template-loader`. -- Vue ignores the base and uses `ts-loader` and applies it to both `.tsx` and `.vue` files. -- React adds `react-docgen-typescript-plugin` to the base. - -### Main.js configuration - -To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering). - -The following code snippets shows the fields for you to use with TypeScript: - - - - - - - -| Field | Framework | Description | Type | -| :------------------------------- | :-------: | :--------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | -| **check** | All | optionally run fork-ts-checker-webpack-plugin | boolean | -| **checkOptions** | All | Options to pass to fork-ts-checker-webpack-plugin if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) | -| **reactDocgen** | React | which variant docgen processor to run `'react-docgen-typescript' |N/A | -| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) | - -## Styling and CSS - -There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually it is best to try and replicate what your application does with styling in Storybook’s configuration. - -### CSS-in-JS - -CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it. - -### Importing CSS files - -If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions: - -- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config). -- In Angular, you'll need to take special care how you handle CSS: - - - Either [customize your webpack config](#extending-storybooks-webpack-config) - - Or use syntax to use a inline loader: - - - - - - - -To use your CSS in all stories, you simply import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering) - -### Adding webfonts - -If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](#serving-static-files-via-storybook). - -## Images and assets - -Components often rely on images, videos, and other assets to render as the user expects. There are many ways to use these assets in your story files. - -### Import assets into stories - -You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files. - -Afterwards you can use any asset in your stories: - - - - - - - -### Serving static files via Storybook - -We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. - -Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so: - - - - - - - -Here `./public` is your static directory. Now use it in a component or story like this. - - - - - - - -You can also pass a list of directories separated by commas without spaces instead of a single directory. - - - - - - - -### Reference assets from a CDN - -Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service. - - - - - - - -### Absolute versus relative paths - -Sometimes, you may want to deploy your storybook into a subpath, like `https://example.com/storybook`. - -In this case, you need to have all your images and media files with relative paths. Otherwise, the browser cannot locate those files. - -If you load static content via importing, this is automatic and you do not have to do anything. - -If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element. diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md new file mode 100644 index 000000000000..907b35a40709 --- /dev/null +++ b/docs/configure/styling-and-css.md @@ -0,0 +1,35 @@ +--- +title: 'Styling and CSS' +--- + +There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually it is best to try and replicate what your application does with styling in Storybook’s configuration. + +### CSS-in-JS + +CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it. + +### Importing CSS files + +If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions: + +- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config). +- In Angular, you'll need to take special care how you handle CSS: + + - Either [customize your webpack config](#extending-storybooks-webpack-config) + - Or use syntax to use a inline loader: + + + + + + + +To use your CSS in all stories, you simply import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering) + +### Adding webfonts + +If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](#serving-static-files-via-storybook). diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md new file mode 100644 index 000000000000..70db36053bd5 --- /dev/null +++ b/docs/configure/typescript.md @@ -0,0 +1,38 @@ +--- +title: 'TypeScript' +--- + +Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. + +### Default configuration + +The base Typescript configuration uses [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for Typescript transpilation, and optionally [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) for checking. + +Each framework uses the base configuration unless otherwise specified: + +- Angular ignores the base and uses `ts-loader` and `ngx-template-loader`. +- Vue ignores the base and uses `ts-loader` and applies it to both `.tsx` and `.vue` files. +- React adds `react-docgen-typescript-plugin` to the base. + +### Main.js configuration + +To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering). + +The following code snippets shows the fields for you to use with TypeScript: + + + + + + + +| Field | Framework | Description | Type | +| :------------------------------- | :-------: | :--------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | +| **check** | All | optionally run fork-ts-checker-webpack-plugin | boolean | +| **checkOptions** | All | Options to pass to fork-ts-checker-webpack-plugin if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) | +| **reactDocgen** | React | which variant docgen processor to run `'react-docgen-typescript' |N/A | +| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) | diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md new file mode 100644 index 000000000000..2cdd2f3c1199 --- /dev/null +++ b/docs/configure/webpack.md @@ -0,0 +1,110 @@ +--- +title: 'Webpack' +--- + +Storybook displays your components in a custom web application built using [webpack](https://webpack.js.org/). Webpack is a complex tool but our default configuration is intended to cover off the majority of use cases. There are also [addons](/addons) available that extend the configuration for other common use cases. + +You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file. + +The value should be an async function that receives a webpack config and eventually returns a webpack config. + +### Default configuration + +By default, Storybook's webpack configuration will allow you to: + +#### Import Images and other static files + +You can import images and other local files and have them built into the Storybook: + + + + + + + +#### Import JSON as JavaScript + +You can import `.json` files and have them expanded to a JavaScript object: + + + + + + + +If you want to know the exact details of the webpack config, the best way is to run: + + + + + + + +### Extending Storybook’s webpack config + +To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./overview.md#configure-story-rendering). + +The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, this will have information about where config came from, whether we're in production of development mode etc. + +For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support: + + + + + + + +Storybook uses the config returned from the above function to render your components in Storybook's "preview" iframe. Note that Storybook has a completely separate webpack config for its own UI (also referred to as the "manager"), so the customizations you make only applies to the rendering of your stories, i.e. you can completely replace `config.module.rules` if you want. + +Nevertheless, edit `config` with care. Make sure to preserve the following config options: + +- **entry** +- **output** + +Furthermore, `config` requires the `HtmlWebpackplugin` to generate the preview page, so rather than overwriting `config.plugins` you should probably append to it (or overwrite it with care), see [the following issue](https://github.com/storybookjs/storybook/issues/6020) for examples on how to handle this: + + + + + + + +Finally, if your custom webpack config uses a loader that does not explicitly include specific file extensions via the `test` property, it is necessary to `exclude` the `.ejs` file extension from that loader. + +If you're using a non-standard Storybook config directory, you should put `main.js` there instead of `.storybook` and update the `include` path to make sure that it resolves to your project root. + +### Using your existing config + +If you have an existing webpack config for your project and want to reuse this app's configuration, you can import your main webpack config into Storybook's [`.storybook/main.js`](./overview.md#configure-story-rendering) and merge both: + +The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's `webpack.config.js`: + + + + + + diff --git a/docs/toc.js b/docs/toc.js index 8d86e944609a..c8c26121a6cd 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -157,7 +157,34 @@ module.exports = { { pathSegment: 'integration', title: 'Integration', - type: 'link', + type: 'menu', + children: [ + { + pathSegment: 'webpack', + title: 'Webpack', + type: 'link', + }, + { + pathSegment: 'babel', + title: 'Babel', + type: 'link', + }, + { + pathSegment: 'typescript', + title: 'TypeScript', + type: 'link', + }, + { + pathSegment: 'styling-and-css', + title: 'Styling and CSS', + type: 'link', + }, + { + pathSegment: 'images-and-assets', + title: 'Images and assets', + type: 'link', + }, + ], }, { pathSegment: 'story-rendering', From b4d3b48b41ad63f0b9cc581a6ce2075ecac1e246 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 10 Aug 2020 18:54:18 -0400 Subject: [PATCH 05/13] fix to get the docs ToC working correctly --- docs/toc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/toc.js b/docs/toc.js index c8c26121a6cd..094d50385c67 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -155,7 +155,7 @@ module.exports = { type: 'link', }, { - pathSegment: 'integration', + pathSegment: '', title: 'Integration', type: 'menu', children: [ From afe6fc98c747f3bf68769926629c3060ace3badf Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 10 Aug 2020 19:20:18 -0400 Subject: [PATCH 06/13] emojis in docs sidebar --- docs/toc.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/toc.js b/docs/toc.js index 094d50385c67..0c403d114eea 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -1,7 +1,7 @@ module.exports = { toc: [ { - title: 'Get Started', + title: '🚀 Get Started', pathSegment: 'get-started', type: 'menu', children: [ @@ -44,7 +44,7 @@ module.exports = { ], }, { - title: 'Writing Stories', + title: '🖋 Writing Stories', pathSegment: 'writing-stories', type: 'menu', children: [ @@ -76,7 +76,7 @@ module.exports = { ], }, { - title: 'Writing Docs', + title: '📖 Writing Docs', pathSegment: 'writing-docs', type: 'menu', children: [ @@ -108,7 +108,7 @@ module.exports = { ], }, { - title: 'Essential addons', + title: '🧩 Essential addons', pathSegment: 'essentials', type: 'menu', children: [ @@ -145,7 +145,7 @@ module.exports = { ], }, { - title: 'Configure', + title: '⚙️ Configure', pathSegment: 'configure', type: 'menu', children: [ @@ -226,7 +226,7 @@ module.exports = { ], }, { - title: 'Workflows', + title: '🔄 Workflows', pathSegment: 'workflows', type: 'menu', children: [ @@ -291,7 +291,7 @@ module.exports = { ], }, { - title: 'API', + title: '🔌 API', pathSegment: 'api', type: 'menu', children: [ From 23553316a73b481f3566e5251300c5c6a374434e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 11 Aug 2020 07:23:53 +0800 Subject: [PATCH 07/13] Document preview entries --- MIGRATION.md | 2 +- docs/api/writing-presets.md | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index d846ebc1972c..f400233f5678 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -728,7 +728,7 @@ addons.setConfig({ The `addParameters` and `addDecorator` APIs to add global decorators and parameters, exported by the various frameworks (e.g. `@storybook/react`) and `@storybook/client` are now deprecated. -Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a `previewEntry` file. +Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a preview entry file (see [Preview entries](https://github.com/storybookjs/storybook/blob/next/docs/api/writing-presets.md#preview-entries)). #### Deprecated clearDecorators diff --git a/docs/api/writing-presets.md b/docs/api/writing-presets.md index 61eef304857a..b21df09f7255 100644 --- a/docs/api/writing-presets.md +++ b/docs/api/writing-presets.md @@ -2,7 +2,6 @@ title: 'Writing your own Storybook Preset' --- - [Storybook presets](./presets.md) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support. This doc covers the [presets API](#presets-api) and how to use the presets mechanism for [advanced configuration](#advanced-configuration). @@ -45,7 +44,6 @@ All functions take a [Babel configuration object](https://babeljs.io/docs/en/con For example, Storybook's Mihtril support uses plugins internally and here's how it configures babel: ```ts - export function babelDefault(config: TransformOptions) { return { ...config, @@ -104,6 +102,35 @@ module.exports = { }; ``` +### Preview entries + +The addon config `config` allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon. + +For example, the Backgrounds preset contains the following code: + +```ts +// preset.ts +export function config(entry: any[] = []) { + return [...entry, require.resolve('./defaultParameters')]; +} +``` + +Which in turn invokes: + +```ts +// defaultParameters.ts +export const parameters = { + backgrounds: { + values: [ + { name: 'light', value: '#F8F8F8' }, + { name: 'dark', value: '#333333' }, + ], + }, +}; +``` + +This is equivalent to exporting the `backgrounds` parameter manually in `main.js`. + ### Addons For users, the name `managerEntries` might be a bit too technical, so instead both users and preset-authors can simply use the property: `addons`: @@ -184,7 +211,6 @@ and extract the configuration to a new file `./storybook/my-preset.js`: ```js // .storybook/my-preset.js - module.exports = { managerWebpack: async (config, options) => { // update config here @@ -203,4 +229,4 @@ module.exports = { }; ``` -Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package. \ No newline at end of file +Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package. From 44fd2e1c8ad5e749b49d79660c18267e9683784e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 11 Aug 2020 07:59:32 +0800 Subject: [PATCH 08/13] Move docs versions files --- docs/{src => }/versions/next.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/{src => }/versions/next.json (100%) diff --git a/docs/src/versions/next.json b/docs/versions/next.json similarity index 100% rename from docs/src/versions/next.json rename to docs/versions/next.json From 714076bc3000d5094397c34c01d785f06ca373d4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 11 Aug 2020 02:32:01 +0100 Subject: [PATCH 09/13] removes the shell and json file references. Updates for the writing docs section --- docs/configure/environment-variables.md | 12 ++----- docs/configure/images-and-assets.md | 32 ++++++++----------- docs/configure/theming.md | 12 ++----- docs/configure/webpack.md | 12 ++----- docs/get-started/install.md | 12 ++----- docs/snippets/common/badge-story.mdx.mdx | 3 ++ docs/snippets/common/checkbox-story.mdx.mdx | 2 ++ ...ent-story-mdx-argstable-propsblock.mdx.mdx | 2 ++ .../component-story-mdx-argtypes.mdx.mdx | 1 + ...ponent-story-mdx-decorators-params.mdx.mdx | 1 + .../common/component-story-mdx-dedent.mdx.mdx | 2 ++ .../component-story-mdx-description.mdx.mdx | 3 ++ ...ponent-story-mdx-reference-storyid.mdx.mdx | 1 + .../component-story-mdx-story-by-name.mdx.mdx | 4 +++ .../mdx-canvas-multiple-stories.mdx.mdx | 4 +++ .../my-component-with-story-content.mdx.mdx | 2 ++ .../storybook-build-documentation.json.mdx | 7 ---- docs/snippets/common/storybook-execute.sh.mdx | 3 -- .../storybook-install-theme-packages.sh.mdx | 3 -- docs/snippets/common/storybook-install.sh.mdx | 3 -- .../storybook-preview-documentation.json.mdx | 7 ---- .../storybook-run-webpack-config.sh.mdx | 3 -- ...-static-assets-script-multifolder.json.mdx | 7 ---- ...rybook-serve-static-assets-script.json.mdx | 7 ---- ...storybook-set-environment-variables.sh.mdx | 3 -- docs/writing-docs/build-documentation.md | 32 ++++++++----------- 26 files changed, 65 insertions(+), 115 deletions(-) delete mode 100644 docs/snippets/common/storybook-build-documentation.json.mdx delete mode 100644 docs/snippets/common/storybook-execute.sh.mdx delete mode 100644 docs/snippets/common/storybook-install-theme-packages.sh.mdx delete mode 100644 docs/snippets/common/storybook-install.sh.mdx delete mode 100644 docs/snippets/common/storybook-preview-documentation.json.mdx delete mode 100644 docs/snippets/common/storybook-run-webpack-config.sh.mdx delete mode 100644 docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx delete mode 100644 docs/snippets/common/storybook-serve-static-assets-script.json.mdx delete mode 100644 docs/snippets/common/storybook-set-environment-variables.sh.mdx diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index a5a1da8b5da7..5c241f058a5a 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -5,15 +5,9 @@ title: 'Environment variables' You can use environment variables in Storybook to change its behaviour in different “modes”. If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`: - - - - - +```shell +STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook +``` Then we can access these environment variables anywhere inside our preview JavaScript code like below: diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 9ed9413a1264..7d6e9c7b8368 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -26,15 +26,13 @@ We recommend serving static files via Storybook to ensure that your components a Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so: - - - - - +```json +{ + "scripts": { + "start-storybook": "start-storybook -s ./public -p 9001" + } +} +``` Here `./public` is your static directory. Now use it in a component or story like this. @@ -50,15 +48,13 @@ Here `./public` is your static directory. Now use it in a component or story lik You can also pass a list of directories separated by commas without spaces instead of a single directory. - - - - - +```json +{ + "scripts": { + "start-storybook": "start-storybook -s ./public,./static -p 9001" + } +} +``` ### Reference assets from a CDN diff --git a/docs/configure/theming.md b/docs/configure/theming.md index 258fa067427b..10b3ad6468e2 100644 --- a/docs/configure/theming.md +++ b/docs/configure/theming.md @@ -12,15 +12,9 @@ Storybook includes two themes that look good out of the box: "normal" (a light t Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages. - - - - - +```sh +yarn install --dev @storybook/addons @storybook/theming +``` As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering): diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md index 2cdd2f3c1199..b875d3331782 100644 --- a/docs/configure/webpack.md +++ b/docs/configure/webpack.md @@ -42,15 +42,9 @@ You can import `.json` files and have them expanded to a JavaScript object: If you want to know the exact details of the webpack config, the best way is to run: - - - - - +```shell +yarn storybook --debug-webpack +``` ### Extending Storybook’s webpack config diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 2c30c55d4707..c2c63a73da89 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -31,15 +31,9 @@ The command above will make the following changes to your local environment: Check that everything worked by running: - - - - - +```shell +npx storybook +``` It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you'll be greeted by a welcome screen. diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx index 3459b315a489..403d3d842af8 100644 --- a/docs/snippets/common/badge-story.mdx.mdx +++ b/docs/snippets/common/badge-story.mdx.mdx @@ -2,12 +2,15 @@ + + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import { Badge } from './Badge'; import { Icon } from './Icon'; + export const Template = (args) => # Badge diff --git a/docs/snippets/common/checkbox-story.mdx.mdx b/docs/snippets/common/checkbox-story.mdx.mdx index 0d7c84343c77..95a295de9adf 100644 --- a/docs/snippets/common/checkbox-story.mdx.mdx +++ b/docs/snippets/common/checkbox-story.mdx.mdx @@ -1,6 +1,8 @@ ```md + + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import { Checkbox } from './Checkbox'; diff --git a/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx index 077024c2e7c0..b7981c095949 100644 --- a/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx @@ -1,4 +1,6 @@ ```md + + import { Props } from '@storybook/addon-docs/blocks'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx index 64d364ffe7c1..06c661fd70ce 100644 --- a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx @@ -1,4 +1,5 @@ ```md + + import { Source } from '@storybook/addon-docs/blocks'; import dedent from 'ts-dedent'; diff --git a/docs/snippets/common/component-story-mdx-description.mdx.mdx b/docs/snippets/common/component-story-mdx-description.mdx.mdx index 5ef0c9d4879f..46bcf97f9c42 100644 --- a/docs/snippets/common/component-story-mdx-description.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-description.mdx.mdx @@ -1,9 +1,12 @@ ```md + + import { Description } from '@storybook/addon-docs/blocks'; import dedent from 'ts-dedent'; import { Button } from './Button'; + import { Story } from '@storybook/addon-docs/blocks'; diff --git a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx index 0074e671e88d..72e47b838b9a 100644 --- a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx @@ -1,4 +1,8 @@ ```md + + + + import { Story } from '@storybook/addon-docs/blocks'; import { Button } from './Button'; diff --git a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx index 9522231aadf8..03b47e664a18 100644 --- a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx +++ b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx @@ -1,4 +1,8 @@ ```md + + + + import { Canvas } from '@storybook/addon-docs/blocks'; export const Template = (args) => ; diff --git a/docs/snippets/common/my-component-with-story-content.mdx.mdx b/docs/snippets/common/my-component-with-story-content.mdx.mdx index 51465a329e3f..f6baa4152a8c 100644 --- a/docs/snippets/common/my-component-with-story-content.mdx.mdx +++ b/docs/snippets/common/my-component-with-story-content.mdx.mdx @@ -1,4 +1,6 @@ ```md + + import { Canvas } from '@storybook/addon-docs/blocks'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/storybook-build-documentation.json.mdx b/docs/snippets/common/storybook-build-documentation.json.mdx deleted file mode 100644 index 763279e7d81c..000000000000 --- a/docs/snippets/common/storybook-build-documentation.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "build-storybook-docs": "build-storybook --docs", - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-execute.sh.mdx b/docs/snippets/common/storybook-execute.sh.mdx deleted file mode 100644 index 467c5a72d9b9..000000000000 --- a/docs/snippets/common/storybook-execute.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx storybook -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-install-theme-packages.sh.mdx b/docs/snippets/common/storybook-install-theme-packages.sh.mdx deleted file mode 100644 index c6b773214d4f..000000000000 --- a/docs/snippets/common/storybook-install-theme-packages.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npm install @storybook/addons @storybook/theming --save-dev -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-install.sh.mdx b/docs/snippets/common/storybook-install.sh.mdx deleted file mode 100644 index fe12f822a776..000000000000 --- a/docs/snippets/common/storybook-install.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx sb init -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-preview-documentation.json.mdx b/docs/snippets/common/storybook-preview-documentation.json.mdx deleted file mode 100644 index 874c5868a92f..000000000000 --- a/docs/snippets/common/storybook-preview-documentation.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "storybook-docs": "start-storybook --docs", - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-run-webpack-config.sh.mdx b/docs/snippets/common/storybook-run-webpack-config.sh.mdx deleted file mode 100644 index 5a54744feab6..000000000000 --- a/docs/snippets/common/storybook-run-webpack-config.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -yarn storybook --debug-webpack -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx b/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx deleted file mode 100644 index f8bdd213171c..000000000000 --- a/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "start-storybook": "start-storybook -s ./public,./static -p 9001" - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-serve-static-assets-script.json.mdx b/docs/snippets/common/storybook-serve-static-assets-script.json.mdx deleted file mode 100644 index 7a3c469cb15c..000000000000 --- a/docs/snippets/common/storybook-serve-static-assets-script.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "start-storybook": "start-storybook -s ./public -p 9001" - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-set-environment-variables.sh.mdx b/docs/snippets/common/storybook-set-environment-variables.sh.mdx deleted file mode 100644 index 64c7e495815d..000000000000 --- a/docs/snippets/common/storybook-set-environment-variables.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook -``` \ No newline at end of file diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md index ba9f06bc36e8..cafa7e211891 100644 --- a/docs/writing-docs/build-documentation.md +++ b/docs/writing-docs/build-documentation.md @@ -8,15 +8,13 @@ Storybook allows you to create rich and extensive [documentation](./introduction At any point during your development, you can preview the documentation you've written. Storybook allows you to generate a preview of the final documentation when you use the `--docs` flag. We recommend including it in your `package.json` as a new script: - - - - - +```json +{ + "scripts": { + "storybook-docs": "start-storybook --docs", + } +} +``` Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build. @@ -34,15 +32,13 @@ There's some caveats to this build mode, as to the normal Storybook build: You can also publish your documentation, the same you would [publish](../workflows/publish-storybook.md) your Storybook. You can use the `--docs` flag with `build-storybook` command. We recommend as well including it as a script in your `package.json` file: - - - - - +```json +{ + "scripts": { + "build-storybook-docs": "build-storybook --docs", + } +} +``` Based on the configuration you have, when the `build-storybook-docs` script is executed, Storybook once again will be put into documentation mode and will generate a different build and output the documentation into the `storybook-static` folder. From 483a8cf0636c77847e0cbd0ec4872bb9ee4800df Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Mon, 10 Aug 2020 19:35:20 -0600 Subject: [PATCH 10/13] Remove angular dummy snippet --- docs/get-started/whats-a-story.md | 1 - docs/snippets/angular/button-story.js.mdx | 4 ---- 2 files changed, 5 deletions(-) delete mode 100644 docs/snippets/angular/button-story.js.mdx diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 2d781910edf8..a2044a88e9a2 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -17,7 +17,6 @@ Let’s start with the `Button` component. A story is a function that describes 'react/button-story.js.mdx', 'react/button-story.ts.mdx', 'react/button-story.mdx.mdx', - 'angular/button-story.js.mdx', ]} /> diff --git a/docs/snippets/angular/button-story.js.mdx b/docs/snippets/angular/button-story.js.mdx deleted file mode 100644 index d8fb44a180cf..000000000000 --- a/docs/snippets/angular/button-story.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```js -import Angular from 'angular'; -// And some other Angular code -``` From 5bddd6fd3a5071455f7328823a2911574d987826 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 11 Aug 2020 02:54:32 +0100 Subject: [PATCH 11/13] updates per feedback --- docs/snippets/common/badge-story.mdx.mdx | 4 +++- docs/snippets/common/checkbox-story.mdx.mdx | 4 +++- .../snippets/common/component-story-mdx-story-by-name.mdx.mdx | 4 ++-- docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx | 4 ++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx index 403d3d842af8..3d9fe4de6236 100644 --- a/docs/snippets/common/badge-story.mdx.mdx +++ b/docs/snippets/common/badge-story.mdx.mdx @@ -2,7 +2,7 @@ - + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; @@ -11,6 +11,8 @@ import { Icon } from './Icon'; + + export const Template = (args) => # Badge diff --git a/docs/snippets/common/checkbox-story.mdx.mdx b/docs/snippets/common/checkbox-story.mdx.mdx index 95a295de9adf..ae727730e1ac 100644 --- a/docs/snippets/common/checkbox-story.mdx.mdx +++ b/docs/snippets/common/checkbox-story.mdx.mdx @@ -1,7 +1,7 @@ ```md - + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import { Checkbox } from './Checkbox'; @@ -13,6 +13,8 @@ import { Checkbox } from './Checkbox'; With `MDX` we can define a story for `Checkbox` right in the middle of our Markdown documentation. + + export const Template = (args) => diff --git a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx index 72e47b838b9a..af1b3abb6040 100644 --- a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx @@ -1,11 +1,11 @@ ```md - - import { Story } from '@storybook/addon-docs/blocks'; import { Button } from './Button'; + + export const Template = (args) =>