Skip to content
Permalink
Browse files
feat: upgrade to react-docgen-typescript v2
BREAKING CHANGE:

- upgrade to react-docgen-typescript v2
- rework exports
  • Loading branch information
atomicpages committed Jun 20, 2022
1 parent 3278ff2 commit d34c6e27a247f9d637fe6936b47070a22c2d10d1
Show file tree
Hide file tree
Showing 14 changed files with 22,995 additions and 8,880 deletions.
@@ -0,0 +1,3 @@
{
"extends": ["@djthoms/eslint-config", "@djthoms/eslint-config/typescript"]
}
@@ -1,21 +1,25 @@
on: [push, pull_request]
name: Build PR & Push
name: Release
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 16
- name: Install dependencies
run: npm ci
- name: Release
env:
HUSKY: 0
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- name: npm install, lint, and build
run: |
npm ci
npm run lint
npm run build
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npx semantic-release

This file was deleted.

@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit "${1}"
@@ -0,0 +1,33 @@
{
"branches": ["main"],
"plugins": [
"@semantic-release/commit-analyzer",
[
"@semantic-release/release-notes-generator",
{
"preset": "conventionalcommits",
"parserOpts": {
"noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES", "BREAKING"]
},
"writerOpts": {
"commitsSort": ["subject", "scope"]
}
}
],
[
"@semantic-release/changelog",
{
"changelogFile": "CHANGELOG.md"
}
],
"@semantic-release/github",
"@semantic-release/npm",
[
"@semantic-release/git",
{
"assets": ["package.json", "package-lock.json", "CHANGELOG.md"],
"message": "chore(release): ${nextRelease.version} [skip ci]"
}
]
]
}
19 .swcrc
@@ -0,0 +1,19 @@
{
"$schema": "https://json.schemastore.org/swcrc",
"sourceMaps": true,
"module": {
"type": "es6"
},
"jsc": {
"target": "es2019",
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"react": {
"runtime": "automatic"
}
}
}
}
129 README.md
@@ -8,8 +8,8 @@ A Docusaurus 2.x plugin that help generate and consume auto-generated docs from
Grab from NPM and install along with `react-docgen-typescript`:

```sh
npm i docusaurus-plugin-react-docgen-typescript react-docgen-typescript # or
yarn add docusaurus-plugin-react-docgen-typescript react-docgen-typescript
npm i docusaurus-plugin-react-docgen-typescript react-docgen-typescript@2 # or
yarn add docusaurus-plugin-react-docgen-typescript react-docgen-typescript@2
```

## Usage
@@ -19,29 +19,29 @@ with full glob support :+1:.

```js
module.exports = {
// ...
plugins: [
[
'docusaurus-plugin-react-docgen-typescript',
{
// pass in a single string or an array of strings
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');
}
return true;
},
},
},
],
// ...
plugins: [
[
'docusaurus-plugin-react-docgen-typescript',
{
// pass in a single string or an array of strings
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');
}
return true;
},
},
},
],
],
};
```

@@ -58,51 +58,46 @@ Using the default settings, annotations are stored inside of the `.docusaurus` d
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';
```tsx
import { useDynamicImport } from 'docusaurus-plugin-react-docgen-typescript/dist/esm/hooks';
export const PropTable = ({ name }) => {
const props = useDynamicImport(name);
if (!props) {
return null;
}
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>
);
const props = useDynamicImport(name);
if (!props) {
return null;
}
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>
);
};
```

@@ -0,0 +1,3 @@
/* eslint-disable no-undef */
// eslint-disable-next-line id-denylist
module.exports = { extends: ['@commitlint/config-conventional'] };

0 comments on commit d34c6e2

Please sign in to comment.