From 921e8b1ea8ba0c62a2b7400facdcee06cde07fd2 Mon Sep 17 00:00:00 2001
From: isaacbuckman <34870239+isaacbuckman@users.noreply.github.com>
Date: Tue, 14 Jul 2020 09:56:28 -0400
Subject: [PATCH] fix: Make JSDoc @param display arrays (#1623)

Doctrine has a function to stringify the parameter types. If the type is a string[], doctrine will stringify this into Array.<string>.

Fixes #1611
---
 examples/sections/styleguide.config.js                    | 4 ++--
 src/client/rsg-components/Argument/Argument.spec.tsx      | 8 ++++----
 src/client/rsg-components/Argument/ArgumentRenderer.tsx   | 4 +++-
 src/client/rsg-components/Props/Props.spec.tsx            | 4 ++--
 .../rsg-components/ReactComponent/ReactComponent.spec.tsx | 2 +-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/examples/sections/styleguide.config.js b/examples/sections/styleguide.config.js
index d29e14d55..b0deab5ad 100644
--- a/examples/sections/styleguide.config.js
+++ b/examples/sections/styleguide.config.js
@@ -93,8 +93,8 @@ module.exports = {
 			env === 'development'
 				? false
 				: {
-						maxAssetSize: 1100000, // bytes
-						maxEntrypointSize: 1100000, // bytes
+						maxAssetSize: 1150000, // bytes
+						maxEntrypointSize: 1150000, // bytes
 						hints: 'error',
 				  },
 	}),
diff --git a/src/client/rsg-components/Argument/Argument.spec.tsx b/src/client/rsg-components/Argument/Argument.spec.tsx
index d70854d7d..80143beac 100644
--- a/src/client/rsg-components/Argument/Argument.spec.tsx
+++ b/src/client/rsg-components/Argument/Argument.spec.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { ArgumentRenderer, styles } from './ArgumentRenderer';
 
 const name = 'Foo';
-const type = { name: 'Array' };
+const type = {type: 'NameExpression', name: 'Array'};
 const description = 'Converts foo to bar';
 const props = {
 	classes: classes(styles),
@@ -28,7 +28,7 @@ it('should render optional argument', () => {
 	const actual = shallow(
 		<ArgumentRenderer
 			{...props}
-			type={{ type: 'OptionalType', expression: { name: 'Array' } }}
+			type={{ type: 'OptionalType', expression: {type: 'NameExpression', name: 'Array'} }}
 			description={description}
 		/>
 	);
@@ -40,7 +40,7 @@ it('should render default value of argument', () => {
 	const actual = shallow(
 		<ArgumentRenderer
 			{...props}
-			type={{ name: 'String' }}
+			type={{type: 'NameExpression', name: 'String'}}
 			default="bar"
 			description={description}
 		/>
@@ -53,7 +53,7 @@ it('should render default value of optional argument', () => {
 	const actual = shallow(
 		<ArgumentRenderer
 			{...props}
-			type={{ type: 'OptionalType', expression: { name: 'Boolean' } }}
+			type={{ type: 'OptionalType', expression: {type: 'NameExpression', name: 'Boolean'} }}
 			default="true"
 			description={description}
 		/>
diff --git a/src/client/rsg-components/Argument/ArgumentRenderer.tsx b/src/client/rsg-components/Argument/ArgumentRenderer.tsx
index f83493b7d..9cfbcdd1a 100644
--- a/src/client/rsg-components/Argument/ArgumentRenderer.tsx
+++ b/src/client/rsg-components/Argument/ArgumentRenderer.tsx
@@ -5,6 +5,7 @@ import Markdown from 'rsg-components/Markdown';
 import Name from 'rsg-components/Name';
 import Type from 'rsg-components/Type';
 import Group from 'react-group';
+import doctrine from 'doctrine';
 import * as Rsg from '../../../typings';
 
 export const styles = ({ space }: Rsg.Theme) => ({
@@ -38,6 +39,7 @@ export const ArgumentRenderer: React.FunctionComponent<ArgumentPropsWithClasses>
 	if (isOptional) {
 		type = type.expression;
 	}
+	const typeName = type ? doctrine.type.stringify(type) : '';
 	const content = (
 		<Group>
 			{returns && 'Returns'}
@@ -49,7 +51,7 @@ export const ArgumentRenderer: React.FunctionComponent<ArgumentPropsWithClasses>
 			)}
 			{type && (
 				<Type>
-					{type.name}
+					{typeName}
 					{isOptional && '?'}
 					{!!defaultValue && `=${defaultValue}`}
 				</Type>
diff --git a/src/client/rsg-components/Props/Props.spec.tsx b/src/client/rsg-components/Props/Props.spec.tsx
index dbcf29791..83b9d80a9 100644
--- a/src/client/rsg-components/Props/Props.spec.tsx
+++ b/src/client/rsg-components/Props/Props.spec.tsx
@@ -513,7 +513,7 @@ describe('props columns', () => {
 						{
 							name: 'Foo',
 							description: 'Converts foo to bar',
-							type: { name: 'Array' },
+							type: {type: 'NameExpression', name: 'Array' },
 						},
 					],
 					param: [
@@ -551,7 +551,7 @@ describe('props columns', () => {
 						{
 							title: 'Foo',
 							description: 'Returns foo from bar',
-							type: { name: 'Array' },
+							type: {type: 'NameExpression', name: 'Array' },
 						},
 					],
 				},
diff --git a/src/client/rsg-components/ReactComponent/ReactComponent.spec.tsx b/src/client/rsg-components/ReactComponent/ReactComponent.spec.tsx
index 8e356587a..80d63ca42 100644
--- a/src/client/rsg-components/ReactComponent/ReactComponent.spec.tsx
+++ b/src/client/rsg-components/ReactComponent/ReactComponent.spec.tsx
@@ -47,7 +47,7 @@ const componentWithEverything: Rsg.Component = {
 					{
 						name: 'newValue',
 						description: 'New value for the counter.',
-						type: { name: 'Number' },
+						type: {type: 'NameExpression', name: 'Number' },
 					},
 				],
 				returns: null,