Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(gatsby-theme-docz): add new Props component
  • Loading branch information
pedronauck committed Jun 28, 2019
1 parent a4770ab commit 8eb780d
Show file tree
Hide file tree
Showing 13 changed files with 251 additions and 51 deletions.
2 changes: 1 addition & 1 deletion core/docz-core/package.json
Expand Up @@ -26,7 +26,7 @@
"docz-utils": "^1.2.0",
"env-dot-prop": "^2.0.1",
"fast-deep-equal": "^2.0.1",
"fast-glob": "^3.0.2",
"fast-glob": "^3.0.3",
"find-up": "^4.1.0",
"fs-extra": "^8.0.1",
"get-pkg-repo": "^4.1.0",
Expand Down
2 changes: 1 addition & 1 deletion core/docz-rollup/package.json
Expand Up @@ -23,7 +23,7 @@
"rollup": "^1.16.2",
"rollup-plugin-alias": "^1.5.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.1.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
Expand Down
2 changes: 1 addition & 1 deletion core/docz/package.json
Expand Up @@ -29,7 +29,7 @@
"capitalize": "^2.0.0",
"docz-core": "^1.2.0",
"fast-deep-equal": "^2.0.1",
"gatsby": "^2.10.5",
"gatsby": "^2.11.0",
"lodash": "^4.17.11",
"match-sorter": "^3.1.1",
"prop-types": "^15.7.2",
Expand Down
3 changes: 2 additions & 1 deletion core/gatsby-theme-docz/package.json
Expand Up @@ -33,7 +33,7 @@
"docz-utils": "^1.2.0",
"emotion-theming": "^10.0.14",
"fs-extra": "^8.0.1",
"gatsby": "^2.10.5",
"gatsby": "^2.11.0",
"gatsby-mdx": "^0.6.3",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-compile-es6-packages": "^1.1.0",
Expand All @@ -47,6 +47,7 @@
"prop-types": "^15.7.2",
"re-resizable": "^5.0.1",
"react": "^16.8.6",
"react-docgen-props-table": "^1.0.3",
"react-dom": "^16.8.6",
"react-feather": "^1.1.6",
"react-helmet": "^5.2.1",
Expand Down
2 changes: 2 additions & 0 deletions core/gatsby-theme-docz/src/components/Icons/index.js
Expand Up @@ -3,3 +3,5 @@ export { default as Sun } from 'react-feather/dist/icons/sun'
export { default as Menu } from 'react-feather/dist/icons/menu'
export { default as Github } from 'react-feather/dist/icons/github'
export { default as Search } from 'react-feather/dist/icons/search'
export { default as ChevronUp } from 'react-feather/dist/icons/chevron-up'
export { default as ChevronDown } from 'react-feather/dist/icons/chevron-down'
58 changes: 58 additions & 0 deletions core/gatsby-theme-docz/src/components/Props/index.js
@@ -0,0 +1,58 @@
/** @jsx jsx */
import { useState } from 'react'
import { jsx } from 'theme-ui'

import { ChevronDown, ChevronUp } from '../Icons'
import * as styles from './styles'

