additional template functionality

src/components/ApiDocs/ApiComment.tsx

@@ -3,11 +3,16 @@ import { View } from '@aws-amplify/ui-react';
 export const ApiComment = ({ apiComment }) => {
     return (
         <View>
-            {apiComment.map((snippet) => {
+            {apiComment.map((snippet, idx) => {
                 if (snippet.kind === "code") {
                     return <code>{snippet.text.replaceAll('`', '')}</code>
                 } else {
-                    return snippet.text
+                    const text = snippet.text;
+                    if (idx === 0 && text.startsWith('-')) {
+                        return text.slice(1);
+                    } else {
+                        return text;
+                    }
                 }
             })}
         </View>

src/components/ApiDocs/FunctionReference.tsx

@@ -2,7 +2,9 @@ import { View } from '@aws-amplify/ui-react';
 import { FunctionSignature } from './FunctionSignature';
 
 export const FunctionReference = ({ func }) => {
-    return (<View>
-        {func.signatures.map((sig) => <FunctionSignature sig={sig} />)}
-    </View>)
+
+    return (
+        <View>
+            {func.signatures.map((sig) => <FunctionSignature sig={sig} />)}
+        </View>)
 }

src/components/ApiDocs/FunctionReturn.tsx

@@ -1,12 +1,32 @@
 import { View } from '@aws-amplify/ui-react';
 import { MDXHeading } from '../MDXComponents';
+import { Promise } from './display/Promise';
+import { ApiComment } from './ApiComment';
+import references from '../../directory/apiReferences.json';
 
 export const FunctionReturn = ({ functionReturn }) => {
+    const name = functionReturn.name;
+    let display, description;
+    if (name === "Promise") {
+        const returnType = references[functionReturn.typeArguments[0].target];
+        display = <Promise typeObject={functionReturn} />
+        if (returnType?.comment?.summary) {
+            description = <ApiComment apiComment={returnType.comment.summary} />
+        }
+    } else {
+        const returnType = references[functionReturn.target];
+        display = name;
+        if (returnType?.comment?.summary) {
+            description = <ApiComment apiComment={returnType.comment.summary} />
+        }
+    }
     return (
         <View>
             <MDXHeading level={3}>Returns:</MDXHeading>
 
-            {/* {references[fn].return.description} */}
+            {display}
+
+            {description}
         </View>
     )
 }

src/components/ApiDocs/Parameters.tsx

@@ -1,6 +1,7 @@
 import { View } from '@aws-amplify/ui-react';
 import { MDXHeading, MDXTable } from '../MDXComponents';
 import { ApiComment } from './ApiComment';
+import { ParameterType } from './display';
 import references from '../../directory/apiReferences.json';
 
 export const Parameters = ({ parameters }) => {
@@ -25,8 +26,7 @@ export const Parameters = ({ parameters }) => {
                                     <code>{option.name}</code>
                                 </td>
                                 <td>{option?.flags?.isOptional ? 'false' : 'true'}</td>
-                                {/* <td onClick={modalOpen}><Type typeData={option.value} /></td> */}
-                                <td>Type</td>
+                                <td><ParameterType typeData={option.type} /></td>
                                 <td>{option?.comment?.summary && <ApiComment apiComment={option.comment.summary} />}</td>
                             </tr>
                         );

src/components/ApiDocs/ReferencePage.tsx

@@ -1,10 +1,11 @@
 import references from '../../directory/apiReferences.json';
 import { FunctionReference } from './FunctionReference';
+import { Divider, View } from '@aws-amplify/ui-react';
 
 export const ReferencePage = ({ category }) => {
 
     const cat = references['categories'].find((catObject) => catObject.name === category);
-    return <>
-        {cat.children.map((child) => <FunctionReference func={child} />)}
-    </>;
+    return <View className={'reference-page'}>
+        {cat.children.map((child, idx) => <>{idx !== 0 && <Divider marginTop={'medium'} />}<FunctionReference func={child} /></>)}
+    </View>;
 }

src/components/ApiDocs/display/ApiModal.tsx

@@ -0,0 +1,122 @@
+import { View, Flex, Heading, Card, Divider, Button } from '@aws-amplify/ui-react'
+import { IconX } from '../../Icons'
+import { ParameterType } from './ParameterType';
+import references from '../../../directory/apiReferences.json';
+import { ApiComment } from '../ApiComment';
+
+export const ApiModal = ({ data, showModal, close, breadCrumbs, clearBC }) => {
+    let name = data.name;
+    if (data.type === 'reference') {
+        data = references[data.target];
+    }
+    const description = data?.comment?.summary;
+
+    const closeModal = () => {
+        clearBC();
+        close();
+    }
+
+
+
+    let typeParameters = data.typeArguments;
+    if (data?.typeObject?.type == 'alias' && data.typeObject.typeParameters) {
+        typeParameters = data.typeObject.typeParameters;
+    } else if (data?.typeObject?.type == 'interface' && data.typeObject.typeParameters && data.typeObject.name == data.name) {
+        typeParameters = data.typeObject.typeParameters;
+    }
+    const params = typeParameters?.map((p) => {
+        return p.name;
+    });
+    if (params && params.length) {
+        name += `<${params.join(',')}>`
+    }
+    const typeData = data.typeObject || data.value;
+    // look for objects or interfaces to render additional data
+    const displayProperties = {};
+    function recursivelyParseType(typeData, displayProperties) {
+        if (!typeData) return;
+        if (typeData.type === 'alias') {
+            recursivelyParseType(typeData.value, displayProperties);
+        } else if (typeData.type === 'intersection') {
+            for (const key in typeData.types) {
+                recursivelyParseType(typeData.types[key], displayProperties);
+            }
+        } else if (typeData.type === 'union') {
+            for (const key in typeData.elements) {
+                recursivelyParseType(typeData.elements[key], displayProperties);
+            }
+        } else if (typeData.type === 'object' || typeData.type === 'interface') {
+            Object.keys(typeData.properties).forEach((key) => {
+                if (typeData.properties[key].description) { // only add displayProperties that have a description to be displayed
+                    displayProperties[key] = typeData.properties[key];
+                }
+            });
+        }
+    }
+    recursivelyParseType(typeData, displayProperties);
+
+    let displayTypes;
+    if (Object.keys(displayProperties).length) {
+        displayTypes = Object.keys(displayProperties).map((key) => {
+            return <DisplayType key={key} data={displayProperties[key]} />
+        });
+    }
+
+
+
+
+
+    return (
+        <View display={showModal ? 'flex' : 'none'} className="api-modal-container">
+            <View
+            >
+                <Card
+                    className="api-modal"
+                    borderRadius="medium"
+                    variation="outlined"
+                    color="white"
+                    textAlign="center"
+                >
+                    <View padding="xs" fontSize="large">
+                        <Flex>
+                            {breadCrumbs.length && breadCrumbs.reduce((acc, bc, idx) => {
+                                const next = bc.name;
+                                if (idx > 0) {
+                                    acc.push(' > ');
+                                }
+                                acc.push(next);
+                                return acc;
+                            }, [])}
+                        </Flex>
+                        <Flex justifyContent="space-between">
+                            <Heading padding="large" level={2} >{name}</Heading>
+                            <Button onClick={closeModal} size="small" variation="link">
+                                <IconX />
+                            </Button>
+                        </Flex>
+                        <Divider padding="xs" />
+                        <View fontSize="large">
+                            <ParameterType typeData={data.type} />
+                        </View>
+                        {description && <>
+                            <ApiComment apiComment={description} />
+                        </>}
+                    </View>
+                </Card>
+            </View>
+        </View >
+    )
+}
+
+const DisplayType = ({ data }) => {
+    return (
+        <Flex direction="column" key={data.name} marginTop="10px">
+            <Flex>
+                {data.name}: <code>{data.value.type}</code>
+            </Flex>
+            <Flex>
+                {data.description}
+            </Flex>
+        </Flex>
+    )
+}

src/components/ApiDocs/display/ParameterType.tsx

@@ -0,0 +1,134 @@
+import { View, Flex } from '@aws-amplify/ui-react'
+import { TypeLink } from './TypeLink';
+import references from '../../../directory/apiReferences.json';
+
+export const ParameterType = ({ typeData }) => {
+    if (!typeData) return;
+    const typeArgs = typeData.typeArguments;
+    const typeType = typeData.type;
+    switch (typeType) {
+        case 'reference':
+            return <>
+                <ReferenceType data={typeData} /> {typeArgs && <>&lt;{typeArgs.map((tArg) => {
+                    return <TypeLink key={tArg.name} linkData={tArg} />
+                })}&gt;</>}
+            </>
+        case 'intersection':
+            const intersectionArgs = typeData.types;
+            return <>
+                {intersectionArgs.reduce((acc, item, index) => {
+                    const comp = <ParameterType key={index} typeData={item} />;
+                    if (index !== 0) {
+                        acc.push(' & ');
+                    }
+                    acc.push(comp);
+                    return acc;
+                }, [])}
+            </>
+        case 'reflection':
+            const reflectionChildren = typeData.children;
+            return <>
+                {'{'}
+                {/* {reflectionChildren.map((child) => {
+                    return <>{child.name}: <ParameterType key={child.name} typeData={child} /></>
+                })} */}
+                {'}'}
+            </>
+        default:
+            return `${typeType} defaulted`;
+    }
+}
+
+const ReferenceType = ({ data }) => {
+    // should be a link that loads the next type when clicked on
+    const referencedObject = references[data.target];
+    if (!referencedObject) {
+        console.log("EMPTY")
+        console.log(data);
+    }
+
+    return <TypeLink linkData={referencedObject} />
+}
+
+const IntersectionType = ({ data }) => {
+    // should iterate over types putting & between and rendering each one
+    return (
+        <View>
+            {data.types.map((t, idx) => {
+                return (<View key={idx}><TypeLink linkData={t} /> {idx < data.types.length - 1 && <span>&</span>} </View>)
+            })}
+        </View>
+    )
+}
+
+const UnionType = ({ data }) => {
+    // should iterate over types putting | between and rendering each one
+    return (
+        <View>
+            {data.elements.map((t, idx) => {
+                return (<View key={idx}><TypeLink linkData={t} /> {idx < data.elements.length - 1 && <span>|</span>} </View>)
+            })}
+        </View>
+    )
+}
+
+const AliasType = ({ data }) => {
+    // should render the type object contained in value
+    return (<ParameterType typeData={data.value} />)
+}
+
+export const ApplicationType = ({ data }) => {
+    // example of application SomeType<AnotherType> it should render the "base" and "typeParameters"
+    const params = data.typeParameters.map((param, idx) => {
+        if (param.type === 'reference') {
+            return <><TypeLink linkData={param} />{idx < data.typeParameters.length - 1 ? ', ' : ''}</>
+        } else {
+            return <><code>{param.name || param.type}</code>{idx < data.typeParameters.length - 1 ? ', ' : ''}</>
+        }
+    });
+    return (
+        <View>
+            <TypeLink linkData={data.base} /> &lt; {params} &gt;
+        </View>
+    )
+}
+
+const InterfaceType = ({ data }) => {
+    // should render the "properties" as types
+    return (
+        <View>
+            {Object.keys(data.properties).map((key, idx) => {
+                return (
+                    <Flex key={idx}>
+                        {data.properties[key].name}: <ParameterType typeData={data.properties[key]} />
+                    </Flex>
+                )
+            })}
+        </View>
+    )
+}
+
+const IdentifierType = ({ data }) => {
+    // should render the "typeObject" as a type if no typeObject exists then this is an end node
+    if (!data.typeObject) {
+        return <code>{data.name}</code>
+    } else {
+        return <ParameterType typeData={data.typeObject} />
+    }
+}
+
+const StringType = ({ }) => {
+    return (<code>string</code>)
+}
+
+const PropertyType = ({ data }) => {
+    if (data.value.name) {
+        return <TypeLink linkData={data.value} />
+    } else {
+        return (
+            <View>
+                <ParameterType typeData={data.value} />
+            </View>
+        )
+    }
+}

src/components/ApiDocs/display/Promise.tsx

@@ -0,0 +1,12 @@
+import { View } from '@aws-amplify/ui-react';
+
+export const Promise = ({ typeObject }) => {
+    const promiseTypes = typeObject.typeArguments.reduce((acc, val) => {
+        return `${acc}, ${val.name}`;
+    }, '').substring(2);
+    return (
+        <>
+            <View>Promise&lt;{promiseTypes}&gt;</View>
+        </>
+    );
+}

src/components/ApiDocs/display/TypeLink.tsx

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { TypeContext } from "@/components/Layout/Layout";
+import { ParameterType, ApplicationType } from './ParameterType';
+
+export const TypeLink = ({ linkData }) => {
+    const { setModalData, modalOpen, addBreadCrumb } = useContext(TypeContext);
+    const name = linkData.name;
+
+    const onClickHandler = () => {
+        setModalData(linkData);
+        addBreadCrumb(linkData);
+        modalOpen();
+    }
+
+    if (linkData.type === 'application') {
+        return <ApplicationType data={linkData} />
+    } else if (linkData.type === 'interface' || linkData.type === 'object') {
+        return <ParameterType typeData={linkData} />
+    } else {
+        return <a className={'type-link'} onClick={onClickHandler}>{name}</a>
+    }
+}