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

Fall back to raw string when parsing object arg param, and add support for fractional numbers

Browse Source
This commit is contained in:
Gert Hengeveld 2021-04-08 00:38:30 +02:00
parent 8a40dbd431
commit 5939a9f43b
4 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/client-api/src/args.ts
View File

@ -7,6 +7,8 @@ type ValueType = { name: string; value?: ObjectValueType | ValueType };
type ObjectValueType = Record<string, ValueType>;
const INCOMPATIBLE = Symbol('incompatible');
const NUMBER_REGEXP = /^-?[0-9]+(\.[0-9]+)?$/;
const map = (arg: unknown, type: ValueType): any => {
if (arg === undefined || arg === null || !type) return arg;
switch (type.name) {
@ -26,6 +28,7 @@ const map = (arg: unknown, type: ValueType): any => {
return acc;
}, new Array(arg.length));
case 'object':
if (typeof arg === 'string') return NUMBER_REGEXP.test(arg) ? Number(arg) : arg;
if (!type.value || typeof arg !== 'object') return INCOMPATIBLE;
return Object.entries(arg).reduce((acc, [key, val]) => {
const mapped = map(val, (type.value as ObjectValueType)[key]);

8
lib/core-client/src/preview/parseArgsParam.test.ts
View File

@ -225,6 +225,14 @@ describe('parseArgsParam', () => {
expect(parseArgsParam('key:1')).toStrictEqual({ key: '1' });
});
it('allows valid fractional numbers', () => {
expect(parseArgsParam('key:1.2')).toStrictEqual({ key: '1.2' });
expect(parseArgsParam('key:-1.2')).toStrictEqual({ key: '-1.2' });
expect(parseArgsParam('key:1.')).toStrictEqual({});
expect(parseArgsParam('key:.2')).toStrictEqual({});
expect(parseArgsParam('key:1.2.3')).toStrictEqual({});
});
it('also applies to nested object and array values', () => {
expect(parseArgsParam('obj.key:a!b')).toStrictEqual({});
expect(parseArgsParam('obj[key]:a!b')).toStrictEqual({});

11
lib/core-client/src/preview/parseArgsParam.ts
View File

@ -6,6 +6,7 @@ import isPlainObject from 'lodash/isPlainObject';
// Keep this in sync with validateArgs in router/src/utils.ts
const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/;
const NUMBER_REGEXP = /^-?[0-9]+(\.[0-9]+)?$/;
const HEX_REGEXP = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i;
const COLOR_REGEXP = /^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i;
const validateArgs = (key = '', value: unknown): boolean => {
@ -14,8 +15,14 @@ const validateArgs = (key = '', value: unknown): boolean => {
if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined`
if (value instanceof Date) return true; // encoded as modified ISO string
if (typeof value === 'number' || typeof value === 'boolean') return true;
if (typeof value === 'string')
return VALIDATION_REGEXP.test(value) || HEX_REGEXP.test(value) || COLOR_REGEXP.test(value);
if (typeof value === 'string') {
return (
VALIDATION_REGEXP.test(value) ||
NUMBER_REGEXP.test(value) ||
HEX_REGEXP.test(value) ||
COLOR_REGEXP.test(value)
);
}
if (Array.isArray(value)) return value.every((v) => validateArgs(key, v));
if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v));
return false;

11
lib/router/src/utils.ts
View File

@ -63,6 +63,7 @@ export const deepDiff = (value: any, update: any): any => {
// Keep this in sync with validateArgs in core-client/src/preview/parseArgsParam.ts
const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/;
const NUMBER_REGEXP = /^-?[0-9]+(\.[0-9]+)?$/;
const HEX_REGEXP = /^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i;
const COLOR_REGEXP = /^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i;
const validateArgs = (key = '', value: unknown): boolean => {
@ -71,8 +72,14 @@ const validateArgs = (key = '', value: unknown): boolean => {
if (value === null || value === undefined) return true; // encoded as `!null` or `!undefined`
if (value instanceof Date) return true; // encoded as modified ISO string
if (typeof value === 'number' || typeof value === 'boolean') return true;
if (typeof value === 'string')
return VALIDATION_REGEXP.test(value) || HEX_REGEXP.test(value) || COLOR_REGEXP.test(value);
if (typeof value === 'string') {
return (
VALIDATION_REGEXP.test(value) ||
NUMBER_REGEXP.test(value) ||
HEX_REGEXP.test(value) ||
COLOR_REGEXP.test(value)
);
}
if (Array.isArray(value)) return value.every((v) => validateArgs(key, v));
if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v));
return false;