Skip to content

Commit

Permalink
Addon-docs: Increase Props summary and func length (#8998)
Browse files Browse the repository at this point in the history 
Addon-docs: Increase Props summary and func length
  • Loading branch information
@shilman
shilman committed Dec 2, 2019
2 parents 5a581bc + 7e356a9 commit 16e08e7
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 21 deletions.
22 changes: 14 additions & 8 deletions addons/docs/src/frameworks/react/propTypes/createType.ts
View file
Expand Up @@ -2,7 +2,11 @@ import { isNil } from 'lodash';
import { PropType } from '@storybook/components';
import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
import {
generateFuncSignature,
generateShortFuncSignature,
toMultilineSignature,
} from './generateFuncSignature';
import {
OBJECT_CAPTION,
ARRAY_CAPTION,
Expand All @@ -22,6 +26,8 @@ import {
InspectionArray,
} from '../lib/inspection';

const MAX_FUNC_LENGTH = 150;

enum PropTypesType {
CUSTOM = 'custom',
ANY = 'any',
Expand Down Expand Up @@ -146,7 +152,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
}
default:
short = getCaptionForInspectionType(type);
compact = value;
compact = splitIntoLines(value).length === 1 ? value : null;
full = value;
break;
}
Expand Down Expand Up @@ -379,18 +385,18 @@ export function createType(extractedProp: ExtractedProp): PropType {
return createSummaryValue(short, short !== full ? full : undefined);
}
case PropTypesType.FUNC: {
const { short, compact, full } = generateType(type, extractedProp);
const { short, full } = generateType(type, extractedProp);

let summary = short;
const detail = full;
let detail;

if (!isTooLongForTypeSummary(full)) {
if (full.length < MAX_FUNC_LENGTH) {
summary = full;
} else if (!isNil(compact)) {
summary = compact;
} else {
detail = toMultilineSignature(full);
}

return createSummaryValue(summary, summary !== detail ? detail : undefined);
return createSummaryValue(summary, detail);
}
default:
return null;
Expand Down
4 changes: 4 additions & 0 deletions addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
View file
Expand Up @@ -63,3 +63,7 @@ export function generateShortFuncSignature(

return funcParts.join(' ');
}

export function toMultilineSignature(signature: string): string {
return signature.replace(/,/g, ',\r\n');
}
45 changes: 35 additions & 10 deletions addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
View file
Expand Up @@ -161,7 +161,7 @@ describe('enhancePropTypesProp', () => {
type: {
name: 'custom',
raw:
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
},
});

Expand All @@ -170,7 +170,7 @@ describe('enhancePropTypesProp', () => {
expect(type.summary).toBe('element');

const expectedDetail =
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';
'<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';

expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
Expand Down Expand Up @@ -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,
},
Expand All @@ -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, ''));
Expand Down Expand Up @@ -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,
},
],
Expand All @@ -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, ''));
Expand Down Expand Up @@ -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}',
},
},
});
Expand All @@ -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, ''));
Expand Down Expand Up @@ -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,
},
Expand All @@ -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, ''));
Expand Down
32 changes: 30 additions & 2 deletions addons/docs/src/lib/docgen/flow/createPropDef.test.ts
View file
Expand Up @@ -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: [
{
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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 }'
);
});

Expand Down
2 changes: 1 addition & 1 deletion addons/docs/src/lib/utils.ts
View file
@@ -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 {
Expand Down
25 changes: 25 additions & 0 deletions examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
View file
Expand Up @@ -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.
Expand All @@ -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,
Expand Down Expand Up @@ -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
*
Expand Down

0 comments on commit 16e08e7

Please sign in to comment.