Update doc site to handle typescript files (#1611)

Resolves #1607
segmentio · Feb 6, 2023 · 93c3d3e · 93c3d3e
1 parent 274f0a4
commit 93c3d3e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 21 deletions.
diff --git a/docs/components/PropsTable.tsx b/docs/components/PropsTable.tsx
@@ -3,23 +3,34 @@ import { Table, Pane, majorScale, Paragraph, Badge, Text, Heading } from 'evergr
 import InlineCode from './MDX/renderers/InlineCode'
 
 interface Props {
-  data: any
+  data: {
+    displayName: string
+    props: Record<string, PropDefinition>
+  }
 }
 
-const resolveReadableType: (type: any) => string = (type) => {
-  switch (type.name) {
-    case 'enum':
-      return type.value.map(({ value }: { value: string }) => value).join(' | ')
-    case 'union':
-      return type.value.map((subType: any) => resolveReadableType(subType)).join(' | ')
-    case 'custom':
-      return type.raw
-    default:
-      return type.name
-  }
+interface PropDefinition {
+  description: string
+  required: boolean
+  type?: PropType
+  tsType?: PropType
 }
 
-const COLUMNS = ['Property', 'Type', 'Description'] as const
+type PropType =
+  | {
+      name: 'enum'
+      value: Array<{ value: string }>
+    }
+  | {
+      name: 'union'
+      value: PropType[]
+    }
+  | {
+      name: 'custom' | 'signature'
+      raw: string
+    }
+
+const COLUMNS = ['Property', 'Type', 'Description']
 
 const PropsTable: React.FC<Props> = ({ data }) => {
   const { displayName, props } = data
@@ -38,18 +49,17 @@ const PropsTable: React.FC<Props> = ({ data }) => {
           </Table.Head>
           <Table.Body>
             {Object.keys(props).map((prop) => {
-              const { type, required, description } = props[prop]
+              const { type, tsType, required, description } = props[prop]
               return (
                 <Table.Row key={prop} minHeight={64} height="unset" paddingY={majorScale(2)}>
                   <Table.Cell>
                     <Pane display="flex" alignItems="center">
                       <InlineCode>{prop}</InlineCode>
-                      {/* <Heading size={400}>{prop}</Heading> */}
                       {required && <Badge marginLeft={majorScale(2)}>Required</Badge>}
                     </Pane>
                   </Table.Cell>
                   <Table.Cell>
-                    <Text>{resolveReadableType(type)}</Text>
+                    <InlineCode>{resolveReadableType(tsType ?? type)}</InlineCode>
                   </Table.Cell>
                   <Table.Cell>
                     <Paragraph>{description}</Paragraph>
@@ -66,4 +76,22 @@ const PropsTable: React.FC<Props> = ({ data }) => {
   )
 }
 
+const resolveReadableType = (type: PropType | undefined): string => {
+  if (type == null) {
+    return 'unknown'
+  }
+
+  switch (type.name) {
+    case 'enum':
+      return type.value.map(({ value }) => value).join(' | ')
+    case 'union':
+      return type.value.map((subType: PropType) => resolveReadableType(subType)).join(' | ')
+    case 'custom':
+    case 'signature':
+      return type.raw
+    default:
+      return (type as { name: string }).name
+  }
+}
+
 export default PropsTable
diff --git a/docs/lib/component-docs.ts b/docs/lib/component-docs.ts
@@ -12,13 +12,14 @@ const getComponentDocs = async (stem: string): Promise<any[]> => {
   })
 
   const props = await Promise.all(
-    componentFiles.map(async (name) => {
-      const data = await fs.readFileSync(path.join(stem, name)).toString()
+    componentFiles.map((name) => {
+      const filename = path.join(stem, name)
+      const data = fs.readFileSync(filename).toString()
       try {
-        const propsData = docgen.parse(data)
+        const propsData = docgen.parse(data, undefined, undefined, { filename })
         return propsData
-      } catch (e) {
-        console.error('There was an error parsing component documentation', e)
+      } catch (error) {
+        console.error(`Error parsing component documentation for ${filename}\n`, error)
         return []
       }
     })