feat(props): add props data gathering and table rendering support

astro.config.mjs

@@ -2,9 +2,12 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 
+import node from '@astrojs/node';
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [react()],
+
   vite: {
     ssr: {
       noExternal: ["@patternfly/*", "react-dropzone"],
@@ -14,5 +17,9 @@ export default defineConfig({
         allow: ['./']
       }
     }
-  }
+  },
+
+  adapter: node({
+    mode: 'standalone'
+  })
 });

cli/buildPropsData.ts

@@ -0,0 +1,94 @@
+/* eslint-disable no-console */
+
+import { glob } from 'glob'
+import { writeFile } from 'fs/promises'
+import { join } from 'path'
+
+import { tsDocgen } from './tsDocGen.js'
+import { getConfig, PropsGlobs } from './getConfig.js'
+
+// Build unique names for components with a "variant" extension
+function getTsDocName(name: string, variant: string) {
+  return `${name}${variant ? `-${variant}` : ''}`
+}
+
+function getTsDocNameVariant(source: string) {
+  if (source.includes('next')) {
+    return 'next'
+  }
+
+  if (source.includes('deprecated')) {
+    return 'deprecated'
+  }
+}
+
+async function getFiles(root: string, globs: PropsGlobs[]) {
+  const files = await Promise.all(
+    globs.map(async ({ include, exclude }) => {
+      const files = await glob(include, { cwd: root, ignore: exclude })
+      return files
+    }),
+  )
+  return files.flat()
+}
+
+async function getPropsData(files: string[], verbose: boolean) {
+  const perFilePropsData = await Promise.all(
+    files.map(async (file) => {
+      if (verbose) {
+        console.log(`Parsing props from ${file}`)
+      }
+
+      const props = await tsDocgen(file)
+
+      const tsDocs = props.reduce((acc, { name, description, props }) => {
+        const key = getTsDocName(name, getTsDocNameVariant(file))
+        return { ...acc, [key]: { name, description, props } }
+      }, {})
+
+      return tsDocs
+    }),
+  )
+
+  const combinedPropsData = perFilePropsData.reduce((acc, props) => {
+    Object.keys(props).forEach((key) => {
+      if (acc[key]) {
+        acc[key].props = [...acc[key].props, ...props[key].props]
+      } else {
+        acc[key] = props[key]
+      }
+    })
+    return acc
+  }, {})
+
+  return combinedPropsData
+}
+
+export async function buildPropsData(
+  rootDir: string,
+  astroRoot: string,
+  configFile: string,
+  verbose: boolean,
+) {
+  const config = await getConfig(configFile)
+  if (!config) {
+    return
+  }
+
+  const { propsGlobs } = config
+  if (!propsGlobs) {
+    console.error('No props data found in config')
+    return
+  }
+
+  const files = await getFiles(rootDir, propsGlobs)
+  if (verbose) {
+    console.log(`Found ${files.length} files to parse`)
+  }
+
+  const propsData = await getPropsData(files, verbose)
+
+  const propsFile = join(astroRoot, 'dist', 'props.json')
+
+  await writeFile(propsFile, JSON.stringify(propsData))
+}

cli/cli.ts

@@ -8,6 +8,7 @@ import { setFsRootDir } from './setFsRootDir.js'
 import { createConfigFile } from './createConfigFile.js'
 import { updatePackageFile } from './updatePackageFile.js'
 import { getConfig } from './getConfig.js'
+import { buildPropsData } from './buildPropsData.js'
 
 function updateContent(program: Command) {
   const { verbose } = program.opts()
@@ -23,16 +24,47 @@ function updateContent(program: Command) {
   )
 }
 
-const astroRoot = import.meta
-  .resolve('@patternfly/patternfly-doc-core')
-  .replace('dist/cli/cli.js', '')
-  .replace('file://', '')
+async function generateProps(program: Command, forceProps: boolean = false) {
+  const { verbose, props } = program.opts()
+
+  if (!props && !forceProps) {
+    return
+  }
+
+  if (verbose) {
+    console.log('Verbose mode enabled')
+  }
+
+  buildPropsData(
+    currentDir,
+    astroRoot,
+    `${currentDir}/pf-docs.config.mjs`,
+    verbose,
+  )
+}
+
+let astroRoot = ''
+
+try {
+  astroRoot = import.meta
+    .resolve('@patternfly/patternfly-doc-core')
+    .replace('dist/cli/cli.js', '')
+    .replace('file://', '')
+} catch (e) {
+  if (e.code === 'ERR_MODULE_NOT_FOUND') {
+    astroRoot = process.cwd()
+  } else {
+    console.error('Error resolving astroRoot', e)
+  }
+}
+
 const currentDir = process.cwd()
 
 const program = new Command()
 program.name('pf-doc-core')
 
 program.option('--verbose', 'verbose mode', false)
+program.option('--props', 'generate props data', false)
 
 program.command('setup').action(async () => {
   await Promise.all([
@@ -54,11 +86,13 @@ program.command('init').action(async () => {
 
 program.command('start').action(async () => {
   updateContent(program)
+  await generateProps(program)
   dev({ mode: 'development', root: astroRoot })
 })
 
 program.command('build').action(async () => {
   updateContent(program)
+  await generateProps(program, true)
   const config = await getConfig(`${currentDir}/pf-docs.config.mjs`)
   if (!config) {
     console.error(
@@ -68,13 +102,20 @@ program.command('build').action(async () => {
   }
 
   if (!config.outputDir) {
-    console.error("No outputDir found in config file, an output directory must be defined in your config file e.g. 'dist'")
+    console.error(
+      "No outputDir found in config file, an output directory must be defined in your config file e.g. 'dist'",
+    )
     return
   }
-    
+
   build({ root: astroRoot, outDir: join(currentDir, config.outputDir) })
 })
 
+program.command('generate-props').action(async () => {
+  await generateProps(program, true)
+  console.log('\nProps data generated')
+})
+
 program.command('serve').action(async () => {
   updateContent(program)
   preview({ root: astroRoot })

cli/getConfig.ts

@@ -6,9 +6,15 @@ export interface CollectionDefinition {
   name: string
 }
 
+export interface PropsGlobs {
+  include: string[]
+  exclude: string[]
+}
+
 export interface DocsConfig {
   content: CollectionDefinition[];
   outputDir: string;
+  propsGlobs: PropsGlobs[];
 }
 
 export async function getConfig(fileLocation: string): Promise<DocsConfig | undefined> {

cli/templates/pf-docs.config.mjs

@@ -16,5 +16,16 @@ export const config = {
     //   name: "react-component-docs",
     // },
   ],
-  outputDir: "./dist/docs"
-};
+  outputDir: './dist/docs',
+  propsGlobs: [
+    // {
+    //   include: ['*/@patternfly/react-core/src/**/*.tsx'],
+    //   exclude: [
+    //     '/**/examples/**',
+    //     '/**/__mocks__/**',
+    //     '/**/__tests__/**',
+    //     '/**/*.test.tsx',
+    //   ],
+    // },
+  ],
+}