Addon-docs: Increase Props summary and func length

addons/docs/src/frameworks/react/propTypes/createType.ts

@@ -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,
@@ -22,6 +26,8 @@ import {
   InspectionArray,
 } from '../lib/inspection';
 
+const MAX_FUNC_LENGTH = 150;
+
 enum PropTypesType {
   CUSTOM = 'custom',
   ANY = 'any',
@@ -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;
   }
@@ -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;

addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts

@@ -63,3 +63,7 @@ export function generateShortFuncSignature(
 
   return funcParts.join(' ');
 }
+
+export function toMultilineSignature(signature: string): string {
+  return signature.replace(/,/g, ',\r\n');
+}

addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx

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

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

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 {

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
    *