diff --git a/packages/docz-theme-default/src/components/Tooltip.tsx b/packages/docz-theme-default/src/components/Tooltip.tsx new file mode 100644 index 000000000..c8dcab3b4 --- /dev/null +++ b/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 = ({ text, children }) => ( + + {children} + +) diff --git a/packages/docz/src/components/PropsTable.tsx b/packages/docz/src/components/PropsTable.tsx index c79487b76..e0283f935 100644 --- a/packages/docz/src/components/PropsTable.tsx +++ b/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,14 +32,33 @@ 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 ( + getValue(val.value)).join(' | ')}> + {name} + + ) +} + export const PropsTable: SFC = ({ 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' @@ -38,23 +66,19 @@ export const PropsTable: SFC = ({ of: component, components }) => { const Th = components.th || 'th' const Tbody = components.tbody || 'tbody' const Td = components.td || 'td' + const Tooltip = components.tooltip return (

Properties

- +
- - - - + + + + @@ -67,9 +91,12 @@ export const PropsTable: SFC = ({ of: component, components }) => { return ( - + - + + ) })} diff --git a/yarn.lock b/yarn.lock index 2efbcbf66..746dba944 100644 --- a/yarn.lock +++ b/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"
- Property - - Type - - Required - + PropertyTypeRequiredDefault Description
{name}{prop.type.name}{getPropType(prop, Tooltip)} {String(prop.required)}{prop.description} + {prop.defaultValue && getValue(prop.defaultValue.value)} + {prop.description && prop.description}