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

Addon-docs: Increase width of props table type column (#8950)

Browse Source 
Addon-docs: Increase width of props table type column
This commit is contained in:
Michael Shilman 2019-11-27 01:22:51 +08:00 committed by GitHub
commit 35562a0ab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 2136 additions and 718 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/docs/package.json
View File

@ -63,6 +63,7 @@
"js-string-escape": "^1.0.1",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react-element-to-jsx-string": "^14.1.0",
"ts-dedent": "^1.1.0",
"util-deprecate": "^1.0.2",
"vue-docgen-api": "^3.26.0",

0
addons/docs/src/frameworks/react/propTypes/captions.ts → addons/docs/src/frameworks/react/lib/captions.ts
View File

118
addons/docs/src/frameworks/react/lib/createDefaultValue.ts
View File

@ -1,118 +0,0 @@
import { isNil } from 'lodash';
// @ts-ignore
import { PropDefaultValue } from '@storybook/components';
import {
OBJECT_CAPTION,
FUNCTION_CAPTION,
ELEMENT_CAPTION,
ARRAY_CAPTION,
} from '../propTypes/captions';
import { generateCode } from './generateCode';
import {
InspectionFunction,
InspectionResult,
InspectionType,
InspectionElement,
InspectionIdentifiableInferedType,
inspectValue,
} from './inspection';
import { isHtmlTag } from './isHtmlTag';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib';
function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
const { type, identifier } = inferedType;
switch (type) {
case InspectionType.FUNCTION:
return (inferedType as InspectionFunction).hasArguments
? `${identifier}( ... )`
: `${identifier}()`;
case InspectionType.ELEMENT:
return `<${identifier} />`;
default:
return identifier;
}
}
function generateObject({ ast }: InspectionResult): PropDefaultValue {
let prettyCaption = generateCode(ast, true);
// Cannot get escodegen to add a space before the last } with the compact mode settings.
// This fix it until a better solution is found.
if (!prettyCaption.endsWith(' }')) {
prettyCaption = `${prettyCaption.slice(0, -1)} }`;
}
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(OBJECT_CAPTION, generateCode(ast));
}
function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { identifier } = inferedType as InspectionFunction;
if (!isNil(identifier)) {
return createSummaryValue(
getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
generateCode(ast)
);
}
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
}
// All elements are JSX elements.
// JSX elements are not supported by escodegen.
function generateElement(
defaultValue: string,
inspectionResult: InspectionResult
): PropDefaultValue {
const { inferedType } = inspectionResult;
const { identifier } = inferedType as InspectionElement;
if (!isNil(identifier)) {
if (!isHtmlTag(identifier)) {
const prettyIdentifier = getPrettyIdentifier(
inferedType as InspectionIdentifiableInferedType
);
return createSummaryValue(
prettyIdentifier,
prettyIdentifier !== defaultValue ? defaultValue : undefined
);
}
}
return !isTooLongForDefaultValueSummary(defaultValue)
? createSummaryValue(defaultValue)
: createSummaryValue(ELEMENT_CAPTION, defaultValue);
}
function generateArray({ ast }: InspectionResult): PropDefaultValue {
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(ARRAY_CAPTION, generateCode(ast));
}
export function createDefaultValue(defaultValue: string): PropDefaultValue {
const inspectionResult = inspectValue(defaultValue);
switch (inspectionResult.inferedType.type) {
case InspectionType.OBJECT:
return generateObject(inspectionResult);
case InspectionType.FUNCTION:
return generateFunc(inspectionResult);
case InspectionType.ELEMENT:
return generateElement(defaultValue, inspectionResult);
case InspectionType.ARRAY:
return generateArray(inspectionResult);
default:
return null;
}
}

85
addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts Normal file
View File

