Output component.json file for documentation purposes (#2590)

* Create components.json * Add build:components.json script * Add a11yReview boolean * Create json schema for component docs * Create output schema * Update script for components.json * Build component.json during CI * Add docs for TreeView.SubTree * Update generated/components.json * Add TODO comment * Create component to render props in mdx * Fill out TreeView docs * Handle passthrough props * Publish generated files to npm * Update ci.yml * Update package-lock * Update generated/components.json * Add ajv as dev dependency * Update package-lock * Fix component schema * Fix lint error * Update TreeView docs * Update generated/components.json * Add TreeView to navigation Co-authored-by: colebemis <colebemis@users.noreply.github.com>
primer · Dec 22, 2022 · 0f81130 · 0f81130
1 parent 88008a0
commit 0f81130
Show file tree

Hide file tree

Showing 16 changed files with 2,054 additions and 370 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -215,3 +215,29 @@ jobs:
         with:
           name: aat
           path: .playwright/report
+
+  build-components-json:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate token
+        id: generate_token
+        uses: tibdex/github-app-token@v1
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.PRIVATE_KEY }}
+      - uses: actions/checkout@v3
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.head_ref }}
+          token: ${{ steps.generate_token.outputs.token }}
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build components.json
+        run: npm run build:components.json
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: 'Update generated/components.json'
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,5 +9,15 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "json.schemas": [
+    {
+      "fileMatch": ["*.docs.json"],
+      "url": "./script/components-json/component.schema.json"
+    },
+    {
+      "fileMatch": ["generated/components.json"],
+      "url": "./script/components-json/output.schema.json"
+    }
+  ]
 }
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
@@ -7,6 +7,8 @@ storybook: '/react/storybook?path=/story/components-button--playground'
 description: Use button for the main actions on a page or form.
 ---
 
+import data from '../../src/Button/Button.docs.json'
+
 ```js
 import {Button} from '@primer/react'
 ```
@@ -119,55 +121,7 @@ Use the `block` prop for full width buttons.
 
 ## Props
 
-Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
-
-### Button
-
-<PropsTable>
-  <PropsTableRow
-    name="children"
-    required
-    type="React.ReactNode"
-    description="Button description along with other components like Counter could be used here."
-  />
-  <PropsTableRow
-    name="variant"
-    type="'default' | 'primary' | 'danger' | 'outline' | 'invisible'"
-    description="Changes the look and feel of the button which is different for each variant"
-  />
-  <PropsTableRow
-    name="size"
-    type="'small' | 'medium' | 'large'"
-    description="Changes the size of the button component"
-  />
-  <PropsTableRow name="block" type="boolean" description="Full width button fills the parent container" />
-  <PropsTableRow
-    name="leadingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed before the button text"
-  />
-  <PropsTableRow
-    name="trailingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed after the button text"
-  />
-  <PropsTableAsRow defaultElementType="button" />
-  <PropsTableSxRow />
-  <PropsTablePassthroughPropsRow
-    elementName="button"
-    passthroughPropsLink={
-      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">MDN</Link>
-    }
-    isPolymorphic
-  />
-</PropsTable>
-
-### Button.Counter
-
-<PropsTable>
-  <PropsTableRow name="children" required type="number" description="The counter value as a number" />
-  <PropsTableSxRow />
-</PropsTable>
+<ComponentProps data={data} />
 
 ## Status
 
@@ -185,7 +139,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
     stableApi: false,
     addressedApiFeedback: false,
     hasDesignGuidelines: false,
-    hasFigmaComponent: false,
+    hasFigmaComponent: false
   }}
 />
 

diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx
@@ -5,6 +5,8 @@ status: Draft
 description: A hierarchical list of items where nested items can be expanded and collapsed.
 ---
 
+import data from '../../src/TreeView/TreeView.docs.json'
+
 ```js
 import {TreeView} from '@primer/react/drafts'
 ```
@@ -69,7 +71,7 @@ import {TreeView} from '@primer/react/drafts'
         </TreeView.LeadingVisual>
         src
         <TreeView.SubTree>
-          <TreeView.Item id="src/Avatar.tsx"> 
+          <TreeView.Item id="src/Avatar.tsx">
             <TreeView.LeadingVisual>
               <FileIcon />
             </TreeView.LeadingVisual>
