@jaak/primitives/lib/Input/Input.js

JAAK UI primitives

import { placeholder } from 'polished'
import styled from 'styled-components'

import {
  backgroundTypes,
  borderTypes,
  boxModelTypes,
  cssTypes,
  displayTypes,
  linkTypes,
  textTypes,
} from '../types'
import { background, border, boxModel, css, display, link, text } from '../util'

/**
 * @namespace Input
 * @desc Primitive styled-component 💅
 * @return {Function} React component
 */
const Input = styled.input`
  ${background};
  ${border};
  ${boxModel};
  ${css};
  ${display};
  ${link};
  ${text};
  ${({ placeholderColor, theme }) =>
    placeholder({
      color: theme.palette[placeholderColor] || placeholderColor,
    })};
`

/**
 * @name defaultProps
 * @memberof Input
 * @desc Primitive's default properties
 */
Input.defaultProps = {
  borderStyle: 'solid',
  borderWidth: ['1px'],
  cursor: 'initial',
  fontSize: 'baseFontSize',
  margin: [0],
  outline: 'none',
  padding: [0],
  size: ['auto'],
}

/**
 * @name propTypes
 * @memberof Input
 * @desc Primitive's prop type definitions
 */
Input.propTypes = {
  ...backgroundTypes,
  ...borderTypes,
  ...boxModelTypes,
  ...cssTypes,
  ...displayTypes,
  ...linkTypes,
  ...textTypes,
}

/** @component */
export default Input