@jaak/primitives/lib/types.js

JAAK UI primitives

import PropTypes from 'prop-types'

/**
 * Background CSS attribute types
 *
 * @type {Object}
 */
export const backgroundTypes = {
  /** Background */
  background: PropTypes.string,
  /** Background colour */
  backgroundColor: PropTypes.string,
  /** Background image */
  backgroundImage: PropTypes.string,
  /** Background position */
  backgroundPosition: PropTypes.string,
  /** Background repeat */
  backgroundRepeat: PropTypes.string,
  /** Background size */
  backgroundSize: PropTypes.string,
}

/**
 * Border CSS attribute types
 *
 * @type {Object}
 */
export const borderTypes = {
  /** Border bottom left radius */
  borderBottomLeftRadius: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  /** Border bottom right radius */
  borderBottomRightRadius: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  /** Border color */
  borderColor: PropTypes.string,
  /** Border style */
  borderStyle: PropTypes.string,
  /** Border top left radius */
  borderTopLeftRadius: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  /** Border top right radius */
  borderTopRightRadius: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  /** Border width */
  borderWidth: PropTypes.array,
}

/**
 * Box model CSS attribute types
 *
 * @type {Object}
 */
export const boxModelTypes = {
  /** Margin shorthand */
  margin: PropTypes.array,
  /* Margin Bottom */
  marginBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Margin Left */
  marginLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Margin Right */
  marginRight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Margin Top */
  marginTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Maximum height */
  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Maximum width */
  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Minimum height */
  minHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Minimum width */
  minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Padding shorthand */
  padding: PropTypes.array,
  /* Padding Bottom */
  paddingBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Padding Left */
  paddingLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Padding Right */
  paddingRight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /* Padding Top */
  paddingTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** [Size shorthand](https://polished.js.org/docs/#size) */
  size: PropTypes.array,
}

/**
 * Inline CSS attribute types
 *
 * @type {Object}
 */
export const cssTypes = {
  /** Inline CSS */
  css: PropTypes.string,
}

/**
 * Display CSS attribute types
 *
 * @type {Object}
 */
export const displayTypes = {
  /** Display */
  display: PropTypes.string,
}

/**
 * Flexbox CSS attribute types
 *
 * @type {Object}
 */
export const flexboxTypes = {
  /** Flex */
  flex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Flex direction */
  flexDirection: PropTypes.string,
  /** Flex wrap */
  flexWrap: PropTypes.string,
}

/**
 * Grid CSS attribute types
 *
 * @type {Object}
 */
export const gridTypes = {
  grid: PropTypes.string,
  gridArea: PropTypes.string,
  gridAutoColumns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridAutoFlow: PropTypes.string,
  gridAutoRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridColumn: PropTypes.string,
  gridColumnEnd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridColumnGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridColumnStart: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridRow: PropTypes.string,
  gridRowEnd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridRowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridRowStart: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridTemplate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridTemplateAreas: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  gridTemplateColumns: PropTypes.string,
  gridTemplateRows: PropTypes.string,
}

/**
 * Link CSS attribute types
 *
 * @type {Object}
 */
export const linkTypes = {
  /** Cursor */
  cursor: PropTypes.string,
  /** Outline */
  outline: PropTypes.string,
}

/**
 * List CSS attribute types
 *
 * @type {Object}
 */
export const listTypes = {
  /** List style */
  listStyle: PropTypes.string,
  /** List style image */
  listStyleImage: PropTypes.string,
  /** List style position */
  listStylePosition: PropTypes.string,
  /** List style type */
  listStyleType: PropTypes.string,
}

/**
 * Position CSS attribute types
 *
 * @type {Object}
 */
export const positionTypes = {
  /** Bottom */
  bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Left */
  left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Position */
  position: PropTypes.string,
  /** Right */
  right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Top */
  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Transform */
  transform: PropTypes.string,
  /** Z Index */
  zIndex: PropTypes.number,
}

/**
 * Text CSS attribute types
 *
 * @type {Object}
 */
export const textTypes = {
  /** Colour palette alias */
  color: PropTypes.string,
  /** Font family */
  fontFamily: PropTypes.string,
  /** Font size */
  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Font style */
  fontStyle: PropTypes.string,
  /** Font weight */
  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Letter spacing */
  letterSpacing: PropTypes.string,
  /** Line height */
  lineHeight: PropTypes.string,
  /** Text alignment */
  textAlign: PropTypes.string,
  /** Text decoration */
  textDecoration: PropTypes.string,
  /** Text transformation */
  textTransform: PropTypes.string,
}

/**
 * Transition CSS attribute types
 *
 * @type {Object}
 */
export const transitionTypes = {
  /** Transition */
  transition: PropTypes.string,
  /** Transition Delay */
  transitionDelay: PropTypes.string,
  /** Transition Duration */
  transitionDuration: PropTypes.string,
  /** Transition Property */
  transitionProperty: PropTypes.string,
  /** Transition Timing Function */
  transitionTimingFunction: PropTypes.string,
}