@ -0,0 +1,85 @@
import { isNil } from 'lodash';
import { PropDefaultValue } from '@storybook/components';
import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
import {
InspectionFunction,
InspectionResult,
InspectionType,
InspectionElement,
InspectionIdentifiableInferedType,
inspectValue,
} from '../inspection';
import { isHtmlTag } from '../isHtmlTag';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateCode } from '../generateCode';
import { generateObject } from './generateObject';
import { generateArray } from './generateArray';
import { getPrettyIdentifier } from './prettyIdentifier';
function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { identifier } = inferedType as InspectionFunction;
if (!isNil(identifier)) {
return createSummaryValue(
getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
generateCode(ast)
);
}
const prettyCaption = generateCode(ast, true);
return !isTooLongForDefaultValueSummary(prettyCaption)
? createSummaryValue(prettyCaption)
: createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
}
// All elements are JSX elements.
// JSX elements are not supported by escodegen.
function generateElement(
defaultValue: string,
inspectionResult: InspectionResult
): PropDefaultValue {
const { inferedType } = inspectionResult;
const { identifier } = inferedType as InspectionElement;
if (!isNil(identifier)) {
if (!isHtmlTag(identifier)) {
const prettyIdentifier = getPrettyIdentifier(
inferedType as InspectionIdentifiableInferedType
);
return createSummaryValue(
prettyIdentifier,
prettyIdentifier !== defaultValue ? defaultValue : undefined
);
}
}
return !isTooLongForDefaultValueSummary(defaultValue)
? createSummaryValue(defaultValue)
: createSummaryValue(ELEMENT_CAPTION, defaultValue);
}
export function createDefaultValue(defaultValue: string): PropDefaultValue {
try {
const inspectionResult = inspectValue(defaultValue);
switch (inspectionResult.inferedType.type) {
case InspectionType.OBJECT:
return generateObject(inspectionResult);
case InspectionType.FUNCTION:
return generateFunc(inspectionResult);
case InspectionType.ELEMENT:
return generateElement(defaultValue, inspectionResult);
case InspectionType.ARRAY:
return generateArray(inspectionResult);
default:
return null;
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

189
addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts Normal file
View File

@ -0,0 +1,189 @@
import { PropDefaultValue, PropDef } from '@storybook/components';
import { isNil, isPlainObject, isArray, isFunction, isString } from 'lodash';
// @ts-ignore
import reactElementToJSXString from 'react-element-to-jsx-string';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { inspectValue, InspectionFunction } from '../inspection';
import { generateObject } from './generateObject';
import { generateArray } from './generateArray';
import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier';
import { OBJECT_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
import { isHtmlTag } from '../isHtmlTag';
export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
export interface TypeResolvers {
string: TypeResolver;
object: TypeResolver;
function: TypeResolver;
default: TypeResolver;
}
function isReactElement(element: any): boolean {
return !isNil(element.$$typeof);
}
export function extractFunctionName(func: Function, propName: string): string {
const { name } = func;
// Comparison with the prop name is to discard inferred function names.
if (name !== '' && name !== 'anoynymous' && name !== propName) {
return name;
}
return null;
}
const stringResolver: TypeResolver = rawDefaultProp => {
return createSummaryValue(rawDefaultProp);
};
function generateReactObject(rawDefaultProp: any) {
const { type } = rawDefaultProp;
const { displayName } = type;
const jsx = reactElementToJSXString(rawDefaultProp);
if (!isNil(displayName)) {
const prettyIdentifier = getPrettyElementIdentifier(displayName);
return createSummaryValue(prettyIdentifier, prettyIdentifier !== jsx ? jsx : undefined);
}
if (isString(type)) {
// This is an HTML element.
if (isHtmlTag(type)) {
const jsxCompact = reactElementToJSXString(rawDefaultProp, { tabStop: 0 });
const jsxSummary = jsxCompact.replace(/\r?\n|\r/g, '');
if (!isTooLongForDefaultValueSummary(jsxSummary)) {
return createSummaryValue(jsxSummary);
}
}
}
return createSummaryValue(ELEMENT_CAPTION, jsx);
}
const objectResolver: TypeResolver = rawDefaultProp => {
if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) {
return generateReactObject(rawDefaultProp);
}
if (isPlainObject(rawDefaultProp)) {
const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
return generateObject(inspectionResult);
}
if (isArray(rawDefaultProp)) {
const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
return generateArray(inspectionResult);
}
return createSummaryValue(OBJECT_CAPTION);
};
const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
let isElement = false;
let inspectionResult;
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isFunction(rawDefaultProp.render)) {
isElement = true;
} else if (!isNil(rawDefaultProp.prototype) && isFunction(rawDefaultProp.prototype.render)) {
isElement = true;
} else {
let innerElement;
try {
inspectionResult = inspectValue(rawDefaultProp.toString());
const { hasParams, params } = inspectionResult.inferedType as InspectionFunction;
if (hasParams) {
// It might be a functional component accepting props.
if (params.length === 1 && params[0].type === 'ObjectPattern') {
innerElement = rawDefaultProp({});
}
} else {
innerElement = rawDefaultProp();
}
if (!isNil(innerElement)) {
if (isReactElement(innerElement)) {
isElement = true;
}
}
} catch (e) {
// do nothing.
}
}
const funcName = extractFunctionName(rawDefaultProp, propDef.name);
if (!isNil(funcName)) {
if (isElement) {
return createSummaryValue(getPrettyElementIdentifier(funcName));
}
if (!isNil(inspectionResult)) {
inspectionResult = inspectValue(rawDefaultProp.toString());
}
const { hasParams } = inspectionResult.inferedType as InspectionFunction;
return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
}
return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
};
const defaultResolver: TypeResolver = rawDefaultProp => {
return createSummaryValue(rawDefaultProp.toString());
};
const DEFAULT_TYPE_RESOLVERS: TypeResolvers = {
string: stringResolver,
object: objectResolver,
function: functionResolver,
default: defaultResolver,
};
export function createTypeResolvers(customResolvers: Partial<TypeResolvers> = {}): TypeResolvers {
return {
...DEFAULT_TYPE_RESOLVERS,
...customResolvers,
};
}
// When react-docgen cannot provide a defaultValue we take it from the raw defaultProp.
// It works fine for types that are not transpiled. For the types that are transpiled, we can only provide partial support.
// This means that:
// - The detail might not be available.
// - Identifiers might not be "prettified" for all the types.
export function createDefaultValueFromRawDefaultProp(
rawDefaultProp: any,
propDef: PropDef,
typeResolvers: TypeResolvers = DEFAULT_TYPE_RESOLVERS
): PropDefaultValue {
try {
// Keep the extra () otherwise it will fail for functions.
// eslint-disable-next-line prettier/prettier
switch (typeof (rawDefaultProp)) {
case 'string':
return typeResolvers.string(rawDefaultProp, propDef);
case 'object':
return typeResolvers.object(rawDefaultProp, propDef);
case 'function': {
return typeResolvers.function(rawDefaultProp, propDef);
}
default:
return typeResolvers.default(rawDefaultProp, propDef);
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

19
addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts Normal file
View File

@ -0,0 +1,19 @@
import { PropDefaultValue } from '@storybook/components';
import { ARRAY_CAPTION } from '../captions';
import { InspectionResult, InspectionArray } from '../inspection';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateArrayCode } from '../generateCode';
export function generateArray({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { depth } = inferedType as InspectionArray;
if (depth <= 2) {
const compactArray = generateArrayCode(ast, true);
if (!isTooLongForDefaultValueSummary(compactArray)) {
return createSummaryValue(compactArray);
}
}
return createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast));
}

19
addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts Normal file
View File

@ -0,0 +1,19 @@
import { PropDefaultValue } from '@storybook/components';
import { OBJECT_CAPTION } from '../captions';
import { InspectionResult, InspectionArray } from '../inspection';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { generateObjectCode } from '../generateCode';
export function generateObject({ inferedType, ast }: InspectionResult): PropDefaultValue {
const { depth } = inferedType as InspectionArray;
if (depth === 1) {
const compactObject = generateObjectCode(ast, true);
if (!isTooLongForDefaultValueSummary(compactObject)) {
return createSummaryValue(compactObject);
}
}
return createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast));
}

2
addons/docs/src/frameworks/react/lib/defaultValues/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './createDefaultValue';
export * from './createFromRawDefaultProp';

26
addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts Normal file
View File

@ -0,0 +1,26 @@
import {
InspectionIdentifiableInferedType,
InspectionFunction,
InspectionType,
} from '../inspection';
export function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
const { type, identifier } = inferedType;
switch (type) {
case InspectionType.FUNCTION:
return getPrettyFuncIdentifier(identifier, (inferedType as InspectionFunction).hasParams);
case InspectionType.ELEMENT:
return getPrettyElementIdentifier(identifier);
default:
return identifier;
}
}
export function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string {
return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
}
export function getPrettyElementIdentifier(identifier: string) {
return `<${identifier} />`;
}

45
addons/docs/src/frameworks/react/lib/generateCode.ts
View File

@ -1,4 +1,5 @@
import { generate } from 'escodegen';
import dedent from 'ts-dedent';
const BASIC_OPTIONS = {
format: {
@ -23,3 +24,47 @@ const PRETTY_OPTIONS = {
export function generateCode(ast: any, compact = false): string {
return generate(ast, compact ? COMPACT_OPTIONS : PRETTY_OPTIONS);
}
export function generateObjectCode(ast: any, compact = false): string {
return !compact ? generateCode(ast) : generateCompactObjectCode(ast);
}
function generateCompactObjectCode(ast: any): string {
let result = generateCode(ast, true);
// Cannot get escodegen to add a space before the last } with the compact mode settings.
// Fix it until a better solution is found.
if (!result.endsWith(' }')) {
result = `${result.slice(0, -1)} }`;
}
return result;
}
export function generateArrayCode(ast: any, compact = false): string {
return !compact ? generateMultilineArrayCode(ast) : generateCompactArrayCode(ast);
}
function generateMultilineArrayCode(ast: any): string {
let result = generateCode(ast);
// escodegen add extra spacing before the closing bracket of a multile line array with a nested object.
// Fix it until a better solution is found.
if (result.endsWith(' }]')) {
result = dedent(result);
}
return result;
}
function generateCompactArrayCode(ast: any): string {
let result = generateCode(ast, true);
// escodegen add extra an extra before the opening bracket of a compact array that contains primitive values.
// Fix it until a better solution is found.
if (result.startsWith('[ ')) {
result = result.replace('[ ', '[');
}
return result;
}

3
addons/docs/src/frameworks/react/lib/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './captions';
export * from './isHtmlTag';
export * from './generateCode';

65
addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
View File

@ -67,14 +67,34 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep PropTypes.shape', () => {
const result = parse('PropTypes.shape({ foo: PropTypes.shape({ bar: PropTypes.string }) })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
it('support shape', () => {
const result = parse('shape({ foo: PropTypes.string })');
const result = parse('shape({ foo: string })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep shape', () => {
const result = parse('shape({ foo: shape({ bar: string }) })');
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
@ -83,6 +103,7 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
@ -95,6 +116,25 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep object literal', () => {
const result = parse(`
{
foo: {
hey: PropTypes.string
},
bar: PropTypes.string,
hey: {
ho: PropTypes.string
}
}`);
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(2);
expect(result.ast).toBeDefined();
});
@ -103,6 +143,7 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionObject;
expect(inferedType.type).toBe(InspectionType.OBJECT);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
@ -111,6 +152,16 @@ describe('parse', () => {
const inferedType = result.inferedType as InspectionArray;
expect(inferedType.type).toBe(InspectionType.ARRAY);
expect(inferedType.depth).toBe(1);
expect(result.ast).toBeDefined();
});
it('support deep array', () => {
const result = parse("['bottom-left', { foo: string }, [['hey', 'ho']]]");
const inferedType = result.inferedType as InspectionArray;
expect(inferedType.type).toBe(InspectionType.ARRAY);
expect(inferedType.depth).toBe(3);
expect(result.ast).toBeDefined();
});
@ -129,7 +180,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBeUndefined();
expect(inferedType.hasArguments).toBeFalsy();
expect(inferedType.hasParams).toBeFalsy();
expect(inferedType.params.length).toBe(0);
expect(result.ast).toBeDefined();
});
@ -139,7 +191,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBeUndefined();
expect(inferedType.hasArguments).toBeTruthy();
expect(inferedType.hasParams).toBeTruthy();
expect(inferedType.params.length).toBe(2);
expect(result.ast).toBeDefined();
});
@ -149,7 +202,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBe('concat');
expect(inferedType.hasArguments).toBeFalsy();
expect(inferedType.hasParams).toBeFalsy();
expect(inferedType.params.length).toBe(0);
expect(result.ast).toBeDefined();
});
@ -159,7 +213,8 @@ describe('parse', () => {
expect(inferedType.type).toBe(InspectionType.FUNCTION);
expect(inferedType.identifier).toBe('concat');
expect(inferedType.hasArguments).toBeTruthy();
expect(inferedType.hasParams).toBeTruthy();
expect(inferedType.params.length).toBe(2);
expect(result.ast).toBeDefined();
});

