From f216b6cfd824add7c92724027fb02b07be9ba856 Mon Sep 17 00:00:00 2001 From: Ry Racherbaumer Date: Mon, 14 Mar 2022 12:35:22 -0500 Subject: [PATCH 01/13] Fix typo in CSS pseudo selector --- lib/core-common/templates/base-preview-head.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html index 3a7bef117384..1014b3161e85 100644 --- a/lib/core-common/templates/base-preview-head.html +++ b/lib/core-common/templates/base-preview-head.html @@ -223,8 +223,8 @@ .sb-argstableBlock td:nth-of-type(3) { width: 15%; } - .sb-argstableBlock th:laste-of-type, - .sb-argstableBlock td:laste-of-type { + .sb-argstableBlock th:last-of-type, + .sb-argstableBlock td:last-of-type { width: 25%; padding-right: 20px; } From 2083ee4b7a2ff9d6b87d44e02715df5abc3fb2d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olle=20Br=C3=B6ms?= Date: Tue, 17 May 2022 19:06:57 +0200 Subject: [PATCH 02/13] Added parent wildcard sortOrder --- lib/store/src/storySort.test.ts | 15 +++++++++++++++ lib/store/src/storySort.ts | 3 ++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts index 50976f126bd5..8ffe07a3e2b9 100644 --- a/lib/store/src/storySort.test.ts +++ b/lib/store/src/storySort.test.ts @@ -124,4 +124,19 @@ describe('preview.storySort', () => { expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0); expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0); }); + + it('sorts according to the nested order array with parent wildcard', () => { + const sortFn = storySort({ + order: ['*', ['*', 'b', 'a']], + includeNames: true, + }); + + expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0); + expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0); + expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0); + expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0); + expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0); + expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0); + expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0); + }); }); diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts index ec3d01e3040a..b1d49bfb2865 100644 --- a/lib/store/src/storySort.ts +++ b/lib/store/src/storySort.ts @@ -79,7 +79,8 @@ export const storySort = } // If a nested array is provided for a name, use it for ordering. - const index = order.indexOf(nameA); + let index = order.indexOf(nameA); + if (index === -1) index = order.indexOf('*'); order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : []; // We'll need to look at the next part of the name. From 0e2988ca38a54ca7eddae55e11dac45e750383ca Mon Sep 17 00:00:00 2001 From: Daraphista <81943522+Daraphista@users.noreply.github.com> Date: Sun, 29 May 2022 11:47:09 +0800 Subject: [PATCH 03/13] fix(sidebar): move aria-expanded attribute to button --- lib/ui/src/components/sidebar/Tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx index 222df3e2bcf3..20887cae22f2 100644 --- a/lib/ui/src/components/sidebar/Tree.tsx +++ b/lib/ui/src/components/sidebar/Tree.tsx @@ -190,7 +190,6 @@ const Node = React.memo( data-ref-id={refId} data-item-id={item.id} data-nodetype="root" - aria-expanded={isExpanded} > ( event.preventDefault(); setExpanded({ ids: [item.id], value: !isExpanded }); }} + aria-expanded={isExpanded} > {item.renderLabel?.(item) || item.name} From 0206e0ec95b6b4daad1369955aedd4fc6cfa8b15 Mon Sep 17 00:00:00 2001 From: Chris Plummer Date: Thu, 16 Jun 2022 17:18:46 -0500 Subject: [PATCH 04/13] remove cpy in favor of fs-extra copy/copyFile --- lib/core-server/package.json | 1 - lib/core-server/src/build-static.ts | 5 +- lib/core-server/src/core-presets.test.ts | 6 +- yarn.lock | 92 +----------------------- 4 files changed, 9 insertions(+), 95 deletions(-) diff --git a/lib/core-server/package.json b/lib/core-server/package.json index 1ad69bfb5563..7dfeb8dac548 100644 --- a/lib/core-server/package.json +++ b/lib/core-server/package.json @@ -62,7 +62,6 @@ "commander": "^6.2.1", "compression": "^1.7.4", "core-js": "^3.8.2", - "cpy": "^8.1.2", "detect-port": "^1.3.0", "express": "^4.17.1", "fs-extra": "^9.0.1", diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index e74c78f31850..22083e06e8d0 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -1,5 +1,4 @@ import chalk from 'chalk'; -import cpy from 'cpy'; import fs from 'fs-extra'; import path from 'path'; import dedent from 'ts-dedent'; @@ -56,7 +55,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions & } await fs.emptyDir(options.outputDir); - await cpy(defaultFavIcon, options.outputDir); + await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon))); const previewBuilder: Builder = await getPreviewBuilder(options.configDir); const managerBuilder: Builder = await getManagerBuilder(options.configDir); @@ -169,7 +168,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions & const startTime = process.hrtime(); // When using the prebuilt manager, we straight up copy it into the outputDir instead of building it const manager = prebuiltDir - ? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {}) + ? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {}) : managerBuilder.build({ startTime, options: fullOptions }); if (options.ignorePreview) { diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts index 4569b1dfd488..0151dfe7febc 100644 --- a/lib/core-server/src/core-presets.test.ts +++ b/lib/core-server/src/core-presets.test.ts @@ -83,7 +83,11 @@ jest.mock('@storybook/store', () => { }; }); -jest.mock('cpy', () => () => Promise.resolve()); +jest.mock('fs-extra', () => ({ + ...jest.requireActual('fs-extra'), + copyFile: jest.fn().mockResolvedValue(Promise.resolve()), + copy: jest.fn().mockResolvedValue(Promise.resolve()), +})); jest.mock('http', () => ({ ...jest.requireActual('http'), createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }), diff --git a/yarn.lock b/yarn.lock index 342557e467ed..31c621d75e73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7683,7 +7683,6 @@ __metadata: commander: ^6.2.1 compression: ^1.7.4 core-js: ^3.8.2 - cpy: ^8.1.2 detect-port: ^1.3.0 express: ^4.17.1 fs-extra: ^9.0.1 @@ -7892,6 +7891,7 @@ __metadata: "@storybook/react": 6.5.0-rc.1 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 + cross-env: ^7.0.3 prop-types: 15.7.2 react: 16.14.0 react-dom: 16.14.0 @@ -17999,35 +17999,6 @@ __metadata: languageName: node linkType: hard -"cp-file@npm:^7.0.0": - version: 7.0.0 - resolution: "cp-file@npm:7.0.0" - dependencies: - graceful-fs: ^4.1.2 - make-dir: ^3.0.0 - nested-error-stacks: ^2.0.0 - p-event: ^4.1.0 - checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa - languageName: node - linkType: hard - -"cpy@npm:^8.1.2": - version: 8.1.2 - resolution: "cpy@npm:8.1.2" - dependencies: - arrify: ^2.0.1 - cp-file: ^7.0.0 - globby: ^9.2.0 - has-glob: ^1.0.0 - junk: ^3.1.0 - nested-error-stacks: ^2.1.0 - p-all: ^2.1.0 - p-filter: ^2.1.0 - p-map: ^3.0.0 - checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a - languageName: node - linkType: hard - "cra-kitchen-sink@workspace:examples/cra-kitchen-sink": version: 0.0.0-use.local resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink" @@ -24770,15 +24741,6 @@ __metadata: languageName: node linkType: hard -"has-glob@npm:^1.0.0": - version: 1.0.0 - resolution: "has-glob@npm:1.0.0" - dependencies: - is-glob: ^3.0.0 - checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b - languageName: node - linkType: hard - "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2": version: 1.0.2 resolution: "has-symbols@npm:1.0.2" @@ -26858,7 +26820,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0": +"is-glob@npm:^3.1.0": version: 3.1.0 resolution: "is-glob@npm:3.1.0" dependencies: @@ -29583,13 +29545,6 @@ __metadata: languageName: node linkType: hard -"junk@npm:^3.1.0": - version: 3.1.0 - resolution: "junk@npm:3.1.0" - checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4 - languageName: node - linkType: hard - "jwa@npm:^1.4.1": version: 1.4.1 resolution: "jwa@npm:1.4.1" @@ -33038,13 +32993,6 @@ __metadata: languageName: node linkType: hard -"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0": - version: 2.1.0 - resolution: "nested-error-stacks@npm:2.1.0" - checksum: 8d4e8f81a66be0910d766b3a5972117b0a65bade2f18b2dcb414489e73f93d84dd2b88d5cbf3550b7f427c2f2bbfe2e6e2945b228eefe3328b1fde335df220d1 - languageName: node - linkType: hard - "next-tick@npm:~1.0.0": version: 1.0.0 resolution: "next-tick@npm:1.0.0" @@ -34340,15 +34288,6 @@ __metadata: languageName: node linkType: hard -"p-all@npm:^2.1.0": - version: 2.1.0 - resolution: "p-all@npm:2.1.0" - dependencies: - p-map: ^2.0.0 - checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049 - languageName: node - linkType: hard - "p-cancelable@npm:^1.0.0": version: 1.1.0 resolution: "p-cancelable@npm:1.1.0" @@ -34386,24 +34325,6 @@ __metadata: languageName: node linkType: hard -"p-event@npm:^4.1.0": - version: 4.2.0 - resolution: "p-event@npm:4.2.0" - dependencies: - p-timeout: ^3.1.0 - checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a - languageName: node - linkType: hard - -"p-filter@npm:^2.1.0": - version: 2.1.0 - resolution: "p-filter@npm:2.1.0" - dependencies: - p-map: ^2.0.0 - checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645 - languageName: node - linkType: hard - "p-finally@npm:^1.0.0": version: 1.0.0 resolution: "p-finally@npm:1.0.0" @@ -34554,15 +34475,6 @@ __metadata: languageName: node linkType: hard -"p-timeout@npm:^3.1.0": - version: 3.2.0 - resolution: "p-timeout@npm:3.2.0" - dependencies: - p-finally: ^1.0.0 - checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61 - languageName: node - linkType: hard - "p-try@npm:^1.0.0": version: 1.0.0 resolution: "p-try@npm:1.0.0" From 278c6b1ccfab6ce1367326ccd5a80fd92cd5a6c6 Mon Sep 17 00:00:00 2001 From: Chris Plummer Date: Thu, 16 Jun 2022 17:32:40 -0500 Subject: [PATCH 05/13] fix the yarn lock --- yarn.lock | 1 - 1 file changed, 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 31c621d75e73..5934d63a4d8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7891,7 +7891,6 @@ __metadata: "@storybook/react": 6.5.0-rc.1 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 - cross-env: ^7.0.3 prop-types: 15.7.2 react: 16.14.0 react-dom: 16.14.0 From e17e0f04a415a6cf8d06a4307d1873efff601559 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 21 Jun 2022 13:31:48 +1000 Subject: [PATCH 06/13] Actually run the npm7 migration --- lib/cli/src/automigrate/fixes/index.ts | 2 ++ lib/cli/src/js-package-manager/NPMProxy.ts | 11 +++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/lib/cli/src/automigrate/fixes/index.ts b/lib/cli/src/automigrate/fixes/index.ts index 566162243ed3..7cc92a1bba40 100644 --- a/lib/cli/src/automigrate/fixes/index.ts +++ b/lib/cli/src/automigrate/fixes/index.ts @@ -5,6 +5,7 @@ import { vue3 } from './vue3'; import { mainjsFramework } from './mainjsFramework'; import { eslintPlugin } from './eslint-plugin'; import { builderVite } from './builder-vite'; +import { npm7 } from './npm7'; import { Fix } from '../types'; export * from '../types'; @@ -16,4 +17,5 @@ export const fixes: Fix[] = [ mainjsFramework, eslintPlugin, builderVite, + npm7, ]; diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts index a75d7d2b69fd..8f74cf57e446 100644 --- a/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/lib/cli/src/js-package-manager/NPMProxy.ts @@ -23,10 +23,13 @@ export class NPMProxy extends JsPackageManager { } hasLegacyPeerDeps() { - return ( - this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']) === - 'true' - ); + const result = this.executeCommand('npm', [ + 'config', + 'get', + 'legacy-peer-deps', + '--location=project', + ]); + return result.trim() === 'true'; } setLegacyPeerDeps() { From 0e3bd7af0b3f7d57295f6e705d39a61e0937b99f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 22 Jun 2022 16:00:24 +0200 Subject: [PATCH 07/13] upgrade @storybook/testing-library to next --- addons/interactions/package.json | 2 +- examples/angular-cli/package.json | 2 +- examples/official-storybook/package.json | 2 +- examples/svelte-kitchen-sink/package.json | 2 +- examples/vue-3-cli/package.json | 2 +- examples/vue-kitchen-sink/package.json | 2 +- .../web-components-kitchen-sink/package.json | 2 +- package.json | 2 +- yarn.lock | 150 ++++++++++++++++-- 9 files changed, 145 insertions(+), 21 deletions(-) diff --git a/addons/interactions/package.json b/addons/interactions/package.json index d86a5ae3e0f2..a9cdfc2204d0 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -59,7 +59,7 @@ }, "devDependencies": { "@storybook/jest": "^0.0.5", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "formik": "^2.2.9" }, "peerDependencies": { diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index cf04964c67aa..a4144d29e1bb 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -54,7 +54,7 @@ "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/jest": "^0.0.5", "@storybook/source-loader": "6.5.0-rc.1", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.16", "@types/node": "^14.14.20 || ^16.0.0", diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 1bd706b5591d..35f2cb44eb4d 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -36,7 +36,7 @@ "@storybook/react": "6.5.0-rc.1", "@storybook/router": "6.5.0-rc.1", "@storybook/source-loader": "6.5.0-rc.1", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@storybook/theming": "6.5.0-rc.1", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 881a8306072f..9d6edc94512f 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -24,7 +24,7 @@ "@storybook/jest": "^0.0.5", "@storybook/source-loader": "6.5.0-rc.1", "@storybook/svelte": "6.5.0-rc.1", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "svelte-jester": "1.3.0", "svelte-preprocess": "4.6.8" }, diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json index f2f4f3481380..f87414b6d097 100644 --- a/examples/vue-3-cli/package.json +++ b/examples/vue-3-cli/package.json @@ -20,7 +20,7 @@ "@storybook/addon-links": "6.5.0-rc.1", "@storybook/addon-storyshots": "6.5.0-rc.1", "@storybook/jest": "^0.0.5", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@storybook/vue3": "6.5.0-rc.1", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 29d40181469a..042c6c94925d 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -27,7 +27,7 @@ "@storybook/addons": "6.5.0-rc.1", "@storybook/jest": "^0.0.5", "@storybook/source-loader": "6.5.0-rc.1", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@storybook/vue": "6.5.0-rc.1", "@vue/babel-preset-jsx": "^1.2.4", "babel-loader": "^8.0.0", diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 9fc08ebcee34..f13f2d0481ab 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -51,7 +51,7 @@ "@storybook/source-loader": "portal:../../lib/source-loader", "@storybook/store": "portal:../../lib/store", "@storybook/telemetry": "portal:../../lib/telemetry", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@storybook/theming": "portal:../../lib/theming", "@storybook/ui": "portal:../../lib/ui", "@storybook/web-components": "portal:../../app/web-components", diff --git a/package.json b/package.json index 0713dc02c531..8695fe63253f 100644 --- a/package.json +++ b/package.json @@ -185,7 +185,7 @@ "@storybook/store": "workspace:*", "@storybook/svelte": "workspace:*", "@storybook/telemetry": "workspace:*", - "@storybook/testing-library": "^0.0.7", + "@storybook/testing-library": "0.0.14-next.0", "@storybook/theming": "workspace:*", "@storybook/ui": "workspace:*", "@storybook/vue": "workspace:*", diff --git a/yarn.lock b/yarn.lock index 342557e467ed..be9ddfd72d27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6681,7 +6681,7 @@ __metadata: "@storybook/csf": 0.0.2--canary.4566f4d.1 "@storybook/instrumenter": 6.5.0-rc.1 "@storybook/jest": ^0.0.5 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@storybook/theming": 6.5.0-rc.1 core-js: ^3.8.2 formik: ^2.2.9 @@ -7051,6 +7051,28 @@ __metadata: languageName: node linkType: hard +"@storybook/addons@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/addons@npm:6.5.9" + dependencies: + "@storybook/api": 6.5.9 + "@storybook/channels": 6.5.9 + "@storybook/client-logger": 6.5.9 + "@storybook/core-events": 6.5.9 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/router": 6.5.9 + "@storybook/theming": 6.5.9 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 3ee3e61abc7bff6b481374597cc6717936685222b187d173462483d77d9b284fe5650e9764f7232ae80678e4718440d712f182c01c16887d53c77a1abe262616 + languageName: node + linkType: hard + "@storybook/angular@6.5.0-rc.1, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:app/angular" @@ -7200,6 +7222,34 @@ __metadata: languageName: node linkType: hard +"@storybook/api@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/api@npm:6.5.9" + dependencies: + "@storybook/channels": 6.5.9 + "@storybook/client-logger": 6.5.9 + "@storybook/core-events": 6.5.9 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/router": 6.5.9 + "@storybook/semver": ^7.3.2 + "@storybook/theming": 6.5.9 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + store2: ^2.12.0 + telejson: ^6.0.8 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 6f3aaed66c27715740397ff80a01fda1e363e75165c90cb5f50e4effc00e91b2d1f58b506d2279e83a905f794988e9aaaa75d5b7380c192c954f8c6520368d67 + languageName: node + linkType: hard + "@storybook/babel-plugin-require-context-hook@npm:1.0.1": version: 1.0.1 resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" @@ -7375,6 +7425,17 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/channels@npm:6.5.9" + dependencies: + core-js: ^3.8.2 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 3011663b754fe9028076b2a27573c6ca2040eb227918c315b9e6ea4d23298b1ac305e26aa4e89c02c9120ddd475d0f49d42bcb287b84cb37953c5f99606c3ed1 + languageName: node + linkType: hard + "@storybook/cli@6.5.0-rc.1, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" @@ -7470,6 +7531,16 @@ __metadata: languageName: node linkType: hard +"@storybook/client-logger@npm:6.5.9, @storybook/client-logger@npm:^6.4.0": + version: 6.5.9 + resolution: "@storybook/client-logger@npm:6.5.9" + dependencies: + core-js: ^3.8.2 + global: ^4.4.0 + checksum: 764aacff6859c2cfe93f90498504e6628d8c7606490f1eec835639e21f177b10f0e93cad605dadf0ca6e08f6d5e62153597de6c80570ae65d76b4c71b6884e09 + languageName: node + linkType: hard + "@storybook/codemod@6.5.0-rc.1, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" @@ -7651,6 +7722,15 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/core-events@npm:6.5.9" + dependencies: + core-js: ^3.8.2 + checksum: 5d9eb651ef528330bebe9048eec61d4e3af29fabcf3cc8d7572a94f199e2220dfa738c19d65a761de5ec377d7933316af5eb2bfd0dc8c4027cd7dd57951552bd + languageName: node + linkType: hard + "@storybook/core-server@6.5.0-rc.1, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" @@ -8026,6 +8106,19 @@ __metadata: languageName: node linkType: hard +"@storybook/instrumenter@npm:^6.4.0": + version: 6.5.9 + resolution: "@storybook/instrumenter@npm:6.5.9" + dependencies: + "@storybook/addons": 6.5.9 + "@storybook/client-logger": 6.5.9 + "@storybook/core-events": 6.5.9 + core-js: ^3.8.2 + global: ^4.4.0 + checksum: df6e535759540c09cb0addd65250121a10767ea7f43d6452417208eb09f565250f52c4417c707c964b61da063ee06d15c7aa3baaa86a0a585768fc94cdb8f31d + languageName: node + linkType: hard + "@storybook/jest@npm:^0.0.5": version: 0.0.5 resolution: "@storybook/jest@npm:0.0.5" @@ -8497,7 +8590,7 @@ __metadata: "@storybook/store": "workspace:*" "@storybook/svelte": "workspace:*" "@storybook/telemetry": "workspace:*" - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@storybook/theming": "workspace:*" "@storybook/ui": "workspace:*" "@storybook/vue": "workspace:*" @@ -8705,6 +8798,22 @@ __metadata: languageName: node linkType: hard +"@storybook/router@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/router@npm:6.5.9" + dependencies: + "@storybook/client-logger": 6.5.9 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 765977adbcaa1d06958489bd1316056c35f712f04c603a3848ed04dea3155f65369a085759913ccf19ffda3de41d429f455fbc330c3bcf7b3fdc65e9a3ddd320 + languageName: node + linkType: hard + "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -8851,16 +8960,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/testing-library@npm:^0.0.7": - version: 0.0.7 - resolution: "@storybook/testing-library@npm:0.0.7" +"@storybook/testing-library@npm:0.0.14-next.0": + version: 0.0.14-next.0 + resolution: "@storybook/testing-library@npm:0.0.14-next.0" dependencies: - "@storybook/client-logger": 6.4.0-rc.5 - "@storybook/instrumenter": 6.4.0-rc.5 + "@storybook/client-logger": ^6.4.0 + "@storybook/instrumenter": ^6.4.0 "@testing-library/dom": ^8.3.0 "@testing-library/user-event": ^13.2.1 ts-dedent: ^2.2.0 - checksum: 6be4b2d418195417cd0a04e5a4f2b71a93364cb88780084714a0553c39e6b38943458511b25b101c830b332783afec98a40eefcdc663dca3f34e8f48609a4670 + checksum: fd10ebddd305743f4388ad939b90fed155b6c3a755e96a73f72d38d9afe2546a22be0c9a5d83b8b6d91742dd7be5d2e7dfcbbd630b2fa97e4ef7dde00f0824b0 languageName: node linkType: hard @@ -8924,6 +9033,21 @@ __metadata: languageName: node linkType: hard +"@storybook/theming@npm:6.5.9": + version: 6.5.9 + resolution: "@storybook/theming@npm:6.5.9" + dependencies: + "@storybook/client-logger": 6.5.9 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 28b2626ab2ef4396d3e8d0fad651bf13b323318028e7b01a99c9b999f368655d7aa78dd8154396753828746d934cfbaee1575c890307893d6a3cca9655c9a60e + languageName: node + linkType: hard + "@storybook/ui@6.5.0-rc.1, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui": version: 0.0.0-use.local resolution: "@storybook/ui@workspace:lib/ui" @@ -12959,7 +13083,7 @@ __metadata: "@storybook/babel-plugin-require-context-hook": 1.0.1 "@storybook/jest": ^0.0.5 "@storybook/source-loader": 6.5.0-rc.1 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@types/core-js": ^2.5.4 "@types/jest": ^26.0.16 "@types/node": ^14.14.20 || ^16.0.0 @@ -34018,7 +34142,7 @@ __metadata: "@storybook/react": 6.5.0-rc.1 "@storybook/router": 6.5.0-rc.1 "@storybook/source-loader": 6.5.0-rc.1 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@storybook/theming": 6.5.0-rc.1 "@testing-library/dom": ^7.31.2 "@testing-library/user-event": ^13.1.9 @@ -42980,7 +43104,7 @@ __metadata: "@storybook/jest": ^0.0.5 "@storybook/source-loader": 6.5.0-rc.1 "@storybook/svelte": 6.5.0-rc.1 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 global: ^4.4.0 svelte-jester: 1.3.0 svelte-preprocess: 4.6.8 @@ -45921,7 +46045,7 @@ __metadata: "@storybook/addon-links": 6.5.0-rc.1 "@storybook/addon-storyshots": 6.5.0-rc.1 "@storybook/jest": ^0.0.5 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@storybook/vue3": 6.5.0-rc.1 "@vue/cli-plugin-babel": ~4.5.0 "@vue/cli-plugin-typescript": ~4.5.0 @@ -46018,7 +46142,7 @@ __metadata: "@storybook/addons": 6.5.0-rc.1 "@storybook/jest": ^0.0.5 "@storybook/source-loader": 6.5.0-rc.1 - "@storybook/testing-library": ^0.0.7 + "@storybook/testing-library": 0.0.14-next.0 "@storybook/vue": 6.5.0-rc.1 "@vue/babel-preset-jsx": ^1.2.4 babel-loader: ^8.0.0 From 2d011763bb4ec191fed2002c36cc6765b0190212 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Fri, 24 Jun 2022 12:48:45 -0600 Subject: [PATCH 08/13] Fix /docs 404s --- docs/configure/overview.md | 4 +- docs/configure/story-rendering.md | 2 +- docs/configure/styling-and-css.md | 4 +- docs/faq.md | 140 ++++++++++------------ docs/frameworks.js | 10 +- docs/writing-tests/interaction-testing.md | 4 +- 6 files changed, 78 insertions(+), 86 deletions(-) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index c2a7fa44c02c..5cc0081afff2 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as - `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`. - `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using. -- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config). +- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config). - `babel` - custom [babel configuration](./babel.md). - `framework` - framework specific configurations to help the loading and building process. @@ -185,7 +185,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` | | `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | | `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | | `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md index 360dde244f14..f930fe1e3765 100644 --- a/docs/configure/story-rendering.md +++ b/docs/configure/story-rendering.md @@ -2,7 +2,7 @@ title: 'Story rendering' --- -In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly. +In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly. ## Adding to <head> diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md index 2253874499fb..a6c01a6589bf 100644 --- a/docs/configure/styling-and-css.md +++ b/docs/configure/styling-and-css.md @@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in ### Importing CSS files -If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader. +If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader. @@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove ### 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](./images-and-assets.md#serving-static-files-via-storybook-configuration). \ No newline at end of file +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](./images-and-assets.md#serving-static-files-via-storybook-configuration). diff --git a/docs/faq.md b/docs/faq.md index f05062edf05e..21f9d717989d 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -145,72 +145,70 @@ With the release of version 6.0, we updated our documentation as well. That does We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo. - -| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | -|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| -| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | -| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | -| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | -| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | -| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented | -| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented | -| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | -| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | -| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | -| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | -| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | -| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | -| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | -| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | -| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | -| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | -| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | -| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | -| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | -| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation | -| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation | -| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | -| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | -| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | -| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) | -| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | -| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | -| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | -| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | -| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented | -| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented | -| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | - +| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | +| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | +| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | +| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | +| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | +| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented | +| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented | +| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented | +| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | +| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | +| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | +| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | +| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | +| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | +| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | +| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | +| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | +| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | +| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | +| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | +| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation | +| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation | +| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | +| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | +| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | +| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) | +| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | +| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | +| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | +| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | +| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented | +| | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented | +| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future. @@ -285,7 +283,6 @@ See our documentation on how to customize the [Storyshots configuration](./writi Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request. - ### Why aren't my code blocks highlighted with Storybook MDX Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following: @@ -341,7 +338,6 @@ You'll need to update it to make it compatible with MDX 2. See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information. - ### Why can't I import my own stories into MDX 2? This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround: @@ -351,12 +347,11 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply import { Story } from '@storybook/addon-docs'; -import * as stories from './Button.stories.jsx'; +import \* as stories from './Button.stories.jsx'; ``` - ### Why are my mocked GraphQL queries failing with Storybook's MSW addon? If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following: @@ -399,8 +394,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer. - - ### How can my code detect if it is running in Storybook? You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`. @@ -477,11 +470,10 @@ export default { There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. - ### How does Storybook handles enviroment variables? Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file. -Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). \ No newline at end of file +Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). diff --git a/docs/frameworks.js b/docs/frameworks.js index e634b6612c45..8d2e1156f7b8 100644 --- a/docs/frameworks.js +++ b/docs/frameworks.js @@ -117,27 +117,27 @@ module.exports = { { name: 'Source', unsupported: [], - path: 'writing-docs/doc-blocks#source', + path: 'writing-docs/doc-block-source', }, { name: 'Dynamic source', supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'], - path: 'writing-docs/doc-blocks#source', + path: 'writing-docs/doc-block-source', }, { name: 'Args Table', supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'], - path: 'writing-docs/doc-blocks#argstable', + path: 'writing-docs/doc-block-argstable', }, { name: 'Description', supported: ['react', 'vue', 'angular', 'ember', 'web-components'], - path: 'writing-docs/doc-blocks#description', + path: 'writing-docs/doc-block-description', }, { name: 'Inline stories', supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'], - path: 'writing-docs/doc-blocks#inline-rendering', + path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories', }, ], }, diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md index 1b86c56dfc01..d4d74ea0ca48 100644 --- a/docs/writing-tests/interaction-testing.md +++ b/docs/writing-tests/interaction-testing.md @@ -157,7 +157,7 @@ Interaction tests can be expensive to maintain when applied wholesale to every c - [Test runner](./test-runner.md) to automate test execution - [Visual tests](./visual-testing.md) for appearance -- [Accessibility tests](accessibility-testing.md) for accessibility +- [Accessibility tests](./accessibility-testing.md) for accessibility - Interaction tests for user behavior simulation - [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings -- [Import stories in other tests](./importing-stories-in-tests.md) for other tools \ No newline at end of file +- [Import stories in other tests](./importing-stories-in-tests.md) for other tools From 338923712270c47f95b5dd64444c44c08865d7c6 Mon Sep 17 00:00:00 2001 From: Joshua <62268199+minimalsm@users.noreply.github.com> Date: Fri, 24 Jun 2022 20:20:54 +0100 Subject: [PATCH 09/13] Update whats-a-story.md --- docs/get-started/whats-a-story.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 8425cc063cfc..c349c1768787 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m /> -Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you. +Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you. Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories. From b0cf7bbb558762a4951d105839992e0d4e63372b Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Fri, 24 Jun 2022 14:38:09 -0600 Subject: [PATCH 10/13] Fix formatting of `docs/faq.md` - Prettier screwed it up in 2d011763bb --- docs/faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/faq.md b/docs/faq.md index 21f9d717989d..cc1dec1ca45a 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -347,7 +347,7 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply import { Story } from '@storybook/addon-docs'; -import \* as stories from './Button.stories.jsx'; +import * as stories from './Button.stories.jsx'; ``` From c57c1015570c4c8300313e7ed14ea404a29cf7e9 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Fri, 24 Jun 2022 16:36:20 -0600 Subject: [PATCH 11/13] Fix syntax error in `test-runner.md` --- docs/writing-tests/test-runner.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index 1940f87630c0..e72bd8205454 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -45,7 +45,6 @@ Start your Storybook with: 'angular/storybook-run-dev.with-builder.js.mdx', 'common/storybook-run-dev.yarn.js.mdx', 'common/storybook-run-dev.npm.js.mdx', - ]} /> From a86531d10d64a6515c416ff465d5863944299bff Mon Sep 17 00:00:00 2001 From: Sruthi Sanigarapu Date: Mon, 20 Jun 2022 23:37:25 -0500 Subject: [PATCH 12/13] Update document to show storybook initialization using npm. npx storybook init command is installing storybook using yarn by default on projects that use npm. This leads to clobbering of package.lock when storybook addons are installed using npm. This update will show users how to initialize storybook using npm. --- docs/get-started/installation-problems/angular.mdx | 7 +++++++ docs/get-started/installation-problems/ember.mdx | 7 +++++++ docs/get-started/installation-problems/preact.mdx | 7 +++++++ docs/get-started/installation-problems/react.mdx | 7 +++++++ docs/get-started/installation-problems/svelte.mdx | 7 +++++++ docs/get-started/installation-problems/vue.mdx | 7 +++++++ 6 files changed, 42 insertions(+) diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx index 773e23f801ac..c0c463e548bf 100644 --- a/docs/get-started/installation-problems/angular.mdx +++ b/docs/get-started/installation-problems/angular.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type angular` flag to the installation command to set up Storybook manually: ```shell diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx index 23856fe3d542..7a7698e3d84b 100644 --- a/docs/get-started/installation-problems/ember.mdx +++ b/docs/get-started/installation-problems/ember.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type ember` flag to the installation command to set up Storybook manually: ```shell diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx index 3b1a2b94a1bd..593f0c13ef33 100644 --- a/docs/get-started/installation-problems/preact.mdx +++ b/docs/get-started/installation-problems/preact.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type preact` flag to the installation command to set up Storybook manually: ```shell diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx index 36f517bcdaff..0acc6ef29f97 100644 --- a/docs/get-started/installation-problems/react.mdx +++ b/docs/get-started/installation-problems/react.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type react` flag to the installation command to set up Storybook manually: ```shell diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx index 2b53693d98c8..68f248b11ec8 100644 --- a/docs/get-started/installation-problems/svelte.mdx +++ b/docs/get-started/installation-problems/svelte.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type svelte` flag to the installation command to set up Storybook manually: ```shell diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx index 61ab98ead519..d0c276ff4970 100644 --- a/docs/get-started/installation-problems/vue.mdx +++ b/docs/get-started/installation-problems/vue.mdx @@ -1,3 +1,10 @@ +- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. + If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example: + + ```shell + npx storybook init --use-npm + ``` + - Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually: ```shell From 19d9cc2ba3b89af8d967f6183167a553ba6a216c Mon Sep 17 00:00:00 2001 From: Matthew Smith Date: Sat, 18 Jun 2022 22:24:29 -0400 Subject: [PATCH 13/13] Add html framework examples for the introduction docs --- .../button-story-component-decorator.js.mdx | 21 ++++++++++++ .../button-story-component-decorator.ts.mdx | 23 +++++++++++++ .../html/button-story-default-exports.js.mdx | 13 ++++++++ .../html/button-story-default-exports.ts.mdx | 15 +++++++++ .../html/button-story-rename-story.js.mdx | 16 ++++++++++ .../html/button-story-rename-story.ts.mdx | 18 +++++++++++ .../html/button-story-using-args.js.mdx | 26 +++++++++++++++ .../html/button-story-using-args.ts.mdx | 27 ++++++++++++++++ .../html/button-story-with-args.js.mdx | 2 ++ .../html/button-story-with-args.ts.mdx | 11 +++++-- .../html/button-story-with-blue-args.js.mdx | 25 +++++++++++++++ .../html/button-story-with-blue-args.ts.mdx | 27 ++++++++++++++++ .../html/button-story-with-emojis.js.mdx | 16 ++++++++++ .../html/button-story-with-emojis.ts.mdx | 17 ++++++++++ docs/snippets/html/button-story.js.mdx | 2 ++ docs/snippets/html/button-story.ts.mdx | 2 ++ docs/snippets/html/list-story-expanded.js.mdx | 27 ++++++++++++++++ docs/snippets/html/list-story-expanded.ts.mdx | 29 +++++++++++++++++ .../html/list-story-reuse-data.js.mdx | 22 +++++++++++++ .../html/list-story-reuse-data.ts.mdx | 32 +++++++++++++++++++ docs/snippets/html/list-story-starter.js.mdx | 12 +++++++ docs/snippets/html/list-story-starter.ts.mdx | 14 ++++++++ docs/writing-stories/args.md | 2 ++ docs/writing-stories/introduction.md | 20 ++++++++++++ 24 files changed, 417 insertions(+), 2 deletions(-) create mode 100644 docs/snippets/html/button-story-component-decorator.js.mdx create mode 100644 docs/snippets/html/button-story-component-decorator.ts.mdx create mode 100644 docs/snippets/html/button-story-default-exports.js.mdx create mode 100644 docs/snippets/html/button-story-default-exports.ts.mdx create mode 100644 docs/snippets/html/button-story-rename-story.js.mdx create mode 100644 docs/snippets/html/button-story-rename-story.ts.mdx create mode 100644 docs/snippets/html/button-story-using-args.js.mdx create mode 100644 docs/snippets/html/button-story-using-args.ts.mdx create mode 100644 docs/snippets/html/button-story-with-blue-args.js.mdx create mode 100644 docs/snippets/html/button-story-with-blue-args.ts.mdx create mode 100644 docs/snippets/html/button-story-with-emojis.js.mdx create mode 100644 docs/snippets/html/button-story-with-emojis.ts.mdx create mode 100644 docs/snippets/html/list-story-expanded.js.mdx create mode 100644 docs/snippets/html/list-story-expanded.ts.mdx create mode 100644 docs/snippets/html/list-story-reuse-data.js.mdx create mode 100644 docs/snippets/html/list-story-reuse-data.ts.mdx create mode 100644 docs/snippets/html/list-story-starter.js.mdx create mode 100644 docs/snippets/html/list-story-starter.ts.mdx diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx new file mode 100644 index 000000000000..c87cb62adbb8 --- /dev/null +++ b/docs/snippets/html/button-story-component-decorator.js.mdx @@ -0,0 +1,21 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + decorators: [(story) => { + const decorator = document.createElement('div'); + decorator.style.margin = '3em'; + decorator.appendChild(story()); + return decorator; + }], +}; + +export const Primary = (args) => createButton(args); +``` diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx new file mode 100644 index 000000000000..d1a4efaa4258 --- /dev/null +++ b/docs/snippets/html/button-story-component-decorator.ts.mdx @@ -0,0 +1,23 @@ +```ts +// Button.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + decorators: [(story) => { + const decorator = document.createElement('div'); + decorator.style.margin = '3em'; + decorator.appendChild(story()); + return decorator; + }], +} as Meta; + +export const Primary: StoryFn = (args) => createButton(args); +``` diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx new file mode 100644 index 000000000000..c6bbe5bf64f1 --- /dev/null +++ b/docs/snippets/html/button-story-default-exports.js.mdx @@ -0,0 +1,13 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +}; +``` diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx new file mode 100644 index 000000000000..e294d98b1b40 --- /dev/null +++ b/docs/snippets/html/button-story-default-exports.ts.mdx @@ -0,0 +1,15 @@ +```ts +// Button.stories.ts + +import { Meta } from '@storybook/html'; + +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +} as Meta; +``` diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx new file mode 100644 index 000000000000..3f13f148ce43 --- /dev/null +++ b/docs/snippets/html/button-story-rename-story.js.mdx @@ -0,0 +1,16 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +}; + +export const Primary = (args) => createButton(args); +Primary.storyName = 'I am the primary'; +``` diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx new file mode 100644 index 000000000000..0b37196b9a41 --- /dev/null +++ b/docs/snippets/html/button-story-rename-story.ts.mdx @@ -0,0 +1,18 @@ +```ts +// Button.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +} as Meta; + +export const Primary: StoryFn = (args) => createButton(args); +Primary.storyName = 'I am the primary'; +``` diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx new file mode 100644 index 000000000000..9df04fd6e394 --- /dev/null +++ b/docs/snippets/html/button-story-using-args.js.mdx @@ -0,0 +1,26 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +}; + +//👇 We create a “template” of how args map to rendering +const Template = (args) => createButton(args); + +//👇 Each story then reuses that template +export const Primary = Template.bind({}); +Primary.args = { primary: true, label: 'Button' }; + +export const Secondary = Template.bind({}); +Secondary.args = { ...Primary.args, label: '😄👍😍💯' }; + +export const Tertiary = Template.bind({}); +Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' }; +``` diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx new file mode 100644 index 000000000000..759858bf1da4 --- /dev/null +++ b/docs/snippets/html/button-story-using-args.ts.mdx @@ -0,0 +1,27 @@ +```ts +// Button.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +} as Meta; + +//👇 We create a “template” of how args map to rendering +const Template: StoryFn = (args): HTMLButtonElement => createButton(args); + +//👇 Each story then reuses that template +export const Primary = Template.bind({}); +Primary.args = { primary: true, label: 'Button' }; + +export const Secondary = Template.bind({}); +Secondary.args = { ...Primary.args, label: '😄👍😍💯' }; + +export const Tertiary = Template.bind({}); +Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' }; +``` diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx index 60feb2014547..8d71b288cef9 100644 --- a/docs/snippets/html/button-story-with-args.js.mdx +++ b/docs/snippets/html/button-story-with-args.js.mdx @@ -1,4 +1,6 @@ ```js +// Button.stories.js + export default { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx index 3130fc260de7..9b75446177ee 100644 --- a/docs/snippets/html/button-story-with-args.ts.mdx +++ b/docs/snippets/html/button-story-with-args.ts.mdx @@ -1,16 +1,23 @@ ```ts +// Button.stories.ts + import { Meta, StoryFn } from '@storybook/html'; +type ButtonArgs = { + primary: boolean; + label: string; +} + export default { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +} as Meta; //👇 We create a “template” of how args map to rendering -const Template: StoryFn = (args): HTMLButtonElement => { +const Template: StoryFn = (args): HTMLButtonElement => { const btn = document.createElement('button'); btn.innerText = args.label; diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx new file mode 100644 index 000000000000..5cb8981ad168 --- /dev/null +++ b/docs/snippets/html/button-story-with-blue-args.js.mdx @@ -0,0 +1,25 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + //👇 Creates specific parameters for the story + parameters: { + backgrounds: { + values: [ + { name: 'red', value: '#f00' }, + { name: 'green', value: '#0f0' }, + { name: 'blue', value: '#00f' }, + ], + }, + }, +}; + +export const Primary = (args) => createButton(args); +``` diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx new file mode 100644 index 000000000000..906845b4f472 --- /dev/null +++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx @@ -0,0 +1,27 @@ +```ts +// Button.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + //👇 Creates specific parameters for the story + parameters: { + backgrounds: { + values: [ + { name: 'red', value: '#f00' }, + { name: 'green', value: '#0f0' }, + { name: 'blue', value: '#00f' }, + ], + }, + }, +} as Meta; + +export const Primary: StoryFn = (args) => createButton(args); +``` diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx new file mode 100644 index 000000000000..b6b9b43ec295 --- /dev/null +++ b/docs/snippets/html/button-story-with-emojis.js.mdx @@ -0,0 +1,16 @@ +```js +// Button.stories.js + +import { createButton } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +}; +export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"}); +export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}); +export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}); +``` diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx new file mode 100644 index 000000000000..47a1f99f8ee1 --- /dev/null +++ b/docs/snippets/html/button-story-with-emojis.ts.mdx @@ -0,0 +1,17 @@ +```ts +// Button.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; +import { createButton, ButtonArgs } from './Button'; + +export default { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', +} as Meta; +export const Primary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "Button"}); +export const Secondary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}); +export const Tertiary: StoryFn = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}); +``` diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx index 743c489eff80..6268687c428b 100644 --- a/docs/snippets/html/button-story.js.mdx +++ b/docs/snippets/html/button-story.js.mdx @@ -1,4 +1,6 @@ ```js +// Button.stories.js + export default { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx index 104aa6ccbd19..62e72638171e 100644 --- a/docs/snippets/html/button-story.ts.mdx +++ b/docs/snippets/html/button-story.ts.mdx @@ -1,4 +1,6 @@ ```ts +// Button.stories.ts + import { Meta, StoryFn } from '@storybook/html'; export default { diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx new file mode 100644 index 000000000000..b9cbe7d627f1 --- /dev/null +++ b/docs/snippets/html/list-story-expanded.js.mdx @@ -0,0 +1,27 @@ + +```js +// List.stories.js + +import { createList } from './List'; +import { createListItem } from './ListItem'; + +export default { + title: 'List', +}; + +export const Empty = (args) => createList(args); + +export const OneItem = (args) => { + const list = createList(args); + list.appendChild(createListItem()); + return list; +}; + +export const ManyItems = (args) => { + const list = createList(args); + list.appendChild(createListItem()); + list.appendChild(createListItem()); + list.appendChild(createListItem()); + return list; +}; +``` diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx new file mode 100644 index 000000000000..81e14d1162a4 --- /dev/null +++ b/docs/snippets/html/list-story-expanded.ts.mdx @@ -0,0 +1,29 @@ + +```ts +// List.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createList, ListArgs } from './List'; +import { createListItem } from './ListItem'; + +export default { + title: 'List', +} as Meta; + +export const Empty: StoryFn = (args) => createList(args); + +export const OneItem: StoryFn = (args) => { + const list = createList(args); + list.appendChild(createListItem()); + return list; +}; + +export const ManyItems: StoryFn = (args) => { + const list = createList(args); + list.appendChild(createListItem()); + list.appendChild(createListItem()); + list.appendChild(createListItem()); + return list; +}; +``` diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx new file mode 100644 index 000000000000..a58833617912 --- /dev/null +++ b/docs/snippets/html/list-story-reuse-data.js.mdx @@ -0,0 +1,22 @@ + +```js +// List.stories.js + +import { createList } from './List'; +import { createListItem } from './ListItem'; + +// 👇 We're importing the necessary stories from ListItem +import { Selected, Unselected } from './ListItem.stories'; + +export default { + title: 'List', +}; + +export const ManyItems = (args) => { + const list = createList(args); + list.appendChild(createListItem(Selected.args)); + list.appendChild(createListItem(Unselected.args)); + list.appendChild(createListItem(Unselected.args)); + return list; +}; +``` diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx new file mode 100644 index 000000000000..434bec00d690 --- /dev/null +++ b/docs/snippets/html/list-story-reuse-data.ts.mdx @@ -0,0 +1,32 @@ + +```ts +// List.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createList, ListArgs } from './List'; +import { createListItem } from './ListItem'; + +// 👇 We're importing the necessary stories from ListItem +import { Selected, Unselected } from './ListItem.stories'; + +export default { + title: 'List', +} as Meta; + +export const Empty: StoryFn = (args) => createList(args); + +export const OneItem: StoryFn = (args) => { + const list = createList(args); + list.appendChild(createListItem()); + return list; +}; + +export const ManyItems: StoryFn = (args) => { + const list = createList(args); + list.appendChild(createListItem(Selected.args)); + list.appendChild(createListItem(Unselected.args)); + list.appendChild(createListItem(Unselected.args)); + return list; +}; +``` diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx new file mode 100644 index 000000000000..8e4959b468d3 --- /dev/null +++ b/docs/snippets/html/list-story-starter.js.mdx @@ -0,0 +1,12 @@ +```js +// List.stories.js + +import { createList } from './List'; + +export default { + title: 'List', +}; + +// Always an empty list, not super interesting +const Template = (args) => createList(args); +``` diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx new file mode 100644 index 000000000000..e0706e6c0827 --- /dev/null +++ b/docs/snippets/html/list-story-starter.ts.mdx @@ -0,0 +1,14 @@ +```ts +// List.stories.ts + +import { Meta, StoryFn } from '@storybook/html'; + +import { createList, ListArgs } from './List'; + +export default { + title: 'List', +} as Meta; + +// Always an empty list, not super interesting +const Template: StoryFn = (args) => createList(args); +``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index b7b5ac95c273..6d10a8faab72 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key: 'svelte/button-story-with-args.native-format.mdx', 'svelte/button-story-with-args.mdx.mdx', 'web-components/button-story-with-args.js.mdx', + 'html/button-story-with-args.ts.mdx', + 'html/button-story-with-args.js.mdx', ]} /> diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md index 96ca9925fffa..15e4c456516b 100644 --- a/docs/writing-stories/introduction.md +++ b/docs/writing-stories/introduction.md @@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov 'angular/button-story-default-export-with-component.ts.mdx', 'svelte/button-story-default-export-with-component.js.mdx', 'web-components/button-story-default-export-with-component.js.mdx', + 'html/button-story-default-export.js.mdx', + 'html/button-story-default-export.ts.mdx', ]} /> @@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r 'svelte/button-story.js.mdx', 'svelte/button-story.native-format.mdx', 'web-components/button-story.js.mdx', + 'html/button-story.js.mdx', + 'html/button-story.ts.mdx', ]} /> @@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac 'angular/button-story-rename-story.ts.mdx', 'svelte/button-story-rename-story.js.mdx', 'web-components/button-story-rename-story.js.mdx', + 'html/button-story-rename-story.js.mdx', + 'html/button-story-rename-story.ts.mdx', ]} /> @@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul 'svelte/button-story-with-emojis.native-format.mdx', 'svelte/button-story-with-emojis.mdx.mdx', 'web-components/button-story-with-emojis.js.mdx', + 'html/button-story-with-emojis.js.mdx', + 'html/button-story-with-emojis.ts.mdx', ]} /> @@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc 'svelte/button-story-using-args.js.mdx', 'svelte/button-story-using-args.native-format.mdx', 'web-components/button-story-using-args.js.mdx', + 'html/button-story-using-args.js.mdx', + 'html/button-story-using-args.ts.mdx', ]} /> @@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe 'svelte/button-story-with-blue-args.native-format.mdx', 'svelte/button-story-with-blue-args.mdx.mdx', 'web-components/button-story-with-blue-args.js.mdx', + 'html/button-story-with-blue-args.js.mdx', + 'html/button-story-with-blue-args.ts.mdx', ]} /> @@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u 'svelte/button-story-component-decorator.native-format.mdx', 'svelte/button-story-component-decorator.mdx.mdx', 'web-components/button-story-component-decorator.js.mdx', + 'html/button-story-component-decorator.js.mdx', + 'html/button-story-component-decorator.ts.mdx', ]} /> @@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co 'vue/list-story-starter.ts-3.ts.mdx', 'svelte/list-story-starter.native-format.mdx', 'web-components/list-story-starter.js.mdx', + 'html/list-story-starter.js.mdx', + 'html/list-story-starter.ts.mdx', ]} /> @@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story: 'vue/list-story-expanded.ts-3.ts.mdx', 'svelte/list-story-expanded.native-format.mdx', 'web-components/list-story-expanded.js.mdx', + 'html/list-story-expanded.js.mdx', + 'html/list-story-expanded.ts.mdx', ]} /> @@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T 'vue/list-story-reuse-data.3.js.mdx', 'vue/list-story-reuse-data.ts-3.ts.mdx', 'web-components/list-story-reuse-data.js.mdx', + 'html/list-story-reuse-data.js.mdx', + 'html/list-story-reuse-data.ts.mdx', ]} />