From 40ed57ba12bba9029723d82e69ff48e6d305239c Mon Sep 17 00:00:00 2001 From: Steven Sacks Date: Tue, 30 Mar 2021 20:45:01 +0900 Subject: [PATCH 01/33] 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 02/33] 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 03/33] 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 04/33] 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 05/33] 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 06/33] 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 92e6fbb9b2a5df2ee6ddac998b8a784b014c3c87 Mon Sep 17 00:00:00 2001 From: Trevor Burnham Date: Sun, 5 Dec 2021 14:11:43 -0500 Subject: [PATCH 07/33] 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 08/33] 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) =>