update breadcrumbs separator, render nested typeArgs, render nested arraytypes

Author: Jacob Logan

src/components/ApiDocs/display/ParameterType.tsx

@@ -24,36 +24,47 @@ interface ParameterComponentType {
   typeData: typeDataType;
 }
 
+type TypeArguments = (string | React.JSX.Element)[];
+
 export const ParameterType = ({ typeData }: ParameterComponentType) => {
   if (!typeData) return;
   const typeArgs = typeData.typeArguments;
   let typeType = typeData.type;
   if (typeData.kind === 256) {
     typeType = 'declaration';
   }
+
+  // adds type arguments to an array to be rendered
+  const addTypeArgs = (
+    typeArgs: LinkDataType[],
+    displayArray: TypeArguments
+  ): TypeArguments => {
+    const typeArgArray = typeArgs.reduce<TypeArguments>((acc, tArg, index) => {
+      let retValue;
+      if (index === 0) {
+        retValue = [<TypeLink key={tArg.name} linkData={tArg} />];
+      } else {
+        retValue = [...acc, ', ', <TypeLink key={tArg.name} linkData={tArg} />];
+      }
+      if (tArg?.typeArguments?.length) {
+        addTypeArgs(tArg.typeArguments, retValue);
+      }
+      return retValue;
+    }, []);
+    if (typeArgArray.length) {
+      typeArgArray.push('>');
+      typeArgArray.unshift('<');
+      displayArray.push(...typeArgArray);
+    }
+    return displayArray;
+  };
+
   switch (typeType) {
     case 'reference':
       return (
         <>
           <ReferenceType data={typeData} />{' '}
-          {typeArgs && (
-            <>
-              &lt;
-              {typeArgs.reduce<(string | React.JSX.Element)[]>(
-                (acc, tArg, index) => {
-                  if (index === 0)
-                    return [<TypeLink key={tArg.name} linkData={tArg} />];
-                  return [
-                    ...acc,
-                    ', ',
-                    <TypeLink key={tArg.name} linkData={tArg} />
-                  ];
-                },
-                []
-              )}
-              &gt;
-            </>
-          )}
+          {typeArgs && <>{addTypeArgs(typeArgs, [])}</>}
         </>
       );
     case 'intersection':
@@ -82,6 +93,8 @@ export const ParameterType = ({ typeData }: ParameterComponentType) => {
 };
 
 const ArrayType = ({ data }) => {
+  console.log('ARRAY TYPE');
+  console.log(data);
   return (
     <>
       <ParameterType typeData={data} />

src/components/ApiDocs/display/TypeLink.tsx

@@ -8,6 +8,8 @@ export interface LinkDataType {
   type: string | LinkDataType;
   target: number;
   value: string;
+  typeArguments: LinkDataType[];
+  elementType: LinkDataType;
 }
 
 export interface TypeLinkInterface {
@@ -37,6 +39,15 @@ export const TypeLink = ({ linkData, breadCrumbs }: TypeLinkInterface) => {
     return <View as="span">{linkData.name}</View>;
   } else if (linkData.type === 'literal') {
     return <View as="span">{linkData.value}</View>;
+  } else if (linkData.type === 'array') {
+    return [
+      <TypeLink
+        linkData={linkData.elementType}
+        breadCrumbs={breadCrumbs}
+        key={linkData.elementType.name}
+      />,
+      '[]'
+    ];
   } else {
     return (
       <button className={className} onClick={onClickHandler}>

src/styles/reference.scss

@@ -45,6 +45,9 @@
   overflow: scroll;
   align-items: baseline;
   gap: 2px;
+  &__separator {
+    color: var(--amplify-colors-neutral-90);
+  }
 }
 
 .api-modal__breadcrumbs__current {