export const Prop = ({ propName, prop, getPropType }) => {
const [showing, setShowing] = useState(false)
if (!prop.type && !prop.flowType) return null

const toggle = () => setShowing(s => !s)

return (
<div sx={styles.line}>
<div sx={styles.content}>
<div sx={styles.propName}>{propName}</div>
<div sx={styles.propType}>{getPropType(prop)}</div>
{prop.defaultValue && (
<div sx={styles.defaultValue}>
{prop.defaultValue.value === "''" ? (
<em>[Empty String]</em>
) : (
<em>{prop.defaultValue.value.replace(/\'/g, '"')}</em>
)}
</div>
)}
<div sx={styles.right}>
{prop.required && (
<div sx={styles.propRequired}>
<strong>required</strong>
</div>
)}
{prop.description && (
<button sx={styles.openDescBtn} onClick={toggle}>
{showing ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
</button>
)}
</div>
</div>
{showing && prop.description && (
<div sx={styles.description}>{prop.description}</div>
)}
</div>
)
}

export const Props = ({ props, getPropType }) => {
const entries = Object.entries(props)

return (
<div sx={styles.container}>
{entries.map(([key, prop]) => (
<Prop key={key} propName={key} prop={prop} getPropType={getPropType} />
))}
</div>
)
}
93 changes: 93 additions & 0 deletions core/gatsby-theme-docz/src/components/Props/styles.js
@@ -0,0 +1,93 @@
import { breakpoints } from '~theme/breakpoints'
import * as mixins from '~utils/mixins'

export const container = {
my: 4,
border: '1px solid #000',
borderColor: 'border',
borderRadius: 'radius',
overflow: 'hidden',
bg: 'props.bg',
color: 'props.text',
fontSize: 3,
}

export const content = {
position: 'relative',
display: 'flex',
flexDirection: 'column',
[`@media (min-width: ${breakpoints.tablet}px)`]: {
flexWrap: 'nowrap',
flexDirection: 'row',
},
}

export const line = {
pt: 2,
'& + &': {
borderTop: '1px solid #000',
borderColor: 'border',
},
}

export const column = {
minWidth: 0,
pb: 2,
px: 3,
wordWrap: 'break-word',
'& ~ &': {
bg: 'red',
},
}

export const propName = {
...column,
color: 'props.highlight',
}

export const propType = {
...column,
colors: 'props.text',
}

export const defaultValue = {
...column,
color: 'props.defaultValue',
}

export const right = {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: 3,
flex: 1,
[`@media (max-width: ${breakpoints.tablet}px)`]: {
position: 'absolute',
top: 0,
right: 0,
},
}

export const propRequired = {
color: 'props.text',
fontSize: 1,
opacity: 0.5,
}

export const openDescBtn = {
...mixins.ghostButton,
mt: -2,
ml: 3,
color: 'props.defaultValue',
}

export const description = {
fontSize: 2,
m: 0,
py: 2,
px: 3,
borderTop: '1px solid #000',
borderColor: 'border',
color: 'props.descriptionText',
bg: 'props.descriptionBg',
}
3 changes: 3 additions & 0 deletions core/gatsby-theme-docz/src/components/index.js
@@ -1,7 +1,10 @@
import * as headings from './Headings'

import { Layout } from './Layout'
import { Props } from './Props'

export const componentsMap = {
...headings,
layout: Layout,
props: Props,
}
16 changes: 16 additions & 0 deletions core/gatsby-theme-docz/src/theme/modes.js
Expand Up @@ -25,6 +25,14 @@ export const light = {
color: colors.grayDark,
},
},
props: {
bg: colors.grayUltraLight,
text: colors.grayDark,
highlight: colors.blue,
defaultValue: colors.gray,
descriptionText: colors.grayDark,
descriptionBg: colors.white,
},
}

export const dark = {
Expand Down Expand Up @@ -52,4 +60,12 @@ export const dark = {
color: colors.white,
},
},
props: {
bg: colors.dark,
text: colors.gray,
highlight: colors.skyBlue,
defaultValue: colors.grayDark,
descriptionText: colors.gray,
descriptionBg: colors.grayExtraDark,
},
}
1 change: 1 addition & 0 deletions core/gatsby-theme-docz/src/utils/mixins.js
Expand Up @@ -5,6 +5,7 @@ export const centerAlign = {
}

export const ghostButton = {
p: 0,
outline: 'none',
background: 'transparent',
border: 'none',
Expand Down
2 changes: 1 addition & 1 deletion examples/gatsby/package.json
Expand Up @@ -32,7 +32,7 @@
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.14.2",
"gatsby": "^2.10.5",
"gatsby": "^2.11.0",
"gatsby-mdx": "^0.6.3",
"gatsby-plugin-eslint": "^2.0.5",
"gatsby-theme-docz": "^1.2.0"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -48,7 +48,7 @@
"babel-preset-react-app": "^9.0.0",
"commitizen": "^3.1.1",
"cross-env": "^5.2.0",
"husky": "^2.5.0",
"husky": "^2.7.0",
"jest": "^24.8.0",
"lerna": "3.15.0",
"lint-staged": "^8.2.1",
Expand Down

0 comments on commit 8eb780d

Please sign in to comment.