re-working api to not use global data by default (#2)

* re-working api to not use global data by default

* drop node 12

* refactor(:recycle:): :wave: pika, moving to esbuild

* feat: add util hook + more docs

Author: atomicpages

.github/workflows/on_push.yml

@@ -3,17 +3,19 @@ name: Build PR & Push
 jobs:
     build:
         runs-on: ubuntu-latest
+        env:
+            HUSKY: 0
         strategy:
             matrix:
-                node-version: [12.x, 14.x]
+                node-version: [14.x]
         steps:
-            - uses: actions/checkout@v1
+            - uses: actions/checkout@v2
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v2
               with:
                   node-version: ${{ matrix.node-version }}
             - name: npm install, lint, and build
               run: |
-                  npm i
+                  npm ci
                   npm run lint
                   npm run build

.github/workflows/on_release.yml

@@ -6,16 +6,16 @@ jobs:
     publish:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v1
-            - uses: actions/setup-node@v1
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v2
               with:
-                  node-version: 12
+                  node-version: 14
                   registry-url: https://registry.npmjs.org/
             - name: npm install
               run: |
-                npm i
-                npm run build
+                  npm ci
+                  npm run build
             - name: publish
-              run: npm publish pkg/
+              run: npm publish
               env:
                   NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged
+npm run lint

README.md

@@ -1,6 +1,7 @@
 # Docusaurus Plugin `react-docgen-typescript`
 
-A Docusaurus 2.x plugin that help generate and consume auto-generated docs from `react-docgen-typescript`.
+A Docusaurus 2.x plugin that help generate and consume auto-generated docs from
+`react-docgen-typescript`.
 
 ## Installation
 
@@ -13,7 +14,8 @@ yarn add docusaurus-plugin-react-docgen-typescript react-docgen-typescript
 
 ## Usage
 
-Inside your `docusaurus.config.js` add to the `plugins` field and configure with the `src` option with full glob support :+1:.
+Inside your `docusaurus.config.js` add to the `plugins` field and configure with the `src` option
+with full glob support :+1:.
 
 ```js
 module.exports = {
@@ -26,6 +28,9 @@ module.exports = {
                 src: ['path/to/**/*.tsx', '!path/to/**/*test.*'],
                 global: true,
                 parserOptions: {
+                    // pass parserOptions to react-docgen-typescript
+                    // here is a good starting point which filters out all
+                    // types from react
                     propFilter: (prop, component) => {
                         if (prop.parent) {
                             return !prop.parent.fileName.includes('@types/react');
@@ -40,7 +45,62 @@ module.exports = {
 };
 ```
 
-Any pattern supported by [`fast-glob`](https://github.com/mrmlnc/fast-glob) is allowed here (including negations).
+Any pattern supported by [`fast-glob`](https://github.com/mrmlnc/fast-glob) is allowed here
+(including negations).
+
+## Reading Annotations
+
+Using the default settings, annotations are stored inside of the `.docusaurus` directory. The
+`@docgen` alias is set to ensure stable access to these files.
+
+### Build a Prop Table
+
+Most of the time props will want to be shown as API information to a particular component. For
+convenience, we can use a simple hook from this package to dynamically import `.json` files:
+
+```jsx
+import * as React from 'react';
+import { useDynamicImport } from 'docusaurus-plugin-react-docgen-typescript/pkg/dist-src/hooks/useDynamicImport';
+
+export const PropTable = ({ name }) => {
+    const props = useDynamicImport(name);
+
+    return (
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th>Default Value</th>
+                    <th>Required</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Object.keys(props).map(key => {
+                    return (
+                        <tr key={key}>
+                            <td>
+                                <code>{key}</code>
+                            </td>
+                            <td>
+                                <code>{props[key].type?.name}</code>
+                            </td>
+                            <td>
+                                {props[key].defaultValue && (
+                                    <code>{props[key].defaultValue.value}</code>
+                                )}
+                            </td>
+                            <td>{props[key].required ? 'Yes' : 'No'}</td>
+                            <td>{props[key].description}</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+};
+```
 
 ## Options