Add custom code to replace the custom string with the raw type when available

addons/docs/src/lib/DocgenInfo.ts

@@ -1,6 +1,10 @@
 export interface DocgenInfo {
   type?: {
     name: string;
+    value?: {
+      name?: string;
+      raw?: string;
+    };
   };
   flowType?: any;
   tsType?: any;

addons/docs/src/lib/jsdoc-parser.ts

@@ -42,7 +42,7 @@ function parse(content: string): Annotation {
     });
   } catch (e) {
     // eslint-disable-next-line no-console
-    console.log(e);
+    console.error(e);
 
     throw new Error('Cannot parse JSDoc tags.');
   }

addons/docs/src/lib/type-system-handlers.test.ts

@@ -737,6 +737,41 @@ describe('prop-types handler', () => {
       expect(propDef.description).toBe('onClick description');
     });
   });
+
+  describe('when the prop type is arrayOf', () => {
+    it('should support array of primitives', () => {
+      const docgenInfo = createDocgenInfo({
+        type: {
+          name: 'arrayOf',
+          value: {
+            name: 'string',
+          },
+        },
+      });
+
+      const { propDef } = propTypesHandler(DEFAULT_PROP_NAME, docgenInfo);
+
+      expect(propDef.type.name).toBe('arrayOf');
+      expect(propDef.type.value.name).toBe('string');
+    });
+
+    it('should support array of custom shapes', () => {
+      const docgenInfo = createDocgenInfo({
+        type: {
+          name: 'arrayOf',
+          value: {
+            name: 'custom',
+            raw: 'Circle',
+          },
+        },
+      });
+
+      const { propDef } = propTypesHandler(DEFAULT_PROP_NAME, docgenInfo);
+
+      expect(propDef.type.name).toBe('arrayOf');
+      expect(propDef.type.value.name).toBe('Circle');
+    });
+  });
 });
 
 describe('ts handler', () => {

addons/docs/src/lib/type-system-handlers.ts

@@ -132,6 +132,12 @@ export const propTypesHandler: TypeSystemHandler = (propName: string, docgenInfo
           };
         }
       }
+    } else if (propDef.type.name === 'arrayOf') {
+      if (propDef.type.value.name === 'custom') {
+        if (!isNil(propDef.type.value.raw)) {
+          propDef.type.value.name = propDef.type.value.raw;
+        }
+      }
     }
   }
 

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

@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ITEM_SHAPE = {
+  text: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export const PropTypesProps = () => <div>PropTypes!</div>;
+
+PropTypesProps.propTypes = {
+  arrayOfPrimitive: PropTypes.arrayOf(PropTypes.string),
+  arrayOfShape: PropTypes.arrayOf(ITEM_SHAPE),
+};
+
+PropTypesProps.defaultProps = {
+  arrayOfPrimitive: ['foo', 'bar'],
+  arrayOfShape: [{ text: 'foo', value: 'bar' }],
+};

examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+interface ItemShape {
+  text: string;
+  value: string;
+}
+
+interface TypeScriptPropsProps {
+  arrayOfPrimitive: string[];
+  arrayOfShape: ItemShape[];
+}
+
+export const TypeScriptProps: FC<TypeScriptPropsProps> = () => <div>TypeScript!</div>;
+TypeScriptProps.defaultProps = {
+  arrayOfPrimitive: ['foo', 'bar'],
+  arrayOfShape: [{ text: 'foo', value: 'bar' }],
+};

examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/types.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { PropTypesProps } from "./prop-types";
+import { TypeScriptProps } from "./ts-types";
+
+<Meta title="Docgen|types" />
+
+## Prop Types
+
+<Props of={PropTypesProps} />
+
+## TypeScript
+
+<Props of={TypeScriptProps} />

lib/components/src/blocks/PropsTable/PropDef.ts

@@ -10,9 +10,7 @@ export interface PropDefJsDocTag {
 
 export interface PropDef {
   name: string;
-  type: {
-    name: string;
-  };
+  type: any;
   required: boolean;
   description?: string;
   defaultValue?: string;