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

Increasese max summary length and add a special max length for func

Browse Source
This commit is contained in:
patrick.lafrance 2019-11-28 10:50:45 -05:00
parent 8561e7b95a
commit c476ab6497
5 changed files with 95 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

45
addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
View File

@ -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>',
},
});
@ -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, ''));
});
@ -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, ''));

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

@ -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 }'
);
});

2
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 {

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

@ -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
*