From 25e5f37539958c86687e3ebb7217f725d6fd4197 Mon Sep 17 00:00:00 2001
From: Steven Petryk <petryk.steven@gmail.com>
Date: Sat, 24 Feb 2024 19:15:05 -0800
Subject: [PATCH] Ensure optionalness is visible in prop table

---
 docs/components/PropTable.tsx | 13 ++++++++++++-
 scripts/dev.ts                |  2 +-
 scripts/docgen.ts             |  4 +++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/components/PropTable.tsx b/docs/components/PropTable.tsx
index f979ee27..db750a5e 100644
--- 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
index 4bcdc76a..f6036a63 100644
--- 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
index 8d4528ea..eb71d26e 100644
--- 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")