message: refactor Block to use system props
diff: import React from 'react'
  import PropTypes from 'prop-types'
  import classnames from 'classnames'
  -import {colors} from './theme'
  -import {oneOrMoreOf, stylizer} from './props'
  -import {spacing} from './mappers'
  +import {composeWithPropTypes, oneOrMoreOf, stylizer} from './props'
  +import {bg, borderColor, borderRadius, color, display, position, spacing} from './mappers'
  -const borderColors = Object.keys(colors.border)
  -
  -const styleProps = ['width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight']
  -const stylize = stylizer(styleProps)
  +const stylize = stylizer(['width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight'])
  +const mapProps = composeWithPropTypes(bg, borderColor, borderRadius, color, display, position, spacing, stylize)
  function unique(values) {
  return values.filter((v, i) => values.indexOf(v) === i)
  @@ -26,21 +23,9 @@ function getBorderClass(value, colorValue) {
  }
  }
  -const Block = props => {
  - const {
  - tag: Tag = 'div',
  - children,
  - className,
  - bg,
  - border,
  - borderColor,
  - borderRadius,
  - display,
  - fg,
  - position,
  - shadow,
  - ...rest
  - } = spacing(props)
  +export default function Block(props) {
  + const providedBorderColor = props.borderColor
  + const {tag: Tag, children, className, border, shadow, ...rest} = mapProps(props)
  const {style} = stylize(rest)
  @@ -48,13 +33,7 @@ const Block = props => {
  <Tag
  className={classnames(
  className,
  - getBorderClass(border, borderColor),
  - borderColor && `border-${borderColor}`,
  - display && `d-${display}`,
  - bg && `bg-${bg}`,
  - fg && `text-${fg}`,
  - typeof borderRadius === 'number' && `rounded-${borderRadius}`,
  - position && `position-${position}`,
  + getBorderClass(border, providedBorderColor),
  shadow && (shadow === 'small' ? 'box-shadow' : `box-shadow-${shadow}`)
  )}
  style={style}
  @@ -64,21 +43,13 @@ const Block = props => {
  )
  }
  +Block.defaultProps = {
  + tag: 'div'
  +}
  +
  Block.propTypes = {
  - bg: PropTypes.string,
  + ...mapProps.propTypes,
  border: PropTypes.oneOfType([PropTypes.bool, oneOrMoreOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left']))]),
  - borderColor: PropTypes.oneOf(borderColors),
  - borderRadius: PropTypes.oneOf([0, 1, 2]),
  children: PropTypes.node,
  - display: PropTypes.oneOf(['inline', 'inline-block', 'none']),
  - fg: PropTypes.string,
  - position: PropTypes.oneOf(['absolute', 'fixed', 'relative']),
  - shadow: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
  - ...spacing.propTypes
  + shadow: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
  }
  -
  -for (const prop of styleProps) {
  - Block.propTypes[prop] = PropTypes.number
  -}
  -
  -export default Block
  