Ensure optionalness is visible in prop table

stevenpetryk · Feb 25, 2024 · 25e5f37 · 25e5f37
1 parent 04959f3
commit 25e5f37
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/docs/components/PropTable.tsx b/docs/components/PropTable.tsx
@@ -91,7 +91,18 @@ export function PropTable({ of: displayName }: PropTableProps) {
 }
 
 function PropName({ prop }: { prop: DocgenProp }) {
-  const formattedName = <code>{prop.name}</code>
+  const formattedName = (
+    <code>
+      {prop.name}
+      {prop.required ? (
+        <sup aria-label="required" className="text-red-400">
+          *
+        </sup>
+      ) : (
+        ""
+      )}
+    </code>
+  )
   return <span className="font-semibold p-1 rounded-md">{formattedName}</span>
 }
 

diff --git a/scripts/dev.ts b/scripts/dev.ts
@@ -13,7 +13,7 @@ const srcRoot = path.join(projectRoot, "src")
 const docsRoot = path.join(projectRoot, "docs")
 
 const tsconfig = path.join(projectRoot, "tsconfig.json")
-const customDocgen = docgen.withCustomConfig(tsconfig, {})
+const customDocgen = docgen.withCustomConfig(tsconfig, { shouldRemoveUndefinedFromOptional: true })
 const parse = customDocgen.parseWithProgramProvider
 
 function startTSDocgen() {

diff --git a/scripts/docgen.ts b/scripts/docgen.ts
@@ -7,7 +7,9 @@ import docgen from "react-docgen-typescript"
 
 const projectRoot = path.join(path.dirname(fileURLToPath(import.meta.url)), "..")
 const tsConfigPath = path.join(projectRoot, "tsconfig.json")
-const parse = docgen.withCustomConfig(tsConfigPath, {}).parseWithProgramProvider
+const parse = docgen.withCustomConfig(tsConfigPath, {
+  shouldRemoveUndefinedFromOptional: true,
+}).parseWithProgramProvider
 
 export function writeDocgenResults(docgenInfo: docgen.ComponentDoc[]) {
   const writePath = path.join(projectRoot, "docs/generated-docgen.tsx")