feat: add component props parse feature

examples/basic/src/components/Alert.jsx

@@ -2,14 +2,16 @@ import React, { Fragment } from 'react'
 import styled from 'react-emotion'
 import t from 'prop-types'
 
+import Button from './Button'
+
 const kinds = {
   info: '#5352ED',
   positive: '#2ED573',
   negative: '#FF4757',
   warning: '#FFA502',
 }
 
-export const Alert = styled('div')`
+const Alert = styled('div')`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
@@ -20,3 +22,5 @@ export const Alert = styled('div')`
 Alert.propTypes = {
   color: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }
+
+export default Alert

examples/basic/src/components/Alert.mdx

@@ -1,5 +1,5 @@
 import { doc, Playground } from 'docz'
-import { Alert } from './Alert'
+import Alert from './Alert'
 
 export const meta = doc('Alert')
   .category('Components')

examples/basic/src/components/Button.jsx

@@ -1,3 +1,14 @@
 import React from 'react'
+import t from 'prop-types'
 
-export const Button = ({ children }) => <button>{children}</button>
+const Button = ({ children }) => <button>{children}</button>
+
+Button.propTypes = {
+  /**
+    Button element children
+  */
+  children: t.any,
+  color: t.string,
+}
+
+export default Button

examples/basic/src/components/Button.mdx

@@ -1,11 +1,22 @@
-import { doc, Playground } from 'docz'
-import { Button } from './Button'
+import { doc, Playground, PropsTable } from 'docz'
+import Button from './Button'
 
 export const meta = doc('Button')
   .category('Components')
 
 # Button
 
+Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.
+
+### Best practices
+
+- Group buttons logically into sets based on usage and importance.
+- Ensure that button actions are clear and consistent.
+- The main action of a group set can be a primary button.
+- Select a single button variation and do not mix them.
+
+<PropsTable of={Button} />
+
 ## Basic usage
 
 <Playground>

packages/docz-core/package.json

@@ -28,6 +28,7 @@
     "@types/shelljs": "^0.7.9",
     "art-template": "^4.12.2",
     "babel-loader": "^8.0.0-beta.1",
+    "babel-plugin-react-docgen": "^1.9.0",
     "babel-polyfill": "^7.0.0-beta.3",
     "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
     "chokidar": "^2.0.3",

packages/docz-core/src/bundlers/webpack/config.ts

@@ -100,7 +100,7 @@ export const createConfig = (args: ConfigObj) => (): Configuration => {
     cacheDirectory: true,
     highlightCode: true,
     presets: [require.resolve('babel-preset-react-app')],
-    plugins: [require.resolve('react-hot-loader/babel')],
+    plugins: [],
   })
 
   config.module
@@ -116,7 +116,13 @@ export const createConfig = (args: ConfigObj) => (): Configuration => {
     .end()
     .use('babel-loader')
     .loader(require.resolve('babel-loader'))
-    .options(babelrc)
+    .options({
+      ...babelrc,
+      plugins: babelrc.plugins.concat([
+        require.resolve('react-hot-loader/babel'),
+        require.resolve('babel-plugin-react-docgen'),
+      ]),
+    })
 
   config.module
     .rule('mdx')

packages/docz-core/src/utils/plugin-hast.ts

@@ -4,14 +4,19 @@ import nodeToString from 'hast-util-to-string'
 
 import { format } from '../utils/format'
 
-const hasOpenTag = (node: any) => /^\<Playground/.test(node.value)
+const componentName = (value: any) => {
+  const match = value.match(/^\<\\?(\w+)/)
+  return match && match[1]
+}
 
-export const plugin = () => (tree: any, file: any) => {
-  visit(tree, 'jsx', visitor)
+const isPlayground = (name: string) => name === 'Playground'
+const isPropsTable = (name: string) => name === 'PropsTable'
 
-  function visitor(node: any, idx: any, parent: any): void {
-    if (!hasOpenTag(node)) return
+const addCodeProp = (node: any) => {
+  const name = componentName(node.value)
 
+  if (isPlayground(name)) {
+    const tagOpen = new RegExp(`^\\<${name}`)
     const code = format(nodeToString(node)).slice(1, Infinity)
     const html = prism.highlight(code, prism.languages.jsx)
 
@@ -21,8 +26,27 @@ export const plugin = () => (tree: any, file: any) => {
       </pre>
     )`
 
