Generate prop documentation

docs/content/Avatar.mdx

@@ -2,6 +2,8 @@
 title: Avatar
 ---
 
+import {Props} from '../src/props'
+import {Avatar} from '@primer/components'
 
 Avatars are images used to represent users and organizations on GitHub. Use the default round avatar for users, and the `square` prop for organizations or any other non-human avatars.
 
@@ -18,22 +20,14 @@ Avatars are images used to represent users and organizations on GitHub. Use the
 ```
 
 ## AvatarPair
-```jsx live
- <AvatarPair>
-  <Avatar src="https://github.com/avatars/github"/>
-  <Avatar src="https://github.com/avatars/primer"/>
- </AvatarPair>
- ```
-
-## System props
 
-Avatar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+```jsx live
+<AvatarPair>
+  <Avatar src="https://github.com/avatars/github" />
+  <Avatar src="https://github.com/avatars/primer" />
+</AvatarPair>
+```
 
-## Component props
+## Props
 
-| Name | Type | Default | Description |
-| :- | :- | :-: | :- |
-| alt | String | | Passed through to alt on img tag |
-| size | Number | 20 | adds the `avatar-small` class if less than 24 |
-| src | String | | The source url of the avatar image |
-| square | Boolean | false| Used to create a square avatar |
+<Props of={Avatar} />

docs/gatsby-node.js

@@ -1,4 +1,6 @@
 const defines = require('../babel-defines')
+const docgen = require('react-docgen-typescript')
+const globby = require('globby')
 
 exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
   const config = getConfig()
@@ -35,3 +37,65 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
 
   actions.replaceWebpackConfig(config)
 }
+
+exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
+  const {createNode} = actions
+
+  // Extract compontent metadata from source files
+  const files = globby.sync(['../src/**/*.tsx'], {absolute: true})
+  const data = docgen.parse(files, {
+    savePropValueAsString: true,
+    propFilter: prop => {
+      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
+    }
+  })
+
+  const components = data.map(component => {
+    return {
+      name: component.displayName,
+      description: component.description,
+      props: Object.values(component.props)
+        .map(prop => {
+          return {
+            name: prop.name,
+            description: prop.description,
+            defaultValue: prop.defaultValue ? prop.defaultValue.value : '',
+            required: prop.required,
+            type: prop.type.name
+          }
+        })
+        // Move required props to beginning of the list
+        .sort((a, b) => {
+          if (a.required && !b.required) return -1
+          if (!a.required && b.required) return 1
+          return 0
+        })
+    }
+  })
+
+  // Add component metadata to GraphQL API
+  for (const component of components) {
+    const nodeContent = JSON.stringify(component)
+    const nodeMeta = {
+      id: createNodeId(component.name),
+      parent: null,
+      children: [],
+      internal: {
+        type: `ComponentMetadata`,
+        mediaType: `text/html`,
+        content: nodeContent,
+        contentDigest: createContentDigest(component)
+      }
+    }
+    const node = Object.assign({}, component, nodeMeta)
+    createNode(node)
+  }
+}