feat(docz-theme-default): add tooltip on props

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

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { SFC, ReactNode } from 'react'
+import { Tooltip as BaseTooltip } from 'react-lightweight-tooltip'
+
+import * as colors from '../styles/colors'
+
+interface TooltipProps {
+  text: ReactNode
+  children: ReactNode
+}
+
+const styles = {
+  content: {
+    backgroundColor: colors.steel,
+    color: colors.snow,
+  },
+  tooltip: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 220,
+    maxWidth: 220,
+    padding: 5,
+    backgroundColor: colors.steel,
+    borderRadius: '3px',
+  },
+  arrow: {
+    borderTop: `solid ${colors.steel} 5px`,
+  },
+}
+
+export const Tooltip: SFC<TooltipProps> = ({ text, children }) => (
+  <BaseTooltip styles={styles} content={text}>
+    {children}
+  </BaseTooltip>
+)

packages/docz/src/components/PropsTable.tsx

@@ -1,12 +1,21 @@
 import * as React from 'react'
 import { Fragment, SFC, ComponentType } from 'react'
 
+export interface EnumValue {
+  value: string
+  computed: boolean
+}
+
 export interface Prop {
+  required: boolean
+  description?: string
   type: {
     name: string
+    value?: EnumValue[]
+  }
+  defaultValue?: {
+    value: string
   }
-  required: boolean
-  description?: string
 }
 
 export type ComponentWithDocGenInfo = ComponentType & {
@@ -23,38 +32,53 @@ export interface PropsTable {
   }
 }
 
+export type TooltipComponent = React.ComponentType<{
+  text: React.ReactNode
+  children: React.ReactNode
+}>
+
+const getValue = (value: string) => value.replace(/\'/g, '')
+
+const getPropType = (prop: Prop, Tooltip?: TooltipComponent) => {
+  const name = prop.type.name.toUpperCase()
+
+  if (!Tooltip || !prop.type.value) return name
+
+  return (
+    <Tooltip text={prop.type.value.map(val => getValue(val.value)).join(' | ')}>
+      {name}
+    </Tooltip>
+  )
+}
+
 export const PropsTable: SFC<PropsTable> = ({ of: component, components }) => {
   const info = component.__docgenInfo
+  const props = info && info.props
 
-  if (info && info.props && Object.keys(info.props).length === 0) {
+  if (!info || !props) {
     return null
   }
 
-  const { props } = info
   const H2 = components.h2 || 'h2'
   const Table = components.table || 'table'
   const Thead = components.thead || 'thead'
   const Tr = components.tr || 'tr'
   const Th = components.th || 'th'
   const Tbody = components.tbody || 'tbody'
   const Td = components.td || 'td'
+  const Tooltip = components.tooltip
 
   return (
     <Fragment>
       <H2>Properties</H2>
-      <Table class="PropsTable">
+      <Table className="PropsTable">
         <Thead>
           <Tr>
-            <Th width="15%" class="PropsTable--property">
-              Property
-            </Th>
-            <Th width="15%" class="PropsTable--type">
-              Type
-            </Th>
-            <Th width="15%" class="PropsTable--required">
-              Required
-            </Th>
-            <Th width="55%" class="PropsTable--description">
+            <Th className="PropsTable--property">Property</Th>
+            <Th className="PropsTable--type">Type</Th>
+            <Th className="PropsTable--required">Required</Th>
+            <Th className="PropsTable--description">Default</Th>
+            <Th width="40%" className="PropsTable--description">
               Description
             </Th>
           </Tr>
@@ -67,9 +91,12 @@ export const PropsTable: SFC<PropsTable> = ({ of: component, components }) => {
               return (
                 <Tr key={name}>
                   <Td>{name}</Td>
-                  <Td>{prop.type.name}</Td>
+                  <Td>{getPropType(prop, Tooltip)}</Td>
                   <Td>{String(prop.required)}</Td>
-                  <Td>{prop.description}</Td>
+                  <Td>
+                    {prop.defaultValue && getValue(prop.defaultValue.value)}
+                  </Td>
+                  <Td>{prop.description && prop.description}</Td>
                 </Tr>
               )
             })}

yarn.lock

@@ -6613,9 +6613,9 @@ react-lifecycles-compat@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
 
-react-powerplug@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.npmjs.org/react-powerplug/-/react-powerplug-0.1.5.tgz#f3dd7612c60efc55b6c7a2ddee284a8bcb6db783"
+react-lightweight-tooltip@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/react-lightweight-tooltip/-/react-lightweight-tooltip-1.0.0.tgz#1fb96831b88de21a4d73d02148aae3d8d0aea9bc"
 
 react-router-dom@^4.2.2:
   version "4.2.2"