From c476ab649719e4beb90ab57753f8f6fb725b5d92 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Thu, 28 Nov 2019 10:50:45 -0500 Subject: [PATCH] Increasese max summary length and add a special max length for func --- .../frameworks/react/propTypes/createType.ts | 6 ++- .../react/propTypes/handleProp.test.tsx | 45 ++++++++++++++----- .../src/lib/docgen/flow/createPropDef.test.ts | 32 ++++++++++++- addons/docs/src/lib/utils.ts | 2 +- .../stories/docgen-tests/types/prop-types.js | 25 +++++++++++ 5 files changed, 95 insertions(+), 15 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/addons/docs/src/frameworks/react/propTypes/createType.ts index 6e375478470..2c4f704bdaa 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/addons/docs/src/frameworks/react/propTypes/createType.ts @@ -22,6 +22,8 @@ import { InspectionArray, } from '../lib/inspection'; +const MAX_FUNC_LENGTH = 150; + enum PropTypesType { CUSTOM = 'custom', ANY = 'any', @@ -146,7 +148,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe } default: short = getCaptionForInspectionType(type); - compact = value; + compact = splitIntoLines(value).length === 1 ? value : null; full = value; break; } @@ -384,7 +386,7 @@ export function createType(extractedProp: ExtractedProp): PropType { let summary = short; const detail = full; - if (!isTooLongForTypeSummary(full)) { + if (full.length < MAX_FUNC_LENGTH) { summary = full; } else if (!isNil(compact)) { summary = compact; diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx index cb3a413468f..71417d46eff 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx @@ -161,7 +161,7 @@ describe('enhancePropTypesProp', () => { type: { name: 'custom', raw: - '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
', + '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
', }, }); @@ -170,7 +170,7 @@ describe('enhancePropTypesProp', () => { expect(type.summary).toBe('element'); const expectedDetail = - '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'; + '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'; expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); }); @@ -303,7 +303,15 @@ describe('enhancePropTypesProp', () => { name: 'string', required: false, }, - anotherAnother: { + another2: { + name: 'string', + required: false, + }, + another3: { + name: 'string', + required: false, + }, + another4: { name: 'string', required: false, }, @@ -319,7 +327,9 @@ describe('enhancePropTypesProp', () => { foo: string, bar: string, another: string, - anotherAnother: string + another2: string, + another3: string, + another4: string }`; expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); @@ -382,7 +392,8 @@ describe('enhancePropTypesProp', () => { computed: true, }, { - value: '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n}', + value: + '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n hey: PropTypes.string,\n ho: PropTypes.string,\n}', computed: true, }, ], @@ -398,7 +409,9 @@ describe('enhancePropTypesProp', () => { value: string } | { foo: string, - bar: string + bar: string, + hey: string, + ho: string }`; expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); @@ -799,7 +812,7 @@ describe('enhancePropTypesProp', () => { value: { name: 'custom', raw: - '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n anotherAnother: PropTypes.string.isRequired,\n}', + '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n another2: PropTypes.string.isRequired,\n another3: PropTypes.string.isRequired,\n another4: PropTypes.string.isRequired,\n}', }, }, }); @@ -812,7 +825,9 @@ describe('enhancePropTypesProp', () => { text: string, value: string, another: string, - anotherAnother: string + another2: string, + another3: string, + another4: string }]`; expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, '')); @@ -875,7 +890,15 @@ describe('enhancePropTypesProp', () => { name: 'string', required: false, }, - anotherAnother: { + another2: { + name: 'string', + required: false, + }, + another3: { + name: 'string', + required: false, + }, + another4: { name: 'string', required: false, }, @@ -892,7 +915,9 @@ describe('enhancePropTypesProp', () => { foo: string, bar: string, another: string, - anotherAnother: string + another2: string, + another3: string, + another4: 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 0db4ddeea1c..0b6a4e7156d 100644 --- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts +++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts @@ -98,7 +98,7 @@ describe('type', () => { name: 'signature', type: 'object', raw: - '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }', + '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }', signature: { properties: [ { @@ -136,6 +136,34 @@ describe('type', () => { required: true, }, }, + { + key: 'prop5', + value: { + name: 'string', + required: true, + }, + }, + { + key: 'prop6', + value: { + name: 'string', + required: true, + }, + }, + { + key: 'prop7', + value: { + name: 'string', + required: true, + }, + }, + { + key: 'prop8', + value: { + name: 'string', + required: true, + }, + }, ], constructor: { name: 'signature', @@ -163,7 +191,7 @@ describe('type', () => { expect(type.summary).toBe('object'); expect(type.detail).toBe( - '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }' + '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }' ); }); diff --git a/addons/docs/src/lib/utils.ts b/addons/docs/src/lib/utils.ts index db87763a53c..4a0af2fb7a5 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 = 90; 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 dd8255f121e..a314f31bd6a 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 @@ -129,6 +129,17 @@ 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. + * @returns {ComplexObject} - Returns a complex object. + */ + semiLongFuncWithJsDoc: PropTypes.func, /** * @param {string} foo - A foo value. * @param {number} bar - A bar value. @@ -138,6 +149,10 @@ PropTypesProps.propTypes = { * @param {number} bar4 - A bar value. * @param {number} bar5 - A bar value. * @param {number} bar6 - A bar value. + * @param {number} bar7 - A bar value. + * @param {number} bar8 - A bar value. + * @param {number} bar9 - A bar value. + * @param {number} bar10 - A bar value. * @returns {ComplexObject} - Returns a complex object. */ veryLongFuncWithJsDoc: PropTypes.func, @@ -314,6 +329,16 @@ PropTypesProps.propTypes = { shapeShort: PropTypes.shape({ foo: string, }), + shapeLong: PropTypes.shape({ + foo: string, + prop1: string, + prop2: string, + prop3: string, + prop4: string, + prop5: string, + prop6: string, + prop7: string, + }), /** * propType for shape with nested arrayOf *