Autogenerate UI adapter props with ts-morph (#315)

chore: add autogenerated docs for component adapters

Author: serikjensen

build/generateAdapterPropDocs.ts

@@ -32,6 +32,7 @@
     "build:ci": "npm run build && npm run lint:check && npm run format:check && npm run test:ci",
     "build:clean": "rm -rf ./dist && mkdir ./dist",
     "commitlint": "commitlint --edit",
+    "adapter:docs:generate": "npx tsx ./build/generateAdapterPropDocs.ts",
     "watch:vite": "vite build --watch --mode development",
     "watch:translations": "node ./build/translationWatcher.js",
     "dev": "node ./build/prompt.js && npm run i18n:generate && npm-run-all --parallel watch:vite watch:translations",
@@ -78,6 +79,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
     "sass-embedded": "^1.87.0",
+    "ts-morph": "^26.0.0",
     "tsx": "^4.19.3",
     "typescript-eslint": "^8.31.0",
     "vite": "^5.4.18",

docs/06/01/component-inventory.md

@@ -1,8 +1,5 @@
 import type { Ref, ButtonHTMLAttributes, ReactNode, FocusEvent } from 'react'
 
-// Define event handler types that are compatible with both HTML elements and React Aria
-type ButtonFocusHandler = (e: FocusEvent) => void
-
 export interface ButtonProps
   extends Pick<
     ButtonHTMLAttributes<HTMLButtonElement>,
@@ -47,11 +44,11 @@ export interface ButtonProps
   /**
    * Handler for blur events
    */
-  onBlur?: ButtonFocusHandler
+  onBlur?: (e: FocusEvent) => void
   /**
    * Handler for focus events
    */
-  onFocus?: ButtonFocusHandler
+  onFocus?: (e: FocusEvent) => void
 }
 
 export type ButtonIconProps = Omit<ButtonProps, 'variant'> & {

package-lock.json

@@ -1,7 +1,7 @@
 import type { FieldsetHTMLAttributes, Ref } from 'react'
 import type { SharedFieldLayoutProps } from '@/components/Common/FieldLayout/FieldLayoutTypes'
 
-export type CheckboxGroupOption = {
+export interface CheckboxGroupOption {
   /**
    * Label text or content for the checkbox option
    */

package.json

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 // Base list props without HTML element specific attributes
 export interface BaseListProps {
@@ -28,12 +28,6 @@ export interface BaseListProps {
   'aria-describedby'?: string
 }
 
-// UnorderedList specific props with HTMLUListElement attributes
-export interface UnorderedListProps extends BaseListProps, HTMLAttributes<HTMLUListElement> {
-  // Unordered list specific props
-}
+export type UnorderedListProps = BaseListProps
 
-// OrderedList specific props with HTMLOListElement attributes
-export interface OrderedListProps extends BaseListProps, HTMLAttributes<HTMLOListElement> {
-  // Ordered list specific props
-}
+export type OrderedListProps = BaseListProps

src/components/Common/UI/Button/ButtonTypes.ts

@@ -1,7 +1,7 @@
 import type { FieldsetHTMLAttributes, Ref } from 'react'
 import type { SharedFieldLayoutProps } from '@/components/Common/FieldLayout/FieldLayoutTypes'
 
-export type RadioGroupOption = {
+export interface RadioGroupOption {
   /**
    * Label text or content for the radio option
    */