From 40ed57ba12bba9029723d82e69ff48e6d305239c Mon Sep 17 00:00:00 2001 From: Steven Sacks Date: Tue, 30 Mar 2021 20:45:01 +0900 Subject: [PATCH 001/104] add maxLength support to text control --- .../stories/addon-controls.stories.tsx | 8 ++++--- lib/components/src/controls/Text.tsx | 21 ++++++++++++++++++- lib/components/src/controls/types.ts | 4 +++- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx index 93040bf0a443..2a534ce60a8d 100644 --- a/examples/official-storybook/stories/addon-controls.stories.tsx +++ b/examples/official-storybook/stories/addon-controls.stories.tsx @@ -6,7 +6,7 @@ export default { component: Button, argTypes: { children: { control: 'text', name: 'Children', mapping: { basic: 'BASIC' } }, - type: { control: 'text', name: 'Type' }, + type: { name: 'Type', control: { type: 'text', maxLength: 32 } }, json: { control: 'object', name: 'JSON' }, imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' }, label: { @@ -35,8 +35,10 @@ export default { const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } }; const Template = (args) => ( -
- +
+ {args.json && 
{JSON.stringify(args.json, null, 2)}
}
); diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx index edf6e53c0b2b..0f29a26c09ce 100644 --- a/lib/components/src/controls/Text.tsx +++ b/lib/components/src/controls/Text.tsx @@ -10,9 +10,22 @@ const Wrapper = styled.label({ display: 'flex', }); +const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({ + marginLeft: '0.75rem', + paddingTop: '0.35rem', + color: isMaxed ? 'red' : undefined, +})); + const format = (value?: TextValue) => value || ''; -export const TextControl: FC = ({ name, value, onChange, onFocus, onBlur }) => { +export const TextControl: FC = ({ + name, + value, + onChange, + onFocus, + onBlur, + maxLength, +}) => { const handleChange = (event: ChangeEvent) => { onChange(event.target.value); }; @@ -20,11 +33,17 @@ export const TextControl: FC = ({ name, value, onChange, onFocus, onB + {maxLength && ( + + {value?.length ?? 0} / {maxLength} + + )} ); }; diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts index 952458266fa1..1feb597cd505 100644 --- a/lib/components/src/controls/types.ts +++ b/lib/components/src/controls/types.ts @@ -66,7 +66,9 @@ export interface NormalizedOptionsConfig { } export type TextValue = string; -export interface TextConfig {} +export interface TextConfig { + maxLength?: number; +} export type ControlType = | 'array' From 4ec49d596b7e0d93ee8f8d43f1496ae66b235825 Mon Sep 17 00:00:00 2001 From: vmalay Date: Mon, 7 Jun 2021 14:18:26 +0200 Subject: [PATCH 002/104] Update puppeteer dependencies version --- addons/storyshots/storyshots-puppeteer/package.json | 2 +- examples/official-storybook/package.json | 2 +- package.json | 2 +- yarn.lock | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 1580c2ca46f7..4cf17e2e4c80 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -54,7 +54,7 @@ }, "peerDependencies": { "@storybook/addon-storyshots": "6.3.0-beta.15", - "puppeteer": "^2.0.0 || ^3.0.0" + "puppeteer": ">=2.0.0 < 9" }, "peerDependenciesMeta": { "puppeteer": { diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 98ee1a6dcfaa..95671bafdec8 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -55,7 +55,7 @@ "webpack": "4" }, "peerDependencies": { - "puppeteer": "^2.0.0 || ^3.0.0" + "puppeteer": ">=2.0.0 < 9" }, "storybook": { "chromatic": { diff --git a/package.json b/package.json index bb3986730d88..25cc2191bcc6 100644 --- a/package.json +++ b/package.json @@ -272,7 +272,7 @@ "optionalDependencies": { "@cypress/webpack-preprocessor": "^5.7.0", "cypress": "6.8.0", - "puppeteer": "^2.1.1", + "puppeteer": ">=2.1.1 < 9", "ts-loader": "^8.0.14", "verdaccio": "^4.10.0", "verdaccio-auth-memory": "^9.7.2" diff --git a/yarn.lock b/yarn.lock index 7fc1b349b42b..252c79d31cf2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5914,7 +5914,7 @@ __metadata: regenerator-runtime: ^0.13.7 peerDependencies: "@storybook/addon-storyshots": 6.3.0-beta.15 - puppeteer: ^2.0.0 || ^3.0.0 + puppeteer: ">=2.0.0 < 9" peerDependenciesMeta: puppeteer: optional: true @@ -7323,7 +7323,7 @@ __metadata: postcss-loader: ^4.2.0 prettier: ~2.2.1 prompts: ^2.4.0 - puppeteer: ^2.1.1 + puppeteer: ">=2.1.1 < 9" raf: ^3.4.1 regenerator-runtime: ^0.13.7 remark: ^13.0.0 @@ -31400,7 +31400,7 @@ fsevents@^1.2.7: uuid-browser: ^3.1.0 webpack: 4 peerDependencies: - puppeteer: ^2.0.0 || ^3.0.0 + puppeteer: ">=2.0.0 < 9" languageName: unknown linkType: soft From ae6b4d645e5d436767df2f9ac5f2ef9f52015bcc Mon Sep 17 00:00:00 2001 From: purpleeeee Date: Thu, 29 Jul 2021 23:31:20 +0900 Subject: [PATCH 003/104] refactor: feat SnapshotsWithOptionsArgType --- .../storyshots/storyshots-core/src/test-bodies.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/addons/storyshots/storyshots-core/src/test-bodies.ts b/addons/storyshots/storyshots-core/src/test-bodies.ts index e8fbc7f674ff..b24b45826683 100644 --- a/addons/storyshots/storyshots-core/src/test-bodies.ts +++ b/addons/storyshots/storyshots-core/src/test-bodies.ts @@ -1,15 +1,21 @@ import 'jest-specific-snapshot'; -import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions'; +import { + StoryshotsTestMethod, + TestMethodOptions, + StoryshotsOptions, +} from './api/StoryshotsOptions'; const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply); const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts); +type SnapshotsWithOptionsArgType = Pick | Function; + type SnapshotsWithOptionsReturnType = ( options: Pick ) => any; export function snapshotWithOptions( - options: { renderer?: any; serializer?: any } | Function = {} + options: SnapshotsWithOptionsArgType = {} ): SnapshotsWithOptionsReturnType { return ({ story, context, renderTree, snapshotFileName }) => { const result = renderTree(story, context, optionsOrCallOptions(options, story)); @@ -44,7 +50,9 @@ export function snapshotWithOptions( }; } -export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod { +export function multiSnapshotWithOptions( + options: SnapshotsWithOptionsArgType = {} +): StoryshotsTestMethod { return ({ story, context, renderTree, stories2snapsConverter }) => { const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context); return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName }); From ebbc9b6b0246d0ddf5e877c90c1800195f3ed70b Mon Sep 17 00:00:00 2001 From: Black-Hole1 <158blackhole@gmail.com> Date: Fri, 20 Aug 2021 11:34:52 +0800 Subject: [PATCH 004/104] fix(build): avoid logging an object on compilation errors --- lib/core-server/src/build-static.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index 8fda9354d4bd..f0b40fa5b5c4 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -144,8 +144,11 @@ export async function buildStatic({ packageJson, ...loadOptions }: LoadOptions) configType: 'PRODUCTION', cache, }); - } catch (e) { - logger.error(e); + } catch (error) { + if (error instanceof Error) { + logger.error(error); + } + process.exit(1); } } From 0063c3cfa49ae963cf32c388d1f5915587112ee2 Mon Sep 17 00:00:00 2001 From: Black-Hole1 <158blackhole@gmail.com> Date: Fri, 20 Aug 2021 13:32:41 +0800 Subject: [PATCH 005/104] fix(type): typescript type error --- lib/core-server/src/build-static.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index f0b40fa5b5c4..35e7d543d71d 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -146,7 +146,7 @@ export async function buildStatic({ packageJson, ...loadOptions }: LoadOptions) }); } catch (error) { if (error instanceof Error) { - logger.error(error); + logger.error(error.message); } process.exit(1); From a7d8d5b0562584379849ebfb0c6d183aa4c1e128 Mon Sep 17 00:00:00 2001 From: "oleg.elifantiev" Date: Tue, 5 Oct 2021 17:41:33 +0300 Subject: [PATCH 006/104] Fix router matching utility in case matching with "startsWith" and searched part is inside of current url. --- lib/router/src/utils.test.ts | 6 ++++++ lib/router/src/utils.ts | 12 ++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts index e7ae39173ade..adda7905ba85 100644 --- a/lib/router/src/utils.test.ts +++ b/lib/router/src/utils.test.ts @@ -34,6 +34,12 @@ describe('getMatch', () => { expect(output).toBe(null); }); + + it('returns null match if "startsWith" part is in the middle', () => { + const output = getMatch('/foo/bar', '/bar', true); + + expect(output).toBe(null); + }); }); describe('parsePath', () => { diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts index 0831485f8e04..cc2b3f2ae1eb 100644 --- a/lib/router/src/utils.ts +++ b/lib/router/src/utils.ts @@ -147,11 +147,19 @@ type Match = { path: string }; export const getMatch = memoize(1000)( (current: string, target: string, startsWith = true): Match | null => { - const startsWithTarget = current && startsWith && current.startsWith(target); + if (startsWith) { + const startsWithTarget = current && current.startsWith(target); + if (startsWithTarget) { + return { path: current }; + } + + return null; + } + const currentIsTarget = typeof target === 'string' && current === target; const matchTarget = current && target && current.match(target); - if (startsWithTarget || currentIsTarget || matchTarget) { + if (currentIsTarget || matchTarget) { return { path: current }; } From b29e131fdf23092fbe7b453d9b72990c21a3a1a6 Mon Sep 17 00:00:00 2001 From: Pavlo Zhukov Date: Wed, 13 Oct 2021 11:19:51 +0300 Subject: [PATCH 007/104] fix: silence unexpected control type enum for color matchers --- lib/store/src/inferControls.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/lib/store/src/inferControls.ts b/lib/store/src/inferControls.ts index 00c4ec45cf6e..125000740876 100644 --- a/lib/store/src/inferControls.ts +++ b/lib/store/src/inferControls.ts @@ -23,9 +23,14 @@ const inferControl = (argType: StrictInputType, name: string, matchers: Controls return { control: { type: 'color' } }; } - logger.warn( - `Addon controls: Control of type color only supports string, received "${controlType}" instead` - ); + /** + * @see https://github.com/storybookjs/storybook/issues/16322 + */ + if (controlType !== 'enum') { + logger.warn( + `Addon controls: Control of type color only supports string, received "${controlType}" instead` + ); + } } // args that end with date e.g. purchaseDate From 92e6fbb9b2a5df2ee6ddac998b8a784b014c3c87 Mon Sep 17 00:00:00 2001 From: Trevor Burnham Date: Sun, 5 Dec 2021 14:11:43 -0500 Subject: [PATCH 008/104] fix(storybook): Use parameters from first story in group Fixes #15772 The previous behavior was to use the parameters from the last story in the group. --- lib/api/src/lib/stories.ts | 3 +++ lib/api/src/tests/stories.test.js | 11 +++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index 044b728ca04e..36901a5d816f 100644 --- a/lib/api/src/lib/stories.ts +++ b/lib/api/src/lib/stories.ts @@ -267,9 +267,12 @@ export const transformStoriesRawToStoriesHash = ( rootAndGroups.forEach((group, index) => { const child = paths[index + 1]; const { id } = group; + // @ts-ignore + const { parameters: originalParameters = group.parameters } = acc[id] || {}; acc[id] = merge(acc[id] || {}, { ...group, ...(child && { children: [child] }), + parameters: originalParameters, }); }); diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index 8cf027d5f317..18e406ebcd51 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -83,6 +83,8 @@ describe('stories API', () => { }); }); const parameters = {}; + const firstInGroupParameters = { viewMode: 'docs' }; + const secondInGroupParameters = { viewMode: 'story' }; const storiesHash = { 'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1', args: {} }, 'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2', args: {} }, @@ -97,7 +99,7 @@ describe('stories API', () => { 'b-d--1': { kind: 'b/d', name: '1', - parameters, + parameters: firstInGroupParameters, path: 'b-d--1', id: 'b-d--1', args: {}, @@ -105,7 +107,7 @@ describe('stories API', () => { 'b-d--2': { kind: 'b/d', name: '2', - parameters, + parameters: secondInGroupParameters, path: 'b-d--2', id: 'b-d--2', args: { a: 'b' }, @@ -207,6 +209,7 @@ describe('stories API', () => { id: 'b-d', parent: 'b', children: ['b-d--1', 'b-d--2'], + parameters: firstInGroupParameters, isRoot: false, isComponent: true, }); @@ -216,7 +219,7 @@ describe('stories API', () => { parent: 'b-d', kind: 'b/d', name: '1', - parameters, + parameters: firstInGroupParameters, args: {}, prepared: true, }); @@ -226,7 +229,7 @@ describe('stories API', () => { parent: 'b-d', kind: 'b/d', name: '2', - parameters, + parameters: secondInGroupParameters, args: { a: 'b' }, prepared: true, }); From 5a00f053cb7af49a1f4c348ef0ce56070e427771 Mon Sep 17 00:00:00 2001 From: Ruben Oostinga <0xR@users.noreply.github.com> Date: Tue, 7 Dec 2021 18:18:58 +0100 Subject: [PATCH 009/104] Improve the interaction readme The original docs show a story without a template. An example with template is more useful for most people. --- addons/interactions/README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/addons/interactions/README.md b/addons/interactions/README.md index d3687e084f32..0cd9e62bc3a5 100644 --- a/addons/interactions/README.md +++ b/addons/interactions/README.md @@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that `@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function. ```js +import { Button } from './Button'; import { expect } from '@storybook/jest'; import { within, userEvent } from '@storybook/testing-library'; export default { title: 'Button', + component: Button, argTypes: { onClick: { action: true }, }, }; -export const Demo = { - play: async ({ args, canvasElement }) => { - const canvas = within(canvasElement); - await userEvent.click(canvas.getByRole('button')); - await expect(args.onClick).toHaveBeenCalled(); - }, +const Template = (args) => +

A little text to show this is a view.

If we need to test components in a Svelte environment, for instance to test slot behaviour,

then wrapping the component up in a view

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 037/104] 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 5db9488c07b60336f889c1681e910cb41a8f8298 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Noel=20Kim=20=28=EA=B9=80=EB=AF=BC=ED=98=81=29?= Date: Wed, 18 May 2022 17:55:10 +0900 Subject: [PATCH 038/104] fix(chore): type guard for globalWindow --- lib/channel-postmessage/src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts index c4221f5509d4..c14dc401cd6f 100644 --- a/lib/channel-postmessage/src/index.ts +++ b/lib/channel-postmessage/src/index.ts @@ -35,7 +35,9 @@ export class PostmsgTransport { constructor(private readonly config: Config) { this.buffer = []; this.handler = null; - globalWindow.addEventListener('message', this.handleEvent.bind(this), false); + if (globalWindow) { + globalWindow.addEventListener('message', this.handleEvent.bind(this), false); + } // Check whether the config.page parameter has a valid value if (config.page !== 'manager' && config.page !== 'preview') { From 88648fd3c213fb8a6d59bcf90b0e7be27558925c Mon Sep 17 00:00:00 2001 From: vinodkumarsharma276 Date: Wed, 18 May 2022 19:12:30 +0530 Subject: [PATCH 039/104] Bump file-system to 2.0.0 We are using @storybook/core-common in our project and it pulls file-system@1.0.5 --> ramda@0.21.0. We need to use ramda@0.28.0 which file-system@2.0.0 uses. --- lib/core-common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-common/package.json b/lib/core-common/package.json index 9bcc6fa7a3d1..c2846f02efbe 100644 --- a/lib/core-common/package.json +++ b/lib/core-common/package.json @@ -72,7 +72,7 @@ "chalk": "^4.1.0", "core-js": "^3.8.2", "express": "^4.17.1", - "file-system-cache": "^1.0.5", + "file-system-cache": "^2.0.0", "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^6.0.4", "fs-extra": "^9.0.1", From 912e606c626c97502bf41201bd711b1f57662508 Mon Sep 17 00:00:00 2001 From: shippokun Date: Thu, 19 May 2022 00:23:47 +0900 Subject: [PATCH 040/104] chore: remove addon-actions from packages for install --- lib/cli/src/generators/baseGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 1071db277dc2..50eb00383f3c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -90,7 +90,7 @@ export async function baseGenerator( // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json - const addonPackages = [...addons, '@storybook/addon-actions']; + const addonPackages = [...addons]; if (hasInteractiveStories(framework)) { addons.push('@storybook/addon-interactions'); From 21ec836a2ebe0d78e7c022f84a71d8fa7f6db4bc Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 19:44:07 +0100 Subject: [PATCH 041/104] Update package.json --- lib/core-server/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-server/package.json b/lib/core-server/package.json index af967ab9206e..65fe1e7a0e59 100644 --- a/lib/core-server/package.json +++ b/lib/core-server/package.json @@ -83,7 +83,7 @@ "watchpack": "^2.2.0", "webpack": "4", "ws": "^8.2.3", - "x-default-browser": "^0.4.0" + "@aw-web-design/x-default-browser": "1.4.21" }, "devDependencies": { "@storybook/builder-webpack5": "6.5.0-rc.1", From a0f44b34b2450a211006b1882532cc85fc522ba8 Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 19:56:19 +0100 Subject: [PATCH 042/104] update x-default-browser with fixes --- lib/core-server/package.json | 4 +-- yarn.lock | 58 ++++++++++++++++-------------------- 2 files changed, 28 insertions(+), 34 deletions(-) diff --git a/lib/core-server/package.json b/lib/core-server/package.json index 65fe1e7a0e59..b25245d3f53d 100644 --- a/lib/core-server/package.json +++ b/lib/core-server/package.json @@ -39,6 +39,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@aw-web-design/x-default-browser": "1.4.21", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-webpack4": "6.5.0-rc.1", "@storybook/core-client": "6.5.0-rc.1", @@ -82,8 +83,7 @@ "util-deprecate": "^1.0.2", "watchpack": "^2.2.0", "webpack": "4", - "ws": "^8.2.3", - "@aw-web-design/x-default-browser": "1.4.21" + "ws": "^8.2.3" }, "devDependencies": { "@storybook/builder-webpack5": "6.5.0-rc.1", diff --git a/yarn.lock b/yarn.lock index 4168f11cab61..c1e79692bfe1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -375,6 +375,17 @@ __metadata: languageName: node linkType: hard +"@aw-web-design/x-default-browser@npm:1.4.21": + version: 1.4.21 + resolution: "@aw-web-design/x-default-browser@npm:1.4.21" + dependencies: + default-browser-id: 3.0.0 + bin: + x-default-browser: bin/x-default-browser.js + checksum: 6fcce58c722be94ee98bc7237d834c9626c3385f59ac776a7c58523c04d280b0d6f5d54c983d0a0b2d79e43c8792c11799f2d151b3c1744206aaa444f0c7e8d8 + languageName: node + linkType: hard + "@axe-core/puppeteer@npm:^4.2.0": version: 4.4.0 resolution: "@axe-core/puppeteer@npm:4.4.0" @@ -7655,6 +7666,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" dependencies: + "@aw-web-design/x-default-browser": 1.4.21 "@discoveryjs/json-ext": ^0.5.3 "@storybook/builder-webpack4": 6.5.0-rc.1 "@storybook/builder-webpack5": 6.5.0-rc.1 @@ -7705,7 +7717,6 @@ __metadata: watchpack: ^2.2.0 webpack: 4 ws: ^8.2.3 - x-default-browser: ^0.4.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -14763,7 +14774,7 @@ __metadata: languageName: node linkType: hard -"big-integer@npm:^1.6.7": +"big-integer@npm:^1.6.44": version: 1.6.51 resolution: "big-integer@npm:1.6.51" checksum: c8139662d57f8833a44802f4b65be911679c569535ea73c5cfd3c1c8994eaead1b84b6f63e1db63833e4d4cacb6b6a9e5522178113dfdc8e4c81ed8436f1e8cc @@ -14993,12 +15004,12 @@ __metadata: languageName: node linkType: hard -"bplist-parser@npm:^0.1.0": - version: 0.1.1 - resolution: "bplist-parser@npm:0.1.1" +"bplist-parser@npm:^0.2.0": + version: 0.2.0 + resolution: "bplist-parser@npm:0.2.0" dependencies: - big-integer: ^1.6.7 - checksum: cd50206f956e74f6e46cb5ed14be5eb00b2e14676ea3dd36703470715177a2770fc22032eca63a36adb3b56a1e51138a95bb0fc6849a78c21e92caeedf219ea7 + big-integer: ^1.6.44 + checksum: ce79c69e0f6efe506281e7c84e3712f7d12978991675b6e3a58a295b16f13ca81aa9b845c335614a545e0af728c8311b6aa3142af76ba1cb616af9bbac5c4a9f languageName: node linkType: hard @@ -19254,16 +19265,13 @@ __metadata: languageName: node linkType: hard -"default-browser-id@npm:^1.0.4": - version: 1.0.4 - resolution: "default-browser-id@npm:1.0.4" +"default-browser-id@npm:3.0.0": + version: 3.0.0 + resolution: "default-browser-id@npm:3.0.0" dependencies: - bplist-parser: ^0.1.0 - meow: ^3.1.0 - untildify: ^2.0.0 - bin: - default-browser-id: cli.js - checksum: a00a2ab66beab70490b4d76258a1f2eadfadca6414bf67ab78aa25b33dc3de0c4c813bb8f204271aa7a08281c39474487db0229e325112456464fb97a0522a8a + bplist-parser: ^0.2.0 + untildify: ^4.0.0 + checksum: 8db3ab882eb3e1e8b59d84c8641320e6c66d8eeb17eb4bb848b7dd549b1e6fd313988e4a13542e95fbaeff03f6e9dedc5ad191ad4df7996187753eb0d45c00b7 languageName: node linkType: hard @@ -31675,7 +31683,7 @@ __metadata: languageName: node linkType: hard -"meow@npm:^3.1.0, meow@npm:^3.3.0": +"meow@npm:^3.3.0": version: 3.7.0 resolution: "meow@npm:3.7.0" dependencies: @@ -45126,7 +45134,7 @@ __metadata: languageName: node linkType: hard -"untildify@npm:^2.0.0, untildify@npm:^2.1.0": +"untildify@npm:^2.1.0": version: 2.1.0 resolution: "untildify@npm:2.1.0" dependencies: @@ -47688,20 +47696,6 @@ __metadata: languageName: node linkType: hard -"x-default-browser@npm:^0.4.0": - version: 0.4.0 - resolution: "x-default-browser@npm:0.4.0" - dependencies: - default-browser-id: ^1.0.4 - dependenciesMeta: - default-browser-id: - optional: true - bin: - x-default-browser: bin/x-default-browser.js - checksum: a19e42ffeab19560ea05a423561f5b3b82bb3a5878dc932cfd0847fadc5890b8b685d6b39e2356c8304b3943f5a7120ba4b233365d686ff8f9bf2499ce11f052 - languageName: node - linkType: hard - "xdg-basedir@npm:^4.0.0": version: 4.0.0 resolution: "xdg-basedir@npm:4.0.0" From 052bcd7c57b1a9f8d034302c7eb707186edf994a Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 20:17:42 +0100 Subject: [PATCH 043/104] Update open-in-browser.ts --- lib/core-server/src/utils/open-in-browser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-server/src/utils/open-in-browser.ts b/lib/core-server/src/utils/open-in-browser.ts index daa5938b3f07..d55ef073bcbc 100644 --- a/lib/core-server/src/utils/open-in-browser.ts +++ b/lib/core-server/src/utils/open-in-browser.ts @@ -1,7 +1,7 @@ import { logger } from '@storybook/node-logger'; import betterOpn from 'better-opn'; // betterOpn alias used because also loading open import open from 'open'; -import getDefaultBrowser from 'x-default-browser'; +import getDefaultBrowser from '@aw-web-design/x-default-browser'; import dedent from 'ts-dedent'; export function openInBrowser(address: string) { From 92e657eb8fa471706f779c40a0911e806c530bb1 Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 20:18:25 +0100 Subject: [PATCH 044/104] Update typings.d.ts --- lib/core-client/src/typings.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-client/src/typings.d.ts b/lib/core-client/src/typings.d.ts index 0a7386c391b9..1ef570433a55 100644 --- a/lib/core-client/src/typings.d.ts +++ b/lib/core-client/src/typings.d.ts @@ -6,6 +6,6 @@ declare module 'pnp-webpack-plugin'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; From 6a5a833e114edca8c917520cc6dd006cdfba6651 Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 20:19:14 +0100 Subject: [PATCH 045/104] Update typings.d.ts --- lib/core-server/typings.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-server/typings.d.ts b/lib/core-server/typings.d.ts index eeb489a5e71a..b539c76578d5 100644 --- a/lib/core-server/typings.d.ts +++ b/lib/core-server/typings.d.ts @@ -7,7 +7,7 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; declare module '@discoveryjs/json-ext'; declare module 'watchpack'; From 31a9b65c74cc5c70b8465e167e65010a0fdf989a Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 20:19:48 +0100 Subject: [PATCH 046/104] Update typings.d.ts --- lib/manager-webpack4/typings.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/manager-webpack4/typings.d.ts b/lib/manager-webpack4/typings.d.ts index 894b889ada8f..6c5e278ef73f 100644 --- a/lib/manager-webpack4/typings.d.ts +++ b/lib/manager-webpack4/typings.d.ts @@ -7,5 +7,5 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; From 98f413fcef6b3c62ad2f8a7f1294b0c99ae32722 Mon Sep 17 00:00:00 2001 From: Andy Wilson <31218527+The-Code-Monkey@users.noreply.github.com> Date: Thu, 19 May 2022 20:20:15 +0100 Subject: [PATCH 047/104] Update typings.d.ts --- lib/manager-webpack5/typings.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/manager-webpack5/typings.d.ts b/lib/manager-webpack5/typings.d.ts index 70fcabe6c3bb..febd3228fce6 100644 --- a/lib/manager-webpack5/typings.d.ts +++ b/lib/manager-webpack5/typings.d.ts @@ -6,5 +6,5 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; From c8f897584a03d1cd9e2036635be45e1f4d91d594 Mon Sep 17 00:00:00 2001 From: Ang YC Date: Thu, 26 May 2022 22:43:54 +0800 Subject: [PATCH 048/104] fix: throttle color controls --- lib/api/src/index.tsx | 9 +++++---- lib/api/src/modules/stories.ts | 4 ++-- lib/components/src/controls/Color.tsx | 3 ++- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx index 20180733964a..2bdf8ff3dc3c 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -447,13 +447,14 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) const data = getCurrentStoryData(); const args = isStory(data) ? data.args : {}; + const { id, refId } = data; const updateArgs = useCallback( - (newArgs: Args) => updateStoryArgs(data as Story, newArgs), - [data, updateStoryArgs] + (newArgs: Args) => updateStoryArgs({ id, refId }, newArgs), + [id, refId, updateStoryArgs] ); const resetArgs = useCallback( - (argNames?: string[]) => resetStoryArgs(data as Story, argNames), - [data, resetStoryArgs] + (argNames?: string[]) => resetStoryArgs({ id, refId }, argNames), + [id, refId, resetStoryArgs] ); return [args, updateArgs, resetArgs]; diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 70b3c5ba8800..904203e55710 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -78,8 +78,8 @@ export interface SubAPI { parameterName?: ParameterName ) => Story['parameters'] | any; getCurrentParameter(parameterName?: ParameterName): S; - updateStoryArgs(story: Story, newArgs: Args): void; - resetStoryArgs: (story: Story, argNames?: string[]) => void; + updateStoryArgs(story: Story | { id: StoryId; refId?: string }, newArgs: Args): void; + resetStoryArgs: (story: Story | { id: StoryId; refId?: string }, argNames?: string[]) => void; findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId; findSiblingStoryId( storyId: StoryId, diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx index e6168506e8f0..aa4dea528223 100644 --- a/lib/components/src/controls/Color.tsx +++ b/lib/components/src/controls/Color.tsx @@ -307,9 +307,10 @@ export const ColorControl: FC = ({ presetColors, startOpen, }) => { + const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]); const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput( initialValue, - throttle(onChange, 200) + throttledOnChange ); const { presets, addPreset } = usePresets(presetColors, color, colorSpace); const Picker = ColorPicker[colorSpace]; 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 049/104] 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 1ac909749525def9a60ea7951f3e615a03f791af Mon Sep 17 00:00:00 2001 From: Ang YC Date: Tue, 31 May 2022 20:23:17 +0800 Subject: [PATCH 050/104] style: add StoryKey types --- lib/api/src/lib/stories.ts | 5 +++++ lib/api/src/modules/stories.ts | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index e170f30410f3..668d155d348d 100644 --- a/lib/api/src/lib/stories.ts +++ b/lib/api/src/lib/stories.ts @@ -128,6 +128,11 @@ export interface StoryIndex { stories: Record; } +export interface StoryKey { + id: StoryId; + refId?: string; +} + export type SetStoriesPayload = | { v: 2; diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 904203e55710..7fab948b78d4 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -36,6 +36,7 @@ import type { StoriesRaw, SetStoriesPayload, StoryIndex, + StoryKey, } from '../lib/stories'; import { Args, ModuleFn } from '../index'; @@ -78,8 +79,8 @@ export interface SubAPI { parameterName?: ParameterName ) => Story['parameters'] | any; getCurrentParameter(parameterName?: ParameterName): S; - updateStoryArgs(story: Story | { id: StoryId; refId?: string }, newArgs: Args): void; - resetStoryArgs: (story: Story | { id: StoryId; refId?: string }, argNames?: string[]) => void; + updateStoryArgs(story: Story | StoryKey, newArgs: Args): void; + resetStoryArgs: (story: Story | StoryKey, argNames?: string[]) => void; findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId; findSiblingStoryId( storyId: StoryId, From e98239ad62f0a0aaae60489582527971a58553c3 Mon Sep 17 00:00:00 2001 From: Djamel BENDAOUD Date: Tue, 31 May 2022 16:51:56 +0200 Subject: [PATCH 051/104] Update Ember to use 3.28 and leverage module unification --- app/ember/package.json | 3 ++- yarn.lock | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/ember/package.json b/app/ember/package.json index 62251b7203fa..af70f8530dc3 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -56,9 +56,10 @@ }, "peerDependencies": { "@babel/core": "*", + "@types/ember__component": "4.0.8", "babel-plugin-ember-modules-api-polyfill": "^2.12.0", "babel-plugin-htmlbars-inline-precompile": "2 || 3", - "ember-source": "^3.16.0" + "ember-source": "~3.28.1" }, "engines": { "node": ">=10.13.0" diff --git a/yarn.lock b/yarn.lock index 3c400df52ae2..36ea9a886d6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7863,9 +7863,10 @@ __metadata: ts-dedent: ^2.0.0 peerDependencies: "@babel/core": "*" + "@types/ember__component": 4.0.8 babel-plugin-ember-modules-api-polyfill: ^2.12.0 babel-plugin-htmlbars-inline-precompile: 2 || 3 - ember-source: ^3.16.0 + ember-source: ~3.28.1 bin: build-storybook: ./bin/build.js start-storybook: ./bin/index.js From e69af4a62b772d5acd0e8e4dea9adfbdab9e3482 Mon Sep 17 00:00:00 2001 From: Aaron Reisman Date: Tue, 14 Jun 2022 09:46:08 -0700 Subject: [PATCH 052/104] chore: cleanup types for components --- lib/components/package.json | 7 ++++++- lib/components/src/ScrollArea/ScrollArea.tsx | 1 + lib/components/src/blocks/ArgsTable/ArgsTable.tsx | 1 + lib/components/src/blocks/ArgsTable/SectionRow.tsx | 1 + .../src/blocks/ArgsTable/TabbedArgsTable.tsx | 7 +++---- lib/components/src/blocks/ColorPalette.tsx | 6 +++++- lib/components/src/blocks/DocsPage.tsx | 6 +++++- lib/components/src/blocks/IconGallery.tsx | 7 ++++++- lib/components/src/blocks/Preview.tsx | 1 + lib/components/src/blocks/Source.tsx | 2 +- lib/components/src/blocks/Story.tsx | 9 +++------ lib/components/src/controls/Color.tsx | 2 +- lib/components/src/controls/Object.tsx | 2 +- lib/components/src/controls/options/Options.tsx | 4 ++-- lib/components/src/form/field/field.tsx | 1 + lib/components/src/placeholder/placeholder.tsx | 6 +++++- lib/components/src/spaced/Spaced.tsx | 1 + .../src/syntaxhighlighter/syntaxhighlighter-types.ts | 11 ++++++----- lib/components/src/tabs/tabs.tsx | 5 +++-- lib/components/src/tooltip/ListItem.tsx | 1 + lib/components/src/tooltip/Tooltip.tsx | 1 + lib/components/src/tooltip/WithTooltip.tsx | 2 +- 22 files changed, 56 insertions(+), 28 deletions(-) diff --git a/lib/components/package.json b/lib/components/package.json index e57b79742407..49498b2a00db 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -37,7 +37,8 @@ "*.d.ts" ], "scripts": { - "prepare": "ts-node ../../scripts/prebundle.ts" + "prepare": "ts-node ../../scripts/prebundle.ts", + "check": "tsc --noEmit" }, "dependencies": { "@storybook/client-logger": "6.5.0-rc.1", @@ -51,9 +52,13 @@ }, "devDependencies": { "@popperjs/core": "^2.6.0", + "@testing-library/jest-dom": "^5.16.4", "@types/color-convert": "^2.0.0", + "@types/lodash": "^4.14.182", "@types/overlayscrollbars": "^1.12.0", "@types/react-syntax-highlighter": "11.0.5", + "@types/qs": "^6.9.7", + "@types/util-deprecate": "^1.0.0", "color-convert": "^2.0.1", "css": "^3.0.0", "fast-deep-equal": "^3.1.3", diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx index 6c329b98eeb7..22df6d6b075a 100644 --- a/lib/components/src/ScrollArea/ScrollArea.tsx +++ b/lib/components/src/ScrollArea/ScrollArea.tsx @@ -12,6 +12,7 @@ const Scroller: FunctionComponent = ({ horizontal, vertical, .. ); export interface ScrollAreaProps { + children?: React.ReactNode; horizontal?: boolean; vertical?: boolean; className?: string; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index f353984140e5..dd7bff89c924 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx @@ -261,6 +261,7 @@ const sortFns: Record = { }; export interface ArgsTableOptionProps { + children?: React.ReactNode; updateArgs?: (args: Args) => void; resetArgs?: (argNames?: string[]) => void; compact?: boolean; diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.tsx index d92ab2985396..362449e71975 100644 --- a/lib/components/src/blocks/ArgsTable/SectionRow.tsx +++ b/lib/components/src/blocks/ArgsTable/SectionRow.tsx @@ -6,6 +6,7 @@ import { Icons } from '../../icon/icon'; type Level = 'section' | 'subsection'; export interface SectionRowProps { + children?: React.ReactNode; label: string; level: Level; initialExpanded?: boolean; diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx index e49baf7deb2f..c88878306def 100644 --- a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx @@ -3,6 +3,7 @@ import { ArgsTable, ArgsTableProps, SortType } from './ArgsTable'; import { TabsState } from '../../tabs/tabs'; export interface TabbedArgsTableProps { + children?: React.ReactNode; tabs: Record; sort?: SortType; } @@ -19,11 +20,9 @@ export const TabbedArgsTable: FC = ({ tabs, ...props }) => {entries.map((entry) => { const [label, table] = entry; const id = `prop_table_div_${label}`; - return ( + return ({ active }: { active: boolean }) => (
- {({ active }: { active: boolean }) => - active ? : null - } + {active ? : null}
); })} diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx index f35965c7c89b..51a9f0b67527 100644 --- a/lib/components/src/blocks/ColorPalette.tsx +++ b/lib/components/src/blocks/ColorPalette.tsx @@ -191,11 +191,15 @@ export const ColorItem: FunctionComponent = ({ title, subtitle, ); }; +interface ColorPaletteProps { + children?: React.ReactNode; +} + /** * Styleguide documentation for colors, including names, captions, and color swatches, * all specified as `ColorItem` children of this wrapper component. */ -export const ColorPalette: FunctionComponent = ({ children, ...props }) => ( +export const ColorPalette: FunctionComponent = ({ children, ...props }) => ( diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx index 24bf4503de20..d94a235ca9ed 100644 --- a/lib/components/src/blocks/DocsPage.tsx +++ b/lib/components/src/blocks/DocsPage.tsx @@ -56,7 +56,11 @@ export const DocsWrapper = styled.div<{}>(({ theme }) => ({ [`@media (min-width: ${breakpoint}px)`]: {}, })); -export const DocsPageWrapper: FC = ({ children }) => ( +interface DocsPageWrapperProps { + children?: React.ReactNode; +} + +export const DocsPageWrapper: FC = ({ children }) => ( {children} diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx index 7424eb235f72..045d5e5f3d02 100644 --- a/lib/components/src/blocks/IconGallery.tsx +++ b/lib/components/src/blocks/IconGallery.tsx @@ -45,6 +45,7 @@ const List = styled.div({ interface IconItemProps { name: string; + children?: React.ReactNode; } /** @@ -57,10 +58,14 @@ export const IconItem: FunctionComponent = ({ name, children }) = ); +interface IconGalleryProps { + children?: React.ReactNode; +} + /** * Show a grid of icons, as specified by `IconItem`. */ -export const IconGallery: FunctionComponent = ({ children, ...props }) => ( +export const IconGallery: FunctionComponent = ({ children, ...props }) => ( {children} diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 6750b49e0bda..77104f70189c 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -28,6 +28,7 @@ export interface PreviewProps { withToolbar?: boolean; className?: string; additionalActions?: ActionItem[]; + children?: ReactNode; } type layout = 'padded' | 'fullscreen' | 'centered'; diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx index 4d79f1807b04..6a46c2d3f791 100644 --- a/lib/components/src/blocks/Source.tsx +++ b/lib/components/src/blocks/Source.tsx @@ -4,7 +4,7 @@ import { EmptyBlock } from './EmptyBlock'; import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter'; -const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({ +const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({ // DocBlocks-specific styling and overrides fontSize: `${theme.typography.size.s2 - 1}px`, lineHeight: '19px', diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx index bc466a54dd23..9fab0c9d81df 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/components/src/blocks/Story.tsx @@ -76,12 +76,9 @@ const IFrameStory: FunctionComponent = ({ id, title, height = * A story element, either rendered inline or in an iframe, * with configurable height. */ -const Story: FunctionComponent = ({ - children, - error, - inline, - ...props -}) => { +const Story: FunctionComponent< + StoryProps & { inline?: boolean; error?: StoryError; children?: React.ReactNode } +> = ({ children, error, inline, ...props }) => { const { id, title, height } = props; if (error) { diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx index e6168506e8f0..041a19896b8c 100644 --- a/lib/components/src/controls/Color.tsx +++ b/lib/components/src/controls/Color.tsx @@ -285,7 +285,7 @@ const usePresets = ( return initialPresets.concat(selectedColors).filter(Boolean).slice(-27); }, [presetColors, selectedColors]); - const addPreset = useCallback( + const addPreset: (color: ParsedColor) => void = useCallback( (color) => { if (!color?.valid) return; if (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace]))) return; diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx index b8c18b0c0155..225b1962b09b 100644 --- a/lib/components/src/controls/Object.tsx +++ b/lib/components/src/controls/Object.tsx @@ -250,7 +250,7 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { const [showRaw, setShowRaw] = useState(!hasData); const [parseError, setParseError] = useState(null); - const updateRaw = useCallback( + const updateRaw: (raw: string) => void = useCallback( (raw) => { try { if (raw) onChange(JSON.parse(raw)); diff --git a/lib/components/src/controls/options/Options.tsx b/lib/components/src/controls/options/Options.tsx index 26a86b4b09da..c085a5d1fdd0 100644 --- a/lib/components/src/controls/options/Options.tsx +++ b/lib/components/src/controls/options/Options.tsx @@ -28,14 +28,14 @@ const normalizeOptions = (options: Options, labels?: Record) => { return options; }; -const Controls: Record = { +const Controls = { check: CheckboxControl, 'inline-check': CheckboxControl, radio: RadioControl, 'inline-radio': RadioControl, select: SelectControl, 'multi-select': SelectControl, -}; +} as const; export type OptionsProps = ControlProps & OptionsConfig; export const OptionsControl: FC = (props) => { diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx index 10cf3507a93a..4aa7e0581ae4 100644 --- a/lib/components/src/form/field/field.tsx +++ b/lib/components/src/form/field/field.tsx @@ -23,6 +23,7 @@ const Label = styled.span<{}>(({ theme }) => ({ })); export interface FieldProps { + children?: ReactNode; label?: ReactNode; } diff --git a/lib/components/src/placeholder/placeholder.tsx b/lib/components/src/placeholder/placeholder.tsx index 31e48adebb2b..fb9e0a1e142d 100644 --- a/lib/components/src/placeholder/placeholder.tsx +++ b/lib/components/src/placeholder/placeholder.tsx @@ -14,7 +14,11 @@ const Message = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s2 - 1, })); -export const Placeholder: FunctionComponent = ({ children, ...props }) => { +export interface PlaceholderProps { + children?: React.ReactNode; +} + +export const Placeholder: FunctionComponent = ({ children, ...props }) => { const [title, desc] = Children.toArray(children); return ( diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx index 90460605a6aa..02c869827558 100644 --- a/lib/components/src/spaced/Spaced.tsx +++ b/lib/components/src/spaced/Spaced.tsx @@ -53,6 +53,7 @@ const Container = styled.div( ); export interface SpacedProps { + children?: React.ReactNode; col?: number; row?: number; outer?: number | boolean; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts index dfd948afb183..7548a537a72e 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts @@ -25,15 +25,16 @@ export type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserNam // which will not match one we've localized type-definitions type lineTagPropsFunction = (lineNumber: number) => React.HTMLProps; export interface SyntaxHighlighterBaseProps { - language?: string; - style?: any; + children?: React.ReactNode; + codeTagProps?: React.HTMLProps; customStyle?: any; + language?: string; + lineNumberStyle?: any; lineProps?: lineTagPropsFunction | React.HTMLProps; - codeTagProps?: React.HTMLProps; - useInlineStyles?: boolean; showLineNumbers?: boolean; startingLineNumber?: number; - lineNumberStyle?: any; + style?: any; + useInlineStyles?: boolean; } export type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps; diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx index 57065e9dfe9f..24be8ad2943d 100644 --- a/lib/components/src/tabs/tabs.tsx +++ b/lib/components/src/tabs/tabs.tsx @@ -139,6 +139,7 @@ const childrenToList = (children: any, selected: string) => ); export interface TabsProps { + children?: FuncChildren[] | ReactNode; id?: string; tools?: ReactNode; selected?: string; @@ -202,10 +203,10 @@ Tabs.displayName = 'Tabs'; bordered: false, }; -type FuncChildren = () => void; +type FuncChildren = ({ active }: { active: boolean }) => JSX.Element; export interface TabsStateProps { - children: (ReactNode | FuncChildren)[]; + children: FuncChildren[] | ReactNode; initial: string; absolute: boolean; bordered: boolean; diff --git a/lib/components/src/tooltip/ListItem.tsx b/lib/components/src/tooltip/ListItem.tsx index c732e4663664..eb7e25a2f13f 100644 --- a/lib/components/src/tooltip/ListItem.tsx +++ b/lib/components/src/tooltip/ListItem.tsx @@ -4,6 +4,7 @@ import memoize from 'memoizerific'; import { transparentize } from 'polished'; export interface TitleProps { + children?: ReactNode; active?: boolean; loading?: boolean; disabled?: boolean; diff --git a/lib/components/src/tooltip/Tooltip.tsx b/lib/components/src/tooltip/Tooltip.tsx index 1d258b4d4e47..eeb094eb4137 100644 --- a/lib/components/src/tooltip/Tooltip.tsx +++ b/lib/components/src/tooltip/Tooltip.tsx @@ -116,6 +116,7 @@ const Wrapper = styled.div( ); export interface TooltipProps { + children?: React.ReactNode; arrowRef?: any; tooltipRef?: any; hasChrome?: boolean; diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx index 55268dfeb189..71780fce842a 100644 --- a/lib/components/src/tooltip/WithTooltip.tsx +++ b/lib/components/src/tooltip/WithTooltip.tsx @@ -125,7 +125,7 @@ const WithToolTipState: FunctionComponent< } > = ({ startOpen, onVisibilityChange: onChange, ...rest }) => { const [tooltipShown, setTooltipShown] = useState(startOpen || false); - const onVisibilityChange = useCallback( + const onVisibilityChange: (visibility: boolean) => void = useCallback( (visibility) => { if (onChange && onChange(visibility) === false) return; setTooltipShown(visibility); From 0206e0ec95b6b4daad1369955aedd4fc6cfa8b15 Mon Sep 17 00:00:00 2001 From: Chris Plummer Date: Thu, 16 Jun 2022 17:18:46 -0500 Subject: [PATCH 053/104] 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 054/104] 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 e8ae7104deccfe6d34e6852ac7811aa802dba818 Mon Sep 17 00:00:00 2001 From: Yohan Kim Date: Fri, 17 Jun 2022 18:10:22 +0900 Subject: [PATCH 055/104] Support .cjs extension --- app/angular/src/server/framework-preset-angular-cli.test.ts | 2 +- app/react/src/server/framework-preset-react-docs.test.ts | 2 +- app/react/src/server/framework-preset-react-docs.ts | 2 +- lib/builder-webpack4/src/preview/babel-loader-preview.ts | 2 +- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 2 +- lib/builder-webpack5/src/preview/babel-loader-preview.ts | 2 +- lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +- lib/manager-webpack4/src/presets/babel-loader-manager.ts | 2 +- lib/manager-webpack4/src/presets/manager-preset.ts | 2 +- lib/manager-webpack5/src/presets/babel-loader-manager.ts | 2 +- lib/manager-webpack5/src/presets/manager-preset.ts | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index b5e1b86eee2b..8dfbc75c02cc 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -793,7 +793,7 @@ const newWebpackConfiguration = ( rules: [{ keepBaseRule: true } as any], }, resolve: { - extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], + extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'], modules: ['node_modules'], mainFields: ['browser', 'main'], alias: { diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts index bd86e13da568..7ed80a8cf5f0 100644 --- a/app/react/src/server/framework-preset-react-docs.test.ts +++ b/app/react/src/server/framework-preset-react-docs.test.ts @@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => { presets: ['env', 'foo-preset'], overrides: [ { - test: /\.(mjs|tsx?|jsx?)$/, + test: /\.(cjs|mjs|tsx?|jsx?)$/, plugins: [ [ babelPluginReactDocgenPath, diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts index 1e9a1e74cfb1..675d31487c75 100644 --- a/app/react/src/server/framework-preset-react-docs.ts +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -21,7 +21,7 @@ export async function babel(config: TransformOptions, options: Options) { overrides: [ ...(config?.overrides || []), { - test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/, plugins: [ [ require.resolve('babel-plugin-react-docgen'), diff --git a/lib/builder-webpack4/src/preview/babel-loader-preview.ts b/lib/builder-webpack4/src/preview/babel-loader-preview.ts index 7056e71e78d2..c7eee56fae41 100644 --- a/lib/builder-webpack4/src/preview/babel-loader-preview.ts +++ b/lib/builder-webpack4/src/preview/babel-loader-preview.ts @@ -2,7 +2,7 @@ import { getProjectRoot } from '@storybook/core-common'; import { useBaseTsSupport } from './useBaseTsSupport'; export const createBabelLoader = (options: any, framework: string) => ({ - test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 66c2fbee4def..3c62280ea227 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -233,7 +233,7 @@ export default async (options: Options & Record): Promise { }; export const createBabelLoader = (options: any, framework: string) => ({ - test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 7d2a18a7bf2e..a6b98075aed6 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -234,7 +234,7 @@ export default async (options: Options & Record): Promise { const { plugins, presets } = getStorybookBabelConfig(); return { - test: /\.(mjs|tsx?|jsx?)$/, + test: /\.(cjs|mjs|tsx?|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), diff --git a/lib/manager-webpack4/src/presets/manager-preset.ts b/lib/manager-webpack4/src/presets/manager-preset.ts index 69fd3620d3e6..b7b88d1bc922 100644 --- a/lib/manager-webpack4/src/presets/manager-preset.ts +++ b/lib/manager-webpack4/src/presets/manager-preset.ts @@ -156,7 +156,7 @@ export async function managerWebpack( ], }, resolve: { - extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'], + extensions: ['.cjs', '.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'], modules: ['node_modules'].concat(envs.NODE_PATH || []), mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean), alias: { diff --git a/lib/manager-webpack5/src/presets/babel-loader-manager.ts b/lib/manager-webpack5/src/presets/babel-loader-manager.ts index 04ca8447de9d..72d68b591491 100644 --- a/lib/manager-webpack5/src/presets/babel-loader-manager.ts +++ b/lib/manager-webpack5/src/presets/babel-loader-manager.ts @@ -5,7 +5,7 @@ export const babelLoader = () => { const { plugins, presets } = getStorybookBabelConfig(); return { - test: /\.(mjs|tsx?|jsx?)$/, + test: /\.(cjs|mjs|tsx?|jsx?)$/, use: [ { loader: require.resolve('babel-loader'), diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts index 1a332ea42a65..c43d73acb256 100644 --- a/lib/manager-webpack5/src/presets/manager-preset.ts +++ b/lib/manager-webpack5/src/presets/manager-preset.ts @@ -160,7 +160,7 @@ export async function managerWebpack( ], }, resolve: { - extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'], + extensions: ['.cjs', '.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'], modules: ['node_modules'].concat(envs.NODE_PATH || []), mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean), alias: { From 7f47c01fd8af8f86633c4129f3aa18cc4322a135 Mon Sep 17 00:00:00 2001 From: Matthew Smith Date: Sat, 18 Jun 2022 23:19:29 -0400 Subject: [PATCH 056/104] fix some typescript complaints on the html-ts template stories --- app/html/README.md | 5 +++++ lib/cli/src/frameworks/html/ts/Button.stories.ts | 6 +++--- lib/cli/src/frameworks/html/ts/Button.ts | 8 ++++++-- lib/cli/src/frameworks/html/ts/Header.stories.ts | 6 +++--- lib/cli/src/frameworks/html/ts/Page.stories.ts | 4 ++-- lib/cli/src/frameworks/html/ts/Page.ts | 8 ++++---- 6 files changed, 23 insertions(+), 14 deletions(-) diff --git a/app/html/README.md b/app/html/README.md index 3fa757d3a7f5..e898ba689536 100644 --- a/app/html/README.md +++ b/app/html/README.md @@ -19,6 +19,11 @@ npx sb init -t html For more information visit: [storybook.js.org](https://storybook.js.org) +### Typescript + +`npx sb init` will select `.ts` starter stories if your `package.json` has typescript as a dependency. If starting a new project, +run `npm init` and `npm install typescript --save-dev` before initializing storybook to get the typescript starter stories. + --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. diff --git a/lib/cli/src/frameworks/html/ts/Button.stories.ts b/lib/cli/src/frameworks/html/ts/Button.stories.ts index e71e07a76b9c..cfbe58ebefdb 100644 --- a/lib/cli/src/frameworks/html/ts/Button.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Button.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createButton, ButtonProps } from './Button'; // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export @@ -15,10 +15,10 @@ export default { options: ['small', 'medium', 'large'], }, }, -} as Meta; +} as Meta; // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template: Story = (args) => { +const Template: StoryFn = (args) => { // You can either use a function to create DOM elements or use a plain html string! // return `
${label}
`; return createButton(args); diff --git a/lib/cli/src/frameworks/html/ts/Button.ts b/lib/cli/src/frameworks/html/ts/Button.ts index e55ec3dd3b85..17f8c4c07cc2 100644 --- a/lib/cli/src/frameworks/html/ts/Button.ts +++ b/lib/cli/src/frameworks/html/ts/Button.ts @@ -36,12 +36,16 @@ export const createButton = ({ const btn = document.createElement('button'); btn.type = 'button'; btn.innerText = label; - btn.addEventListener('click', onClick); + if (onClick) { + btn.addEventListener('click', onClick); + } const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' '); - btn.style.backgroundColor = backgroundColor; + if (backgroundColor) { + btn.style.backgroundColor = backgroundColor; + } return btn; }; diff --git a/lib/cli/src/frameworks/html/ts/Header.stories.ts b/lib/cli/src/frameworks/html/ts/Header.stories.ts index a727dffbee22..e9096212fecc 100644 --- a/lib/cli/src/frameworks/html/ts/Header.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Header.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createHeader, HeaderProps } from './Header'; export default { @@ -13,9 +13,9 @@ export default { onLogout: { action: 'onLogout' }, onCreateAccount: { action: 'onCreateAccount' }, }, -} as Meta; +} as Meta; -const Template: Story = (args) => createHeader(args); +const Template: StoryFn = (args) => createHeader(args); export const LoggedIn = Template.bind({}); LoggedIn.args = { diff --git a/lib/cli/src/frameworks/html/ts/Page.stories.ts b/lib/cli/src/frameworks/html/ts/Page.stories.ts index bc7b6cdbe0e4..bea5705b9eff 100644 --- a/lib/cli/src/frameworks/html/ts/Page.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Page.stories.ts @@ -1,5 +1,5 @@ import { within, userEvent } from '@storybook/testing-library'; -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createPage } from './Page'; export default { @@ -10,7 +10,7 @@ export default { }, } as Meta; -const Template: Story = () => createPage(); +const Template: StoryFn = () => createPage(); export const LoggedOut = Template.bind({}); diff --git a/lib/cli/src/frameworks/html/ts/Page.ts b/lib/cli/src/frameworks/html/ts/Page.ts index 5c66149c82b5..4c4028ff1d99 100644 --- a/lib/cli/src/frameworks/html/ts/Page.ts +++ b/lib/cli/src/frameworks/html/ts/Page.ts @@ -7,12 +7,12 @@ type User = { export const createPage = () => { const article = document.createElement('article'); - let user: User = null; - let header = null; + let user: User | undefined; + let header: HTMLElement | null = null; const rerenderHeader = () => { const wrapper = document.getElementsByTagName('article')[0]; - wrapper.replaceChild(createHeaderElement(), wrapper.firstChild); + wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement); }; const onLogin = () => { @@ -21,7 +21,7 @@ export const createPage = () => { }; const onLogout = () => { - user = null; + user = undefined; rerenderHeader(); }; From 19d9cc2ba3b89af8d967f6183167a553ba6a216c Mon Sep 17 00:00:00 2001 From: Matthew Smith Date: Sat, 18 Jun 2022 22:24:29 -0400 Subject: [PATCH 057/104] 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', ]} /> From cd6dd1fe25faf0b6392c401ca3faebc7518bc77f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 28 Jun 2022 23:37:48 +0200 Subject: [PATCH 058/104] fix lockfile, sort package.json --- lib/components/package.json | 6 +++--- yarn.lock | 30 +++++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/lib/components/package.json b/lib/components/package.json index 49498b2a00db..9fbeddc3bc1f 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -37,8 +37,8 @@ "*.d.ts" ], "scripts": { - "prepare": "ts-node ../../scripts/prebundle.ts", - "check": "tsc --noEmit" + "check": "tsc --noEmit", + "prepare": "ts-node ../../scripts/prebundle.ts" }, "dependencies": { "@storybook/client-logger": "6.5.0-rc.1", @@ -56,8 +56,8 @@ "@types/color-convert": "^2.0.0", "@types/lodash": "^4.14.182", "@types/overlayscrollbars": "^1.12.0", - "@types/react-syntax-highlighter": "11.0.5", "@types/qs": "^6.9.7", + "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "color-convert": "^2.0.1", "css": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index be9ddfd72d27..ce12d072a646 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7571,9 +7571,13 @@ __metadata: "@storybook/client-logger": 6.5.0-rc.1 "@storybook/csf": 0.0.2--canary.4566f4d.1 "@storybook/theming": 6.5.0-rc.1 + "@testing-library/jest-dom": ^5.16.4 "@types/color-convert": ^2.0.0 + "@types/lodash": ^4.14.182 "@types/overlayscrollbars": ^1.12.0 + "@types/qs": ^6.9.7 "@types/react-syntax-highlighter": 11.0.5 + "@types/util-deprecate": ^1.0.0 color-convert: ^2.0.1 core-js: ^3.8.2 css: ^3.0.0 @@ -9565,6 +9569,23 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^5.16.4": + version: 5.16.4 + resolution: "@testing-library/jest-dom@npm:5.16.4" + dependencies: + "@babel/runtime": ^7.9.2 + "@types/testing-library__jest-dom": ^5.9.1 + aria-query: ^5.0.0 + chalk: ^3.0.0 + css: ^3.0.0 + css.escape: ^1.5.1 + dom-accessibility-api: ^0.5.6 + lodash: ^4.17.15 + redent: ^3.0.0 + checksum: c34016bbc4865f8f9912d62ac63b409b87e785ff281a50f6eae8c1bc2364963c0831541da8a185bbd8b5964a6e3371fb623c339e8128d84706eb06f93f145801 + languageName: node + linkType: hard + "@testing-library/react@npm:12.1.2": version: 12.1.2 resolution: "@testing-library/react@npm:12.1.2" @@ -10248,6 +10269,13 @@ __metadata: languageName: node linkType: hard +"@types/lodash@npm:^4.14.182": + version: 4.14.182 + resolution: "@types/lodash@npm:4.14.182" + checksum: d6bd4789dfb3be631d5e3277e6a1be5becb21440f3364f5d15b982c2e6b6bb1f8048d46fc5bff5ef0f90bebaf4d07c49b2919ba369d07af72d3beb3fea70c61a + languageName: node + linkType: hard + "@types/mdast@npm:^3.0.0": version: 3.0.10 resolution: "@types/mdast@npm:3.0.10" @@ -10512,7 +10540,7 @@ __metadata: languageName: node linkType: hard -"@types/qs@npm:*, @types/qs@npm:^6, @types/qs@npm:^6.9.5": +"@types/qs@npm:*, @types/qs@npm:^6, @types/qs@npm:^6.9.5, @types/qs@npm:^6.9.7": version: 6.9.7 resolution: "@types/qs@npm:6.9.7" checksum: 157eb05f4c75790b0ebdcf7b0547ff117feabc8cda03c3cac3d3ea82bb19a1912e76a411df3eb0bdd01026a9770f07bc0e7e3fbe39ebb31c1be4564c16be35f1 From 3f6201df42724dcd1f54df76c433fd51f1007f88 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 28 Jun 2022 23:10:40 +0100 Subject: [PATCH 059/104] updates references of sb to storybook --- docs/addons/writing-addons.md | 2 +- docs/builders/overview.md | 4 ++-- docs/builders/vite.md | 2 +- docs/configure/babel.md | 2 +- docs/configure/upgrading.md | 10 ++++++---- docs/contribute/code.md | 6 +++--- docs/contribute/how-to-reproduce.md | 2 +- docs/essentials/introduction.md | 2 +- .../installation-problems/angular.mdx | 13 ++++++------- .../get-started/installation-problems/ember.mdx | 15 +++++++-------- docs/get-started/installation-problems/html.mdx | 2 +- .../installation-problems/preact.mdx | 11 +++++------ .../get-started/installation-problems/react.mdx | 13 ++++++------- .../installation-problems/svelte.mdx | 13 ++++++------- docs/get-started/installation-problems/vue.mdx | 17 ++++++++--------- .../installation-problems/web-components.mdx | 2 +- docs/sharing/storybook-composition.md | 6 +++--- 17 files changed, 59 insertions(+), 63 deletions(-) diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 071ac289e240..6245585bda3d 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the Initialize a local Storybook instance to allow you to test your addon. ```shell -npx sb init +npx storybook init ```
diff --git a/docs/builders/overview.md b/docs/builders/overview.md index f7395953f7e4..45869adcb7e3 100644 --- a/docs/builders/overview.md +++ b/docs/builders/overview.md @@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b ## CLI basics -Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version. +Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version. Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use: ```shell -npx sb init --builder +npx storybook init --builder ``` ## Manual setup diff --git a/docs/builders/vite.md b/docs/builders/vite.md index bd43e267830d..7bd7eadfcbd6 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v ## Setup -If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually. +If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually. Run the following command to install the builder. diff --git a/docs/configure/babel.md b/docs/configure/babel.md index a1af175354ef..827fc2621a81 100644 --- a/docs/configure/babel.md +++ b/docs/configure/babel.md @@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md] If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory: ```sh -npx sb@next babelrc +npx storybook@next babelrc ``` Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example: diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md index d4f93edb3312..08ac9d49be0a 100644 --- a/docs/configure/upgrading.md +++ b/docs/configure/upgrading.md @@ -11,7 +11,7 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb To help ease the pain of keeping Storybook up-to-date, we provide a command-line script: ```sh -npx sb upgrade +npx storybook upgrade ``` This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically. @@ -27,10 +27,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: ``` -npx sb@next automigrate +npx storybook@next automigrate ``` -It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook. +It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook. ## Prereleases @@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis To upgrade to the latest pre-release: ```sh -npx sb@next upgrade --prerelease +npx storybook@next upgrade --prerelease ``` If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
+ Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information. +
diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 8b55caa63fe4..d59237c6fe1d 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -136,7 +136,7 @@ We encourage bug reports to include reproductions. In the same way that it's pos To do so, run the following command in the root of the monorepo: ```shell -npx sb@next link https://github.com/your-username/your-project.git +npx storybook@next link https://github.com/your-username/your-project.git ``` This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing). @@ -144,11 +144,11 @@ This command creates a project `../storybook-repros/your-project`, and automatic If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag: ```shell -npx sb@next link --local /path/to/local-repro-directory +npx storybook@next link --local /path/to/local-repro-directory ```
-πŸ’‘ The sb link command relies on yarn 2 linking under the hood. It requires that the local repro is using yarn 2, which will be the case if you're using the [sb repro command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-yarn 2 project, linking will fail. +πŸ’‘ The storybook link command relies on yarn 2 linking under the hood. It requires that the local repro is using yarn 2, which will be the case if you're using the [storybook repro command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-yarn 2 project, linking will fail.
## Troubleshooting diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md index ebc2ae7f39f3..2936c2be92a7 100644 --- a/docs/contribute/how-to-reproduce.md +++ b/docs/contribute/how-to-reproduce.md @@ -21,7 +21,7 @@ Make sure you have: First, open a terminal and run the following command: ```shell -npx sb@next repro +npx storybook@next repro ```
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md index bd2b6661e24d..78b3da7d1e38 100644 --- a/docs/essentials/introduction.md +++ b/docs/essentials/introduction.md @@ -14,7 +14,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that ### Installation -If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section. +If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section. If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal: diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx index c0c463e548bf..8113277199e3 100644 --- a/docs/get-started/installation-problems/angular.mdx +++ b/docs/get-started/installation-problems/angular.mdx @@ -1,20 +1,19 @@ -- 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: +- Add the `--type angular` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --use-npm + npx storybook init --type angular ``` -- Add the `--type angular` flag to the installation command to set up Storybook manually: +- 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 sb init --type angular + npx storybook init --use-npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: ```shell - npx sb@next automigrate + npx storybook@next automigrate ``` Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5. @@ -26,7 +25,7 @@ - If you need further customization to the Storybook builder configuration, you can use the following table as a reference: | Configuration element | Description | -|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` | | `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. | | `"port"` | Port used by Storybook.
`"port": 6006` | diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx index 7a7698e3d84b..04920a346755 100644 --- a/docs/get-started/installation-problems/ember.mdx +++ b/docs/get-started/installation-problems/ember.mdx @@ -1,14 +1,7 @@ -- 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 - npx sb init --type ember + npx storybook init --type ember ``` - During the install process, if you get the following warning message: @@ -21,4 +14,10 @@ Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it. +- 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 + ``` + - For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions. \ No newline at end of file diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx index d03ae5eb9385..8bd4eae77abe 100644 --- a/docs/get-started/installation-problems/html.mdx +++ b/docs/get-started/installation-problems/html.mdx @@ -1,7 +1,7 @@ - Add the `--type html` flag to the installation command to set up Storybook manually: ```shell - npx sb init --type html + npx storybook init --type html ``` - For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions. \ No newline at end of file diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx index 593f0c13ef33..d3c98c8a2f38 100644 --- a/docs/get-started/installation-problems/preact.mdx +++ b/docs/get-started/installation-problems/preact.mdx @@ -1,14 +1,13 @@ -- 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: +- Add the `--type preact` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --use-npm + npx storybook init --type preact ``` - -- Add the `--type preact` flag to the installation command to set up Storybook manually: + + - 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 sb init --type preact + npx storybook init --use-npm ``` - For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions. \ No newline at end of file diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx index 0acc6ef29f97..6f2853b02b41 100644 --- a/docs/get-started/installation-problems/react.mdx +++ b/docs/get-started/installation-problems/react.mdx @@ -1,20 +1,19 @@ -- 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: - +- Add the `--type react` flag to the installation command to set up Storybook manually: + ```shell - npx storybook init --use-npm + npx storybook init --type react ``` -- Add the `--type react` flag to the installation command to set up Storybook manually: + - 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 sb init --type react + npx storybook init --use-npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: ```shell - npx sb@next automigrate + npx storybook@next automigrate ``` Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5. diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx index 68f248b11ec8..0fa6d9782b37 100644 --- a/docs/get-started/installation-problems/svelte.mdx +++ b/docs/get-started/installation-problems/svelte.mdx @@ -1,14 +1,13 @@ -- 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: - +- Add the `--type svelte` flag to the installation command to set up Storybook manually: + ```shell - npx storybook init --use-npm + npx storybook init --type svelte ``` - -- Add the `--type svelte` flag to the installation command to set up Storybook manually: + + - 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 sb init --type svelte + npx storybook init --use-npm ``` - For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions. diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx index d0c276ff4970..3caa0a56199e 100644 --- a/docs/get-started/installation-problems/vue.mdx +++ b/docs/get-started/installation-problems/vue.mdx @@ -1,18 +1,17 @@ -- 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 # For Vue 2 projects - npx sb init --type vue + npx storybook init --type vue # For Vue 3 projects - npx sb init --type vue3 + npx storybook init --type vue3 + ``` + + - 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 ``` - For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions. diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx index 21098fcf6aad..09841ea19343 100644 --- a/docs/get-started/installation-problems/web-components.mdx +++ b/docs/get-started/installation-problems/web-components.mdx @@ -1,7 +1,7 @@ - Add the `--type web_components` flag to the installation command to set up Storybook manually: ```shell - npx sb init --type web_components + npx storybook init --type web_components ``` - For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions. \ No newline at end of file diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md index ba12b5276a9c..2ccb5570bc8b 100644 --- a/docs/sharing/storybook-composition.md +++ b/docs/sharing/storybook-composition.md @@ -74,12 +74,12 @@ You can also compose Storybooks based on the current development environment (e. So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root: ```shell -npx sb extract +npx storybook extract ```
-`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation. +`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
@@ -100,7 +100,7 @@ Linking to a Storybook deployed using this approach will yield all the stories a If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following: ```shell -npx sb extract my-built-storybook-directory my-other-directory/stories.json +npx storybook extract my-built-storybook-directory my-other-directory/stories.json ``` When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information. From 2625f6a4a40fcdcd66f1f51c4a3cef929d570202 Mon Sep 17 00:00:00 2001 From: Yohan Kim Date: Wed, 29 Jun 2022 17:46:27 +0900 Subject: [PATCH 060/104] Fix order of extensions --- app/angular/src/server/framework-preset-angular-cli.test.ts | 2 +- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 2 +- lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +- lib/manager-webpack4/src/presets/manager-preset.ts | 2 +- lib/manager-webpack5/src/presets/manager-preset.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index 8dfbc75c02cc..b5e1b86eee2b 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -793,7 +793,7 @@ const newWebpackConfiguration = ( rules: [{ keepBaseRule: true } as any], }, resolve: { - extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'], + extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], modules: ['node_modules'], mainFields: ['browser', 'main'], alias: { diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 3c62280ea227..66c2fbee4def 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -233,7 +233,7 @@ export default async (options: Options & Record): Promise): Promise Date: Wed, 29 Jun 2022 17:54:05 +0900 Subject: [PATCH 061/104] Updatet snaphots --- .../cra-ts-essentials_manager-dev-posix | 2 +- .../cra-ts-essentials_manager-prod-posix | 259 +-------- .../cra-ts-essentials_preview-dev-posix | 4 +- .../cra-ts-essentials_preview-prod-posix | 501 +----------------- .../html-kitchen-sink_manager-dev-posix | 2 +- .../html-kitchen-sink_manager-prod-posix | 2 +- .../html-kitchen-sink_preview-dev-posix | 2 +- .../html-kitchen-sink_preview-prod-posix | 2 +- .../__snapshots__/vue-3-cli_manager-dev-posix | 2 +- .../vue-3-cli_manager-prod-posix | 2 +- .../__snapshots__/vue-3-cli_preview-dev-posix | 2 +- .../vue-3-cli_preview-prod-posix | 2 +- ...-components-kitchen-sink_manager-dev-posix | 2 +- ...components-kitchen-sink_manager-prod-posix | 2 +- ...-components-kitchen-sink_preview-dev-posix | 2 +- ...components-kitchen-sink_preview-prod-posix | 2 +- 16 files changed, 18 insertions(+), 772 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 1937cd52a90a..13c335a8dc80 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -40,7 +40,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 4bcbcf07d680..7e21d5625a97 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -1,262 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`cra-ts-essentials manager dev 1`] = ` -Object { - "entry": Array [ - "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", - "ROOT/lib/core-client/dist/esm/globals/polyfills.js", - "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/manager.js", - "ROOT/addons/controls/manager.js", - "ROOT/addons/actions/manager.js", - "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/toolbars/manager.js", - "ROOT/addons/measure/manager.js", - "ROOT/addons/outline/manager.js", - ], - "keys": Array [ - "name", - "mode", - "bail", - "devtool", - "entry", - "output", - "watchOptions", - "plugins", - "module", - "resolve", - "resolveLoader", - "recordsPath", - "performance", - "optimization", - ], - "module": Object { - "rules": Array [ - Object { - "exclude": Array [ - "NODE_MODULES/", - "/dist/", - ], - "include": Array [ - "ROOT", - ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "configFile": false, - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js", - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "shippedProposals": true, - }, - ], - "NODE_MODULES/@babel/preset-typescript/lib/index.js", - "NODE_MODULES/@babel/preset-react/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - ], - }, - Object { - "include": [Function], - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "modules": false, - "shippedProposals": true, - "targets": "defaults", - }, - ], - "NODE_MODULES/@babel/preset-react/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - ], - }, - Object { - "test": "/\\\\.css$/", - "use": Array [ - "NODE_MODULES/style-loader/dist/cjs.js", - Object { - "loader": "NODE_MODULES/css-loader/dist/cjs.js", - "options": Object { - "importLoaders": 1, - }, - }, - ], - }, - Object { - "loader": "NODE_MODULES/file-loader/dist/cjs.js", - "options": Object { - "name": "static/media/[path][name].[ext]", - }, - "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", - }, - Object { - "loader": "NODE_MODULES/url-loader/dist/cjs.js", - "options": Object { - "limit": 10000, - "name": "static/media/[path][name].[ext]", - }, - "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", - }, - Object { - "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - "sourceType": "unambiguous", - }, - }, - ], - }, - ], - }, - "plugins": Array [ - "VirtualModulesPlugin", - "HtmlWebpackPlugin", - "CaseSensitivePathsPlugin", - "DefinePlugin", - ], -} -`; - exports[`cra-ts-essentials manager prod 1`] = ` Object { "entry": Array [ @@ -297,7 +40,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 45f3199dcaa1..74d84b599459 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -360,7 +360,7 @@ Object { }, ], ], - "test": "/\\\\.(mjs|jsx?)$/", + "test": "/\\\\.(cjs|mjs|jsx?)$/", }, ], "plugins": Array [ @@ -410,7 +410,7 @@ Object { }, ], ], - "test": "/\\\\.(mjs|jsx?)$/", + "test": "/\\\\.(cjs|mjs|jsx?)$/", }, ], "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 19d3bb4c27a5..6e7e1b6c8ea4 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -1,502 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`cra-ts-essentials preview dev 1`] = ` -Object { - "entry": Array [ - "ROOT/lib/core-client/dist/esm/globals/polyfills.js", - "ROOT/lib/core-client/dist/esm/globals/globals.js", - "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", - "ROOT/storybook-init-framework-entry.js", - "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/addons/docs/preview.js-generated-config-entry.js", - "ROOT/addons/actions/preview.js-generated-config-entry.js", - "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", - "ROOT/addons/measure/preview.js-generated-config-entry.js", - "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js", - "ROOT/generated-stories-entry.js", - ], - "keys": Array [ - "name", - "mode", - "bail", - "devtool", - "entry", - "output", - "watchOptions", - "plugins", - "module", - "resolve", - "resolveLoader", - "optimization", - "performance", - ], - "module": Object { - "rules": Array [ - Object { - "test": "/\\\\.md$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/raw-loader/dist/cjs.js", - }, - ], - }, - Object { - "parser": Object { - "requireEnsure": false, - }, - }, - Object { - "oneOf": Array [ - Object { - "loader": "NODE_MODULES/url-loader/dist/cjs.js", - "options": Object { - "limit": 10000, - "mimetype": "image/avif", - "name": "static/media/[name].[hash:8].[ext]", - }, - "test": Array [ - "/\\\\.avif$/", - ], - }, - Object { - "loader": "NODE_MODULES/url-loader/dist/cjs.js", - "options": Object { - "limit": 10000, - "name": "static/media/[name].[hash:8].[ext]", - }, - "test": Array [ - "/\\\\.bmp$/", - "/\\\\.gif$/", - "/\\\\.jpe?g$/", - "/\\\\.png$/", - ], - }, - Object { - "include": Array [ - "ROOT/src", - "ROOT/examples/cra-ts-essentials/.storybook", - ], - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheCompression": false, - "cacheDirectory": true, - "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", - "compact": true, - "configFile": false, - "customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js", - "extends": undefined, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-named-asset-import/index.js", - Object { - "loaderMap": Object { - "svg": Object { - "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]", - }, - }, - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - Array [ - "NODE_MODULES/babel-preset-react-app/index.js", - Object { - "runtime": "automatic", - }, - ], - ], - }, - "test": "/\\\\.(js|mjs|jsx|ts|tsx)$/", - }, - Object { - "exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/", - "include": Array [ - "ROOT/examples/cra-ts-essentials/.storybook", - ], - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheCompression": false, - "cacheDirectory": true, - "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", - "compact": false, - "configFile": false, - "inputSourceMap": true, - "presets": Array [ - Array [ - "NODE_MODULES/babel-preset-react-app/dependencies.js", - Object { - "helpers": true, - }, - ], - ], - "sourceMaps": true, - }, - "test": "/\\\\.(js|mjs)$/", - }, - Object { - "exclude": Array [ - "/\\\\.module\\\\.css$/", - "/@storybook/", - ], - "include": undefined, - "sideEffects": true, - "test": "/\\\\.css$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js", - "options": Object { - "publicPath": "../../", - }, - }, - Object { - "loader": "NODE_MODULES/css-loader/dist/cjs.js", - "options": Object { - "importLoaders": 1, - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/postcss-loader/src/index.js", - "options": Object { - "ident": "postcss", - "plugins": [Function], - "sourceMap": true, - }, - }, - ], - }, - Object { - "test": "/\\\\.module\\\\.css$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js", - "options": Object { - "publicPath": "../../", - }, - }, - Object { - "loader": "NODE_MODULES/css-loader/dist/cjs.js", - "options": Object { - "importLoaders": 1, - "modules": Object { - "getLocalIdent": [Function], - }, - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/postcss-loader/src/index.js", - "options": Object { - "ident": "postcss", - "plugins": [Function], - "sourceMap": true, - }, - }, - ], - }, - Object { - "exclude": "/\\\\.module\\\\.(scss|sass)$/", - "sideEffects": true, - "test": "/\\\\.(scss|sass)$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js", - "options": Object { - "publicPath": "../../", - }, - }, - Object { - "loader": "NODE_MODULES/css-loader/dist/cjs.js", - "options": Object { - "importLoaders": 3, - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/postcss-loader/src/index.js", - "options": Object { - "ident": "postcss", - "plugins": [Function], - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/resolve-url-loader/index.js", - "options": Object { - "root": "ROOT/src", - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/sass-loader/dist/cjs.js", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - Object { - "test": "/\\\\.module\\\\.(scss|sass)$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js", - "options": Object { - "publicPath": "../../", - }, - }, - Object { - "loader": "NODE_MODULES/css-loader/dist/cjs.js", - "options": Object { - "importLoaders": 3, - "modules": Object { - "getLocalIdent": [Function], - }, - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/postcss-loader/src/index.js", - "options": Object { - "ident": "postcss", - "plugins": [Function], - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/resolve-url-loader/index.js", - "options": Object { - "root": "ROOT/src", - "sourceMap": true, - }, - }, - Object { - "loader": "NODE_MODULES/sass-loader/dist/cjs.js", - "options": Object { - "sourceMap": true, - }, - }, - ], - }, - Object { - "exclude": Array [ - "/\\\\.(js|mjs|jsx|ts|tsx)$/", - "/\\\\.html$/", - "/\\\\.json$/", - "/\\\\.(ejs|md|mdx)$/", - ], - "loader": "NODE_MODULES/file-loader/dist/cjs.js", - "options": Object { - "name": "static/media/[name].[hash:8].[ext]", - }, - }, - ], - }, - Object { - "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - "sourceType": "unambiguous", - }, - }, - ], - }, - Object { - "include": "NODE_MODULES\\\\/acorn-jsx/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "modules": "commonjs", - }, - ], - ], - }, - }, - ], - }, - Object { - "test": "/(stories|story)\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - }, - ], - }, - Object { - "exclude": "/(stories|story)\\\\.mdx$/", - "test": "/\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - "options": Object { - "remarkPlugins": Array [ - [Function], - [Function], - ], - "skipCsf": true, - }, - }, - ], - }, - Object { - "enforce": "pre", - "loader": "ROOT/lib/source-loader/dist/cjs/index.js", - "options": Object { - "injectStoryParameters": true, - "inspectLocalDependencies": true, - }, - "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", - }, - ], - }, - "plugins": Array [ - "FilterWarningsPlugin", - "VirtualModulesPlugin", - "HtmlWebpackPlugin", - "DefinePlugin", - "CaseSensitivePathsPlugin", - "ProgressPlugin", - "InlineChunkHtmlPlugin", - "InterpolateHtmlPlugin", - "ModuleNotFoundPlugin", - "MiniCssExtractPlugin", - "ManifestPlugin", - "IgnorePlugin", - "ForkTsCheckerWebpackPlugin", - "ESLintWebpackPlugin", - "IgnorePlugin", - "DocgenPlugin", - ], -} -`; - exports[`cra-ts-essentials preview prod 1`] = ` Object { "entry": Array [ @@ -875,7 +378,7 @@ Object { }, ], ], - "test": "/\\\\.(mjs|jsx?)$/", + "test": "/\\\\.(cjs|mjs|jsx?)$/", }, ], "plugins": Array [ @@ -925,7 +428,7 @@ Object { }, ], ], - "test": "/\\\\.(mjs|jsx?)$/", + "test": "/\\\\.(cjs|mjs|jsx?)$/", }, ], "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 9fcbeaa6c249..e73793bb5a10 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -41,7 +41,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 348d29de932a..88df4ac7b910 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -41,7 +41,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index fef4e5b1e09b..f05e53f9bf47 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -39,7 +39,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index d1c67aacb001..840cbdd0dc60 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -38,7 +38,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index ec8992f03346..01c529220ab8 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -42,7 +42,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index a686af760a22..a86a667481da 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -42,7 +42,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index ab76b4d0c1c7..4cf2f80e4570 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -41,7 +41,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index c769b18749c7..fe831e185d10 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -40,7 +40,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 0676e83166fe..f3dec4361294 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -42,7 +42,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 982723cbc1ac..be24c3d5e9fc 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -42,7 +42,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 12efbe2571e2..5ef8867718bb 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -40,7 +40,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 0a9453609940..51adf69ea33c 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -39,7 +39,7 @@ Object { "include": Array [ "ROOT", ], - "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", From d0de62ef0e30160d4d63f4bc6b415b0302d04d34 Mon Sep 17 00:00:00 2001 From: Logan Allred Date: Wed, 29 Jun 2022 22:38:53 -0600 Subject: [PATCH 062/104] fix typo in gizmo example `presetsColors` should be `presetColors` --- docs/snippets/common/gizmo-story-controls-customization.js.mdx | 2 +- docs/snippets/common/gizmo-story-controls-customization.mdx.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx index 3bc936240afa..bf521438d404 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx @@ -52,7 +52,7 @@ export default { meshColors: { control: { type: 'color', - presetsColors: ['#ff0000', '#00ff00', '#0000ff'], + presetColors: ['#ff0000', '#00ff00', '#0000ff'], }, }, revisionDate: { diff --git a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx index 79959e089d55..55543dd93639 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx @@ -60,7 +60,7 @@ import { Gizmo } from './Gizmo'; meshColors: { control: { type: 'color', - presetsColors: ['#ff0000', '#00ff00', '#0000ff'], + presetColors: ['#ff0000', '#00ff00', '#0000ff'], }, }, revisionDate: { From 35bfff5d78ac80c9c2d1b9059f8ef55c43464b6c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 30 Jun 2022 10:44:30 +0200 Subject: [PATCH 063/104] fix linting --- .../stories/title/AutoTitle.stories.js | 1 - .../stories/title/CustomTitle.stories.js | 4 +- .../react-ts/src/title/AutoTitle.stories.js | 2 +- .../react-ts/src/title/CustomTitle.stories.js | 4 +- lib/channel-postmessage/src/index.ts | 3 +- lib/codemod/src/transforms/csf-2-to-3.ts | 4 +- .../src/utils/StoryIndexGenerator.ts | 2 +- lib/store/src/autoTitle.test.ts | 37 ++++-- lib/telemetry/src/get-monorepo-type.ts | 2 +- lib/ui/src/components/layout/container.tsx | 108 +++++++++--------- lib/ui/src/components/layout/draggers.tsx | 32 +++--- 11 files changed, 112 insertions(+), 87 deletions(-) diff --git a/examples/official-storybook/stories/title/AutoTitle.stories.js b/examples/official-storybook/stories/title/AutoTitle.stories.js index 3a2b02502232..125c1157c1c1 100644 --- a/examples/official-storybook/stories/title/AutoTitle.stories.js +++ b/examples/official-storybook/stories/title/AutoTitle.stories.js @@ -10,4 +10,3 @@ export default { }; export const Basic = () =>
- `, + `, }); -export const Empty = ListTemplate.bind({}); -EmptyListTemplate.args = { - items: [], +export const Empty = { + ...ListTemplate, + args: { + items: [], + }, }; -export const OneItem = ListTemplate.bind({}); -OneItem.args = { - items: [ - { - ...Unchecked.args, - }, - ], +export const OneItem = { + ...ListTemplate, + args: { + items: [ + { + ...Unchecked.args, + }, + ], + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx index 76587aabeca3..20d9e6a66fde 100644 --- a/docs/snippets/vue/list-story-template.3.js.mdx +++ b/docs/snippets/vue/list-story-template.3.js.mdx @@ -9,38 +9,44 @@ import { Unchecked } from './ListItem.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', component: List, }; -const ListTemplate = (args) => ({ - components: { List, ListItem }, - setup() { - return { args }; - }, - template: ` - -
- -
- - `, -}); - -export const Empty = ListTemplate.bind({}); -Empty.args = { - items: [], +//πŸ‘‡ The ListTemplate construct will be spread to the existing stories. +export const ListTemplate = { + render: (args) => ({ + components: { List, ListItem }, + setup() { + return { ...args }; + }, + template: ` + +
+ +
+ + `, + }), }; -export const OneItem = ListTemplate.bind({}); -OneItem.args = { - items: [ - { - ...Unchecked.args, - }, - ], +export const Empty = { + ...ListTemplate, + args: { + items: [], + }, +}; +export const OneItem = { + ...ListTemplate, + args: { + items: [ + { + ...Unchecked.args, + }, + ], + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx index cd4e5cecec46..9efb6d802874 100644 --- a/docs/snippets/vue/list-story-unchecked.2.js.mdx +++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx @@ -9,23 +9,25 @@ import { Unchecked } from './ListItem.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', component: List, }; - -export const OneItem = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { List, ListItem }, - template: ` - - - - `, -}); -OneItem.args = { - ...Unchecked.args, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const OneItem = { + render: (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { List, ListItem }, + template: '', + }), + args: { + ...Unchecked.args, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx index 5b7da6194f00..f29e1f9c91ce 100644 --- a/docs/snippets/vue/list-story-unchecked.3.js.mdx +++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx @@ -9,26 +9,29 @@ import { Unchecked } from './ListItem.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', component: List, }; -export const OneItem = (args) => ({ - components: { List, ListItem }, - setup() { - //πŸ‘‡ The args will now be passed down to the template - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const OneItem = { + args: { + ...Unchecked.args, }, - template: ` - - - - `, -}); -OneItem.args = { - ...Unchecked.args, + render: (args) => ({ + components: { List, ListItem }, + setup() { + //πŸ‘‡ The args will now be passed down to the template + return { args }; + }, + template: '', + }), }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx index 46b574b44665..67ef97d43b0c 100644 --- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx +++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx @@ -6,23 +6,32 @@ import ListItem from './ListItem.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', component: List, subcomponents: { ListItem }, //πŸ‘ˆ Adds the ListItem component as a subcomponent }; -export const Empty = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { List }, - template: '', -}); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const Empty = { + render: (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { List }, + template: '', + }), +}; -export const OneItem = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { List, ListItem }, - template: '', -}); +export const OneItem = { + render: (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { List, ListItem }, + template: '', + }), +}; ``` \ No newline at end of file diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx index 0ffa0b326f6e..8230ff8d08fc 100644 --- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx +++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx @@ -6,29 +6,37 @@ import ListItem from './ListItem.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', component: List, subcomponents: { ListItem }, //πŸ‘ˆ Adds the ListItem component as a subcomponent }; -export const Empty = (args) => ({ - components: { List }, - setup() { - //πŸ‘‡ The args will now be passed down to the template - return { args }; - } - template: '', -}); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const Empty = { + render: (args) => ({ + components: { List }, + setup() { + return { args }; + }, + template: '', + }), +}; -export const OneItem = (args) => ({ - components: { List, ListItem }, - setup() { - //πŸ‘‡ The args will now be passed down to the template - return { args }; - } - template: '', -}); +export const OneItem = { + render: (args) => ({ + components: { List, ListItem }, + setup() { + //πŸ‘‡ The args will now be passed down to the template + return { args }; + }, + template: '', + }), +}; ``` \ No newline at end of file diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx index b99ff7360963..68009a29747e 100644 --- a/docs/snippets/vue/loader-story.3.js.mdx +++ b/docs/snippets/vue/loader-story.3.js.mdx @@ -7,26 +7,25 @@ import fetch from 'node-fetch'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Examples/Loader', component: TodoItem, }; -export const Primary = (args, { loaded: { todo } }) => { - return { +export const Primary = { + render: (args, { loaded: { todo } }) => ({ components: { TodoItem }, setup() { return { args, todo: todo }; }, - template: ``, - }; -}; - -Primary.loaders = [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), + template: '', }), -]; + loaders: [ + async () => ({ + todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), + }), + ], +}; ``` \ No newline at end of file diff --git a/docs/snippets/vue/loader-story.mdx.mdx b/docs/snippets/vue/loader-story.mdx.mdx index 493be08e80c6..976c57f594ec 100644 --- a/docs/snippets/vue/loader-story.mdx.mdx +++ b/docs/snippets/vue/loader-story.mdx.mdx @@ -9,21 +9,25 @@ import fetch from 'node-fetch'; + ({ todo: await ( - await fetch("https://jsonplaceholder.typicode.com/todos/1") + await fetch('https://jsonplaceholder.typicode.com/todos/1') ).json(), }), ]}> - {(args, { loaded: { todo } }) => ({ + render={(args, { loaded: { todo } }) => ({ components: { TodoItem }, setup() { return { args, todo: todo }; }, - template: ``, - })} - + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx index e82613674972..125d8e607521 100644 --- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx +++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx @@ -9,39 +9,50 @@ import LoginForm from './LoginForm.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Form', component: LoginForm, }; -const Template = (args, { argTypes }) => ({ - components: { LoginForm }, - props: Object.keys(argTypes), - template: ``, -}); - -export const EmptyForm = Template.bind({}); - -export const FilledForm = Template.bind({}); -FilledForm.play = async ({ canvasElement }) => { - // Starts querying the component from its root element - const canvas = within(canvasElement); - - // πŸ‘‡ Simulate interactions with the component - await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); - - await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const EmptyForm = { + render: (args, { argTypes }) => ({ + components: { LoginForm }, + props: Object.keys(argTypes), + template: ``, + }), +}; - // πŸ‘‡ Assert DOM structure - await expect( - canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) - ).toBeInTheDocument(); +export const FilledForm = { + render: (args, { argTypes }) => ({ + components: { LoginForm }, + props: Object.keys(argTypes), + template: ``, + }), + play: async ({ canvasElement }) => { + // Starts querying the component from its root element + const canvas = within(canvasElement); + + // πŸ‘‡ Simulate interactions with the component + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); + + await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); + + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); + + // πŸ‘‡ Assert DOM structure + await expect( + canvas.getByText( + 'Everything is perfect. Your account is ready and we should probably get you started!' + ) + ).toBeInTheDocument(); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx index 19c529bd529a..60c4bb89d983 100644 --- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx +++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx @@ -9,41 +9,54 @@ import LoginForm from './LoginForm.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Form', component: LoginForm, }; -const Template = (args) => ({ - components: { LoginForm }, - setup() { - return args; - }, - template: '', -}); - -export const EmptyForm = Template.bind({}); - -export const FilledForm = Template.bind({}); -FilledForm.play = async ({ canvasElement }) => { - // Starts querying the component from its root element - const canvas = within(canvasElement); - - // πŸ‘‡ Simulate interactions with the component - await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); - - await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const EmptyForm = { + render: (args) => ({ + components: { LoginForm }, + setup() { + return args; + }, + template: '', + }), +}; - // πŸ‘‡ Assert DOM structure - await expect( - canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) - ).toBeInTheDocument(); +export const FilledForm = { + render: (args) => ({ + components: { LoginForm }, + setup() { + return args; + }, + template: '', + }), + play: async ({ canvasElement }) => { + // Starts querying the component from its root element + const canvas = within(canvasElement); + + // πŸ‘‡ Simulate interactions with the component + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); + + await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); + + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); + + // πŸ‘‡ Assert DOM structure + await expect( + canvas.getByText( + 'Everything is perfect. Your account is ready and we should probably get you started!' + ) + ).toBeInTheDocument(); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx index c1e887057671..a6e449bc4f20 100644 --- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx +++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx @@ -11,20 +11,23 @@ import LoginForm from './LoginForm.vue'; -export const Template = (args, { argTypes }) => ({ - components: { LoginForm }, - props: Object.keys(argTypes), - template: ``, -}); + - - {Template.bind({})} - - + ({ + props: Object.keys(argTypes), + components: { LoginForm }, + template: ``, + })} /> { + play={ async ({ canvasElement }) => { // Starts querying the component from its root element const canvas = within(canvasElement); @@ -33,7 +36,7 @@ export const Template = (args, { argTypes }) => ({ await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await userEvent.click(canvas.getByRole('button')); // πŸ‘‡ Assert DOM structure @@ -42,8 +45,11 @@ export const Template = (args, { argTypes }) => ({ 'Everything is perfect. Your account is ready and we should probably get you started!' ) ).toBeInTheDocument(); - }}> - {Template.bind({})} - + }} + render={(args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { LoginForm }, + template: ``, + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx index ea842adea3c6..cc79337b989d 100644 --- a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx +++ b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx @@ -11,19 +11,22 @@ import LoginForm from './LoginForm.vue'; -export const Template = (args) => ({ - components: { LoginForm }, - setup() { - return { args }; - }, - template: '', -}); + - - {Template.bind({})} - - + ({ + components: { LoginForm }, + setup() { + return { args }; + }, + template: '', + })} /> { @@ -35,7 +38,7 @@ export const Template = (args) => ({ await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await userEvent.click(canvas.getByRole('button')); // πŸ‘‡ Assert DOM structure @@ -44,8 +47,13 @@ export const Template = (args) => ({ 'Everything is perfect. Your account is ready and we should probably get you started!' ) ).toBeInTheDocument(); - }}> - {Template.bind({})} - + }} + render={(args) => ({ + components: { LoginForm }, + setup() { + return { args }; + }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx index 656daf2ec4e5..f40a38b1b6d4 100644 --- a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx +++ b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx @@ -7,43 +7,54 @@ import { expect } from '@storybook/jest'; import LoginForm from './LoginForm.vue'; -import { Meta, StoryFn } from '@storybook/vue'; +import type { Meta, Story } from '@storybook/vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Form', component: LoginForm, } as Meta; -const Template: StoryFn = (args, { argTypes }) => ({ - components: { LoginForm }, - props: Object.keys(argTypes), - template: ``, -}); - -export const EmptyForm = Template.bind({}); - -export const FilledForm = Template.bind({}); -FilledForm.play = async ({ canvasElement }) => { - // Starts querying the component from its root element - const canvas = within(canvasElement); - - // πŸ‘‡ Simulate interactions with the component - await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); - - await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const EmptyForm: Story = { + render: (args, { argTypes }) => ({ + components: { LoginForm }, + props: Object.keys(argTypes), + template: ``, + }), +}; - // πŸ‘‡ Assert DOM structure - await expect( - canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) - ).toBeInTheDocument(); +export const FilledForm: Story = { + render: (args, { argTypes }) => ({ + components: { LoginForm }, + props: Object.keys(argTypes), + template: ``, + }), + play: async ({ canvasElement }) => { + // Starts querying the component from its root element + const canvas = within(canvasElement); + + // πŸ‘‡ Simulate interactions with the component + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); + + await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); + + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); + + // πŸ‘‡ Assert DOM structure + await expect( + canvas.getByText( + 'Everything is perfect. Your account is ready and we should probably get you started!' + ) + ).toBeInTheDocument(); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx index 1b676ae48dbc..39ab085cff4f 100644 --- a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx +++ b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx @@ -1,4 +1,4 @@ -```js +```ts // LoginForm.stories.ts import { userEvent, within } from '@storybook/testing-library'; @@ -7,45 +7,58 @@ import { expect } from '@storybook/jest'; import LoginForm from './LoginForm.vue'; -import { Meta, StoryFn } from '@storybook/vue3'; +import type { Meta, Story } from '@storybook/vue3'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Form', component: LoginForm, } as Meta; -const Template: StoryFn = (args) => ({ - components: { LoginForm }, - setup() { - return args; - }, - template: '', -}); - -export const EmptyForm = Template.bind({}); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const EmptyForm: Story = { + render: (args) => ({ + components: { LoginForm }, + setup() { + return args; + }, + template: '', + }), +}; -export const FilledForm = Template.bind({}); -FilledForm.play = async ({ canvasElement }) => { - // Starts querying the component from its root element - const canvas = within(canvasElement); +export const FilledForm: Story = { + render: (args) => ({ + components: { LoginForm }, + setup() { + return args; + }, + template: '', + }), + play: async ({ canvasElement }) => { + // Starts querying the component from its root element + const canvas = within(canvasElement); - // πŸ‘‡ Simulate interactions with the component - await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); + // πŸ‘‡ Simulate interactions with the component + await userEvent.type(canvas.getByTestId('email'), 'email@provider.com'); - await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); + await userEvent.type(canvas.getByTestId('password'), 'a-random-password'); - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(canvas.getByRole('button')); - // πŸ‘‡ Assert DOM structure - await expect( - canvas.getByText( - 'Everything is perfect. Your account is ready and we should probably get you started!' - ) - ).toBeInTheDocument(); + // πŸ‘‡ Assert DOM structure + await expect( + canvas.getByText( + 'Everything is perfect. Your account is ready and we should probably get you started!' + ) + ).toBeInTheDocument(); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx index 32349dcf0594..3770bc3373f1 100644 --- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx +++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx @@ -7,11 +7,11 @@ import Badge from './Badge.vue'; -export const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { Badge }, - template: '', -}); + ({ args={{ status: 'warning', label: 'Warning', - }}> - {Template.bind({})} - + }} + render={(args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Badge }, + template: '', + })} /> - {Template.bind({})} - + }} + render={(args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Badge }, + template: '', + })} /> - {Template.bind({})} - + }} + render={(args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Badge }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx index 9acb775a0b80..49945de46736 100644 --- a/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx +++ b/docs/snippets/vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx @@ -7,13 +7,11 @@ import Badge from './Badge.vue'; -export const Template = (args) => ({ - components: { Badge }, - setup() { - return { args }; - }, - template: '', -}); + ({ args={{ status: 'warning', label: 'Warning', - }}> - {Template.bind({})} - + }} + render={(args) => ({ + components: { Badge }, + setup() { + return { args }; + }, + template: '', + })} /> - {Template.bind({})} - + }} + render={(args) => ({ + components: { Badge }, + setup() { + return { args }; + }, + template: '', + })} /> - {Template.bind({})} - + }} + render={(args) => ({ + components: { Badge }, + setup() { + return { args }; + }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx index 511ad5034d8b..e08ee1f538e0 100644 --- a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx +++ b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx @@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'QueryMethods', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); - -export const ExampleWithRole = Template.bind({}); -ExampleWithRole.play = async () => { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(screen.getByRole('button', { name: / button label/i })); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleWithRole = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button', { name: / button label/i })); + }, }; -export const ExampleWithText = Template.bind({}); -ExampleWithText.play = async () => { - // The play function interacts with the component and looks for the text - await screen.findByText('example string'); +export const ExampleWithText = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + // The play function interacts with the component and looks for the text + await screen.findByText('example string'); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx index e7cfac89bcfc..eb46c3de5a75 100644 --- a/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx @@ -9,26 +9,29 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); + - { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(screen.getByRole('button', { name: / button label/i })); - }}> - {Template.bind({})} - - - { - // The play function interacts with the component and looks for the text + play={ async () => { + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button')); + }} + render={() => ({ + components: { MyComponent }, + template: '', + })} /> + { await screen.findByText('example string'); - }}> - {Template.bind({})} - + }} + render={() => ({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-composition.js.mdx b/docs/snippets/vue/my-component-play-function-composition.js.mdx index 3f98c21f192c..f8476bdb8e60 100644 --- a/docs/snippets/vue/my-component-play-function-composition.js.mdx +++ b/docs/snippets/vue/my-component-play-function-composition.js.mdx @@ -7,33 +7,48 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); - -export const FirstStory = Template.bind({}); -FirstStory.play = async () => { - userEvent.type(screen.getByTestId('an-element'), 'example-value'); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const FirstStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + userEvent.type(screen.getByTestId('an-element'), 'example-value'); + }, }; -export const SecondStory = Template.bind({}); -SecondStory.play = async () => { - await userEvent.type(screen.getByTestId('other-element'), 'another value'); +export const SecondStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + await userEvent.type(screen.getByTestId('other-element'), 'another value'); + }, }; -export const CombinedStories = Template.bind({}); -CombinedStories.play = async () => { - // Runs the FirstStory and Second story play function before running this story's play function - await FirstStory.play(); - await SecondStory.play(); - await userEvent.type(screen.getByTestId('another-element'), 'random value'); +export const CombinedStories = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + // Runs the FirstStory and Second story play function before running this story's play function + await FirstStory.play(); + await SecondStory.play(); + await userEvent.type(screen.getByTestId('another-element'), 'random value'); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx index dcc1bbba2447..afe123c71c7e 100644 --- a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx +++ b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx @@ -7,34 +7,39 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'WithAsync', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); - -export const ExampleAsyncStory = Template.bind({}); -ExampleAsyncStory.play = async () => { - const Input = screen.getByLabelText('Username', { - selector: 'input', - }); - - await userEvent.type(Input, 'WrongInput', { - delay: 100, - }); - - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const Submit = screen.getByRole('button'); - await userEvent.click(Submit); - - await waitFor(async () => { - await userEvent.hover(screen.getByTestId('error')); - }); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleAsyncStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + const exampleElement = screen.getByLabelText('example-element', { + selector: 'input', + }); + + // The delay option set the ammount of milliseconds between characters being typed + await userEvent.type(exampleElement, 'WrongInput', { + delay: 100, + }); + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + const Submit = screen.getByRole('button'); + await userEvent.click(Submit); + + await waitFor(async () => { + await userEvent.hover(screen.getByTestId('error')); + }); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx index 2767f7a0285c..b1622949bd40 100644 --- a/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx @@ -9,14 +9,10 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); { + play={ async () => { const Input = screen.getByLabelText('Username', { selector: 'input', }); @@ -25,14 +21,16 @@ export const Template = (args) => ({ delay: 100, }); - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel const Submit = screen.getByRole('button'); await userEvent.click(Submit); await waitFor(async () => { await userEvent.hover(screen.getByTestId('error')); }); - }}> - {Template.bind({})} - + }} + render={() => ({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx index af3918404fc9..c1ecae5aabfa 100644 --- a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx +++ b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx @@ -7,25 +7,30 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'WithCanvasElement', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async ({ canvasElement }) => { + // Assigns canvas to the component root element + const canvas = within(canvasElement); -export const ExampleStory = Template.bind({}); -ExampleStory.play = async ({ canvasElement }) => { - /// Assigns canvas to the component root element - const canvas = within(canvasElement); - - // Starts querying from the component's root element - await userEvent.type(canvas.getByTestId('example-element'), 'something'); - await userEvent.click(canvas.getByRole('another-element')); + // Starts querying from the component's root element + await userEvent.type(canvas.getByTestId('example-element'), 'something'); + await userEvent.type(canvas.getByTestId('another-element'), 'something else'); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx index 4d2c1d9b0bfd..75e9c8b2c73c 100644 --- a/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-canvas.mdx.mdx @@ -9,21 +9,24 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); + { + play={ async ({ canvasElement }) => { // Assigns canvas to the component root element const canvas = within(canvasElement); // Starts querying from the component's root element await userEvent.type(canvas.getByTestId('example-element'), 'something'); await userEvent.click(canvas.getByRole('another-element')); - }}> - {Template.bind({})} - + }} + render={() => ({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx index c51f1e86af46..c187bad1f38a 100644 --- a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx +++ b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx @@ -7,27 +7,37 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'ClickExamples', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); - -export const ClickExample = Template.bind({}); -ClickExample.play = async () => { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(screen.getByRole('button')); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ClickExample = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await userEvent.click(screen.getByRole('button')); + }, }; -export const FireEventExample = Template.bind({}); -FireEventExample.play = async () => { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await fireEvent.click(screen.getByTestId('data-testid')); +export const FireEventExample = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + await fireEvent.click(screen.getByTestId('data-testid')); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx index 15f8de3cb0fa..f0139a13bc10 100644 --- a/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx @@ -9,26 +9,31 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); + { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + play={ async () => { + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await userEvent.click(screen.getByRole('button')); - }}> - {Template.bind({})} - + }} + render={()=>({ + components: { MyComponent }, + template: '', + })} /> { - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + play={ async () => { + // See https://storybook.js.org/docs/7.0/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await fireEvent.click(screen.getByTestId('data-testid')); - }}> - {Template.bind({})} - + }} + render={()=>({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx index 2d1c49c9ac7f..f653741346ee 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx @@ -7,30 +7,35 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'WithDelay', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const DelayedStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + const exampleElement = screen.getByLabelText('example-element'); -export const DelayedStory = Template.bind({}); -DelayedStory.play = async () => { - const exampleElement= screen.getByLabelText('example-element'); + // The delay option set the ammount of milliseconds between characters being typed + await userEvent.type(exampleElement, 'random string', { + delay: 100, + }); - // The delay option set the amount of milliseconds between characters being typed - await userEvent.type(exampleElement, 'random string', { - delay: 100, - }); - - const AnotherExampleElement= screen.getByLabelText('another-example-element'); - await userEvent.type(AnotherExampleElement, 'another random string', { - delay: 100, - }); + const AnotherExampleElement = screen.getByLabelText('another-example-element'); + await userEvent.type(AnotherExampleElement, 'another random string', { + delay: 100, + }); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx index 162a4e518842..b48c3eb4a727 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx @@ -9,14 +9,15 @@ import MyComponent from './MyComponent.vue'; -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); + { + play={ async () => { const exampleElement= screen.getByLabelText('example-element'); // The delay option set the amount of milliseconds between characters being typed @@ -28,7 +29,9 @@ const Template = (args) => ({ await userEvent.type(AnotherExampleElement, 'another random string', { delay: 100, }); - }}> - {Template.bind({})} - + }} + render={()=>({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx index a72f05e4fed6..f62f6b8b2058 100644 --- a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx +++ b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx @@ -7,12 +7,11 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'WithSelectEvent', component: MyComponent, - }; // Custom function to emulate a pause @@ -20,21 +19,26 @@ function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } -const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); - -export const ExampleChangeEvent = Template.bind({}); -ExampleChangeEvent.play = async () => { - const select = screen.getByRole('listbox'); - - await userEvent.selectOptions(select, ['One Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Another Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Yet another item']); +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleChangeEvent = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + play: async () => { + const select = screen.getByRole('listbox'); + + await userEvent.selectOptions(select, ['One Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Another Item']); + await sleep(2000); + + await userEvent.selectOptions(select, ['Yet another item']); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx index 60154d1ad9c7..edac1d7cd7cb 100644 --- a/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx @@ -15,10 +15,11 @@ export const sleep= (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; -export const Template = (args) => ({ - components: { MyComponent }, - template: '', -}); + ({ await userEvent.selectOptions(select, ['Yet another item']); - }}> - {Template.bind({})} - + }} + render={()=>({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx index 0f0d9b9ac2d5..0ae747854f0e 100644 --- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx +++ b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx @@ -5,20 +5,24 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Path/To/MyComponent', component: MyComponent, }; -export const Basic = () => ({ - components: { MyComponent }, - template: '', -}); +export const Basic = { + render: () => ({ + components: { MyComponent }, + template: '', + }), +}; -export const WithProp = () => ({ - components: { MyComponent }, +export const WithProp = { + render: () => ({ + components: { MyComponent }, template: '', -}); + }), +}; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx index c356aaf70e3d..4d5538c3552d 100644 --- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx +++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx @@ -7,9 +7,9 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, parameters: { @@ -24,13 +24,20 @@ export default { }, }; -export const MyStory = () => ({ - components: { MyComponent }, - template: '', -}); -MyStory.parameters = { - viewport: { - defaultViewport: 'iphonex' +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const MyStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + parameters: { + viewport: { + defaultViewport: 'iphonex', + }, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx index 9dbf1c2c759e..b87b7c293fdd 100644 --- a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx @@ -18,17 +18,21 @@ import MyComponent from './MyComponent.vue'; component={MyComponent} /> + + - {() => { - return { - template: ``, - }; }} - + render={()=>({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx index c40b18ea44b5..d7dc941bface 100644 --- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx @@ -5,9 +5,9 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, }; @@ -27,10 +27,17 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `

${caption}

`, - }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const StoryWithLocale = { + render: (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return { + template: `

${caption}

`, + }; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx index 6f6f74945f65..8397ad8f2c2b 100644 --- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx @@ -18,12 +18,18 @@ export const getCaptionForLocale = (locale) => { } }; - - {(args, { globals: { locale } }) => { + + + { const caption = getCaptionForLocale(locale); return { template: `

${caption}

`, }; - }} - + }} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx index 4627965fe1ac..1c756ffc7701 100644 --- a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx +++ b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx @@ -7,10 +7,10 @@ import someData from './data.json'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', component: MyComponent, includeStories: ['SimpleStory', 'ComplexStory'], excludeStories: /.*Data$/, // πŸ‘ˆ Storybook ignores anything that contains Data @@ -19,21 +19,30 @@ export default { export const simpleData = { foo: 1, bar: 'baz' }; export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; - -const Template = (args, { argTypes }) => ({ - components: { MyComponent }, - props: Object.keys(argTypes), - template: ``, -}); - - -export const SimpleStory = Template.bind({}); -SimpleStory,args = { - data: simpleData, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const SimpleStory = { + render: (args, { argTypes }) => ({ + components: { MyComponent }, + props: Object.keys(argTypes), + template: ``, + }), + args: { + data: simpleData, + }, }; -export const ComplexStory = Template.bind({}); -ComplexStory,args = { - data: complexData, +export const ComplexStory = { + render: (args, { argTypes }) => ({ + components: { MyComponent }, + props: Object.keys(argTypes), + template: ``, + }), + args: { + data: complexData, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx index 25ea9cf96b39..539600f2ee9a 100644 --- a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx +++ b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx @@ -7,10 +7,10 @@ import someData from './data.json'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', component: MyComponent, includeStories: ['SimpleStory', 'ComplexStory'], excludeStories: /.*Data$/, // πŸ‘ˆ Storybook ignores anything that contains Data @@ -19,21 +19,34 @@ export default { export const simpleData = { foo: 1, bar: 'baz' }; export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; -const Template = (args) => ({ - components: { MyComponent }, - setup() { - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const SimpleStory = { + render: (args) => ({ + components: { MyComponent }, + setup() { + return { args }; + }, + template: ``, + }), + args: { + data: simpleData, }, - template: ``, -}); - -export const SimpleStory = Template.bind({}); -SimpleStory.args = { - data: simpleData, }; -export const ComplexStory = Template.bind({}); -ComplexStory.args = { - data: complexData, +export const ComplexStory = { + render: (args) => ({ + components: { MyComponent }, + setup() { + return { args }; + }, + template: ``, + }), + args: { + data: complexData, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx index e52e2a3bf63b..8186f3f7ee3b 100644 --- a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx +++ b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx @@ -5,21 +5,26 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, }; -const Template = (args, { argTypes }) => ({ - components: { MyComponent }, - props: Object.keys(argTypes), - template: '', -}); - -export const ExampleStory = Template.bind({}); -ExampleStory.args = { - propertyA: process.env.STORYBOOK_DATA_KEY, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleStory = { + render: (args, { argTypes }) => ({ + components: { MyComponent }, + props: Object.keys(argTypes), + template: ``, + }), + args: { + propertyA: process.env.STORYBOOK_DATA_KEY, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx index e910c0d8e448..85f983d25af2 100644 --- a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx +++ b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx @@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, }; -const Template = (args) => ({ - components: { MyComponent }, - setup() { - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleStory = { + render: (args) => ({ + components: { MyComponent }, + setup() { + return { args }; + }, + template: ``, + }), + args: { + propertyA: process.env.STORYBOOK_DATA_KEY, }, - template: '', -}); - -export const ExampleStory = Template.bind({}); -ExampleStory.args = { - propertyA: process.env.STORYBOOK_DATA_KEY, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx index e0521529431e..b86d8d38b61d 100644 --- a/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx +++ b/docs/snippets/vue/my-component-with-env-variables.mdx-2.mdx.mdx @@ -7,19 +7,22 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args, { argTypes }) => ({ - components: { MyComponent }, - props: Object.keys(argTypes), - template: '', -}); + - {Template.bind({})} - + }} + render={(args, { argTypes }) => ({ + components: { MyComponent }, + props: Object.keys(argTypes), + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx index 0f3c843518d3..90a944178731 100644 --- a/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx +++ b/docs/snippets/vue/my-component-with-env-variables.mdx-3.mdx.mdx @@ -7,21 +7,24 @@ import MyComponent from './MyComponent.vue'; -export const Template = (args) => ({ - components: { MyComponent }, - setup() { - return { args }; - }, - template: '', -}); + - {Template.bind({})} - + }} + render={(args) => ({ + components: { MyComponent }, + setup() { + return { args }; + }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx index ff119043c287..bea8a0bc4711 100644 --- a/docs/snippets/vue/page-story-slots.2.js.mdx +++ b/docs/snippets/vue/page-story-slots.2.js.mdx @@ -5,27 +5,32 @@ import Page from './Page.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', component: Page, }; -const Template = (args, { argTypes }) => ({ - components: { Page }, - props: Object.keys(argTypes), - template: ` - - - - `, -}); - -export const CustomFooter= Template.bind({}); -CustomFooter.args = { - footer: 'Built with Storybook', +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const CustomFooter = { + render: (args, { argTypes }) => ({ + components: { Page }, + props: Object.keys(argTypes), + template: ` + + + + `, + }), + args: { + footer: 'Built with Storybook', + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx index cf8b6b6106a3..42c640d6d786 100644 --- a/docs/snippets/vue/page-story-slots.3.js.mdx +++ b/docs/snippets/vue/page-story-slots.3.js.mdx @@ -5,29 +5,34 @@ import Page from './Page.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', component: Page, }; -const Template = (args) => ({ - components: { Page }, - setup() { - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const CustomFooter = { + render: (args) => ({ + components: { Page }, + setup() { + return { args }; + }, + template: ` + + + + `, + }), + args: { + footer: 'Built with Storybook', }, - template: ` - - - - `, -}); - -export const CustomFooter = Template.bind({}); -CustomFooter.args = { - footer: 'Built with Storybook', }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx index b6ce77d8a2f6..20150162787a 100644 --- a/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx +++ b/docs/snippets/vue/page-story-slots.mdx-2.mdx.mdx @@ -7,23 +7,26 @@ import Page from './Page.vue'; -export const Template = (args, { argTypes }) => ({ - components: { Page }, - props: Object.keys(argTypes), - template: ` - - - - `, -}); + Built with Storybook`, - }}> - {Template.bind({})} - + footer: `Built with Storybook`, + }} + render={(args, { argTypes }) => ({ + components: { Page }, + props: Object.keys(argTypes), + template: ` + + + + `, + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx index 3567c4b8a6e0..dc304d091cd7 100644 --- a/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx +++ b/docs/snippets/vue/page-story-slots.mdx-3.mdx.mdx @@ -7,25 +7,28 @@ import Page from './Page.vue'; -export const Template = (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: ` - - - - `, -}); + Built with Storybook', - }}> - {Template.bind({})} - + }} + render={(args) => ({ + components: { Page }, + setup() { + return { args }; + }, + template: ` + + + + `, + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx index 090392985479..3a3b6c22a700 100644 --- a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx +++ b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx @@ -10,23 +10,28 @@ import * as DocumentListStories from './DocumentList.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'DocumentScreen', component: DocumentScreen, }; -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { DocumentScreen }, - template: '', -}); - -export const Simple = Template.bind({}); -Simple.args = { - user: PageLayoutStories.Simple.args.user, - document: DocumentHeaderStories.Simple.args.document, - subdocuments: DocumentListStories.Simple.args.documents, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const Simple = { + render: (args, { argTypes }) => ({ + components: { DocumentScreen }, + props: Object.keys(argTypes), + template: '', + }), + args: { + user: PageLayoutStories.Simple.args.user, + document: DocumentHeaderStories.Simple.args.document, + subdocuments: DocumentListStories.Simple.args.documents, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx index bd47190804e4..d247267a9121 100644 --- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx +++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx @@ -10,25 +10,30 @@ import * as DocumentListStories from './DocumentList.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'DocumentScreen', component: DocumentScreen, }; -const Template = (args) => ({ - components: { DocumentScreen }, - setup() { - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const Simple = { + render: (args) => ({ + components: { DocumentScreen }, + setup() { + return { args }; + }, + template: '', + }), + args: { + user: PageLayoutStories.Simple.args.user, + document: DocumentHeaderStories.Simple.args.document, + subdocuments: DocumentListStories.Simple.args.documents, }, - template: '', -}); - -export const Simple = Template.bind({}); -Simple.args = { - user: PageLayoutStories.Simple.args.user, - document: DocumentHeaderStories.Simple.args.document, - subdocuments: DocumentListStories.Simple.args.documents, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx index 59f260eed46e..04352638586d 100644 --- a/docs/snippets/vue/page-story.2.js.mdx +++ b/docs/snippets/vue/page-story.2.js.mdx @@ -8,22 +8,26 @@ import * as HeaderStories from './Header.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', component: Page, }; - -const Template = (args, { argTypes }) => ({ - components: { Page }, - props: Object.keys(argTypes), - template: '', -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - ...HeaderStories.LoggedIn.args, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const LoggedIn = { + render: (args, { argTypes }) => ({ + components: { Page }, + props: Object.keys(argTypes), + template: '', + }), + args: { + ...HeaderStories.LoggedIn.args, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx index 30b6cb0cb5b8..07368d3cbad9 100644 --- a/docs/snippets/vue/page-story.3.js.mdx +++ b/docs/snippets/vue/page-story.3.js.mdx @@ -8,23 +8,28 @@ import * as HeaderStories from './Header.stories'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Page', component: Page, }; -const Template = (args) => ({ - components: { Page }, - setup() { - return { args }; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const LoggedIn = { + render: (args) => ({ + components: { Page }, + setup() { + return { args }; + }, + template: '', + }), + args: { + ...HeaderStories.LoggedIn.args, }, - template: '', -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - ...HeaderStories.LoggedIn.args, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/register-component-with-play-function.js.mdx b/docs/snippets/vue/register-component-with-play-function.js.mdx index c898c389ff0a..9dc018d2ad58 100644 --- a/docs/snippets/vue/register-component-with-play-function.js.mdx +++ b/docs/snippets/vue/register-component-with-play-function.js.mdx @@ -7,28 +7,32 @@ import RegistrationForm from './RegistrationForm.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'RegistrationForm', component: RegistrationForm, }; -const Template = (args) => ({ - components: { RegistrationForm }, - template: '', -}); - -export const FilledForm = Template.bind({}); -FilledForm.play = async () => { - const emailInput = screen.getByLabelText('email', { +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const FilledForm = { + render: () => ({ + components: { RegistrationForm }, + template: '', + }), + play: async () => { + const emailInput = screen.getByLabelText('email', { selector: 'input', }); await userEvent.type(emailInput, 'example-email@email.com', { delay: 100, }); - + const passwordInput = screen.getByLabelText('password', { selector: 'input', }); @@ -36,9 +40,11 @@ FilledForm.play = async () => { await userEvent.type(passwordInput, 'ExamplePassword', { delay: 100, }); - - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const Submit = screen.getByRole('button'); - await userEvent.click(Submit); + + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + const submitButton = screen.getByRole('button'); + + await userEvent.click(submitButton); + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/register-component-with-play-function.mdx.mdx b/docs/snippets/vue/register-component-with-play-function.mdx.mdx index f85c8b1afa87..d133cc0e8fbd 100644 --- a/docs/snippets/vue/register-component-with-play-function.mdx.mdx +++ b/docs/snippets/vue/register-component-with-play-function.mdx.mdx @@ -9,14 +9,15 @@ import RegistrationForm from './RegistrationForm.vue'; -export const Template = (args) => ({ - components: { RegistrationForm }, - template: '', -}); + { + play={ async () => { const emailInput = screen.getByLabelText('email', { selector: 'input', }); @@ -33,10 +34,12 @@ export const Template = (args) => ({ delay: 100, }); - // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel + // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel const Submit = screen.getByRole('button'); await userEvent.click(Submit); - }}> - {Template.bind({})} - + }} + render={() => ({ + components: { RegistrationForm }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx index 7be7ee2c227c..0fde60b15579 100644 --- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx +++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx @@ -5,23 +5,28 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Disable a11y addon', component: MyComponent, }; -const Template = () => ({ - components: { MyComponent }, - template: '', -}); - -export const NonA11yStory = Template.bind({}); -NonA11yStory.parameters = { - a11y: { - // This option disables all a11y checks on this story - disable: true, +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const NonA11yStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + parameters: { + a11y: { + // This option disables all a11y checks on this story + disable: true, + }, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx index 9e9addbb4ac7..76609c6f8423 100644 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx +++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx @@ -5,38 +5,43 @@ import MyComponent from './MyComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Configure a11y addon', component: MyComponent, }; -const Template = () => ({ - components: { MyComponent }, - template: '', -}); - -export const ExampleStory = Template.bind({}); -ExampleStory.parameters = { - a11y: { - element: '#root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const ExampleStory = { + render: () => ({ + components: { MyComponent }, + template: '', + }), + parameters: { + a11y: { + element: '#root', + config: { + rules: [ + { + // The autocomplete rule will not run based on the CSS selector provided + id: 'autocomplete-valid', + selector: '*:not([autocomplete="nope"])', + }, + { + // Setting the enabled option to false will disable checks for this particular rule on all stories. + id: 'image-alt', + enabled: false, + }, + ], + }, + options: {}, + manual: true, }, - options: {}, - manual: true, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx index e76f552f1d4e..e41bc9806563 100644 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx +++ b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx @@ -9,10 +9,11 @@ import MyComponent from './MyComponent.vue'; title="Configure a11y addon" component={MyComponent} /> -export const Template = () => ({ - components: { MyComponent }, - template: '', -}); + ({ options: {}, manual: true, }, - }}> - {Template.bind({})} - + }} + render={() => ({ + components: { MyComponent }, + template: '', + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx index ade9b4a326ca..b15cca26de0d 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx @@ -5,34 +5,40 @@ import Table from './Table.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Custom Table', component: Table, }; -const TableStory = (args, { argTypes }) => ({ - components: { Table }, - props: Object.keys(argTypes), - template: ` - - - - -
- {{ data[idx1][idx2] }} -
`, -}); - -export const Numeric = TableStory.bind({}); -Numeric.args = { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const TableStory = { + render: (args, { argTypes }) => ({ + components: { Table }, + props: Object.keys(argTypes), + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
+ `, + }), + args: { + //πŸ‘‡ This arg is for the story component + data: [ + [1, 2, 3], + [4, 5, 6], + ], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx index 0623762a7da3..c80f5663c165 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx @@ -5,37 +5,42 @@ import Table from './Table.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Custom Table', component: Table, }; -const TableStory = (args) => ({ - components: { Table }, - setup() { - return { args }; - }, - template: ` - - - - -
- {{ data[idx1][idx2] }} -
+/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const TableStory = { + render: (args) => ({ + components: { Table }, + setup() { + return { args }; + }, + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, -}); - -export const Numeric = TableStory.bind({}); -Numeric.args = { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', + }), + args: { + //πŸ‘‡ This arg is for the story component + data: [ + [1, 2, 3], + [4, 5, 6], + ], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx index ed39b60e5e4e..fc432b4e13ad 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx @@ -7,18 +7,11 @@ import Table from './Table.vue'; -export const TableStory = (args, { argTypes }) => ({ - components: { Table }, - props: Object.keys(argTypes), - template: ` - - - - -
- {{ data[idx1][idx2] }} -
`, -}); + ({ [4, 5, 6], ], size: 'large', - }}> - {TableStory.bind({})} - + }} + render={(args, { argTypes }) =>({ + components: { Table }, + props: Object.keys(argTypes), + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx index dacb19795659..c5176464e49b 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx @@ -7,20 +7,11 @@ import Table from './Table.vue'; -export const TableStory = (args) => ({ - components: { Table }, - setup() { - return { args }; - }, - template: ` - - - - -
- {{ data[idx1][idx2] }} -
`, -}); + ({ [4, 5, 6], ], size: 'large', - }}> - {TableStory.bind({})} - + }} + render={(args) => ({ + components: { Table }, + setup() { + return { args }; + }, + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, + })} /> ``` \ No newline at end of file diff --git a/docs/snippets/vue/your-component-with-decorator.js.mdx b/docs/snippets/vue/your-component-with-decorator.js.mdx index 15f560e26f4a..d6bd32c0d686 100644 --- a/docs/snippets/vue/your-component-with-decorator.js.mdx +++ b/docs/snippets/vue/your-component-with-decorator.js.mdx @@ -5,7 +5,7 @@ import YourComponent from './YourComponent.vue'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'YourComponent', diff --git a/docs/snippets/vue/your-component.2.js.mdx b/docs/snippets/vue/your-component.2.js.mdx index 4e31094af482..faf3cd115f9c 100644 --- a/docs/snippets/vue/your-component.2.js.mdx +++ b/docs/snippets/vue/your-component.2.js.mdx @@ -6,22 +6,26 @@ import YourComponent from './YourComponent.vue'; //πŸ‘‡ This default export determines where your story goes in the story list export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', component: YourComponent, }; -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template = (args, { argTypes }) => ({ - components: { YourComponent }, - props: Object.keys(argTypes), - template: '', -}); - -export const FirstStory = Template.bind({}); -FirstStory.args = { - //πŸ‘‡ The args you need here will depend on your component +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const FirstStory = { + render: (args, { argTypes }) => ({ + components: { YourComponent }, + props: Object.keys(argTypes), + template: '
), ]}> - {Template.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx index 507a41844ceb..bcf48f137d2f 100644 --- a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx +++ b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx @@ -3,19 +3,18 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, } as ComponentMeta; -const Template: ComponentStory = (args) => ; +export const Basic = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx index 8c1fd7d10081..5f90996fc267 100644 --- a/docs/snippets/react/button-story-with-addon-example.ts.mdx +++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx @@ -3,15 +3,15 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //πŸ‘‡ Creates specific parameters for the story @@ -22,5 +22,12 @@ export default { }, } as ComponentMeta; -const Basic: ComponentStory = () => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Basic: ComponentStoryObj = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 430d0187f520..7fcf35be8bde 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -7,20 +7,17 @@ import { Button } from './Button'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, }; -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template = (args) => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary = { + render: () => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary: ComponentStoryObj = { + render: () =>