From 2204a0ea2a1b63cbb97d7ae714dd8f64d6799b11 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 09:28:34 -0500 Subject: [PATCH 01/19] Refactor the prop types createType to take into account the depth of the object for summary candidate --- .../lib/{ => codeGeneration}/generateCode.ts | 0 .../lib/codeGeneration/generateObject.ts | 13 + .../react/lib/createDefaultValue.ts | 11 +- .../react/lib/inspection/acornParser.ts | 22 +- .../frameworks/react/lib/inspection/types.ts | 1 + .../frameworks/react/propTypes/createType.ts | 249 +++++++++++------- .../react/propTypes/generateFuncSignature.ts | 27 +- addons/docs/src/lib/utils.ts | 2 +- .../stories/docgen-tests/types/prop-types.js | 12 + 9 files changed, 219 insertions(+), 118 deletions(-) rename addons/docs/src/frameworks/react/lib/{ => codeGeneration}/generateCode.ts (100%) create mode 100644 addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts diff --git a/addons/docs/src/frameworks/react/lib/generateCode.ts b/addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/generateCode.ts rename to addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts diff --git a/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts b/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts new file mode 100644 index 00000000000..bfa754f4860 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts @@ -0,0 +1,13 @@ +import { generateCode } from './generateCode'; + +export function generateCompactObject(ast: any): string { + let result = 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 (!result.endsWith(' }')) { + result = `${result.slice(0, -1)} }`; + } + + return result; +} diff --git a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts index 19339f4b136..9e775b0b28c 100644 --- a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts +++ b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts @@ -7,7 +7,7 @@ import { ELEMENT_CAPTION, ARRAY_CAPTION, } from '../propTypes/captions'; -import { generateCode } from './generateCode'; +import { generateCode } from './codeGeneration/generateCode'; import { InspectionFunction, InspectionResult, @@ -18,6 +18,7 @@ import { } from './inspection'; import { isHtmlTag } from './isHtmlTag'; import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib'; +import { generateCompactObject } from './codeGeneration/generateObject'; function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string { const { type, identifier } = inferedType; @@ -35,13 +36,7 @@ function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): st } 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)} }`; - } + const prettyCaption = generateCompactObject(ast); return !isTooLongForDefaultValueSummary(prettyCaption) ? createSummaryValue(prettyCaption) diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts index 3617ea75350..2ab1ef8f6f4 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts @@ -135,18 +135,30 @@ function parseCall(callNode: estree.CallExpression): ParsingResult { + let depth = 0; + + acornWalk.simple( + objectNode, + { + ObjectExpression() { + depth += 1; + }, + ArrayExpression() { + depth += 1; + }, + }, + ACORN_WALK_VISITORS + ); + return { - inferedType: { type: InspectionType.OBJECT }, + inferedType: { type: InspectionType.OBJECT, depth }, ast: objectNode, }; } diff --git a/addons/docs/src/frameworks/react/lib/inspection/types.ts b/addons/docs/src/frameworks/react/lib/inspection/types.ts index c339e42d2a9..3b723d5e1c4 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/types.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/types.ts @@ -24,6 +24,7 @@ export interface InspectionLiteral extends InspectionInferedType { export interface InspectionObject extends InspectionInferedType { type: InspectionType.OBJECT; + depth: number; } export interface InspectionArray extends InspectionInferedType { diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index 501a9a2b88b..2348bd0c67a 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -1,9 +1,9 @@ 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 { generateCode } from '../lib/codeGeneration/generateCode'; +import { generateFuncSignature, generateCompactFuncSignature } from './generateFuncSignature'; import { OBJECT_CAPTION, ARRAY_CAPTION, @@ -12,8 +12,15 @@ import { ELEMENT_CAPTION, CUSTOM_CAPTION, } from './captions'; -import { InspectionType, inspectValue } from '../lib/inspection'; +import { + InspectionType, + inspectValue, + InspectionElement, + InspectionObject, + InspectionIdentifiableInferedType, +} from '../lib/inspection'; import { isHtmlTag } from '../lib/isHtmlTag'; +import { generateCompactObject } from '../lib/codeGeneration/generateObject'; 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, }; } @@ -68,7 +78,9 @@ function cleanPropTypes(value: string): string { } function prettyObject(ast: any, compact = false): string { - return cleanPropTypes(generateCode(ast, compact)); + const obj = compact ? generateCompactObject(ast) : generateCode(ast); + + return cleanPropTypes(obj); } function getCaptionFromInspectionType(type: InspectionType): string { @@ -88,59 +100,56 @@ function getCaptionFromInspectionType(type: InspectionType): string { } } -function generateValuesForObjectAst(ast: any): [string, string] { - let summary = prettyObject(ast, true); - let detail; - - if (!isTooLongForTypeSummary(summary)) { - detail = summary; - } else { - summary = OBJECT_CAPTION; - detail = prettyObject(ast); - } - - return [summary, detail]; -} - function generateCustom({ raw }: DocgenPropType): TypeDef { if (!isNil(raw)) { const { inferedType, ast } = inspectValue(raw); - const { type, identifier } = inferedType as any; + const { type } = inferedType; - let summary; - let detail; + let short; + let compact; + let full; switch (type) { case InspectionType.IDENTIFIER: case InspectionType.LITERAL: - summary = raw; + short = raw; + compact = raw; break; case InspectionType.OBJECT: { - const [objectCaption, objectValue] = generateValuesForObjectAst(ast); + const { depth } = inferedType as InspectionObject; - summary = objectCaption; - detail = objectValue; + short = OBJECT_CAPTION; + compact = depth === 1 ? prettyObject(ast, true) : null; + full = prettyObject(ast); break; } - case InspectionType.ELEMENT: - summary = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION; - detail = raw; + case InspectionType.ELEMENT: { + const { identifier } = inferedType as InspectionElement; + + short = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION; + compact = raw; break; + } default: - summary = getCaptionFromInspectionType(type); - detail = raw; + short = getCaptionFromInspectionType(type); + compact = raw; break; } return createTypeDef({ name: PropTypesType.CUSTOM, - summary, - detail, + short, + compact, + full, inferedType: type, }); } - 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 +159,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: FUNCTION_CAPTION, + compact: generateCompactFuncSignature(jsDocTags.params, jsDocTags.returns), + 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 +208,92 @@ 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 }); } +// TODO: Je fais quoi avec un array qui contient un objet avec du depth? +// -> aconParser retourne le depth d'un array? function generateEnumValue({ value, computed }: EnumValue): TypeDef { if (computed) { - const { inferedType, ast } = inspectValue(value) as any; + const { inferedType, ast } = inspectValue(value); const { type } = inferedType; - let caption = getCaptionFromInspectionType(type); + let short = getCaptionFromInspectionType(type); + let compact = value; + let full = value; if ( type === InspectionType.FUNCTION || type === InspectionType.CLASS || type === InspectionType.ELEMENT ) { - if (!isNil(inferedType.identifier)) { - caption = inferedType.identifier; + const { identifier } = inferedType as InspectionIdentifiableInferedType; + + if (!isNil(identifier)) { + short = identifier; } + } else if (type === InspectionType.OBJECT) { + const { depth } = inferedType as InspectionObject; + + compact = depth === 1 ? prettyObject(ast, true) : null; + full = prettyObject(ast); } return createTypeDef({ name: 'enumvalue', - summary: caption, - detail: type === InspectionType.OBJECT ? prettyObject(ast) : value, + short, + compact, + full, inferedType: type, }); } - return createTypeDef({ name: 'enumvalue', summary: value }); + return 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 +304,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 +341,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,14 +355,14 @@ 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 { @@ -342,14 +376,29 @@ export function createType(extractedProp: ExtractedProp): PropType { case PropTypesType.UNION: case PropTypesType.ENUM: case PropTypesType.ARRAYOF: { - const { summary, detail } = generateType(type, extractedProp).value; + const { short, compact, full } = generateType(type, extractedProp); - return createSummaryValue(summary, summary !== detail ? detail : undefined); + if (!isNil(compact)) { + if (!isTooLongForTypeSummary(compact)) { + return createSummaryValue(compact); + } + } + + return createSummaryValue(short, short !== full ? full : undefined); } case PropTypesType.FUNC: { - const { detail } = generateType(type, extractedProp).value; + const { short, compact, full } = generateType(type, extractedProp); - return createSummaryValue(detail); + 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; diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index 68cc0a5217a..239468d04cb 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -8,10 +8,6 @@ export function generateFuncSignature( const hasParams = !isNil(params); const hasReturns = !isNil(returns); - if (!hasParams && !hasReturns) { - return ''; - } - const funcParts = []; if (hasParams) { @@ -37,3 +33,26 @@ export function generateFuncSignature( return funcParts.join(' '); } + +// TODO: Add tests +export function generateCompactFuncSignature( + params: ExtractedJsDocParam[], + returns: ExtractedJsDocReturns +): string { + const hasParams = !isNil(params); + const hasReturns = !isNil(returns); + + const funcParts = []; + + if (hasParams) { + funcParts.push('( ... )'); + } else { + funcParts.push('()'); + } + + if (hasReturns) { + funcParts.push(`=> ${returns.getTypeName()}`); + } + + return funcParts.join(' '); +} diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts index 2c81e5003b3..db87763a53c 100644 --- a/addons/docs/src/lib/utils.ts +++ b/addons/docs/src/lib/utils.ts @@ -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 { diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js index 71cbc5841cb..ee200ca395e 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js @@ -50,6 +50,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, /** From 73a79f2722205ebe403d95ffa6bf2c4aedf44def Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 12:28:20 -0500 Subject: [PATCH 02/19] Added depth logic for array and fix escodegen formatting issue with multi line arrays --- .../react/lib/codeGeneration/generateCode.ts | 25 --- .../lib/codeGeneration/generateObject.ts | 13 -- .../react/lib/createDefaultValue.ts | 42 ++-- .../src/frameworks/react/lib/generateCode.ts | 58 +++++ .../react/lib/inspection/acornParser.ts | 38 ++-- .../frameworks/react/lib/inspection/types.ts | 1 + .../frameworks/react/propTypes/createType.ts | 212 +++++++++--------- .../docgen/utils/{docgen.ts => docgenInfo.ts} | 0 .../stories/docgen-tests/types/prop-types.js | 12 + 9 files changed, 216 insertions(+), 185 deletions(-) delete mode 100644 addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts delete mode 100644 addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts create mode 100644 addons/docs/src/frameworks/react/lib/generateCode.ts rename addons/docs/src/lib/docgen/utils/{docgen.ts => docgenInfo.ts} (100%) diff --git a/addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts b/addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts deleted file mode 100644 index 092860023c8..00000000000 --- a/addons/docs/src/frameworks/react/lib/codeGeneration/generateCode.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { generate } from 'escodegen'; - -const BASIC_OPTIONS = { - format: { - indent: { - style: ' ', - }, - semicolons: false, - }, -}; - -const COMPACT_OPTIONS = { - ...BASIC_OPTIONS, - format: { - newline: '', - }, -}; - -const PRETTY_OPTIONS = { - ...BASIC_OPTIONS, -}; - -export function generateCode(ast: any, compact = false): string { - return generate(ast, compact ? COMPACT_OPTIONS : PRETTY_OPTIONS); -} diff --git a/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts b/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts deleted file mode 100644 index bfa754f4860..00000000000 --- a/addons/docs/src/frameworks/react/lib/codeGeneration/generateObject.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { generateCode } from './generateCode'; - -export function generateCompactObject(ast: any): string { - let result = 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 (!result.endsWith(' }')) { - result = `${result.slice(0, -1)} }`; - } - - return result; -} diff --git a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts index 9e775b0b28c..95ddd56aeb3 100644 --- a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts +++ b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts @@ -7,7 +7,6 @@ import { ELEMENT_CAPTION, ARRAY_CAPTION, } from '../propTypes/captions'; -import { generateCode } from './codeGeneration/generateCode'; import { InspectionFunction, InspectionResult, @@ -18,7 +17,7 @@ import { } from './inspection'; import { isHtmlTag } from './isHtmlTag'; import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib'; -import { generateCompactObject } from './codeGeneration/generateObject'; +import { generateObjectCode, generateCode, generateArrayCode } from './generateCode'; function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string { const { type, identifier } = inferedType; @@ -36,11 +35,11 @@ function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): st } function generateObject({ ast }: InspectionResult): PropDefaultValue { - const prettyCaption = generateCompactObject(ast); + const prettyCaption = generateObjectCode(ast, true); return !isTooLongForDefaultValueSummary(prettyCaption) ? createSummaryValue(prettyCaption) - : createSummaryValue(OBJECT_CAPTION, generateCode(ast)); + : createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast)); } function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue { @@ -88,26 +87,33 @@ function generateElement( } function generateArray({ ast }: InspectionResult): PropDefaultValue { - const prettyCaption = generateCode(ast, true); + const prettyCaption = generateArrayCode(ast, true); return !isTooLongForDefaultValueSummary(prettyCaption) ? createSummaryValue(prettyCaption) - : createSummaryValue(ARRAY_CAPTION, generateCode(ast)); + : createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast)); } export function createDefaultValue(defaultValue: string): PropDefaultValue { - const inspectionResult = inspectValue(defaultValue); + 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; + 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; } diff --git a/addons/docs/src/frameworks/react/lib/generateCode.ts b/addons/docs/src/frameworks/react/lib/generateCode.ts new file mode 100644 index 00000000000..c64519c8da2 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/generateCode.ts @@ -0,0 +1,58 @@ +import { generate } from 'escodegen'; +import dedent from 'ts-dedent'; + +const BASIC_OPTIONS = { + format: { + indent: { + style: ' ', + }, + semicolons: false, + }, +}; + +const COMPACT_OPTIONS = { + ...BASIC_OPTIONS, + format: { + newline: '', + }, +}; + +const PRETTY_OPTIONS = { + ...BASIC_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 ? generateArray(ast) : generateCode(ast, true); +} + +function generateArray(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; +} diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts index 2ab1ef8f6f4..faf403011c7 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts @@ -35,6 +35,25 @@ function extractIdentifierName(identifierNode: any) { return !isNil(identifierNode) ? identifierNode.name : null; } +function calculateNodeDepth(node: estree.Expression): number { + let depth = 0; + + acornWalk.simple( + node, + { + ObjectExpression() { + depth += 1; + }, + ArrayExpression() { + depth += 1; + }, + }, + ACORN_WALK_VISITORS + ); + + return depth; +} + function parseIdentifier(identifierNode: estree.Identifier): ParsingResult { return { inferedType: { @@ -142,30 +161,15 @@ function parseCall(callNode: estree.CallExpression): ParsingResult { - let depth = 0; - - acornWalk.simple( - objectNode, - { - ObjectExpression() { - depth += 1; - }, - ArrayExpression() { - depth += 1; - }, - }, - ACORN_WALK_VISITORS - ); - return { - inferedType: { type: InspectionType.OBJECT, depth }, + inferedType: { type: InspectionType.OBJECT, depth: calculateNodeDepth(objectNode) }, ast: objectNode, }; } function parseArray(arrayNode: estree.ArrayExpression): ParsingResult { return { - inferedType: { type: InspectionType.ARRAY }, + inferedType: { type: InspectionType.ARRAY, depth: calculateNodeDepth(arrayNode) }, ast: arrayNode, }; } diff --git a/addons/docs/src/frameworks/react/lib/inspection/types.ts b/addons/docs/src/frameworks/react/lib/inspection/types.ts index 3b723d5e1c4..85be60dbc51 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/types.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/types.ts @@ -29,6 +29,7 @@ export interface InspectionObject extends InspectionInferedType { export interface InspectionArray extends InspectionInferedType { type: InspectionType.ARRAY; + depth: number; } export interface InspectionClass extends InspectionInferedType { diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index 2348bd0c67a..0939e8d1390 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -2,7 +2,6 @@ import { isNil } from 'lodash'; import { PropType } from '@storybook/components'; import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib'; import { ExtractedProp, DocgenPropType } from '../../../lib/docgen'; -import { generateCode } from '../lib/codeGeneration/generateCode'; import { generateFuncSignature, generateCompactFuncSignature } from './generateFuncSignature'; import { OBJECT_CAPTION, @@ -17,10 +16,10 @@ import { inspectValue, InspectionElement, InspectionObject, - InspectionIdentifiableInferedType, + InspectionArray, } from '../lib/inspection'; import { isHtmlTag } from '../lib/isHtmlTag'; -import { generateCompactObject } from '../lib/codeGeneration/generateObject'; +import { generateObjectCode, generateCode } from '../lib/generateCode'; enum PropTypesType { CUSTOM = 'custom', @@ -78,12 +77,14 @@ function cleanPropTypes(value: string): string { } function prettyObject(ast: any, compact = false): string { - const obj = compact ? generateCompactObject(ast) : generateCode(ast); - - return cleanPropTypes(obj); + return cleanPropTypes(generateObjectCode(ast, compact)); } -function getCaptionFromInspectionType(type: InspectionType): string { +function prettyArray(ast: any, compact = false): string { + return cleanPropTypes(generateCode(ast, compact)); +} + +function getCaptionForInspectionType(type: InspectionType): string { switch (type) { case InspectionType.OBJECT: return OBJECT_CAPTION; @@ -100,49 +101,63 @@ function getCaptionFromInspectionType(type: InspectionType): string { } } +function generateTypeFromString(value: string, originalTypeName: string): TypeDef { + const { inferedType, ast } = inspectValue(value); + const { type } = inferedType; + + 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 = value; + 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 createTypeDef({ + name: originalTypeName, + short, + compact, + full, + inferedType: type, + }); +} + function generateCustom({ raw }: DocgenPropType): TypeDef { if (!isNil(raw)) { - const { inferedType, ast } = inspectValue(raw); - const { type } = inferedType; - - let short; - let compact; - let full; - - switch (type) { - case InspectionType.IDENTIFIER: - case InspectionType.LITERAL: - short = raw; - compact = raw; - 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 = raw; - break; - } - default: - short = getCaptionFromInspectionType(type); - compact = raw; - break; - } - - return createTypeDef({ - name: PropTypesType.CUSTOM, - short, - compact, - full, - inferedType: type, - }); + return generateTypeFromString(raw, PropTypesType.CUSTOM); } return createTypeDef({ @@ -230,44 +245,10 @@ function generateUnion(type: DocgenPropType, extractedProp: ExtractedProp): Type return createTypeDef({ name: PropTypesType.UNION, short: type.value, compact: null }); } -// TODO: Je fais quoi avec un array qui contient un objet avec du depth? -// -> aconParser retourne le depth d'un array? function generateEnumValue({ value, computed }: EnumValue): TypeDef { - if (computed) { - const { inferedType, ast } = inspectValue(value); - const { type } = inferedType; - - let short = getCaptionFromInspectionType(type); - let compact = value; - let full = value; - - if ( - type === InspectionType.FUNCTION || - type === InspectionType.CLASS || - type === InspectionType.ELEMENT - ) { - const { identifier } = inferedType as InspectionIdentifiableInferedType; - - if (!isNil(identifier)) { - short = identifier; - } - } else if (type === InspectionType.OBJECT) { - const { depth } = inferedType as InspectionObject; - - compact = depth === 1 ? prettyObject(ast, true) : null; - full = prettyObject(ast); - } - - return createTypeDef({ - name: 'enumvalue', - short, - compact, - full, - inferedType: type, - }); - } - - return createTypeDef({ name: 'enumvalue', short: value, compact: value }); + return computed + ? generateTypeFromString(value, 'enumvalue') + : createTypeDef({ name: 'enumvalue', short: value, compact: value }); } function generateEnum(type: DocgenPropType): TypeDef { @@ -366,41 +347,48 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD } export function createType(extractedProp: ExtractedProp): PropType { - const { type } = extractedProp.docgenInfo; + try { + 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 { short, compact, full } = generateType(type, extractedProp); + 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); + 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); - return createSummaryValue(short, short !== full ? full : undefined); - } - case PropTypesType.FUNC: { - const { short, compact, full } = generateType(type, extractedProp); + let summary = short; + const detail = full; - let summary = short; - const detail = full; + if (!isTooLongForTypeSummary(full)) { + summary = full; + } else if (!isNil(compact)) { + summary = compact; + } - if (!isTooLongForTypeSummary(full)) { - summary = full; - } else if (!isNil(compact)) { - summary = compact; + return createSummaryValue(summary, summary !== detail ? detail : undefined); } - - return createSummaryValue(summary, summary !== detail ? detail : undefined); + default: + return null; } - default: - return null; + } catch (e) { + // eslint-disable-next-line no-console + console.error(e); } + + return null; } diff --git a/addons/docs/src/lib/docgen/utils/docgen.ts b/addons/docs/src/lib/docgen/utils/docgenInfo.ts similarity index 100% rename from addons/docs/src/lib/docgen/utils/docgen.ts rename to addons/docs/src/lib/docgen/utils/docgenInfo.ts diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js index ee200ca395e..1e4ecd02391 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js @@ -120,6 +120,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` */ @@ -256,6 +265,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({ From 147cfec021ab6aa0704131df752f9458380a497d Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 14:32:58 -0500 Subject: [PATCH 03/19] Func summary now try to list as much args as possible --- .../react/propTypes/generateFuncSignature.ts | 53 ++++++++++++------- addons/docs/src/lib/docgen/utils/index.ts | 2 +- addons/docs/src/lib/utils.ts | 2 +- 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index 239468d04cb..0ee921c4ba0 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -1,6 +1,18 @@ import { isNil } from 'lodash'; +import { MAX_TYPE_SUMMARY_LENGTH } from '../../../lib'; import { ExtractedJsDocParam, ExtractedJsDocReturns } from '../../../lib/jsdocParser'; +function generateSignatureArg(x: ExtractedJsDocParam): string { + const prettyName = x.getPrettyName(); + const typeName = x.getTypeName(); + + if (!isNil(typeName)) { + return `${prettyName}: ${typeName}`; + } + + return prettyName; +} + export function generateFuncSignature( params: ExtractedJsDocParam[], returns: ExtractedJsDocReturns @@ -11,16 +23,7 @@ export function generateFuncSignature( const funcParts = []; if (hasParams) { - const funcParams = params.map((x: ExtractedJsDocParam) => { - const prettyName = x.getPrettyName(); - const typeName = x.getTypeName(); - - if (!isNil(typeName)) { - return `${prettyName}: ${typeName}`; - } - - return prettyName; - }); + const funcParams = params.map(generateSignatureArg); funcParts.push(`(${funcParams.join(', ')})`); } else { @@ -42,17 +45,29 @@ export function generateCompactFuncSignature( const hasParams = !isNil(params); const hasReturns = !isNil(returns); - const funcParts = []; + const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; if (hasParams) { - funcParts.push('( ... )'); - } else { - funcParts.push('()'); + const paramsParts = []; + // 2 is for '()'. + let currentLength = 2 + returnsPart.length; + + for (let i = 0; i < params.length; i += 1) { + const param = generateSignatureArg(params[i]); + const paramLength = param.length; + + if (currentLength + paramLength < MAX_TYPE_SUMMARY_LENGTH) { + paramsParts.push(param); + // 2 is for ', '. + currentLength += paramLength + 2; + } else { + paramsParts.push('...'); + break; + } + } + + return `(${paramsParts.join(', ')})${returnsPart}`; } - if (hasReturns) { - funcParts.push(`=> ${returns.getTypeName()}`); - } - - return funcParts.join(' '); + return `()${returnsPart}`; } diff --git a/addons/docs/src/lib/docgen/utils/index.ts b/addons/docs/src/lib/docgen/utils/index.ts index 4d3acb13d2f..d62a105a182 100644 --- a/addons/docs/src/lib/docgen/utils/index.ts +++ b/addons/docs/src/lib/docgen/utils/index.ts @@ -1,3 +1,3 @@ export * from './defaultValue'; export * from './string'; -export * from './docgen'; +export * from './docgenInfo'; diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts index db87763a53c..ef0e532ece6 100644 --- a/addons/docs/src/lib/utils.ts +++ b/addons/docs/src/lib/utils.ts @@ -1,6 +1,6 @@ import { PropSummaryValue } from '@storybook/components'; -export const MAX_TYPE_SUMMARY_LENGTH = 70; +export const MAX_TYPE_SUMMARY_LENGTH = 60; export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50; export function isTooLongForTypeSummary(value: string): boolean { From 9ee1ccd03f9c6ffc6a9f83928197c49cb8947877 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 15:24:04 -0500 Subject: [PATCH 04/19] Reverted summary func improvement --- .../react/propTypes/generateFuncSignature.ts | 124 +++++++++++++----- addons/docs/src/lib/utils.ts | 7 +- .../src/blocks/PropsTable/PropValue.tsx | 1 - 3 files changed, 96 insertions(+), 36 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index 0ee921c4ba0..c89bc728f1a 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -1,18 +1,6 @@ import { isNil } from 'lodash'; -import { MAX_TYPE_SUMMARY_LENGTH } from '../../../lib'; import { ExtractedJsDocParam, ExtractedJsDocReturns } from '../../../lib/jsdocParser'; -function generateSignatureArg(x: ExtractedJsDocParam): string { - const prettyName = x.getPrettyName(); - const typeName = x.getTypeName(); - - if (!isNil(typeName)) { - return `${prettyName}: ${typeName}`; - } - - return prettyName; -} - export function generateFuncSignature( params: ExtractedJsDocParam[], returns: ExtractedJsDocReturns @@ -23,7 +11,16 @@ export function generateFuncSignature( const funcParts = []; if (hasParams) { - const funcParams = params.map(generateSignatureArg); + const funcParams = params.map((x: ExtractedJsDocParam) => { + const prettyName = x.getPrettyName(); + const typeName = x.getTypeName(); + + if (!isNil(typeName)) { + return `${prettyName}: ${typeName}`; + } + + return prettyName; + }); funcParts.push(`(${funcParams.join(', ')})`); } else { @@ -45,29 +42,88 @@ export function generateCompactFuncSignature( const hasParams = !isNil(params); const hasReturns = !isNil(returns); - const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; + const funcParts = []; if (hasParams) { - const paramsParts = []; - // 2 is for '()'. - let currentLength = 2 + returnsPart.length; - - for (let i = 0; i < params.length; i += 1) { - const param = generateSignatureArg(params[i]); - const paramLength = param.length; - - if (currentLength + paramLength < MAX_TYPE_SUMMARY_LENGTH) { - paramsParts.push(param); - // 2 is for ', '. - currentLength += paramLength + 2; - } else { - paramsParts.push('...'); - break; - } - } - - return `(${paramsParts.join(', ')})${returnsPart}`; + funcParts.push('( ... )'); + } else { + funcParts.push('()'); } - return `()${returnsPart}`; + if (hasReturns) { + funcParts.push(`=> ${returns.getTypeName()}`); + } + + return funcParts.join(' '); } + +// TODO: Add tests +// export function generateCompactFuncSignature( +// params: ExtractedJsDocParam[], +// returns: ExtractedJsDocReturns +// ): string { +// const hasParams = !isNil(params); +// const hasReturns = !isNil(returns); + +// const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; + +// if (hasParams) { +// const paramsParts = []; +// // 2 is for '()'. +// let currentLength = 2 + returnsPart.length; + +// for (let i = 0; i < params.length; i += 1) { +// const param = params[i].getPrettyName(); +// const paramLength = param.length; + +// if (currentLength + paramLength < MAX_EXPANDABLE_LENGTH) { +// paramsParts.push(param); +// // 2 is for ', '. +// currentLength += paramLength + 2; +// } else { +// paramsParts.push('...'); +// break; +// } +// } + +// return `(${paramsParts.join(', ')})${returnsPart}`; +// } + +// return `()${returnsPart}`; +// } + +// // TODO: Add tests +// export function generateCompactFuncSignature( +// params: ExtractedJsDocParam[], +// returns: ExtractedJsDocReturns +// ): string { +// const hasParams = !isNil(params); +// const hasReturns = !isNil(returns); + +// const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; + +// if (hasParams) { +// const paramsParts = []; +// // 2 is for '()'. +// let currentLength = 2 + returnsPart.length; + +// for (let i = 0; i < params.length; i += 1) { +// const param = generateSignatureArg(params[i]); +// const paramLength = param.length; + +// // if (currentLength + paramLength < MAX_TYPE_SUMMARY_LENGTH) { +// if (currentLength + paramLength < 70) { +// paramsParts.push(param); +// // 2 is for ', '. +// currentLength += paramLength + 2; +// } else { +// paramsParts.push('...'); +// break; +// } +// } + +// return `(${paramsParts.join(', ')})${returnsPart}`; +// } + +// return `()${returnsPart}`; +// } diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts index ef0e532ece6..92c0bd89c12 100644 --- a/addons/docs/src/lib/utils.ts +++ b/addons/docs/src/lib/utils.ts @@ -1,7 +1,8 @@ import { PropSummaryValue } from '@storybook/components'; -export const MAX_TYPE_SUMMARY_LENGTH = 60; +export const MAX_TYPE_SUMMARY_LENGTH = 70; export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50; +export const MAX_EXPANDABLE_LENGTH = 25; export function isTooLongForTypeSummary(value: string): boolean { return value.length > MAX_TYPE_SUMMARY_LENGTH; @@ -11,6 +12,10 @@ export function isTooLongForDefaultValueSummary(value: string): boolean { return value.length > MAX_DEFALUT_VALUE_SUMMARY_LENGTH; } +export function isTooLongForExpandable(value: string): boolean { + return value.length > MAX_EXPANDABLE_LENGTH; +} + export function createSummaryValue(summary: string, detail?: string): PropSummaryValue { return { summary, detail }; } diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx index 73bca334a56..45492a6406c 100644 --- a/lib/components/src/blocks/PropsTable/PropValue.tsx +++ b/lib/components/src/blocks/PropsTable/PropValue.tsx @@ -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', })); From 08f26ebc37e902e2e362a651f0f0125e4bbe9591 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 15:42:22 -0500 Subject: [PATCH 05/19] Default value summary take into account the depth of arrays and objects --- .../react/lib/createDefaultValue.ts | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts index 95ddd56aeb3..0b994d88ea9 100644 --- a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts +++ b/addons/docs/src/frameworks/react/lib/createDefaultValue.ts @@ -14,6 +14,7 @@ import { InspectionElement, InspectionIdentifiableInferedType, inspectValue, + InspectionArray, } from './inspection'; import { isHtmlTag } from './isHtmlTag'; import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib'; @@ -34,12 +35,18 @@ function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): st } } -function generateObject({ ast }: InspectionResult): PropDefaultValue { - const prettyCaption = generateObjectCode(ast, true); +function generateObject({ inferedType, ast }: InspectionResult): PropDefaultValue { + const { depth } = inferedType as InspectionArray; - return !isTooLongForDefaultValueSummary(prettyCaption) - ? createSummaryValue(prettyCaption) - : createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast)); + if (depth === 1) { + const compactObject = generateObjectCode(ast, true); + + if (!isTooLongForDefaultValueSummary(compactObject)) { + return createSummaryValue(compactObject); + } + } + + return createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast)); } function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue { @@ -86,12 +93,18 @@ function generateElement( : createSummaryValue(ELEMENT_CAPTION, defaultValue); } -function generateArray({ ast }: InspectionResult): PropDefaultValue { - const prettyCaption = generateArrayCode(ast, true); +function generateArray({ inferedType, ast }: InspectionResult): PropDefaultValue { + const { depth } = inferedType as InspectionArray; - return !isTooLongForDefaultValueSummary(prettyCaption) - ? createSummaryValue(prettyCaption) - : createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast)); + if (depth <= 2) { + const compactArray = generateArrayCode(ast, true); + + if (!isTooLongForDefaultValueSummary(compactArray)) { + return createSummaryValue(compactArray); + } + } + + return createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast)); } export function createDefaultValue(defaultValue: string): PropDefaultValue { From 14b311ca291e07309b697560aeb582c802e48725 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 15:45:00 -0500 Subject: [PATCH 06/19] Prop row doesn't have a top margin if there is no description --- lib/components/src/blocks/PropsTable/PropRow.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx index b91e666e616..5208c0c63dc 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.tsx @@ -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 = ({ )} {!isNil(jsDocTags) ? ( <> - + From 48f17ebdc2d073cadc8e5561d75708e33f21db2a Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 17:37:45 -0500 Subject: [PATCH 07/19] Fix props table to support prop with a default value and no type definition --- .../frameworks/react/propTypes/createType.ts | 13 ++++--- .../react/propTypes/generateFuncSignature.ts | 36 +++++++++---------- addons/docs/src/lib/docgen/createPropDef.ts | 7 +++- addons/docs/src/lib/docgen/flow/createType.ts | 5 +++ .../src/lib/docgen/typeScript/createType.ts | 6 ++++ addons/links/register.js | 1 - .../stories/docgen-tests/types/prop-types.js | 2 ++ 7 files changed, 46 insertions(+), 24 deletions(-) delete mode 100644 addons/links/register.js diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index 0939e8d1390..f9b1fa2e342 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -2,7 +2,7 @@ import { isNil } from 'lodash'; import { PropType } from '@storybook/components'; import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib'; import { ExtractedProp, DocgenPropType } from '../../../lib/docgen'; -import { generateFuncSignature, generateCompactFuncSignature } from './generateFuncSignature'; +import { generateFuncSignature } from './generateFuncSignature'; import { OBJECT_CAPTION, ARRAY_CAPTION, @@ -175,7 +175,7 @@ function generateFunc(extractedProp: ExtractedProp): TypeDef { return createTypeDef({ name: PropTypesType.FUNC, short: FUNCTION_CAPTION, - compact: generateCompactFuncSignature(jsDocTags.params, jsDocTags.returns), + compact: null, full: generateFuncSignature(jsDocTags.params, jsDocTags.returns), }); } @@ -347,9 +347,14 @@ function generateType(type: DocgenPropType, extractedProp: ExtractedProp): TypeD } export function createType(extractedProp: ExtractedProp): PropType { - try { - const { type } = extractedProp.docgenInfo; + const { type } = extractedProp.docgenInfo; + // 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: diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index c89bc728f1a..412b202b795 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -34,28 +34,28 @@ export function generateFuncSignature( return funcParts.join(' '); } -// TODO: Add tests -export function generateCompactFuncSignature( - params: ExtractedJsDocParam[], - returns: ExtractedJsDocReturns -): string { - const hasParams = !isNil(params); - const hasReturns = !isNil(returns); +// // TODO: Add tests +// export function generateCompactFuncSignature( +// params: ExtractedJsDocParam[], +// returns: ExtractedJsDocReturns +// ): string { +// const hasParams = !isNil(params); +// const hasReturns = !isNil(returns); - const funcParts = []; +// const funcParts = []; - if (hasParams) { - funcParts.push('( ... )'); - } else { - funcParts.push('()'); - } +// if (hasParams) { +// funcParts.push('( ... )'); +// } else { +// funcParts.push('()'); +// } - if (hasReturns) { - funcParts.push(`=> ${returns.getTypeName()}`); - } +// if (hasReturns) { +// funcParts.push(`=> ${returns.getTypeName()}`); +// } - return funcParts.join(' '); -} +// return funcParts.join(' '); +// } // TODO: Add tests // export function generateCompactFuncSignature( diff --git a/addons/docs/src/lib/docgen/createPropDef.ts b/addons/docs/src/lib/docgen/createPropDef.ts index 132c73eb316..9d844cf00fb 100644 --- a/addons/docs/src/lib/docgen/createPropDef.ts +++ b/addons/docs/src/lib/docgen/createPropDef.ts @@ -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), diff --git a/addons/docs/src/lib/docgen/flow/createType.ts b/addons/docs/src/lib/docgen/flow/createType.ts index 98be7fa31d9..24530648f4e 100644 --- a/addons/docs/src/lib/docgen/flow/createType.ts +++ b/addons/docs/src/lib/docgen/flow/createType.ts @@ -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); diff --git a/addons/docs/src/lib/docgen/typeScript/createType.ts b/addons/docs/src/lib/docgen/typeScript/createType.ts index 17869d8957f..a1e1edbafef 100644 --- a/addons/docs/src/lib/docgen/typeScript/createType.ts +++ b/addons/docs/src/lib/docgen/typeScript/createType.ts @@ -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', '')); } diff --git a/addons/links/register.js b/addons/links/register.js deleted file mode 100644 index 9232e6c069d..00000000000 --- a/addons/links/register.js +++ /dev/null @@ -1 +0,0 @@ -require('./dist/manager').register(); diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js index 1e4ecd02391..6bd94ea6a8b 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js @@ -1,3 +1,4 @@ +/* eslint-disable react/default-props-match-prop-types */ /* eslint-disable react/require-default-props */ /* eslint-disable react/no-unused-prop-types */ import React from 'react'; @@ -340,6 +341,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' }], From c66dc884c34da4f029266e65e9146e1d6105a0a6 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Fri, 22 Nov 2019 18:03:23 -0500 Subject: [PATCH 08/19] Props table fix escodegen compact array of primitives value formatting --- .../src/frameworks/react/lib/generateCode.ts | 16 ++++++++++++++-- addons/links/register.js | 1 + 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 addons/links/register.js diff --git a/addons/docs/src/frameworks/react/lib/generateCode.ts b/addons/docs/src/frameworks/react/lib/generateCode.ts index c64519c8da2..d1a2f67a286 100644 --- a/addons/docs/src/frameworks/react/lib/generateCode.ts +++ b/addons/docs/src/frameworks/react/lib/generateCode.ts @@ -42,10 +42,10 @@ function generateCompactObjectCode(ast: any): string { } export function generateArrayCode(ast: any, compact = false): string { - return !compact ? generateArray(ast) : generateCode(ast, true); + return !compact ? generateMultilineArrayCode(ast) : generateCompactArrayCode(ast); } -function generateArray(ast: any): string { +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. @@ -56,3 +56,15 @@ function generateArray(ast: any): string { 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; +} diff --git a/addons/links/register.js b/addons/links/register.js new file mode 100644 index 00000000000..9232e6c069d --- /dev/null +++ b/addons/links/register.js @@ -0,0 +1 @@ +require('./dist/manager').register(); From f8cf66b25d229843a3fce623d1485e8e17672e1c Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sun, 24 Nov 2019 18:35:08 -0500 Subject: [PATCH 09/19] Partial support for raw defaultProp when react-docgen dont return a defaultValue --- .../react/{propTypes => lib}/captions.ts | 0 .../{ => defaultValues}/createDefaultValue.ts | 63 +------ .../defaultValues/createFromRawDefaultProp.ts | 165 ++++++++++++++++++ .../react/lib/defaultValues/generateArray.ts | 19 ++ .../react/lib/defaultValues/generateObject.ts | 19 ++ .../react/lib/defaultValues/index.ts | 2 + .../lib/defaultValues/prettyIdentifier.ts | 26 +++ addons/docs/src/frameworks/react/lib/index.ts | 3 + .../react/lib/inspection/acornParser.test.ts | 8 +- .../react/lib/inspection/acornParser.ts | 3 +- .../frameworks/react/lib/inspection/types.ts | 3 +- .../frameworks/react/propTypes/createType.ts | 7 +- .../frameworks/react/propTypes/handleProp.ts | 21 ++- .../propTypes/rawDefaultPropResolvers.ts | 30 ++++ .../frameworks/react/typeScript/handleProp.ts | 2 +- .../src/stories/docgen-tests/types/ext.js | 1 + .../stories/docgen-tests/types/prop-types.js | 67 ++++++- 17 files changed, 369 insertions(+), 70 deletions(-) rename addons/docs/src/frameworks/react/{propTypes => lib}/captions.ts (100%) rename addons/docs/src/frameworks/react/lib/{ => defaultValues}/createDefaultValue.ts (59%) create mode 100644 addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts create mode 100644 addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts create mode 100644 addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts create mode 100644 addons/docs/src/frameworks/react/lib/defaultValues/index.ts create mode 100644 addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts create mode 100644 addons/docs/src/frameworks/react/lib/index.ts create mode 100644 addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts diff --git a/addons/docs/src/frameworks/react/propTypes/captions.ts b/addons/docs/src/frameworks/react/lib/captions.ts similarity index 100% rename from addons/docs/src/frameworks/react/propTypes/captions.ts rename to addons/docs/src/frameworks/react/lib/captions.ts diff --git a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts similarity index 59% rename from addons/docs/src/frameworks/react/lib/createDefaultValue.ts rename to addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts index 0b994d88ea9..09ead809bc5 100644 --- a/addons/docs/src/frameworks/react/lib/createDefaultValue.ts +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts @@ -1,12 +1,6 @@ import { isNil } from 'lodash'; -// @ts-ignore import { PropDefaultValue } from '@storybook/components'; -import { - OBJECT_CAPTION, - FUNCTION_CAPTION, - ELEMENT_CAPTION, - ARRAY_CAPTION, -} from '../propTypes/captions'; +import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions'; import { InspectionFunction, InspectionResult, @@ -14,40 +8,13 @@ import { InspectionElement, InspectionIdentifiableInferedType, inspectValue, - InspectionArray, -} from './inspection'; -import { isHtmlTag } from './isHtmlTag'; -import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../lib'; -import { generateObjectCode, generateCode, generateArrayCode } from './generateCode'; - -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({ 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)); -} +} 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; @@ -93,20 +60,6 @@ function generateElement( : createSummaryValue(ELEMENT_CAPTION, defaultValue); } -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)); -} - export function createDefaultValue(defaultValue: string): PropDefaultValue { try { const inspectionResult = inspectValue(defaultValue); diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts new file mode 100644 index 00000000000..2fd06704fe8 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts @@ -0,0 +1,165 @@ +import { PropDefaultValue, PropDef } from '@storybook/components'; +import { isNil, isPlainObject, isArray, isFunction } from 'lodash'; +import { createSummaryValue } 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'; + +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); +}; + +const objectResolver: TypeResolver = rawDefaultProp => { + // Try to display the name of the component. The body of the component is ommited since the code has been transpiled. + // The body of a React component object could be reconstructured from React metadata props on objects. + if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) { + const { displayName } = rawDefaultProp.type; + + // When the displayName is null, it indicate that it is an HTML element. + return !isNil(displayName) + ? createSummaryValue(getPrettyElementIdentifier(displayName)) + : createSummaryValue(ELEMENT_CAPTION); + } + + 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; + + 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 } = inspectValue(rawDefaultProp.toString()).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 { + 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 will 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; +} diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts b/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts new file mode 100644 index 00000000000..80237047953 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts @@ -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)); +} diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts b/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts new file mode 100644 index 00000000000..1c9505c1efc --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts @@ -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)); +} diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/index.ts b/addons/docs/src/frameworks/react/lib/defaultValues/index.ts new file mode 100644 index 00000000000..0bf4b028eb1 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/defaultValues/index.ts @@ -0,0 +1,2 @@ +export * from './createDefaultValue'; +export * from './createFromRawDefaultProp'; diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts b/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts new file mode 100644 index 00000000000..d912ac8fb17 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts @@ -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} />`; +} diff --git a/addons/docs/src/frameworks/react/lib/index.ts b/addons/docs/src/frameworks/react/lib/index.ts new file mode 100644 index 00000000000..2059b83f192 --- /dev/null +++ b/addons/docs/src/frameworks/react/lib/index.ts @@ -0,0 +1,3 @@ +export * from './captions'; +export * from './isHtmlTag'; +export * from './generateCode'; diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts index ad10948e687..4f5776c2d11 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts @@ -129,7 +129,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBeUndefined(); - expect(inferedType.hasArguments).toBeFalsy(); + expect(inferedType.hasParams).toBeFalsy(); expect(result.ast).toBeDefined(); }); @@ -139,7 +139,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBeUndefined(); - expect(inferedType.hasArguments).toBeTruthy(); + expect(inferedType.hasParams).toBeTruthy(); expect(result.ast).toBeDefined(); }); @@ -149,7 +149,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBe('concat'); - expect(inferedType.hasArguments).toBeFalsy(); + expect(inferedType.hasParams).toBeFalsy(); expect(result.ast).toBeDefined(); }); @@ -159,7 +159,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBe('concat'); - expect(inferedType.hasArguments).toBeTruthy(); + expect(inferedType.hasParams).toBeTruthy(); expect(result.ast).toBeDefined(); }); diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts index faf403011c7..493170a2300 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts @@ -91,7 +91,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); diff --git a/addons/docs/src/frameworks/react/lib/inspection/types.ts b/addons/docs/src/frameworks/react/lib/inspection/types.ts index 85be60dbc51..ffa1b43c48f 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/types.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/types.ts @@ -40,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 { diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index f9b1fa2e342..4deb58fba3b 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -10,7 +10,10 @@ import { FUNCTION_CAPTION, ELEMENT_CAPTION, CUSTOM_CAPTION, -} from './captions'; + isHtmlTag, + generateObjectCode, + generateCode, +} from '../lib'; import { InspectionType, inspectValue, @@ -18,8 +21,6 @@ import { InspectionObject, InspectionArray, } from '../lib/inspection'; -import { isHtmlTag } from '../lib/isHtmlTag'; -import { generateObjectCode, generateCode } from '../lib/generateCode'; enum PropTypesType { CUSTOM = 'custom', diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts index e2ae2a93ffa..331aeb7b2a5 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts @@ -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); @@ -17,6 +18,17 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp): PropDef { const { defaultValue } = extractedProp.docgenInfo; if (!isNil(defaultValue)) { 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); } diff --git a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts new file mode 100644 index 00000000000..f87ca65b0e3 --- /dev/null +++ b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts @@ -0,0 +1,30 @@ +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)) { + 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, +}); diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.ts index b5c3275540c..392cf3a7ba2 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.ts +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.ts @@ -1,7 +1,7 @@ import { isNil } from 'lodash'; import { PropDef } from '@storybook/components'; import { ExtractedProp } from '../../../lib/docgen'; -import { createDefaultValue } from '../lib/createDefaultValue'; +import { createDefaultValue } from '../lib/defaultValues'; export function enhanceTypeScriptProp(extractedProp: ExtractedProp): PropDef { const { propDef } = extractedProp; diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js index df0f646a519..047b6b362bd 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js @@ -1,3 +1,4 @@ +// @ts-ignore import PropTypes from 'prop-types'; export const PRESET_SHAPE = { diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js index 6bd94ea6a8b..0aa0a366c36 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js @@ -1,7 +1,6 @@ -/* eslint-disable react/default-props-match-prop-types */ -/* 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'; @@ -35,6 +34,68 @@ 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), + 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], + inlineFunctionalElement: , + inlineFunctionalElementInline: () => { + return
Inlined FunctionnalComponent!
; + }, + inlineFunctionalElementInlineReturningNull: () => { + return null; + }, + inlineHtmlElement:
Hey!
, + // eslint-disable-next-line react/prop-types + inlineFunctionalElementInlineWithProps: ({ foo }) => { + return
{foo}
; + }, + inlineFunctionalElementNamedInline: function InlinedFunctionalComponent() { + return
Inlined FunctionnalComponent!
; + }, + inlineClassElement: , + inlineClassElementWithProps: , + inlineClassElementWithChildren: ( + +
hey!
+ + ), + inlineClassElementInline: class InlinedClassComponent extends React.PureComponent { + render() { + return
Inlined ClassComponent!
; + } + }, + inlineFunc: function add(a, b) { + return a + b; + }, +}; + export const PropTypesProps = () =>
PropTypes!
; PropTypesProps.propTypes = { @@ -285,6 +346,7 @@ PropTypesProps.propTypes = { requiredString: PropTypes.string.isRequired, nullDefaultValue: PropTypes.string, undefinedDefaultValue: PropTypes.string, + ...SOME_INLINE_PROP_TYPES, ...SOME_PROP_TYPES, }; @@ -386,4 +448,5 @@ PropTypesProps.defaultProps = { optionalString: 'Default String', nullDefaultValue: null, undefinedDefaultValue: undefined, + ...SOME_INLINE_DEFAULT_PROPS, }; From 6d4397139c6a8856902411a8a17f0166b5553b04 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sun, 24 Nov 2019 23:09:21 -0500 Subject: [PATCH 10/19] Fix existing tests that were failing after increasing the summary max length --- .../frameworks/react/propTypes/createType.ts | 6 +- .../propTypes/generateFuncSignature.test.ts | 2 +- .../react/propTypes/generateFuncSignature.ts | 4 + .../react/propTypes/handleProp.test.ts | 85 ++++++++++++++----- .../src/lib/docgen/flow/createPropDef.test.ts | 37 +++++++- .../docgen/typeScript/createDefaultValue.ts | 2 +- addons/docs/src/lib/utils.ts | 5 -- 7 files changed, 109 insertions(+), 32 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index 4deb58fba3b..ac9f3198d1e 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -77,6 +77,10 @@ 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)); } @@ -128,7 +132,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe const { identifier } = inferedType as InspectionElement; short = !isNil(identifier) && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION; - compact = value; + compact = splitIntoLines(value).length === 1 ? value : null; full = value; break; } diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts index d7658879844..68dbdbaad25 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts @@ -1,7 +1,7 @@ import { generateFuncSignature } from './generateFuncSignature'; import { parseJsDoc } from '../../../lib/jsdocParser'; -it('should return an empty string with there is no @params and @returns tags', () => { +it('should return an empty string when there is no @params and @returns tags', () => { const result = generateFuncSignature(null, null); expect(result).toBe(''); diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index 412b202b795..149defa2b01 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -8,6 +8,10 @@ export function generateFuncSignature( const hasParams = !isNil(params); const hasReturns = !isNil(returns); + if (!hasParams && !hasReturns) { + return ''; + } + const funcParts = []; if (hasParams) { diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts index 07345bfa1b6..ccbc501a101 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts @@ -93,7 +93,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,7 +103,10 @@ 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, '')); @@ -133,7 +136,8 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: '
Hello world!
', + raw: + '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
', }, }); @@ -141,7 +145,8 @@ describe('enhancePropTypesProp', () => { expect(type.summary).toBe('element'); - const expectedDetail = '
Hello world!
'; + const expectedDetail = + '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'; expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); @@ -150,7 +155,7 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: '() => {\n return
Inlined FunctionnalComponent!
;\n}', + raw: '() => {\n return
Inlined FunctionalComponent!
;\n}', }, }); @@ -159,23 +164,43 @@ describe('enhancePropTypesProp', () => { expect(type.summary).toBe('element'); const expectedDetail = `() => { - return
Inlined FunctionnalComponent!
; + return
Inlined FunctionalComponent!
; }`; 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 +279,10 @@ describe('enhancePropTypesProp', () => { name: 'string', required: false, }, + anotherAnother: { + name: 'string', + required: false, + }, }, }, }); @@ -265,7 +294,8 @@ 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, '')); @@ -470,7 +500,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,7 +512,8 @@ 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, '')); @@ -529,6 +560,10 @@ describe('enhancePropTypesProp', () => { name: 'string', required: false, }, + anotherAnother: { + name: 'string', + required: false, + }, }, }, }, @@ -541,7 +576,8 @@ 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, '')); @@ -628,7 +664,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,7 +675,9 @@ 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, '')); @@ -686,6 +724,10 @@ describe('enhancePropTypesProp', () => { name: 'string', required: false, }, + anotherAnother: { + name: 'string', + required: false, + }, }, }, }, @@ -698,7 +740,8 @@ 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, '')); diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts index 9a34556fc4a..0db4ddeea1c 100644 --- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts +++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts @@ -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', () => { diff --git a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts b/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts index 2a9a193ac21..f63067c49b3 100644 --- a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts +++ b/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts @@ -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; diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts index 92c0bd89c12..db87763a53c 100644 --- a/addons/docs/src/lib/utils.ts +++ b/addons/docs/src/lib/utils.ts @@ -2,7 +2,6 @@ import { PropSummaryValue } from '@storybook/components'; export const MAX_TYPE_SUMMARY_LENGTH = 70; export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50; -export const MAX_EXPANDABLE_LENGTH = 25; export function isTooLongForTypeSummary(value: string): boolean { return value.length > MAX_TYPE_SUMMARY_LENGTH; @@ -12,10 +11,6 @@ export function isTooLongForDefaultValueSummary(value: string): boolean { return value.length > MAX_DEFALUT_VALUE_SUMMARY_LENGTH; } -export function isTooLongForExpandable(value: string): boolean { - return value.length > MAX_EXPANDABLE_LENGTH; -} - export function createSummaryValue(summary: string, detail?: string): PropSummaryValue { return { summary, detail }; } From 276456f7894febd9c4a68ca90a3e6baf254ed910 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 10:29:23 -0500 Subject: [PATCH 11/19] Added tests for acornParser depth and params support --- .../react/lib/inspection/acornParser.test.ts | 57 ++++++++++++++++++- .../react/lib/inspection/acornParser.ts | 20 ++++--- 2 files changed, 68 insertions(+), 9 deletions(-) diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts index 4f5776c2d11..8ffe6fad77a 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts @@ -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(); }); @@ -130,6 +181,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBeUndefined(); expect(inferedType.hasParams).toBeFalsy(); + expect(inferedType.params.length).toBe(0); expect(result.ast).toBeDefined(); }); @@ -140,6 +192,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBeUndefined(); expect(inferedType.hasParams).toBeTruthy(); + expect(inferedType.params.length).toBe(2); expect(result.ast).toBeDefined(); }); @@ -150,6 +203,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBe('concat'); expect(inferedType.hasParams).toBeFalsy(); + expect(inferedType.params.length).toBe(0); expect(result.ast).toBeDefined(); }); @@ -160,6 +214,7 @@ describe('parse', () => { expect(inferedType.type).toBe(InspectionType.FUNCTION); expect(inferedType.identifier).toBe('concat'); expect(inferedType.hasParams).toBeTruthy(); + expect(inferedType.params.length).toBe(2); expect(result.ast).toBeDefined(); }); diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts index 493170a2300..60b552abc2f 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts @@ -35,23 +35,27 @@ function extractIdentifierName(identifierNode: any) { return !isNil(identifierNode) ? identifierNode.name : null; } -function calculateNodeDepth(node: estree.Expression): number { - let depth = 0; +function filterAncestors(ancestors: estree.Node[]): estree.Node[] { + return ancestors.filter(x => x.type === 'ObjectExpression' || x.type === 'ArrayExpression'); +} - acornWalk.simple( +function calculateNodeDepth(node: estree.Expression): number { + const depths: number[] = []; + + acornWalk.ancestor( node, { - ObjectExpression() { - depth += 1; + ObjectExpression(_: any, ancestors: estree.Node[]) { + depths.push(filterAncestors(ancestors).length); }, - ArrayExpression() { - depth += 1; + ArrayExpression(_: any, ancestors: estree.Node[]) { + depths.push(filterAncestors(ancestors).length); }, }, ACORN_WALK_VISITORS ); - return depth; + return Math.max(...depths); } function parseIdentifier(identifierNode: estree.Identifier): ParsingResult { From 1fa0f4833ea763556520ef65095d230106705009 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 11:34:07 -0500 Subject: [PATCH 12/19] Added tests to ensure summary does not contains deep values --- .../react/propTypes/handleProp.test.ts | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts index ccbc501a101..c742f47115c 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts @@ -112,6 +112,19 @@ describe('enhancePropTypesProp', () => { 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: { @@ -301,6 +314,30 @@ describe('enhancePropTypesProp', () => { 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: { @@ -356,6 +393,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: { @@ -519,6 +600,22 @@ describe('enhancePropTypesProp', () => { 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: { @@ -582,6 +679,33 @@ describe('enhancePropTypesProp', () => { 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', () => { @@ -683,6 +807,22 @@ describe('enhancePropTypesProp', () => { 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: { @@ -746,6 +886,33 @@ describe('enhancePropTypesProp', () => { 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[]'); + }); }); }); From c0b9c69026c5356ce6bdf502ccaa911ce9cd2576 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 13:08:12 -0500 Subject: [PATCH 13/19] Added tests to ensure no deep objects or array are part of the default value summary --- .../react/propTypes/handleProp.test.ts | 16 ++++++++++++++++ .../react/typeScript/handleProp.test.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts index c742f47115c..eceb4eb8d0e 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts @@ -956,6 +956,14 @@ describe('enhancePropTypesProp', () => { expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); + it('should not have deep object in summary', () => { + const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }"); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('object'); + }); + it('should support short function', () => { const component = createTestComponent('() => {}'); @@ -1089,6 +1097,14 @@ describe('enhancePropTypesProp', () => { expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); + + it('should not have deep array in summary', () => { + const component = createTestComponent('[[[1]]]'); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('array'); + }); }); }); diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts index 111749a6de9..f5ecaf2ff84 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts @@ -86,6 +86,14 @@ describe('enhanceTypeScriptProp', () => { expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); + it('should not have deep object in summary', () => { + const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }"); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('object'); + }); + it('should support short function', () => { const component = createTestComponent('() => {}'); @@ -219,5 +227,13 @@ describe('enhanceTypeScriptProp', () => { expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); + + it('should not have deep array in summary', () => { + const component = createTestComponent('[[[1]]]'); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('array'); + }); }); }); From 425c13d499f1a33b64067dc5a92ab6c6431ec0f2 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 13:21:39 -0500 Subject: [PATCH 14/19] Added a new short function builder and associated tests --- .../frameworks/react/propTypes/createType.ts | 4 +- .../propTypes/generateFuncSignature.test.ts | 329 ++++++++++-------- .../react/propTypes/generateFuncSignature.ts | 108 ++---- 3 files changed, 202 insertions(+), 239 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index ac9f3198d1e..6e375478470 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -2,7 +2,7 @@ import { isNil } from 'lodash'; import { PropType } from '@storybook/components'; import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib'; import { ExtractedProp, DocgenPropType } from '../../../lib/docgen'; -import { generateFuncSignature } from './generateFuncSignature'; +import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; import { OBJECT_CAPTION, ARRAY_CAPTION, @@ -179,7 +179,7 @@ function generateFunc(extractedProp: ExtractedProp): TypeDef { if (!isNil(jsDocTags.params) || !isNil(jsDocTags.returns)) { return createTypeDef({ name: PropTypesType.FUNC, - short: FUNCTION_CAPTION, + short: generateShortFuncSignature(jsDocTags.params, jsDocTags.returns), compact: null, full: generateFuncSignature(jsDocTags.params, jsDocTags.returns), }); diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts index 68dbdbaad25..92f6575c937 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts @@ -1,156 +1,187 @@ -import { generateFuncSignature } from './generateFuncSignature'; +import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; import { parseJsDoc } from '../../../lib/jsdocParser'; -it('should return an empty string when 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'); + }); }); diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts index 149defa2b01..e52d33f823b 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts @@ -38,96 +38,28 @@ export function generateFuncSignature( return funcParts.join(' '); } -// // TODO: Add tests -// export function generateCompactFuncSignature( -// params: ExtractedJsDocParam[], -// returns: ExtractedJsDocReturns -// ): string { -// const hasParams = !isNil(params); -// const hasReturns = !isNil(returns); +export function generateShortFuncSignature( + params: ExtractedJsDocParam[], + returns: ExtractedJsDocReturns +): string { + const hasParams = !isNil(params); + const hasReturns = !isNil(returns); -// const funcParts = []; + if (!hasParams && !hasReturns) { + return ''; + } -// if (hasParams) { -// funcParts.push('( ... )'); -// } else { -// funcParts.push('()'); -// } + const funcParts = []; -// if (hasReturns) { -// funcParts.push(`=> ${returns.getTypeName()}`); -// } + if (hasParams) { + funcParts.push('( ... )'); + } else { + funcParts.push('()'); + } -// return funcParts.join(' '); -// } + if (hasReturns) { + funcParts.push(`=> ${returns.getTypeName()}`); + } -// TODO: Add tests -// export function generateCompactFuncSignature( -// params: ExtractedJsDocParam[], -// returns: ExtractedJsDocReturns -// ): string { -// const hasParams = !isNil(params); -// const hasReturns = !isNil(returns); - -// const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; - -// if (hasParams) { -// const paramsParts = []; -// // 2 is for '()'. -// let currentLength = 2 + returnsPart.length; - -// for (let i = 0; i < params.length; i += 1) { -// const param = params[i].getPrettyName(); -// const paramLength = param.length; - -// if (currentLength + paramLength < MAX_EXPANDABLE_LENGTH) { -// paramsParts.push(param); -// // 2 is for ', '. -// currentLength += paramLength + 2; -// } else { -// paramsParts.push('...'); -// break; -// } -// } - -// return `(${paramsParts.join(', ')})${returnsPart}`; -// } - -// return `()${returnsPart}`; -// } - -// // TODO: Add tests -// export function generateCompactFuncSignature( -// params: ExtractedJsDocParam[], -// returns: ExtractedJsDocReturns -// ): string { -// const hasParams = !isNil(params); -// const hasReturns = !isNil(returns); - -// const returnsPart = hasReturns ? ` => ${returns.getTypeName()}` : ''; - -// if (hasParams) { -// const paramsParts = []; -// // 2 is for '()'. -// let currentLength = 2 + returnsPart.length; - -// for (let i = 0; i < params.length; i += 1) { -// const param = generateSignatureArg(params[i]); -// const paramLength = param.length; - -// // if (currentLength + paramLength < MAX_TYPE_SUMMARY_LENGTH) { -// if (currentLength + paramLength < 70) { -// paramsParts.push(param); -// // 2 is for ', '. -// currentLength += paramLength + 2; -// } else { -// paramsParts.push('...'); -// break; -// } -// } - -// return `(${paramsParts.join(', ')})${returnsPart}`; -// } - -// return `()${returnsPart}`; -// } + return funcParts.join(' '); +} From ed22662bf2a03d0069a2efc721e646b18c7dacb3 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 17:40:22 -0500 Subject: [PATCH 15/19] Added tests for default value create from raw defaultProp --- addons/docs/package.json | 1 + .../defaultValues/createFromRawDefaultProp.ts | 47 +- ...handleProp.test.ts => handleProp.test.tsx} | 309 ++++++++++- .../frameworks/react/propTypes/handleProp.ts | 2 +- .../propTypes/rawDefaultPropResolvers.ts | 1 + .../react/typeScript/handleProp.test.ts | 239 --------- .../react/typeScript/handleProp.test.tsx | 497 ++++++++++++++++++ .../frameworks/react/typeScript/handleProp.ts | 12 +- .../stories/docgen-tests/types/prop-types.js | 10 +- lib/components/src/typography/shared.tsx | 1 + 10 files changed, 839 insertions(+), 280 deletions(-) rename addons/docs/src/frameworks/react/propTypes/{handleProp.test.ts => handleProp.test.tsx} (74%) delete mode 100644 addons/docs/src/frameworks/react/typeScript/handleProp.test.ts create mode 100644 addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx diff --git a/addons/docs/package.json b/addons/docs/package.json index 41764c77950..2f254e61899 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -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", diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts index 2fd06704fe8..abbedf96643 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts @@ -1,11 +1,13 @@ import { PropDefaultValue, PropDef } from '@storybook/components'; -import { isNil, isPlainObject, isArray, isFunction } from 'lodash'; -import { createSummaryValue } from '../../../../lib'; +import { isNil, isPlainObject, isArray, isFunction, isString } from 'lodash'; +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; @@ -35,16 +37,36 @@ const stringResolver: TypeResolver = rawDefaultProp => { return createSummaryValue(rawDefaultProp); }; -const objectResolver: TypeResolver = rawDefaultProp => { - // Try to display the name of the component. The body of the component is ommited since the code has been transpiled. - // The body of a React component object could be reconstructured from React metadata props on objects. - if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) { - const { displayName } = rawDefaultProp.type; +function generateReactObject(rawDefaultProp: any) { + const { type } = rawDefaultProp; + const { displayName } = type; - // When the displayName is null, it indicate that it is an HTML element. - return !isNil(displayName) - ? createSummaryValue(getPrettyElementIdentifier(displayName)) - : createSummaryValue(ELEMENT_CAPTION); + 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)) { @@ -66,6 +88,7 @@ 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)) { @@ -135,7 +158,7 @@ export function createTypeResolvers(customResolvers: Partial = {} // 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 will not be available. +// - The detail might not be available. // - Identifiers might not be "prettified" for all the types. export function createDefaultValueFromRawDefaultProp( rawDefaultProp: any, diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx similarity index 74% rename from addons/docs/src/frameworks/react/propTypes/handleProp.test.ts rename to addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx index eceb4eb8d0e..9839d8c4e21 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx @@ -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
React Component!
; +} + function createDocgenSection(docgenInfo: DocgenInfo): Record { return { [DOCGEN_SECTION]: { @@ -42,8 +47,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', () => { @@ -917,20 +926,23 @@ describe('enhancePropTypesProp', () => { }); 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); @@ -941,7 +953,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); @@ -957,7 +971,9 @@ describe('enhancePropTypesProp', () => { }); it('should not have deep object in summary', () => { - const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }"); + const component = createTestComponent( + createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }") + ); const { defaultValue } = extractPropDef(component); @@ -965,7 +981,7 @@ describe('enhancePropTypesProp', () => { }); it('should support short function', () => { - const component = createTestComponent('() => {}'); + const component = createTestComponent(createDefaultValue('() => {}')); const { defaultValue } = extractPropDef(component); @@ -975,7 +991,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); @@ -992,7 +1010,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); @@ -1006,7 +1026,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); @@ -1020,7 +1042,7 @@ describe('enhancePropTypesProp', () => { }); it('should support short element', () => { - const component = createTestComponent('
Hey!
'); + const component = createTestComponent(createDefaultValue('
Hey!
')); const { defaultValue } = extractPropDef(component); @@ -1030,23 +1052,33 @@ describe('enhancePropTypesProp', () => { it('should support long element', () => { const component = createTestComponent( - '() => {\n return
Inlined FunctionnalComponent!
;\n}' + createDefaultValue( + '
Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
' + ) ); const { defaultValue } = extractPropDef(component); expect(defaultValue.summary).toBe('element'); + expect(defaultValue.detail).toBe( + '
Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
' + ); + }); - const expectedDetail = `() => { - return
Inlined FunctionnalComponent!
; - }`; + it('should support element with props', () => { + const component = createTestComponent(createDefaultValue('')); - expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBe(''); }); it("should use the name of the React component when it's available", () => { const component = createTestComponent( - 'function InlinedFunctionalComponent() {\n return
Inlined FunctionnalComponent!
;\n}' + createDefaultValue( + 'function InlinedFunctionalComponent() {\n return
Inlined FunctionnalComponent!
;\n}' + ) ); const { defaultValue } = extractPropDef(component); @@ -1061,7 +1093,7 @@ describe('enhancePropTypesProp', () => { }); it('should not use the name of an HTML element', () => { - const component = createTestComponent('
Hey!
'); + const component = createTestComponent(createDefaultValue('
Hey!
')); const { defaultValue } = extractPropDef(component); @@ -1069,7 +1101,7 @@ describe('enhancePropTypesProp', () => { }); it('should support short array', () => { - const component = createTestComponent('[1]'); + const component = createTestComponent(createDefaultValue('[1]')); const { defaultValue } = extractPropDef(component); @@ -1079,7 +1111,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); @@ -1099,12 +1133,239 @@ describe('enhancePropTypesProp', () => { }); it('should not have deep array in summary', () => { - const component = createTestComponent('[[[1]]]'); + 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 = ; + // Simulate babel-plugin-add-react-displayname. + defaultProp.type.displayName = 'ReactComponent'; + + const { defaultValue } = extractPropDef(component, defaultProp); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + + it('should support React element with props', () => { + const component = createTestComponent(null); + + // @ts-ignore + const defaultProp = ; + // Simulate babel-plugin-add-react-displayname. + defaultProp.type.displayName = 'ReactComponent'; + + const { defaultValue } = extractPropDef(component, defaultProp); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBe(''); + }); + + it('should support short HTML element', () => { + const component = createTestComponent(null); + + const { defaultValue } = extractPropDef(component,
HTML element
); + + expect(defaultValue.summary).toBe('
HTML element
'); + expect(defaultValue.detail).toBeUndefined(); + }); + + it('should support long HTML element', () => { + const component = createTestComponent(null); + + const { defaultValue } = extractPropDef( + component, +
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ ); + + expect(defaultValue.summary).toBe('element'); + + const expectedDetail = `
+ HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +
`; + + 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
Inlined ClassComponent!
; + } + } + ); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + + it(`should support inlined anonymous React functional component for ${x}`, () => { + const component = createTestComponent(null, x); + + const { defaultValue } = extractPropDef(component, () => { + return
Inlined FunctionnalComponent!
; + }); + + 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
{foo}
; + }); + + 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
Inlined FunctionnalComponent!
; + }); + + expect(defaultValue.summary).toBe(''); + 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
{foo}
; + }); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + }); + }); }); }); diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts index 331aeb7b2a5..819b223cbdb 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts @@ -16,7 +16,7 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultPro } const { defaultValue } = extractedProp.docgenInfo; - if (!isNil(defaultValue)) { + if (!isNil(defaultValue) && !isNil(defaultValue.value)) { const newDefaultValue = createDefaultValue(defaultValue.value); if (!isNil(newDefaultValue)) { diff --git a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts index f87ca65b0e3..452396222a9 100644 --- a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts +++ b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts @@ -13,6 +13,7 @@ const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => { 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)); } diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts deleted file mode 100644 index f5ecaf2ff84..00000000000 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.ts +++ /dev/null @@ -1,239 +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 { - return { - [DOCGEN_SECTION]: { - ...docgenInfo, - }, - }; -} - -function createDocgenProp({ - name, - tsType, - ...others -}: Partial & { name: string }): Record { - 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 not have deep object in summary', () => { - const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }"); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).toBe('object'); - }); - - 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('
Hey!
'); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).toBe('
Hey!
'); - expect(defaultValue.detail).toBeUndefined(); - }); - - it('should support long element', () => { - const component = createTestComponent( - '() => {\n return
Inlined FunctionnalComponent!
;\n}' - ); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).toBe('element'); - - const expectedDetail = `() => { - return
Inlined FunctionnalComponent!
; - }`; - - 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
Inlined FunctionnalComponent!
;\n}' - ); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).toBe(''); - - const expectedDetail = `function InlinedFunctionalComponent() { - return
Inlined FunctionnalComponent!
; - }`; - - expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); - }); - - it('should not use the name of an HTML element', () => { - const component = createTestComponent('
Hey!
'); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).not.toBe('
'); - }); - - 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, '')); - }); - - it('should not have deep array in summary', () => { - const component = createTestComponent('[[[1]]]'); - - const { defaultValue } = extractPropDef(component); - - expect(defaultValue.summary).toBe('array'); - }); - }); -}); diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx new file mode 100644 index 00000000000..eac7ce9a233 --- /dev/null +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx @@ -0,0 +1,497 @@ +/* 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
React Component!
; +} + +function createDocgenSection(docgenInfo: DocgenInfo): Record { + return { + [DOCGEN_SECTION]: { + ...docgenInfo, + }, + }; +} + +function createDocgenProp({ + name, + tsType, + ...others +}: Partial & { name: string }): Record { + 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 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): Component { + return createComponent({ + docgenInfo: { + ...createDocgenProp({ + name: 'prop', + tsType: { name: 'anything-is-fine' }, + 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('
Hey!
')); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('
Hey!
'); + expect(defaultValue.detail).toBeUndefined(); + }); + + it('should support long element', () => { + const component = createTestComponent( + createDefaultValue( + '
Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
' + ) + ); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe('element'); + expect(defaultValue.detail).toBe( + '
Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
' + ); + }); + + it('should support element with props', () => { + const component = createTestComponent(createDefaultValue('')); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBe(''); + }); + + it("should use the name of the React component when it's available", () => { + const component = createTestComponent( + createDefaultValue( + 'function InlinedFunctionalComponent() {\n return
Inlined FunctionnalComponent!
;\n}' + ) + ); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).toBe(''); + + const expectedDetail = `function InlinedFunctionalComponent() { + return
Inlined FunctionnalComponent!
; + }`; + + 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('
Hey!
')); + + const { defaultValue } = extractPropDef(component); + + expect(defaultValue.summary).not.toBe('
'); + }); + + 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 = ; + // Simulate babel-plugin-add-react-displayname. + defaultProp.type.displayName = 'ReactComponent'; + + const { defaultValue } = extractPropDef(component, defaultProp); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + + it('should support React element with props', () => { + const component = createTestComponent(null); + + // @ts-ignore + const defaultProp = ; + // Simulate babel-plugin-add-react-displayname. + defaultProp.type.displayName = 'ReactComponent'; + + const { defaultValue } = extractPropDef(component, defaultProp); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBe(''); + }); + + it('should support short HTML element', () => { + const component = createTestComponent(null); + + const { defaultValue } = extractPropDef(component,
HTML element
); + + expect(defaultValue.summary).toBe('
HTML element
'); + expect(defaultValue.detail).toBeUndefined(); + }); + + it('should support long HTML element', () => { + const component = createTestComponent(null); + + const { defaultValue } = extractPropDef( + component, +
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ ); + + expect(defaultValue.summary).toBe('element'); + + const expectedDetail = `
+ HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! +
`; + + 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
Inlined ClassComponent!
; + } + } + ); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + + it(`should support inlined anonymous React functional component for ${x}`, () => { + const component = createTestComponent(null, x); + + const { defaultValue } = extractPropDef(component, () => { + return
Inlined FunctionnalComponent!
; + }); + + 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
{foo}
; + }); + + 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
Inlined FunctionnalComponent!
; + }); + + expect(defaultValue.summary).toBe(''); + 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
{foo}
; + }); + + expect(defaultValue.summary).toBe(''); + expect(defaultValue.detail).toBeUndefined(); + }); + }); + }); + }); +}); diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.ts index 392cf3a7ba2..9f840806de5 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.ts +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.ts @@ -1,14 +1,20 @@ import { isNil } from 'lodash'; import { PropDef } from '@storybook/components'; import { ExtractedProp } from '../../../lib/docgen'; -import { createDefaultValue } from '../lib/defaultValues'; +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; } diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js index 0aa0a366c36..7d58789bca9 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js @@ -45,6 +45,7 @@ const SOME_INLINE_PROP_TYPES = { foo: PropTypes.string, }), inlineArray: PropTypes.arrayOf(PropTypes.number), + inlineArrayOfObjects: PropTypes.arrayOf({ foo: PropTypes.string }), inlineFunctionalElement: PropTypes.element, inlineFunctionalElementInline: PropTypes.element, inlineFunctionalElementInlineReturningNull: PropTypes.element, @@ -64,6 +65,13 @@ const SOME_INLINE_DEFAULT_PROPS = { inlineNumber: 10, inlineObj: { foo: 'bar' }, inlineArray: [1, 2, 3], + inlineArrayOfObjects: [ + { foo: 'bar' }, + { foo: 'bar' }, + { foo: 'bar' }, + { foo: 'bar' }, + { foo: 'bar' }, + ], inlineFunctionalElement: , inlineFunctionalElementInline: () => { return
Inlined FunctionnalComponent!
; @@ -370,7 +378,7 @@ PropTypesProps.defaultProps = { }, symbol: Symbol('Default symbol'), node:
Hello!
, - functionalElement: , + functionalElement: , functionalElementInline: () => { return
Inlined FunctionnalComponent!
; }, diff --git a/lib/components/src/typography/shared.tsx b/lib/components/src/typography/shared.tsx index 82c8950b68d..c09dc27309b 100644 --- a/lib/components/src/typography/shared.tsx +++ b/lib/components/src/typography/shared.tsx @@ -20,6 +20,7 @@ export const headerCommon = ({ theme }: { theme: Theme }): CSSObject => ({ }); export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({ + lineHeight: 1, margin: '0 2px', padding: '0 5px', whiteSpace: 'nowrap', From b82c0063bd8cfce8484c3debee52126f7d305b1c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 26 Nov 2019 09:54:23 +0800 Subject: [PATCH 16/19] Update yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 1aa68fcf2e4..74312af242d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25219,7 +25219,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== From 2cd452f434aa29c9e421b1415eaf624eea73e004 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 22:34:58 -0500 Subject: [PATCH 17/19] Fixing TS errors --- .../react/lib/defaultValues/createFromRawDefaultProp.ts | 1 + .../src/frameworks/react/typeScript/handleProp.test.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts index abbedf96643..bacfaa37b84 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts @@ -1,5 +1,6 @@ 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'; diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx index eac7ce9a233..987e56a49db 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx @@ -56,12 +56,15 @@ function extractPropDef(component: Component, rawDefaultProp?: any): PropDef { describe('enhanceTypeScriptProp', () => { describe('defaultValue', () => { - function createTestComponent(defaultValue: DocgenPropDefaultValue): Component { + function createTestComponent( + defaultValue: DocgenPropDefaultValue, + typeName = 'anything-is-fine' + ): Component { return createComponent({ docgenInfo: { ...createDocgenProp({ name: 'prop', - tsType: { name: 'anything-is-fine' }, + tsType: { name: typeName }, defaultValue, }), }, From e4ec6b5b1c6d667754ff3f3e29dce3428880c7cf Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Mon, 25 Nov 2019 22:44:43 -0500 Subject: [PATCH 18/19] Fix deepscan issues --- .../react/lib/defaultValues/createFromRawDefaultProp.ts | 2 +- .../docs/src/frameworks/react/propTypes/handleProp.test.tsx | 4 +++- .../docs/src/frameworks/react/typeScript/handleProp.test.tsx | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts index bacfaa37b84..9adcce0091f 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts @@ -130,7 +130,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => { inspectionResult = inspectValue(rawDefaultProp.toString()); } - const { hasParams } = inspectValue(rawDefaultProp.toString()).inferedType as InspectionFunction; + const { hasParams } = inspectionResult.inferedType as InspectionFunction; return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams)); } diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx index 9839d8c4e21..cb3a413468f 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx @@ -37,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
Hey!
; + }; component.propTypes = propTypes; component.defaultProps = defaultProps; diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx index 987e56a49db..a0cd380901b 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx @@ -36,7 +36,9 @@ function createDocgenProp({ // eslint-disable-next-line react/forbid-foreign-prop-types function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component { - const component = () => {}; + const component = () => { + return
Hey!
; + }; component.propTypes = propTypes; component.defaultProps = defaultProps; From f022f63ad9b78a23c844a2c76caa9b351e153407 Mon Sep 17 00:00:00 2001 From: Patrick Lafrance Date: Tue, 26 Nov 2019 09:45:14 -0500 Subject: [PATCH 19/19] Revert line-height change since it's done in https://github.com/storybookjs/storybook/pull/8953 --- lib/components/src/typography/shared.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/src/typography/shared.tsx b/lib/components/src/typography/shared.tsx index c09dc27309b..82c8950b68d 100644 --- a/lib/components/src/typography/shared.tsx +++ b/lib/components/src/typography/shared.tsx @@ -20,7 +20,6 @@ export const headerCommon = ({ theme }: { theme: Theme }): CSSObject => ({ }); export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({ - lineHeight: 1, margin: '0 2px', padding: '0 5px', whiteSpace: 'nowrap',