Debug docgen behaviour

debug/Button.tsx

@@ -0,0 +1,23 @@
+import React, {FC, forwardRef} from 'react'
+
+type ButtonProps = {
+  variant?: 'small' | 'medium' | 'large'
+}
+
+// doesn't work
+export const SimpleButtonWithFC: React.FC<ButtonProps> = props => {
+  return <button {...props} />
+}
+
+export const ButtonWithForwardRef = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
+  return <button ref={ref} {...props} />
+})
+
+// works?!
+export const SimpleButtonWithDestructuredFC: FC<ButtonProps> = props => {
+  return <button {...props} />
+}
+
+export const ButtonWithDestructuredForwardRef = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return <button ref={ref} {...props} />
+})

debug/TextInput.tsx

@@ -0,0 +1,24 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+
+// Props that are not passed through to Input:
+type NonPassthroughProps = {
+  className?: string
+  icon?: React.ComponentType<{className?: string}>
+}
+
+const Input = styled.input``
+
+// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
+type TextInputInternalProps = NonPassthroughProps &
+  Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>
+
+// this has empty props - using TextInputInternalProps
+export const TextInput1 = forwardRef<HTMLInputElement, TextInputInternalProps>((props, ref) => {
+  return <Input ref={ref} {...props} />
+})
+
+// this has props - using NonPassthroughProps
+export const TextInput2 = forwardRef<HTMLInputElement, NonPassthroughProps>((props, ref) => {
+  return <Input ref={ref} {...props} />
+})

debug/docgen.ts

@@ -0,0 +1,23 @@
+/** temporary script to debug types */
+
+const fs = require('fs')
+const docgen = require('react-docgen-typescript')
+const globby = require('globby')
+
+const files = globby.sync('./*.tsx', {absolute: true})
+const data = docgen.parse(files, {
+  savePropValueAsString: true,
+  propFilter: prop => {
+    if (prop.declarations !== undefined && prop.declarations.length > 0) {
+      const hasPropAdditionalDescription = prop.declarations.find(declaration => {
+        return !declaration.fileName.includes('node_modules')
+      })
+      return Boolean(hasPropAdditionalDescription)
+    }
+    return true
+  }
+})
+
+console.log(data)
+fs.writeFileSync('output.json', JSON.stringify(data, null, 2), 'utf8')
+console.log('\n > output.json \n')

debug/list.ts

@@ -0,0 +1,42 @@
+const fs = require('fs')
+const {relative} = require('path')
+const globby = require('globby')
+const docgen = require('react-docgen-typescript')
+const {Table} = require('console-table-printer')
+
+const componentPaths = globby.sync([
+  '../src/**/*.tsx',
+  '!../src/__tests__',
+  '!../src/stories',
+  '!../src/hooks',
+  '!../src/utils'
+])
+
+const data = docgen.parse(componentPaths, {
+  savePropValueAsString: true,
+  propFilter: prop => {
+    if (prop.declarations !== undefined && prop.declarations.length > 0) {
+      const hasPropAdditionalDescription = prop.declarations.find(declaration => {
+        return !declaration.fileName.includes('node_modules')
+      })
+      return Boolean(hasPropAdditionalDescription)
+    }
+    return true
+  }
+})
+
+const table = new Table()
+componentPaths.forEach(path => {
+  const doc = data.find(doc => relative(process.cwd(), doc.filePath) === path)
+  if (path.includes('AvatarStack')) console.log(doc)
+
+  const docs = doc
+  const props = doc?.props
+  const displayName = doc?.displayName
+
+  table.addRow(
+    {path: path.replace('../src/', ''), docs: docs ? '✓' : '✕', props: props ? '✓' : '✕', displayName},
+    {color: props ? 'green' : docs ? 'yellow' : 'red'}
+  )
+})
+table.printTable()

debug/output.json

@@ -0,0 +1,97 @@
+[
+  {
+    "tags": {},
+    "filePath": "/Users/sid/code/github/primer/react/debug/Button.tsx",
+    "description": "",
+    "displayName": "SimpleButtonWithDestructuredFC",
+    "methods": [],
+    "props": {
+      "variant": {
+        "defaultValue": null,
+        "description": "",
+        "name": "variant",
+        "declarations": [
+          {
+            "fileName": "debug/Button.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"small\" | \"medium\" | \"large\""
+        }
+      }
+    }
+  },
+  {
+    "tags": {},
+    "filePath": "/Users/sid/code/github/primer/react/debug/Button.tsx",
+    "description": "",
+    "displayName": "ButtonWithDestructuredForwardRef",
+    "methods": [],
+    "props": {
+      "variant": {
+        "defaultValue": null,
+        "description": "",
+        "name": "variant",
+        "declarations": [
+          {
+            "fileName": "debug/Button.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"small\" | \"medium\" | \"large\""
+        }
+      }
+    }
+  },
+  {
+    "tags": {},
+    "filePath": "/Users/sid/code/github/primer/react/debug/TextInput.tsx",
+    "description": "",
+    "displayName": "TextInput1",
+    "methods": [],
+    "props": {}
+  },
+  {
+    "tags": {},
+    "filePath": "/Users/sid/code/github/primer/react/debug/TextInput.tsx",
+    "description": "",
+    "displayName": "TextInput2",
+    "methods": [],
+    "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "declarations": [
+          {
+            "fileName": "debug/TextInput.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "icon": {
+        "defaultValue": null,
+        "description": "",
+        "name": "icon",
+        "declarations": [
+          {
+            "fileName": "debug/TextInput.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      }
+    }
+  }
+]