-    node.value = node.value
-      .replace(/^\<Playground/, `<Playground __code={${codeComponent}}`)
-      .replace(/^\<Playground/, '<Playground components={components}')
+    node.value = node.value.replace(
+      tagOpen,
+      `<${name} __code={${codeComponent}}`
+    )
+  }
+}
+
+const addComponentsProp = (node: any) => {
+  const name = componentName(node.value)
+
+  if (isPlayground(name) || isPropsTable(name)) {
+    const tagOpen = new RegExp(`^\\<${name}`)
+    node.value = node.value.replace(tagOpen, `<${name} components={components}`)
+  }
+}
+
+export const plugin = () => (tree: any, file: any) => {
+  visit(tree, 'jsx', visitor)
+
+  function visitor(node: any, idx: any, parent: any): void {
+    addComponentsProp(node)
+    addCodeProp(node)
   }
 }

packages/docz-core/src/utils/plugin-mdast.ts

@@ -10,7 +10,7 @@ const componentName = (value: any) => {
 }
 
 // iterate in a reverse way to merge values then delete the unused node
-const valuesFromNodes = (tree: any) => (first: any, last: any) => {
+const valuesFromNodes = (tree: any) => (first: number, last: number) => {
   const values = []
 
   if (first !== last) {
@@ -57,11 +57,13 @@ const mergeNodeWithoutCloseTag = (tree: any, node: any, idx: any) => {
     return hasJustCloseTag(value)
   })
 
-  // merge all values from node open tag until node with the close tag
-  const mergeUntilCloseTag = valuesFromNodes(tree)
-  const values = mergeUntilCloseTag(idx, tagCloseIdx)
+  if (tagCloseIdx > -1 && tagCloseIdx !== idx) {
+    // merge all values from node open tag until node with the close tag
+    const mergeUntilCloseTag = valuesFromNodes(tree)
+    const values = mergeUntilCloseTag(idx, tagCloseIdx)
 
-  node.value = values.reverse().join('\n')
+    node.value = values.reverse().join('\n')
+  }
 }
 
 // turns `html` nodes into `jsx` nodes

packages/docz-theme-default/src/components/Doc.tsx

@@ -5,6 +5,7 @@ import styled from 'react-emotion'
 
 import * as colors from '../styles/colors'
 import { Render } from './Render'
+import { Table } from './Table'
 
 const Container = styled('div')`
   width: ${rem(960)};
@@ -17,7 +18,7 @@ const Title = styled('h1')`
   position: relative;
   font-size: ${rem(48)};
   font-weight: 200;
-  margin: ${rem(20)} 0 ${rem(30)};
+  margin: ${rem(20)} 0 ${rem(40)};
 
   &:before {
     position: absolute;
@@ -26,7 +27,7 @@ const Title = styled('h1')`
     left: 0;
     width: 10%;
     height: 3px;
-    background: ${colors.PURPLE};
+    background: ${colors.purple};
   }
 `
 
@@ -36,8 +37,21 @@ const Subtitle = styled('h2')`
   font-weight: 200;
 `
 
+const H3 = styled('h3')`
+  margin: ${rem(30)} 0 ${rem(20)};
+  font-weight: 600;
+`
+
 export const Doc: SFC<DocObj> = ({ id, component: Component }) => (
   <Container key={id}>
-    <Component components={{ h1: Title, h2: Subtitle, Render }} />
+    <Component
+      components={{
+        h1: Title,
+        h2: Subtitle,
+        h3: H3,
+        table: Table,
+        Render,
+      }}
+    />
   </Container>
 )

packages/docz-theme-default/src/components/Link.tsx

@@ -18,11 +18,11 @@ const LinkStyled = styled(BaseLink)`
 
   &,
   &:visited {
-    color: ${colors.GRAY_DARK};
+    color: ${colors.silver};
   }
 
   &.active {
-    background: ${colors.GRAY};
+    background: ${colors.darkSnow};
   }
 
   &:before {
@@ -32,7 +32,7 @@ const LinkStyled = styled(BaseLink)`
     left: 0;
     width: 4px;
     height: 100%;
-    background: ${colors.PURPLE};
+    background: ${colors.purple};
     transform: scaleX(0);
     transform-origin: 0 50%;
     transition: transform 0.3s;

packages/docz-theme-default/src/components/Menu.tsx

@@ -10,8 +10,8 @@ const Sidebar = styled('div')`
   padding: 15px 0;
   width: 200px;
   height: 100vh;
-  border-right: 1px solid ${colors.BORDER};
-  background: ${colors.GRAY_LIGHT};
+  border-right: 1px solid ${colors.border};
+  background: ${colors.snow};
 `
 
 const List = styled('ul')`
@@ -30,7 +30,7 @@ const Category = styled('li')`
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${colors.GRAY_MEDIUM};
+  color: ${colors.steel};
 `
 
 interface LinksProps {

packages/docz-theme-default/src/components/Render.tsx

@@ -9,12 +9,12 @@ const ComponentWrapper = styled('div')`
   position: relative;
   padding: 2rem;
   background: white;
-  border: 1px solid ${colors.GRAY};
+  border: 1px solid ${colors.border};
   border-radius: 3px 3px 0 0;
 `
 
 const CodeWrapper = styled('div')`
-  border: 1px solid ${colors.GRAY};
+  border: 1px solid ${colors.border};
   border-top: 0;
   border-radius: 0 0 3px 3px;
 

packages/docz-theme-default/src/components/Table.tsx

@@ -0,0 +1,39 @@
+import styled from 'react-emotion'
+import { rem } from 'polished'
+
+import * as colors from '../styles/colors'
+
+export const Table = styled('table')`
+  width: 100%;
+  padding: 0;
+  margin-bottom: ${rem(50)};
+  table-layout: fixed;
+  box-shadow: 0 0 0 1px ${colors.border};
+  background-color: transparent;
+  border-radius: 3px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border-style: hidden;
+  font-size: ${rem(14)};
+
+  & thead {
+    background: ${colors.darkSnow};
+  }
+
+  & thead th {
+    text-align: left;
+    font-weight: 400;
+    padding: ${rem(20)} ${rem(20)};
+  }
+
+  & tbody td {
+    padding: ${rem(12)} ${rem(20)};
+    line-height: 2;
+    font-weight: 200;
+  }
+
+  & tbody > tr {
+    display: table-row;
+    border-top: 1px solid ${colors.border};
+  }
+`

packages/docz-theme-default/src/styles/colors.ts

@@ -1,9 +1,19 @@
-export const BORDER = '#ced6e0'
-export const PURPLE = '#6554C0'
-export const BLUE = '#0052CC'
-export const OCEAN_BLUE = '#00B8D9'
-export const ORANGE = '#FF5630'
-export const GRAY = '#EAECEF'
-export const GRAY_LIGHT = '#F4F5F7'
-export const GRAY_MEDIUM = '#C1C7D0'
-export const GRAY_DARK = '#172B4D'
+export const snow = '#F9FAFC'
+export const darkSnow = '#EFF2F7'
+export const extraDarkSnow = '#E5E9F2'
+export const smoke = '#E0E6ED'
+export const darkSmoke = '#D3DCE6'
+export const extraDarkSmoke = '#C0CCDA'
+export const silver = '#8492A6'
+export const slate = '#3C4858'
+export const steel = '#273444'
+export const black = '#1F2D3D'
+
+export const purple = '#6554C0'
+export const blue = '#1FB6FF'
+
+export const textColor = slate
+export const linkColor = purple
+export const background = 'white'
+
+export const border = darkSmoke