PropsTable.js

import * as React from 'react'

import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'

const ArrayOf = ({ type }) => (
  <React.Fragment>
    <span>[</span>
    <Type type={type} />
    <span>]</span>
  </React.Fragment>
)

const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
const parseRaw = raw => raw.replace(/Type$/, '').replace(/Type.isRequired$/, '!')
const printName = ({ name, raw, required }) => capitalize(raw && name === 'custom' ? parseRaw(raw) : name)

const prettyType = ({ required, name, raw }) => `${printName({ name, raw })}${required ? '!' : ''}`.replace(/!!$/, '!')

const Shape = ({ type }) => {
  const entries = Object.entries(type)
  return (
    <React.Fragment>
      {'{ '}
      {entries.map(([propName, data], index) => (
        <span key={propName}>
          {propName}: {prettyType(data)}
          {entries.length - 1 !== index ? ', ' : ''}
        </span>
      ))}
      {' }'}
      {type.required && '!'}
    </React.Fragment>
  )
}

const Type = ({ type }) => {
  if (type.name === 'arrayOf') {
    return <ArrayOf type={type.value} />
  }
  if (type.name === 'shape') {
    return <Shape type={type.value} />
  }
  if (type.name) return prettyType(type)
  return 'woot'
}

const Prop = ({ name, data }) => (
  <TableRow>
    <TableCell>{name}</TableCell>
    <TableCell>
      <pre>
        <Type type={{ ...data.type, required: data.required }} />
      </pre>
    </TableCell>
    <TableCell>{data.default}</TableCell>
    <TableCell>{data.description}</TableCell>
  </TableRow>
)

const PropsTable = ({ props }) => (
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>
          <b>Property</b>
        </TableCell>
        <TableCell>Type</TableCell>
        <TableCell>Default</TableCell>
        <TableCell>Description</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>{Object.entries(props).map(([name, data]) => <Prop key={name} name={name} data={data} />)}</TableBody>
  </Table>
)

export default ({ children, of: Component }) => {
  if (!Component) return 'No component'
  if (!Component.__docgenInfo) return 'No propTypes info'
  const { props, description } = Component.__docgenInfo
  if (!props) return 'No prop data'
  return <PropsTable props={props} />
}