@@ -202,9 +204,7 @@ function ControlledTreeView() {
           <TreeView.Item id="src" expanded={expanded} onExpandedChange={setExpanded}>
             src
             <TreeView.SubTree>
-              <TreeView.Item id="src/Avatar.tsx">
-                Avatar.tsx
-              </TreeView.Item>
+              <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>
               <TreeView.Item id="src/Button.tsx" current>
                 Button.tsx
               </TreeView.Item>
@@ -233,9 +233,7 @@ To render stateful visuals, pass a render function to `TreeView.LeadingVisual` o
         </TreeView.LeadingVisual>
         src
         <TreeView.SubTree>
-          <TreeView.Item id="src/Avatar.tsx">
-            Avatar.tsx
-          </TreeView.Item>
+          <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
             Button.tsx
           </TreeView.Item>
@@ -258,9 +256,7 @@ Since stateful directory icons are a common use case for TreeView, we provide a
         </TreeView.LeadingVisual>
         src
         <TreeView.SubTree>
-          <TreeView.Item id="src/Avatar.tsx">
-            Avatar.tsx
-          </TreeView.Item>
+          <TreeView.Item id="src/Avatar.tsx">Avatar.tsx</TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
             Button.tsx
           </TreeView.Item>
@@ -277,154 +273,7 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
 
 ## Props
 
-### TreeView
-
-<PropsTable>
-  <PropsTableRow name="children" type="React.ReactNode" required />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
-
-### TreeView.Item
-
-<PropsTable>
-  <PropsTableRow name="id" type="string" required description="Unique identifier for the item." />
-  <PropsTableRow name="children" type="React.ReactNode" required />
-  <PropsTableRow
-    name="current"
-    type="boolean"
-    defaultValue="false"
-    description="Whether the item is the current item. No more than one item should be current at once. The path to the current item will be expanded by default."
-  />
-  <PropsTableRow
-    name="defaultExpanded"
-    type="boolean"
-    description="The expanded state of the item when it is initially rendered. Use when you do not need to control the state."
-  />
-  <PropsTableRow
-    name="containIntrinsicSize"
-    type="string"
-    description="The size of this item's contents. Passing this will set 'content-visiblity: auto' on the content container, delaying rendering until the item is in the viewport."
-  />
-  <PropsTableRow
-    name="expanded"
-    type="boolean"
-    description="The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
-  />
-  <PropsTableRow
-    name="onExpandedChange"
-    type="(expanded: boolean) => void"
-    description="Event handler called when the expanded state of the item changes."
-  />
-  <PropsTableRow
-    name="onSelect"
-    type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
-  />
-  <PropsTableRefRow refType="HTMLElement" />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
-
-### TreeView.LeadingVisual
-
-<PropsTable>
-  <PropsTableRow
-    name="children"
-    type={`| React.ReactNode
-| (props: {isExpanded: boolean}) => React.ReactNode`}
-  />
-  <PropsTableRow
-    name="label"
-    type="string"
-    description="Provide an accessible label for the leading visual. This is not necessary for decorative visuals"
-  />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
-
-### TreeView.TrailingVisual
-
-<PropsTable>
-  <PropsTableRow
-    name="children"
-    type={`| React.ReactNode
-| (props: {isExpanded: boolean}) => React.ReactNode`}
-  />
-  <PropsTableRow
-    name="label"
-    type="string"
-    description="Provide an accessible label for the trailing visual. This is not necessary for decorative visuals"
-  />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
-
-### TreeView.DirectoryIcon
-
-<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
-
-### TreeView.SubTree
-
-<PropsTable>
-  <PropsTableRow name="children" type="React.ReactNode" />
-  <PropsTableRow
-    name="state"
-    type={`| 'initial'
-| 'loading'
-| 'done'
-| 'error'`}
-    description={
-      <>
-        <p>Specify a state if items in the subtree are loaded asynchronously.</p>
-        <p>
-          An asynchronous subtree can be in one of the following states:
-          <ul>
-            <li>
-              <InlineCode>initial</InlineCode>: Items are neither loaded nor loading.
-            </li>
-            <li>
-              <InlineCode>loading</InlineCode>: Currently loading items. The subtree will render a loading indicator
-              when in this state (after a 300ms delay).
-            </li>
-            <li>
-              <InlineCode>done</InlineCode>: Done loading items. Screen readers will announce when a subtree enters this
-              state.
-            </li>
-            <li>
-              <InlineCode>error</InlineCode>: An error occured while loading items.
-            </li>
-          </ul>
-        </p>
-      </>
-    }
-  />
-  <PropsTableRow
-    name="count"
-    type="number"
-    description="The number of items expected to be in the subtree. When in the loading state, the subtree will render a skeleton loading placeholder with the specified count of items"
-  />
-  <PropsTableSxRow />
-</PropsTable>
-
-### TreeView.ErrorDialog
-
-<PropsTable>
-  <PropsTableRow
-    name="children"
-    type="React.ReactNode"
-    required
-    description="The content of the dialog. This is usually a message explaining the error."
-  />
-  <PropsTableRow
-    name="title"
-    type="string"
-    defaultValue="'Error'"
-    description="The title of the dialog. This is usually a short description of the error."
-  />
-  <PropsTableRow
-    name="onRetry"
-    type="() => void"
-    description="Event handler called when the user clicks the retry button."
-  />
-  <PropsTableRow name="onDismiss" type="() => void" description="Event handler called when the dialog is dismissed." />
-  {/* <PropsTableSxRow /> */}
-</PropsTable>
+<ComponentProps data={data} />
 
 ## Status
 

diff --git a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
@@ -1,16 +1,20 @@
 import {Box, Link} from '@primer/react'
 import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import {ComponentChecklist} from '../../component-checklist'
+// eslint-disable-next-line import/no-deprecated
 import {Props} from '../../props'
 import {PropsTable} from '../../props-table'
+import {ComponentProps} from '../../component-props'
 
 export default {
   Box,
   Link,
   InlineCode,
   ComponentChecklist,
+  // eslint-disable-next-line import/no-deprecated
   Props,
   PropsTable,
+  ComponentProps,
   // HACK: MDX doesn't support rendering subcomponents with dot notation
   //       so we need to alias them
   PropsTableRow: PropsTable.Row,

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -164,6 +164,8 @@
       url: /drafts/MarkdownEditor
     - title: MarkdownViewer
       url: /drafts/MarkdownViewer
+    - title: TreeView
+      url: /TreeView
     - title: UnderlineNav v2
       url: /drafts/UnderlineNav2
 - title: Deprecated