feat: docgen with typescript (#990)

* feat: init doc-props script

* fix: comment WuiProvider propTypes on /installation

* chore: add script for all components

* fix: lint

* fix: missing props

* fix: display React props name instead values

* fix: no props on components

* chore: fix scoped components props

* fix: lint

* fix: prevent 137 code on circleci

docs/components/Props.js

@@ -12,16 +12,24 @@ import { CheckIcon } from '@welcome-ui/icons'
 
 import * as TYPES from '../../utils/propTypes'
 
-const removeQuote = str => str?.replace(/'/g, '')
+const removeQuote = str => str?.toString()?.replace(/'/g, '')
 
 const isArray = Array.isArray
 
-const Type = ({ type }) => {
+const reactTypes = ['ElementType<any>']
+
+function Type({ type }) {
   if (!type) {
     return null
   }
   const { name, raw, value } = type
 
+  if (reactTypes.includes(raw)) {
+    return `React.${raw}`
+  }
+
+  if (raw === 'boolean') return 'Boolean'
+
   // Enum
   if (name === 'enum') {
     let values
@@ -58,11 +66,13 @@ const Type = ({ type }) => {
   return name
 }
 
-export const Props = ({ propTypes }) => {
+export function Props({ propTypes }) {
   if (!propTypes) {
-    return 'No propTypes specified'
+    return 'No props specified'
   }
 
+  const { props } = propTypes
+
   return (
     <Card>
       <Card.Body color="dark.900" padding="xl">
@@ -76,8 +86,8 @@ export const Props = ({ propTypes }) => {
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {Object.keys(propTypes).map(key => {
-              const { defaultValue, description, required, type } = propTypes[key]
+            {Object.keys(props).map(key => {
+              const { defaultValue, description, required, type } = props[key]
 
               if (!type) {
                 return null

docs/getStaticProps.js

@@ -1,57 +1,28 @@
-const isComponentFile = file => {
-  if (file === 'index.js') {
-    return true
-  }
-
-  const [name, extension] = file.split('.')
-  const firstLetter = name[0]
-
-  // Components start with capital letter e.g. Title.js
-  if (extension === 'js' && firstLetter === firstLetter.toUpperCase()) {
-    return true
-  }
-
-  return false
-}
+const path = require('path')
+const fs = require('fs/promises')
 
 export async function getStaticProps() {
-  // Only import on server
-  const reactDocs = require('react-docgen')
-  const path = require('path')
-  const fs = require('fs')
-
-  let propTypes = {}
-
-  // Use react-docgen to get proptypes
-  const cwd = process.cwd()
-  const packages = fs.readdirSync(path.join(cwd, 'packages'))
-
-  // Loop through all packages…
-  packages.forEach(packageName => {
-    const componentFiles = fs
-      .readdirSync(path.join(cwd, `packages/${packageName}`))
-      .filter(isComponentFile)
-
-    // Loop through all component files for a package and add to prepped propTypes object
-    componentFiles.forEach(file => {
-      const content = fs.readFileSync(path.join(cwd, `packages/${packageName}/${file}`), 'utf8')
-      try {
-        const { props } = reactDocs.parse(content)
-        if (!props) {
-          return
-        }
-
-        let key = packageName
-        if (file !== 'index.js') {
-          const [filename] = file.split('.')
-          key = `${key}.${filename}`
-        }
-        propTypes[key] = props
-      } catch (e) {
-        console.error({ packageName, file, e: e.message })
-        return
-      }
-    })
+  const propTypes = {}
+  const packages = await fs.readdir(path.join(process.cwd(), 'docs', 'pages', 'components'))
+
+  packages.forEach(file => {
+    const packageName = file.replace('.mdx', '')
+
+    try {
+      const packageProps = require(`@welcome-ui/${packageName}/dist/${packageName}.doc.json`)
+
+      Object.keys(packageProps).forEach(key => {
+        propTypes[key] = packageProps[key]
+      })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(`@welcome-ui/${packageName}/dist/${packageName}.doc.json is missing`)
+    }
   })
-  return { props: { propTypes } }
+
+  return {
+    props: {
+      propTypes,
+    },
+  }
 }

docs/pages/components/badge.mdx

@@ -1,3 +1,5 @@
+export { getStaticProps } from '../../getStaticProps'
+
 import {
   component,
   dependencies,
@@ -27,6 +29,10 @@ Badge is the [Tag](/components/tag) component with small size.
 <Badge variant="primary">New</Badge>
 ```
 
+## Properties
+
+<props propTypes={props.propTypes.Badge} />
+
 ## Dependencies
 
 <dependencies dependencies={dependencies} />

docs/pages/components/radio-group.mdx

@@ -76,7 +76,7 @@ function () {
 
 ## Properties
 
-<props propTypes={props.propTypes.Radio} />
+<props propTypes={props.propTypes.RadioGroup} />
 
 ## Dependencies
 

docs/pages/components/toggle.mdx

@@ -74,7 +74,7 @@ function () {
 
 ## Properties
 
-<props propTypes={props.propTypes.Checkbox} />
+<props propTypes={props.propTypes.Toggle} />
 
 ## Dependencies
 

docs/pages/installation.mdx

@@ -40,6 +40,8 @@ export default function Root() {
 
 ### WuiProvider Props
 
+<!-- todo -->
+<!--
 <props
   propTypes={{
     children: {
@@ -80,6 +82,7 @@ export default function Root() {
     },
   }}
 />
+-->
 
 ## Hide Focus Ring
 

package.json

@@ -19,10 +19,11 @@
     "webfont:build": "node -r esm scripts/webfont-build.js --force && yarn build:packages --scope @welcome-ui/icons.font",
     "webfont:deploy": "./scripts/webfont-deploy.sh",
     "pre-build": "yarn icons:collect",
-    "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types",
+    "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types && yarn build:docs",
     "build:packages": "lerna run build --ignore docs --ignore @welcome-ui/core",
     "build:core": "./scripts/core.sh",
-    "build:types": "lerna run types --scope @welcome-ui/core && lerna run types --ignore @welcome-ui/core",
+    "build:types": "lerna run types",
+    "build:docs": "lerna run doc --concurrency 2",
     "watch": "onchange 'packages/**/*.ts*' -e '**/dist/**' -- node -r esm scripts/watch.js {{changed}}",
     "release:publish": "yarn lerna publish --conventional-commits --no-private",
     "release:prerelease": "yarn -s check:ssh && yarn build && yarn lerna publish --conventional-prerelease --no-private --pre-dist-tag next --yes || yarn -s check:ssh-error",
@@ -85,19 +86,19 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@testing-library/dom": "7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "12.6.0",
     "@types/emoji-mart": "3.0.8",
-    "@types/lodash.range": "^3.2.6",
-    "@types/ramda": "^0.27.44",
-    "@types/react-datepicker": "^4.3.2",
-    "@types/react": "^17.0.11",
-    "@types/styled-components": "^5.1.11",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.escaperegexp": "^4.1.6",
     "@types/lodash.groupby": "^4.6.6",
+    "@types/lodash.range": "^3.2.6",
+    "@types/ramda": "^0.27.44",
+    "@types/react": "^17.0.11",
+    "@types/react-datepicker": "^4.3.2",
     "@types/react-window": "^1.8.5",
+    "@types/styled-components": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "@xstyled/styled-components": "^3.0.3",
@@ -112,47 +113,48 @@
     "conventional-github-releaser": "^3.1.3",
     "date-fns": "^2.19.0",
     "depcheck": "=0.9.1",
+    "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.3",
-    "eslint": "^7.28.0",
     "esm": "^3.2.25",
     "final-form": "^4.20.2",
     "husky": "=3.1.0",
-    "jest-styled-components": "7.0.3",
     "jest": "26.6.3",
-    "lerna-update-wizard": "^0.17.8",
+    "jest-styled-components": "7.0.3",
     "lerna": "^3.22.1",
+    "lerna-update-wizard": "^0.17.8",
     "lodash.difference": "^4.5.0",
     "minimist": "1.2.5",
     "netlify-cli": "^2.59.1",
     "onchange": "^7.0.2",
     "prettier": "^2.4.0",
     "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.1",
     "react-final-form": "^6.5.2",
     "react-helmet": "^5.2.1",
     "react-live": "^2.2.1",
     "react-router-dom": "=5.1.2",
-    "react": "^17.0.1",
     "rimraf": "^3.0.2",
+    "rollup": "2.51.1",
     "rollup-plugin-babel": "=4.3.2",
     "rollup-plugin-node-resolve": "^5.0.1",
     "rollup-plugin-postcss": "=2.0.3",
-    "rollup": "2.51.1",
     "standard-version": "^6.0.1",
     "style-loader": "=0.23.1",
     "styled-components": "^5.3.0",
+    "stylelint": "=12.0.0",
     "stylelint-config-recommended": "=3.0.0",
     "stylelint-config-styled-components": "=0.1.1",
     "stylelint-processor-styled-components": "=1.9.0",
-    "stylelint": "=12.0.0",
     "surge": "=0.21.3",
     "svgo": "^2.2.0",
     "typescript": "^4.4.3",

packages/Accordion/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Accordion"
   },
   "publishConfig": {
     "access": "public"

packages/Alert/Title.tsx

@@ -8,6 +8,9 @@ import { AlertOptions } from '.'
 
 export type AlertTitleProps = CreateWuiProps<'h5', VariantIconOptions & AlertOptions>
 
+/**
+ * @name Alert.Title
+ */
 export const Title: React.FC<AlertTitleProps> = ({
   children,
   dataTestId,

packages/Alert/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Alert"
   },
   "publishConfig": {
     "access": "public"

packages/Avatar/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Avatar"
   },
   "publishConfig": {
     "access": "public"

packages/Badge/index.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { Tag, TagOptions } from '@welcome-ui/tag'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
-export type BadgeProps = CreateWuiProps<'div', Omit<TagOptions, 'size'>>
+export type BadgeOptions = Omit<TagOptions, 'size'>
+export type BadgeProps = CreateWuiProps<'div', BadgeOptions>
 
 export const Badge = forwardRef<'div', BadgeProps>((props, ref) => (
   <Tag ref={ref} size="sm" {...props} />

packages/Badge/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Badge"
   },
   "publishConfig": {
     "access": "public"

packages/Box/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Box"
   },
   "publishConfig": {
     "access": "public"

packages/Breadcrumb/Item.tsx

@@ -11,6 +11,9 @@ export interface ItemOptions {
 
 export type ItemProps = CreateWuiProps<'li', ItemOptions>
 
+/**
+ * @name Breadcrumb.Item
+ */
 export const Item: React.FC<ItemProps> = ({ children, dataTestId, separator, ...rest }) => {
   return (
     <Box

packages/Breadcrumb/package.json

@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Breadcrumb"
   },
   "publishConfig": {
     "access": "public"

packages/Button/index.tsx

@@ -30,6 +30,9 @@ export interface ButtonOptions {
 
 export type ButtonProps = CreateWuiProps<'button', ButtonOptions>
 
+/**
+ * @tag button
+ */
 export const Button = forwardRef<'button', ButtonProps>(
   ({ children, dataTestId, disabled, size = 'md', variant = 'primary', ...rest }, ref) => (
     <S.Button

packages/Button/package.json

@@ -10,7 +10,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Button"
   },
   "publishConfig": {
     "access": "public"