Automate component documentation

package.json

@@ -21,6 +21,7 @@
     "build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs",
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
+    "build:component-docs-json": "tsx packages/react/script/prop-docs/build.ts",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:css": "stylelint '**/*.css'",
     "lint:fix": "npm run lint -- --fix",
@@ -77,6 +78,8 @@
     "markdownlint-cli2": "^0.11.0",
     "markdownlint-cli2-formatter-pretty": "0.0.3",
     "prettier": "3.0.3",
+    "react-docgen": "7.0.3",
+    "react-docgen-typescript": "2.2.2",
     "rimraf": "5.0.5",
     "size-limit": "11.0.2",
     "stylelint": "^16.8.1",

packages/react/.storybook/main.js

@@ -60,6 +60,29 @@ module.exports = {
   typescript: {
     reactDocgen: 'react-docgen',
   },
+
+  // typescript: {
+  //   reactDocgen: 'react-docgen-typescript',
+  //   reactDocgenTypescriptOptions: {
+  //     compilerOptions: {
+  //       allowSyntheticDefaultImports: false,
+  //       esModuleInterop: false,
+  //       savePropValueAsString: true,
+  //       propFilter: (prop, component) => {
+  //         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
+  //       },
+  //     },
+  //   },
+  // },
+
   previewHead: head => {
     if (DEPLOY_ENV === 'development') {
       return head