35
addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
View File

@ -35,6 +35,29 @@ function extractIdentifierName(identifierNode: any) {
return !isNil(identifierNode) ? identifierNode.name : null;
}
function filterAncestors(ancestors: estree.Node[]): estree.Node[] {
return ancestors.filter(x => x.type === 'ObjectExpression' || x.type === 'ArrayExpression');
}
function calculateNodeDepth(node: estree.Expression): number {
const depths: number[] = [];
acornWalk.ancestor(
node,
{
ObjectExpression(_: any, ancestors: estree.Node[]) {
depths.push(filterAncestors(ancestors).length);
},
ArrayExpression(_: any, ancestors: estree.Node[]) {
depths.push(filterAncestors(ancestors).length);
},
},
ACORN_WALK_VISITORS
);
return Math.max(...depths);
}
function parseIdentifier(identifierNode: estree.Identifier): ParsingResult<InspectionIdentifier> {
return {
inferedType: {
@ -72,7 +95,8 @@ function parseFunction(
const inferedType: InspectionFunction | InspectionElement = {
type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
hasArguments: funcNode.params.length !== 0,
params: funcNode.params,
hasParams: funcNode.params.length !== 0,
};
const identifierName = extractIdentifierName((funcNode as estree.FunctionExpression).id);
@ -135,10 +159,7 @@ function parseCall(callNode: estree.CallExpression): ParsingResult<InspectionObj
const identifierName = extractIdentifierName(identifierNode);
if (identifierName === 'shape') {
return {
inferedType: { type: InspectionType.OBJECT },
ast: callNode.arguments[0],
};
return parseObject(callNode.arguments[0] as estree.ObjectExpression);
}
return null;
@ -146,14 +167,14 @@ function parseCall(callNode: estree.CallExpression): ParsingResult<InspectionObj
function parseObject(objectNode: estree.ObjectExpression): ParsingResult<InspectionObject> {
return {
inferedType: { type: InspectionType.OBJECT },
inferedType: { type: InspectionType.OBJECT, depth: calculateNodeDepth(objectNode) },
ast: objectNode,
};
}
function parseArray(arrayNode: estree.ArrayExpression): ParsingResult<InspectionArray> {
return {
inferedType: { type: InspectionType.ARRAY },
inferedType: { type: InspectionType.ARRAY, depth: calculateNodeDepth(arrayNode) },
ast: arrayNode,
};
}

5
addons/docs/src/frameworks/react/lib/inspection/types.ts
View File

@ -24,10 +24,12 @@ export interface InspectionLiteral extends InspectionInferedType {
export interface InspectionObject extends InspectionInferedType {
type: InspectionType.OBJECT;
depth: number;
}
export interface InspectionArray extends InspectionInferedType {
type: InspectionType.ARRAY;
depth: number;
}
export interface InspectionClass extends InspectionInferedType {
@ -38,7 +40,8 @@ export interface InspectionClass extends InspectionInferedType {
export interface InspectionFunction extends InspectionInferedType {
type: InspectionType.FUNCTION;
identifier?: string;
hasArguments: boolean;
params: any[];
hasParams: boolean;
}
export interface InspectionElement extends InspectionInferedType {

347
addons/docs/src/frameworks/react/propTypes/createType.ts
View File

@ -1,9 +1,8 @@
import { isNil } from 'lodash';
import { PropSummaryValue, PropType } from '@storybook/components';
import { PropType } from '@storybook/components';
import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
import { generateCode } from '../lib/generateCode';
import { generateFuncSignature } from './generateFuncSignature';
import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
import {
OBJECT_CAPTION,
ARRAY_CAPTION,
@ -11,9 +10,17 @@ import {
FUNCTION_CAPTION,
ELEMENT_CAPTION,
CUSTOM_CAPTION,
} from './captions';
import { InspectionType, inspectValue } from '../lib/inspection';
import { isHtmlTag } from '../lib/isHtmlTag';
isHtmlTag,
generateObjectCode,
generateCode,
} from '../lib';
import {
InspectionType,
inspectValue,
InspectionElement,
InspectionObject,
InspectionArray,
} from '../lib/inspection';
enum PropTypesType {
CUSTOM = 'custom',
@ -38,27 +45,30 @@ interface EnumValue {
interface TypeDef {
name: string;
value: PropSummaryValue;
short: string;
compact: string;
full: string;
inferedType?: InspectionType;
}
function createTypeDef({
name,
summary,
detail,
short,
compact,
full,
inferedType,
}: {
name: string;
summary: string;
detail?: string;
short: string;
compact: string;
full?: string;
inferedType?: InspectionType;
}): TypeDef {
return {
name,
value: {
summary,
detail: !isNil(detail) ? detail : summary,
},
short,
compact,
full: !isNil(full) ? full : short,
inferedType,
};
}
@ -67,11 +77,19 @@ function cleanPropTypes(value: string): string {
return value.replace(/PropTypes./g, '').replace(/.isRequired/g, '');
}
function splitIntoLines(value: string): string[] {
return value.split(/\r?\n/);
}
function prettyObject(ast: any, compact = false): string {
return cleanPropTypes(generateObjectCode(ast, compact));
}
function prettyArray(ast: any, compact = false): string {
return cleanPropTypes(generateCode(ast, compact));
}
function getCaptionFromInspectionType(type: InspectionType): string {
function getCaptionForInspectionType(type: InspectionType): string {
switch (type) {
case InspectionType.OBJECT:
return OBJECT_CAPTION;
@ -88,59 +106,70 @@ function getCaptionFromInspectionType(type: InspectionType): string {
}
}
function generateValuesForObjectAst(ast: any): [string, string] {
let summary = prettyObject(ast, true);
let detail;
function generateTypeFromString(value: string, originalTypeName: string): TypeDef {
const { inferedType, ast } = inspectValue(value);
const { type } = inferedType;
if (!isTooLongForTypeSummary(summary)) {
detail = summary;
} else {
summary = OBJECT_CAPTION;
detail = prettyObject(ast);
let short;
let compact;
let full;
switch (type) {
case InspectionType.IDENTIFIER:
case InspectionType.LITERAL:
short = value;
compact = value;
break;
case InspectionType.OBJECT: {
const { depth } = inferedType as InspectionObject;
short = OBJECT_CAPTION;
compact = depth === 1 ? prettyObject(ast, true) : null;
full = prettyObject(ast);
break;
}
case InspectionType.ELEMENT: {
const { identifier } = inferedType as InspectionElement;
short = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
compact = splitIntoLines(value).length === 1 ? value : null;
full = value;
break;
}
case InspectionType.ARRAY: {
const { depth } = inferedType as InspectionArray;
short = ARRAY_CAPTION;
compact = depth <= 2 ? prettyArray(ast, true) : null;
full = prettyArray(ast);
break;
}
default:
short = getCaptionForInspectionType(type);
compact = value;
full = value;
break;
}
return [summary, detail];
return createTypeDef({
name: originalTypeName,
short,
compact,
full,
inferedType: type,
});
}
function generateCustom({ raw }: DocgenPropType): TypeDef {
if (!isNil(raw)) {
const { inferedType, ast } = inspectValue(raw);
const { type, identifier } = inferedType as any;
let summary;
let detail;
switch (type) {
case InspectionType.IDENTIFIER:
case InspectionType.LITERAL:
summary = raw;
break;
case InspectionType.OBJECT: {
const [objectCaption, objectValue] = generateValuesForObjectAst(ast);
summary = objectCaption;
detail = objectValue;
break;
}
case InspectionType.ELEMENT:
summary = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
detail = raw;
break;
default:
summary = getCaptionFromInspectionType(type);
detail = raw;
break;
}
return createTypeDef({
name: PropTypesType.CUSTOM,
summary,
detail,
inferedType: type,
});
return generateTypeFromString(raw, PropTypesType.CUSTOM);
}
return createTypeDef({ name: PropTypesType.CUSTOM, summary: CUSTOM_CAPTION });
return createTypeDef({
name: PropTypesType.CUSTOM,
short: CUSTOM_CAPTION,
compact: CUSTOM_CAPTION,
});
}
function generateFunc(extractedProp: ExtractedProp): TypeDef {
@ -150,47 +179,48 @@ function generateFunc(extractedProp: ExtractedProp): TypeDef {
if (!isNil(jsDocTags.params) || !isNil(jsDocTags.returns)) {
return createTypeDef({
name: PropTypesType.FUNC,
summary: FUNCTION_CAPTION,
detail: generateFuncSignature(jsDocTags.params, jsDocTags.returns),
short: generateShortFuncSignature(jsDocTags.params, jsDocTags.returns),
compact: null,
full: generateFuncSignature(jsDocTags.params, jsDocTags.returns),
});
}
}
return createTypeDef({ name: PropTypesType.FUNC, summary: FUNCTION_CAPTION });
return createTypeDef({
name: PropTypesType.FUNC,
short: FUNCTION_CAPTION,
compact: FUNCTION_CAPTION,
});
}
function generateShape(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const fields = Object.keys(type.value)
.map((key: string) => `${key}: ${generateType(type.value[key], extractedProp).value.detail}`)
.map((key: string) => `${key}: ${generateType(type.value[key], extractedProp).full}`)
.join(', ');
const { ast } = inspectValue(`{ ${fields} }`);
const [summary, detail] = generateValuesForObjectAst(ast);
const { inferedType, ast } = inspectValue(`{ ${fields} }`);
const { depth } = inferedType as InspectionObject;
return createTypeDef({
name: PropTypesType.SHAPE,
summary,
detail,
short: OBJECT_CAPTION,
compact: depth === 1 ? prettyObject(ast, true) : null,
full: prettyObject(ast),
});
}
function objectOf(of: string): string {
return `objectOf(${of})`;
}
function generateObjectOf(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const format = (of: string) => `objectOf(${of})`;
const { name, value } = generateType(type.value, extractedProp);
// eslint-disable-next-line prefer-const
let { summary, detail } = value;
if (name === PropTypesType.SHAPE) {
if (!isTooLongForTypeSummary(detail)) {
summary = detail;
}
}
const { short, compact, full } = generateType(type.value, extractedProp);
return createTypeDef({
name: PropTypesType.OBJECTOF,
summary: format(summary),
detail: format(detail),
short: objectOf(short),
compact: !isNil(compact) ? objectOf(compact) : null,
full: objectOf(full),
});
}
@ -198,76 +228,58 @@ function generateUnion(type: DocgenPropType, extractedProp: ExtractedProp): Type
if (Array.isArray(type.value)) {
const values = type.value.reduce(
(acc: any, v: any) => {
const { summary, detail } = generateType(v, extractedProp).value;
const { short, compact, full } = generateType(v, extractedProp);
acc.summary.push(summary);
acc.detail.push(detail);
acc.short.push(short);
acc.compact.push(compact);
acc.full.push(full);
return acc;
},
{ summary: [], detail: [] }
{ short: [], compact: [], full: [] }
);
return createTypeDef({
name: PropTypesType.UNION,
summary: values.summary.join(' | '),
detail: values.detail.join(' | '),
short: values.short.join(' | '),
compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
full: values.full.join(' | '),
});
}
return createTypeDef({ name: PropTypesType.UNION, summary: type.value });
return createTypeDef({ name: PropTypesType.UNION, short: type.value, compact: null });
}
function generateEnumValue({ value, computed }: EnumValue): TypeDef {
if (computed) {
const { inferedType, ast } = inspectValue(value) as any;
const { type } = inferedType;
let caption = getCaptionFromInspectionType(type);
if (
type === InspectionType.FUNCTION ||
type === InspectionType.CLASS ||
type === InspectionType.ELEMENT
) {
if (!isNil(inferedType.identifier)) {
caption = inferedType.identifier;
}
}
return createTypeDef({
name: 'enumvalue',
summary: caption,
detail: type === InspectionType.OBJECT ? prettyObject(ast) : value,
inferedType: type,
});
}
return createTypeDef({ name: 'enumvalue', summary: value });
return computed
? generateTypeFromString(value, 'enumvalue')
: createTypeDef({ name: 'enumvalue', short: value, compact: value });
}
function generateEnum(type: DocgenPropType): TypeDef {
if (Array.isArray(type.value)) {
const values = type.value.reduce(
(acc: any, v: EnumValue) => {
const { summary, detail } = generateEnumValue(v).value;
const { short, compact, full } = generateEnumValue(v);
acc.summary.push(summary);
acc.detail.push(detail);
acc.short.push(short);
acc.compact.push(compact);
acc.full.push(full);
return acc;
},
{ summary: [], detail: [] }
{ short: [], compact: [], full: [] }
);
return createTypeDef({
name: PropTypesType.ENUM,
summary: values.summary.join(' | '),
detail: values.detail.join(' | '),
short: values.short.join(' | '),
compact: values.compact.every((x: string) => !isNil(x)) ? values.compact.join(' | ') : null,
full: values.full.join(' | '),
});
}
return createTypeDef({ name: PropTypesType.ENUM, summary: type.value });
return createTypeDef({ name: PropTypesType.ENUM, short: type.value, compact: type.value });
}
function braceAfter(of: string): string {
@ -278,27 +290,31 @@ function braceAround(of: string): string {
return `[${of}]`;
}
function createArrayOfObjectTypeDef(summary: string, detail: string): TypeDef {
function createArrayOfObjectTypeDef(short: string, compact: string, full: string): TypeDef {
return createTypeDef({
name: PropTypesType.ARRAYOF,
summary: summary === OBJECT_CAPTION ? braceAfter(summary) : braceAround(summary),
detail: braceAround(detail),
short: braceAfter(short),
compact: !isNil(compact) ? braceAround(compact) : null,
full: braceAround(full),
});
}
function generateArray(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
const { name, value, inferedType } = generateType(type.value, extractedProp);
const { summary, detail } = value;
const { name, short, compact, full, inferedType } = generateType(type.value, extractedProp);
if (name === PropTypesType.CUSTOM) {
if (inferedType === InspectionType.OBJECT) {
return createArrayOfObjectTypeDef(summary, detail);
return createArrayOfObjectTypeDef(short, compact, full);
}
} else if (name === PropTypesType.SHAPE) {
return createArrayOfObjectTypeDef(summary, detail);
return createArrayOfObjectTypeDef(short, compact, full);
}
return createTypeDef({ name: PropTypesType.ARRAYOF, summary: braceAfter(detail) });
return createTypeDef({
name: PropTypesType.ARRAYOF,
short: braceAfter(short),
compact: braceAfter(short),
});
}
function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
@ -311,7 +327,11 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD
case PropTypesType.SHAPE:
return generateShape(type, extractedProp);
case PropTypesType.INSTANCEOF:
return createTypeDef({ name: PropTypesType.INSTANCEOF, summary: type.value });
return createTypeDef({
name: PropTypesType.INSTANCEOF,
short: type.value,
compact: type.value,
});
case PropTypesType.OBJECTOF:
return generateObjectOf(type, extractedProp);
case PropTypesType.UNION:
@ -321,37 +341,64 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD
case PropTypesType.ARRAYOF:
return generateArray(type, extractedProp);
default:
return createTypeDef({ name: type.name, summary: type.name });
return createTypeDef({ name: type.name, short: type.name, compact: type.name });
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return createTypeDef({ name: 'unknown', summary: 'unknown' });
return createTypeDef({ name: 'unknown', short: 'unknown', compact: 'unknown' });
}
export function createType(extractedProp: ExtractedProp): PropType {
const { type } = extractedProp.docgenInfo;
switch (type.name) {
case PropTypesType.CUSTOM:
case PropTypesType.SHAPE:
case PropTypesType.INSTANCEOF:
case PropTypesType.OBJECTOF:
case PropTypesType.UNION:
case PropTypesType.ENUM:
case PropTypesType.ARRAYOF: {
const { summary, detail } = generateType(type, extractedProp).value;
return createSummaryValue(summary, summary !== detail ? detail : undefined);
}
case PropTypesType.FUNC: {
const { detail } = generateType(type, extractedProp).value;
return createSummaryValue(detail);
}
default:
return null;
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(type)) {
return null;
}
try {
switch (type.name) {
case PropTypesType.CUSTOM:
case PropTypesType.SHAPE:
case PropTypesType.INSTANCEOF:
case PropTypesType.OBJECTOF:
case PropTypesType.UNION:
case PropTypesType.ENUM:
case PropTypesType.ARRAYOF: {
const { short, compact, full } = generateType(type, extractedProp);
if (!isNil(compact)) {
if (!isTooLongForTypeSummary(compact)) {
return createSummaryValue(compact);
}
}
return createSummaryValue(short, short !== full ? full : undefined);
}
case PropTypesType.FUNC: {
const { short, compact, full } = generateType(type, extractedProp);
let summary = short;
const detail = full;
if (!isTooLongForTypeSummary(full)) {
summary = full;
} else if (!isNil(compact)) {
summary = compact;
}
return createSummaryValue(summary, summary !== detail ? detail : undefined);
}
default:
return null;
}
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
return null;
}

329
addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts
View File

@ -1,156 +1,187 @@
import { generateFuncSignature } from './generateFuncSignature';
import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
import { parseJsDoc } from '../../../lib/jsdocParser';
it('should return an empty string with there is no @params and @returns tags', () => {
const result = generateFuncSignature(null, null);
describe('generateFuncSignature', () => {
it('should return an empty string when there is no @params and @returns tags', () => {
const result = generateFuncSignature(null, null);
expect(result).toBe('');
expect(result).toBe('');
});
it('should return a signature with a single arg when there is a @param tag with a name', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event)');
});
it('should return a signature with a single arg when there is a @param tag with a name and a type', () => {
const { params, returns } = parseJsDoc('@param {SyntheticEvent} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should return a signature with a single arg when there is a @param tag with a name, a type and a desc', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should support @param of record type', () => {
const { params, returns } = parseJsDoc('@param {{a: number}} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: ({a: number}))');
});
it('should support @param of union type', () => {
const { params, returns } = parseJsDoc('@param {(number|boolean)} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: (number|boolean))');
});
it('should support @param of array type', () => {
const { params, returns } = parseJsDoc('@param {number[]} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number[])');
});
it('should support @param with a nullable type', () => {
const { params, returns } = parseJsDoc('@param {?number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param with a non nullable type', () => {
const { params, returns } = parseJsDoc('@param {!number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with []', () => {
const { params, returns } = parseJsDoc('@param {number} [event]').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with =', () => {
const { params, returns } = parseJsDoc('@param {number=} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param of type any', () => {
const { params, returns } = parseJsDoc('@param {*} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: any)');
});
it('should support multiple @param tags', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event\n@param {string} customData'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, customData: string)');
});
it('should return a signature with a return type when there is a @returns with a type', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => string');
});
it('should support @returns of record type', () => {
const { params, returns } = parseJsDoc('@returns {{a: number, b: string}}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => ({a: number, b: string})');
});
it('should support @returns of array type', () => {
const { params, returns } = parseJsDoc('@returns {integer[]}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => integer[]');
});
it('should support @returns of union type', () => {
const { params, returns } = parseJsDoc('@returns {(number|boolean)}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => (number|boolean)');
});
it('should support @returns type any', () => {
const { params, returns } = parseJsDoc('@returns {*}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => any');
});
it('should support @returns of type void', () => {
const { params, returns } = parseJsDoc('@returns {void}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => void');
});
it('should return a full signature when there is a single @param tag and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent) => string');
});
it('should return a full signature when there is a multiple @param tags and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@param {string} data\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, data: string) => string');
});
});
it('should return a signature with a single arg when there is a @param tag with a name', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateFuncSignature(params, returns);
describe('generateShortFuncSignature', () => {
it('should return an empty string when there is no @params and @returns tags', () => {
const result = generateShortFuncSignature(null, null);
expect(result).toBe('(event)');
});
it('should return a signature with a single arg when there is a @param tag with a name and a type', () => {
const { params, returns } = parseJsDoc('@param {SyntheticEvent} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should return a signature with a single arg when there is a @param tag with a name, a type and a desc', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent)');
});
it('should support @param of record type', () => {
const { params, returns } = parseJsDoc('@param {{a: number}} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: ({a: number}))');
});
it('should support @param of union type', () => {
const { params, returns } = parseJsDoc('@param {(number|boolean)} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: (number|boolean))');
});
it('should support @param of array type', () => {
const { params, returns } = parseJsDoc('@param {number[]} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number[])');
});
it('should support @param with a nullable type', () => {
const { params, returns } = parseJsDoc('@param {?number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param with a non nullable type', () => {
const { params, returns } = parseJsDoc('@param {!number} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with []', () => {
const { params, returns } = parseJsDoc('@param {number} [event]').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support optional @param with =', () => {
const { params, returns } = parseJsDoc('@param {number=} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: number)');
});
it('should support @param of type any', () => {
const { params, returns } = parseJsDoc('@param {*} event').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: any)');
});
it('should support multiple @param tags', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event\n@param {string} customData'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, customData: string)');
});
it('should return a signature with a return type when there is a @returns with a type', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => string');
});
it('should support @returns of record type', () => {
const { params, returns } = parseJsDoc('@returns {{a: number, b: string}}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => ({a: number, b: string})');
});
it('should support @returns of array type', () => {
const { params, returns } = parseJsDoc('@returns {integer[]}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => integer[]');
});
it('should support @returns of union type', () => {
const { params, returns } = parseJsDoc('@returns {(number|boolean)}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => (number|boolean)');
});
it('should support @returns type any', () => {
const { params, returns } = parseJsDoc('@returns {*}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => any');
});
it('should support @returns of type void', () => {
const { params, returns } = parseJsDoc('@returns {void}').extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('() => void');
});
it('should return a full signature when there is a single @param tag and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent) => string');
});
it('should return a full signature when there is a multiple @param tags and a @returns', () => {
const { params, returns } = parseJsDoc(
'@param {SyntheticEvent} event - React event.\n@param {string} data\n@returns {string}'
).extractedTags;
const result = generateFuncSignature(params, returns);
expect(result).toBe('(event: SyntheticEvent, data: string) => string');
expect(result).toBe('');
});
it('should return ( ... ) when there is @params', () => {
const { params, returns } = parseJsDoc('@param event').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('( ... )');
});
it('should return ( ... ) => returnsType when there is @params and a @returns', () => {
const { params, returns } = parseJsDoc('@param event\n@returns {string}').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('( ... ) => string');
});
it('should return () => returnsType when there is only a @returns', () => {
const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
const result = generateShortFuncSignature(params, returns);
expect(result).toBe('() => string');
});
});

26
addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
View File

@ -37,3 +37,29 @@ export function generateFuncSignature(
return funcParts.join(' ');
}
export function generateShortFuncSignature(
params: ExtractedJsDocParam[],
returns: ExtractedJsDocReturns
): string {
const hasParams = !isNil(params);
const hasReturns = !isNil(returns);
if (!hasParams && !hasReturns) {
return '';
}
const funcParts = [];
if (hasParams) {
funcParts.push('( ... )');
} else {
funcParts.push('()');
}
if (hasReturns) {
funcParts.push(`=> ${returns.getTypeName()}`);
}
return funcParts.join(' ');
}

577
addons/docs/src/frameworks/react/propTypes/handleProp.test.ts → addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
View File

@ -2,12 +2,17 @@
import { PropDef } from '@storybook/components';
import PropTypes from 'prop-types';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
@ -32,7 +37,9 @@ function createDocgenProp({
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
const component = () => {
return <div>Hey!</div>;
};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
@ -42,8 +49,12 @@ function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} })
return component;
}
function extractPropDef(component: Component): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhancePropTypesProp', () => {
@ -93,7 +104,7 @@ describe('enhancePropTypesProp', () => {
type: {
name: 'custom',
raw:
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n}',
'{\n text: PropTypes.string.isRequired,\n value1: PropTypes.string.isRequired,\n value2: PropTypes.string.isRequired,\n value3: PropTypes.string.isRequired,\n value4: PropTypes.string.isRequired,\n}',
},
});
@ -103,12 +114,28 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `{
text: string,
value: string
value1: string,
value2: string,
value3: string,
value4: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep object as summary', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string.isRequired,\n }}',
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object');
});
it('should use identifier of a React element when available', () => {
const component = createTestComponent({
type: {
@ -133,7 +160,8 @@ describe('enhancePropTypesProp', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '<div>Hello world!</div>',
raw:
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
},
});
@ -141,7 +169,8 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');
const expectedDetail = '<div>Hello world!</div>';
const expectedDetail =
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
@ -150,7 +179,7 @@ describe('enhancePropTypesProp', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: '() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}',
raw: '() => {\n return <div>Inlined FunctionalComponent!</div>;\n}',
},
});
@ -159,23 +188,43 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
return <div>Inlined FunctionalComponent!</div>;
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should return "custom" when it is not a known type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: 'Symbol("Hey!")',
},
describe('when it is not a known type', () => {
it('should return "custom" when its a long type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw:
'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")',
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('custom');
expect(type.detail).toBe(
'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")'
);
});
const { type } = extractPropDef(component);
it('should return "custom" when its a short type', () => {
const component = createTestComponent({
type: {
name: 'custom',
raw: 'Symbol("Hey!")',
},
});
expect(type.summary).toBe('custom');
const { type } = extractPropDef(component);
expect(type.summary).toBe('Symbol("Hey!")');
expect(type.detail).toBeUndefined();
});
});
});
@ -254,6 +303,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
});
@ -265,12 +318,37 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `{
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
}`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep shape as summary', () => {
const component = createTestComponent({
type: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object');
});
it('should support enum of string', () => {
const component = createTestComponent({
type: {
@ -326,6 +404,50 @@ describe('enhancePropTypesProp', () => {
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object in enum summary', () => {
const component = createTestComponent({
type: {
name: 'enum',
value: [
{
value: '{\n text: PropTypes.string.isRequired,\n}',
computed: true,
},
{
value: '{\n foo: PropTypes.string,\n}',
computed: true,
},
],
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('{ text: string } | { foo: string }');
});
it('should not have a deep object in an enum summary', () => {
const component = createTestComponent({
type: {
name: 'enum',
value: [
{
value: '{\n text: { foo: PropTypes.string.isRequired,\n }\n}',
computed: true,
},
{
value: '{\n foo: PropTypes.string,\n}',
computed: true,
},
],
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object | object');
});
it('should support enum of element', () => {
const component = createTestComponent({
type: {
@ -470,7 +592,7 @@ describe('enhancePropTypesProp', () => {
value: {
name: 'custom',
raw:
'{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n}',
'{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n anotherAnother: PropTypes.string,\n}',
},
},
});
@ -482,12 +604,29 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `objectOf({
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
})`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent({
type: {
name: 'objectOf',
value: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string,\n }\n}',
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('objectOf(object)');
});
it('should support objectOf short shape', () => {
const component = createTestComponent({
type: {
@ -529,6 +668,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
},
@ -541,11 +684,39 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `objectOf({
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
})`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have a deep shape in summary', () => {
const component = createTestComponent({
type: {
name: 'objectOf',
value: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('objectOf(object)');
});
});
it('should support union', () => {
@ -628,7 +799,7 @@ describe('enhancePropTypesProp', () => {
value: {
name: 'custom',
raw:
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n}',
'{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n anotherAnother: PropTypes.string.isRequired,\n}',
},
},
});
@ -639,12 +810,30 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `[{
text: string,
value: string
value: string,
another: string,
anotherAnother: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent({
type: {
name: 'arrayOf',
value: {
name: 'custom',
raw: '{\n foo: { bar: PropTypes.string, }\n}',
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object[]');
});
it('should support array of short shape', () => {
const component = createTestComponent({
type: {
@ -686,6 +875,10 @@ describe('enhancePropTypesProp', () => {
name: 'string',
required: false,
},
anotherAnother: {
name: 'string',
required: false,
},
},
},
},
@ -698,29 +891,60 @@ describe('enhancePropTypesProp', () => {
const expectedDetail = `[{
foo: string,
bar: string,
another: string
another: string,
anotherAnother: string
}]`;
expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep shape in summary', () => {
const component = createTestComponent({
type: {
name: 'arrayOf',
value: {
name: 'shape',
value: {
bar: {
name: 'shape',
value: {
hey: {
name: 'string',
required: false,
},
},
required: false,
},
},
},
},
});
const { type } = extractPropDef(component);
expect(type.summary).toBe('object[]');
});
});
});
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
function createTestComponent(
defaultValue: DocgenPropDefaultValue,
typeName = 'anything-is-fine'
): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
type: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
type: { name: typeName },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
@ -731,7 +955,9 @@ describe('enhancePropTypesProp', () => {
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
@ -746,8 +972,18 @@ describe('enhancePropTypesProp', () => {
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
@ -757,7 +993,9 @@ describe('enhancePropTypesProp', () => {
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -774,7 +1012,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
@ -788,7 +1028,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
@ -802,7 +1044,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -812,23 +1054,33 @@ describe('enhancePropTypesProp', () => {
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -843,7 +1095,7 @@ describe('enhancePropTypesProp', () => {
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -851,7 +1103,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
@ -861,7 +1113,9 @@ describe('enhancePropTypesProp', () => {
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
@ -879,6 +1133,241 @@ describe('enhancePropTypesProp', () => {
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

23
addons/docs/src/frameworks/react/propTypes/handleProp.ts
View File

@ -2,11 +2,12 @@ import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { ExtractedProp } from '../../../lib/docgen';
import { createType } from './createType';
import { createDefaultValue } from '../lib/createDefaultValue';
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
import { Component } from '../../../blocks/shared';
import { keepOriginalDefinitionOrder } from './sortProps';
import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers';
export function enhancePropTypesProp(extractedProp: ExtractedProp): PropDef {
export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
const { propDef } = extractedProp;
const newtype = createType(extractedProp);
@ -15,8 +16,19 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp): PropDef {
}
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
} else if (!isNil(rawDefaultProp)) {
const newDefaultValue = createDefaultValueFromRawDefaultProp(
rawDefaultProp,
propDef,
rawDefaultPropTypeResolvers
);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
@ -29,7 +41,10 @@ export function enhancePropTypesProps(
extractedProps: ExtractedProp[],
component: Component
): PropDef[] {
const enhancedProps = extractedProps.map(enhancePropTypesProp);
const rawDefaultProps = !isNil(component.defaultProps) ? component.defaultProps : {};
const enhancedProps = extractedProps.map(x =>
enhancePropTypesProp(x, rawDefaultProps[x.propDef.name])
);
return keepOriginalDefinitionOrder(enhancedProps, component);
}

31
addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts Normal file
View File

@ -0,0 +1,31 @@
import { isNil } from 'lodash';
import { TypeResolver, extractFunctionName, createTypeResolvers } from '../lib/defaultValues';
import { createSummaryValue } from '../../../lib';
import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib';
import {
getPrettyElementIdentifier,
getPrettyFuncIdentifier,
} from '../lib/defaultValues/prettyIdentifier';
import { inspectValue, InspectionFunction } from '../lib/inspection';
const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => {
const isElement = type.summary === 'element' || type.summary === 'elementType';
const funcName = extractFunctionName(rawDefaultProp, name);
if (!isNil(funcName)) {
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isElement) {
return createSummaryValue(getPrettyElementIdentifier(funcName));
}
const { hasParams } = inspectValue(rawDefaultProp.toString()).inferedType as InspectionFunction;
return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
}
return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
};
export const rawDefaultPropTypeResolvers = createTypeResolvers({
function: funcResolver,
});

223
addons/docs/src/frameworks/react/typeScript/handleProp.test.ts
View File

@ -1,223 +0,0 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function extractPropDef(component: Component): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
});
});

502
addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx Normal file
View File

@ -0,0 +1,502 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {
return <div>Hey!</div>;
};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(
defaultValue: DocgenPropDefaultValue,
typeName = 'anything-is-fine'
): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: typeName },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

12
addons/docs/src/frameworks/react/typeScript/handleProp.ts
View File

@ -1,14 +1,20 @@
import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { ExtractedProp } from '../../../lib/docgen';
import { createDefaultValue } from '../lib/createDefaultValue';
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
export function enhanceTypeScriptProp(extractedProp: ExtractedProp): PropDef {
export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
const { propDef } = extractedProp;
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
} else if (!isNil(rawDefaultProp)) {
const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}

7
addons/docs/src/lib/docgen/createPropDef.ts
View File

@ -13,6 +13,11 @@ export type PropDefFactory = (
jsDocParsingResult?: JsDocParsingResult
) => PropDef;
function createType(type: DocgenType) {
// A type could be null if a defaultProp has been provided without a type definition.
return !isNil(type) ? createSummaryValue(type.name) : null;
}
function createDefaultValue(defaultValue: DocgenPropDefaultValue): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;
@ -30,7 +35,7 @@ function createBasicPropDef(name: string, type: DocgenType, docgenInfo: DocgenIn
return {
name,
type: createSummaryValue(type.name),
type: createType(type),
required,
description,
defaultValue: createDefaultValue(defaultValue),

37
addons/docs/src/lib/docgen/flow/createPropDef.test.ts
View File

@ -97,11 +97,40 @@ describe('type', () => {
flowType: {
name: 'signature',
type: 'object',
raw: '{ (x: string): void, prop: string }',
raw:
'{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }',
signature: {
properties: [
{
key: 'prop',
key: 'prop1',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop2',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop3',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop4',
value: {
name: 'string',
required: true,
},
},
{
key: 'prop5',
value: {
name: 'string',
required: true,
@ -133,7 +162,9 @@ describe('type', () => {
const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
expect(type.summary).toBe('object');
expect(type.detail).toBe('{ (x: string): void, prop: string }');
expect(type.detail).toBe(
'{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }'
);
});
it('should support func signature', () => {

5
addons/docs/src/lib/docgen/flow/createType.ts
View File

@ -55,6 +55,11 @@ function generateDefault({ name, raw }: DocgenFlowType): PropType {
}
export function createType(type: DocgenFlowType): PropType {
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(type)) {
return null;
}
switch (type.name) {
case FlowTypesType.UNION:
return generateUnion(type as DocgenFlowUnionType);

2
addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts
View File

@ -4,7 +4,7 @@ import { DocgenInfo } from '../types';
import { createSummaryValue } from '../../utils';
import { isDefaultValueBlacklisted } from '../utils/defaultValue';
export function createDefaultValue({ tsType, defaultValue }: DocgenInfo): PropDefaultValue {
export function createDefaultValue({ defaultValue }: DocgenInfo): PropDefaultValue {
if (!isNil(defaultValue)) {
const { value } = defaultValue;

6
addons/docs/src/lib/docgen/typeScript/createType.ts
View File

@ -1,8 +1,14 @@
import { PropType } from '@storybook/components';
import { isNil } from 'lodash';
import { DocgenInfo } from '../types';
import { createSummaryValue } from '../../utils';
export function createType({ tsType, required }: DocgenInfo): PropType {
// A type could be null if a defaultProp has been provided without a type definition.
if (isNil(tsType)) {
return null;
}
if (!required) {
return createSummaryValue(tsType.name.replace(' | undefined', ''));
}

0
addons/docs/src/lib/docgen/utils/docgen.ts → addons/docs/src/lib/docgen/utils/docgenInfo.ts
View File

2
addons/docs/src/lib/docgen/utils/index.ts
View File

@ -1,3 +1,3 @@
export * from './defaultValue';
export * from './string';
export * from './docgen';
export * from './docgenInfo';

2
addons/docs/src/lib/utils.ts
View File

@ -1,6 +1,6 @@
import { PropSummaryValue } from '@storybook/components';
export const MAX_TYPE_SUMMARY_LENGTH = 30;
export const MAX_TYPE_SUMMARY_LENGTH = 70;
export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50;
export function isTooLongForTypeSummary(value: string): boolean {

1
examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js
View File

@ -1,3 +1,4 @@
// @ts-ignore
import PropTypes from 'prop-types';
export const PRESET_SHAPE = {

101
examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
View File

@ -1,6 +1,6 @@
/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
import React from 'react';
// @ts-ignore
import PropTypes, { string, shape } from 'prop-types';
import { PRESET_SHAPE, SOME_PROP_TYPES } from './ext';
@ -34,6 +34,76 @@ function concat(a, b) {
return a + b;
}
const SOME_INLINE_PROP_TYPES = {
/**
* Hey Hey!
*/
inlineString: PropTypes.string,
inlineBool: PropTypes.bool,
inlineNumber: PropTypes.number,
inlineObj: PropTypes.shape({
foo: PropTypes.string,
}),
inlineArray: PropTypes.arrayOf(PropTypes.number),
inlineArrayOfObjects: PropTypes.arrayOf({ foo: PropTypes.string }),
inlineFunctionalElement: PropTypes.element,
inlineFunctionalElementInline: PropTypes.element,
inlineFunctionalElementInlineReturningNull: PropTypes.element,
inlineHtmlElement: PropTypes.element,
inlineFunctionalElementInlineWithProps: PropTypes.element,
inlineFunctionalElementNamedInline: PropTypes.element,
inlineClassElement: PropTypes.element,
inlineClassElementWithProps: PropTypes.element,
inlineClassElementWithChildren: PropTypes.element,
inlineClassElementInline: PropTypes.element,
inlineFunc: PropTypes.func,
};
const SOME_INLINE_DEFAULT_PROPS = {
inlineString: 'Inline prop default value',
inlineBool: true,
inlineNumber: 10,
inlineObj: { foo: 'bar' },
inlineArray: [1, 2, 3],
inlineArrayOfObjects: [
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
],
inlineFunctionalElement: <FunctionalComponent />,
inlineFunctionalElementInline: () => {
return <div>Inlined FunctionnalComponent!</div>;
},
inlineFunctionalElementInlineReturningNull: () => {
return null;
},
inlineHtmlElement: <div>Hey!</div>,
// eslint-disable-next-line react/prop-types
inlineFunctionalElementInlineWithProps: ({ foo }) => {
return <div>{foo}</div>;
},
inlineFunctionalElementNamedInline: function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
},
inlineClassElement: <ClassComponent />,
inlineClassElementWithProps: <ClassComponent className="toto" />,
inlineClassElementWithChildren: (
<ClassComponent>
<div>hey!</div>
</ClassComponent>
),
inlineClassElementInline: class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
},
inlineFunc: function add(a, b) {
return a + b;
},
};
export const PropTypesProps = () => <div>PropTypes!</div>;
PropTypesProps.propTypes = {
@ -50,6 +120,18 @@ PropTypesProps.propTypes = {
* @returns {ComplexObject} - Returns a complex object.
*/
funcWithJsDoc: PropTypes.func,
/**
* @param {string} foo - A foo value.
* @param {number} bar - A bar value.
* @param {number} bar1 - A bar value.
* @param {number} bar2 - A bar value.
* @param {number} bar3 - A bar value.
* @param {number} bar4 - A bar value.
* @param {number} bar5 - A bar value.
* @param {number} bar6 - A bar value.
* @returns {ComplexObject} - Returns a complex object.
*/
veryLongFuncWithJsDoc: PropTypes.func,
namedDefaultFunc: PropTypes.func,
number: PropTypes.number,
/**
@ -109,6 +191,15 @@ PropTypesProps.propTypes = {
oneOfEval: PropTypes.oneOf((() => ['News', 'Photos'])()),
oneOfVar: PropTypes.oneOf(POSITIONS),
oneOfNested: PropTypes.oneOf(['News', ['bottom-left', 'botton-center', 'bottom-right']]),
oneOfNestedSimpleInlineObject: PropTypes.oneOf(['News', [{ foo: PropTypes.string }]]),
oneOfNestedComplexInlineObject: PropTypes.oneOf([
'News',
[{ nested: { foo: PropTypes.string } }],
]),
oneOfNestedComplexShape: PropTypes.oneOf([
'News',
[{ nested: PropTypes.shape({ foo: PropTypes.string }) }],
]),
/**
* A multi-type prop is also valid and is displayed as `Union<String|Message>`
*/
@ -245,6 +336,9 @@ PropTypesProps.propTypes = {
}),
oneOf: PropTypes.oneOf(['one', 'two']),
}),
shapeWithArray: PropTypes.shape({
arr: PropTypes.arrayOf({ foo: PropTypes.string }),
}),
namedShape: NAMED_SHAPE,
namedObjectInShape: PropTypes.shape(NAMED_OBJECT),
exact: PropTypes.exact({
@ -261,6 +355,7 @@ PropTypesProps.propTypes = {
requiredString: PropTypes.string.isRequired,
nullDefaultValue: PropTypes.string,
undefinedDefaultValue: PropTypes.string,
...SOME_INLINE_PROP_TYPES,
...SOME_PROP_TYPES,
};
@ -284,7 +379,7 @@ PropTypesProps.defaultProps = {
},
symbol: Symbol('Default symbol'),
node: <div>Hello!</div>,
functionalElement: <FunctionalComponent />,
functionalElement: <FunctionalComponent className="toto" />,
functionalElementInline: () => {
return <div>Inlined FunctionnalComponent!</div>;
},
@ -318,6 +413,7 @@ PropTypesProps.defaultProps = {
oneOfNested: 'top-right',
oneOfType: 'hello',
arrayOfPrimitive: [1, 2, 3],
arrayOfString: ['0px', '0px'],
arrayOfNamedObject: [{ text: 'foo', value: 'bar' }],
arrayOfShortInlineObject: [{ foo: 'bar' }],
arrayOfInlineObject: [{ text: 'foo', value: 'bar' }],
@ -362,4 +458,5 @@ PropTypesProps.defaultProps = {
optionalString: 'Default String',
nullDefaultValue: null,
undefinedDefaultValue: undefined,
...SOME_INLINE_DEFAULT_PROPS,
};

6
lib/components/src/blocks/PropsTable/PropRow.tsx
View File

@ -44,12 +44,12 @@ const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription })
marginTop: hasDescription ? '4px' : '0',
}));
const TypeWithJsDoc = styled.div(({ theme }) => ({
const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({
color:
theme.base === 'light'
? transparentize(0.1, theme.color.defaultText)
: transparentize(0.2, theme.color.defaultText),
marginTop: '12px',
marginTop: hasDescription ? '12px' : '0',
marginBottom: '12px',
}));
@ -72,7 +72,7 @@ export const PropRow: FC<PropRowProps> = ({
)}
{!isNil(jsDocTags) ? (
<>
<TypeWithJsDoc>
<TypeWithJsDoc hasDescription={hasDescription}>
<PropValue value={type} />
</TypeWithJsDoc>
<PropJsDoc tags={jsDocTags} />

1
lib/components/src/blocks/PropsTable/PropValue.tsx
View File

@ -33,7 +33,6 @@ const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
color: theme.color.secondary,
margin: 0,
paddingTop: `${DIRTY_PADDING_TOP_IN_PX}px`,
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
}));

2
yarn.lock
View File

@ -25256,7 +25256,7 @@ react-draggable@^4.0.3:
classnames "^2.2.5"
prop-types "^15.6.0"
react-element-to-jsx-string@^14.0.2:
react-element-to-jsx-string@^14.0.2, react-element-to-jsx-string@^14.1.0:
version "14.1.0"
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.1.0.tgz#31fcc3a82459d5e57ef852aa6879bcd0a578a8cb"
integrity sha512-uvfAsY6bn2c8HMBkxwj+2MMXcvNIkKDl0aZg2Jhzp+c096hZaXUNivVCP2H4RBtmGSSJcfMqQA5oPk8YdqFOVw==