perf(shorthand): standardize childKey and shorthand props

src/addons/Confirm/Confirm.js

@@ -2,7 +2,12 @@ import React, { PropTypes } from 'react'
 
 import { Button } from '../../elements'
 import { Modal } from '../../modules'
-import { getUnhandledProps, META } from '../../lib'
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
 
 /**
  * A Confirm modal gives the user a choice to confirm or cancel an action
@@ -30,6 +35,9 @@ Confirm._meta = {
 }
 
 Confirm.propTypes = {
+  /** An element type to render as (string or function). */
+  as: customPropTypes.as,
+
   /** Whether or not the modal is visible */
   active: PropTypes.bool,
 

src/elements/Header/Header.js

@@ -100,10 +100,7 @@ Header.propTypes = {
   children: PropTypes.node,
 
   /** Primary content.  Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Add an icon by icon name or pass an <Icon /.> */
   icon: customPropTypes.every([

src/lib/customPropTypes.js

@@ -219,3 +219,62 @@ export const deprecate = (help, validator) => {
     return error
   }
 }
+
+// ----------------------------------------
+// Prop specific types
+// ----------------------------------------
+
+/**
+ * Ensure a prop conforms to shorthand prop standards.
+ */
+export const shorthand = (...args) => every([
+  disallow(['children']),
+  PropTypes.string,
+])(...args)
+
+/**
+ * Ensure a prop conforms to icon prop standards.
+ */
+export const icon = (...args) => every([
+  disallow(['children', 'image']),
+  PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.element,
+  ]),
+])(...args)
+
+/**
+ * Ensure a prop conforms to icon prop standards.
+ */
+export const image = (...args) => every([
+  disallow(['children', 'icon']),
+  PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.element,
+  ]),
+])(...args)
+
+/**
+ * Ensure a prop conforms to children prop standards.
+ */
+export const children = (Component) => (props, ...rest) => {
+  const disallowedProps = _.flow(
+    _.pickBy(checker => checker === shorthand || checker === icon || checker === image),
+    _.keys,
+  )(Component.propTypes)
+
+  return every([
+    disallow(disallowedProps),
+    PropTypes.node,
+  ])(props, ...rest)
+}
+
+/**
+ * Ensure a prop can be used as a React key in an array of child components.
+ */
+export const childKey = (...args) => every([
+  PropTypes.string,
+  PropTypes.number,
+])(...args)

src/views/Card/Card.js

@@ -87,7 +87,7 @@ Card.propTypes = {
   /** A Card can center itself inside its container. */
   centered: PropTypes.bool,
 
-  /** Primary content of the Card. */
+  /** Primary content of the Card. Mutually exclusive with all shorthand props. */
   children: customPropTypes.every([
     customPropTypes.disallow(['description', 'header', 'image', 'meta']),
     PropTypes.node,
@@ -99,41 +99,26 @@ Card.propTypes = {
   /** A Card can be formatted to display different colors. */
   color: PropTypes.oneOf(Card._meta.props.color),
 
-  /** Shorthand prop for CardDescription. Mutually exclusive with children. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardDescription component. Mutually exclusive with children. */
+  description: CardContent.propTypes.description,
 
-  /** Shorthand prop for CardContent containing extra prop. Mutually exclusive with children. */
-  extra: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardContent component containing extra prop. Mutually exclusive with children. */
+  extra: PropTypes.shorthand,
 
   /** A Card can be formatted to take up the width of its container. */
   fluid: PropTypes.bool,
 
-  /** Shorthand prop for CardHeader. Mutually exclusive with children. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardHeader component. Mutually exclusive with children. */
+  header: CardContent.propTypes.header,
 
   /** Render as an `a` tag instead of a `div` and adds the href attribute. */
   href: PropTypes.string,
 
-  /** A card can contain an Image component. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** A card can contain an Image component. Mutually exclusive with children. */
+  image: customPropTypes.image,
 
-  /** Shorthand prop for CardMeta. Mutually exclusive with children. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardMeta component. Mutually exclusive with children. */
+  meta: CardContent.propTypes.meta,
 
   /** Render as an `a` tag instead of a `div` and called with event on Card click. */
   onClick: PropTypes.func,

src/views/Card/CardContent.js

@@ -59,34 +59,16 @@ CardContent.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand prop for CardDescription. Mutually exclusive with children. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  description: CardDescription.propTypes.content,
 
   /** A card can contain extra content meant to be formatted separately from the main content */
   extra: PropTypes.bool,
 
-  /** Shorthand prop for CardHeader. Mutually exclusive with children. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  /** Shorthand prop for the CardHeader component. Mutually exclusive with children. */
+  header: CardHeader.propTypes.content,
 
-  /** Shorthand prop for CardMeta. Mutually exclusive with children. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  /** Shorthand prop for the CardMeta component. Mutually exclusive with children. */
+  meta: CardMeta.propTypes.content,
 }
 
 export default CardContent

src/views/Card/CardDescription.js

@@ -40,13 +40,7 @@ CardDescription.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardDescription. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardDescription

src/views/Card/CardGroup.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -27,12 +28,18 @@ function CardGroup(props) {
   const rest = getUnhandledProps(CardGroup, props)
   const ElementType = getElementType(CardGroup, props)
 
-  const content = !items ? children : items.map(item => {
-    const key = item.key || [item.header, item.description].join('-')
-    return <Card key={key} {...item} />
+  if (children) {
+    return <ElementType {...rest} className={classes}>{children}</ElementType>
+  }
+
+  const itemsJSX = _.map(items, item => {
+    const { childKey, itemProps } = item
+    const finalKey = childKey || [itemProps.header, itemProps.description].join('-')
+
+    return <Card {...itemProps} key={finalKey} />
   })
 
-  return <ElementType {...rest} className={classes}>{content}</ElementType>
+  return <ElementType {...rest} className={classes}>{itemsJSX}</ElementType>
 }
 
 CardGroup._meta = {
@@ -64,10 +71,10 @@ CardGroup.propTypes = {
   items: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
-      description: PropTypes.node,
-      meta: PropTypes.node,
-      key: PropTypes.string,
-      header: PropTypes.node,
+      childKey: PropTypes.childKey,
+      // do not spread Card propTypes here
+      // it will be undefined due to circular imports
+      // allow the Card to validate the props it is sent
     })),
   ]),
 

src/views/Card/CardHeader.js

@@ -40,10 +40,7 @@ CardHeader.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardHeader. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardHeader

src/views/Card/CardMeta.js

@@ -40,13 +40,7 @@ CardMeta.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardMeta. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardMeta

src/views/Feed/FeedContent.js

@@ -61,13 +61,7 @@ FeedContent.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 
   /** An event can contain a date. */
   date: FeedDate.propTypes.content,
@@ -81,7 +75,7 @@ FeedContent.propTypes = {
   /** Shorthand for the FeedMeta component. Mutually exclusive with children. */
   meta: FeedMeta.propTypes.content,
 
-  /** Shorthand for the FeedSummary component. Mutually exclusive with children. */
+  /** Shorthand for FeedSummary. */
   summary: FeedSummary.propTypes.content,
 }
 

src/views/Feed/FeedDate.js

@@ -39,13 +39,7 @@ FeedDate.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default FeedDate

src/views/Feed/FeedEvent.js

@@ -12,7 +12,7 @@ import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
 function FeedEvent(props) {
-  const { content, children, className, date, extraImages, extraText, image, icon, meta, summary } = props
+  const { children, className, date, extraImages, extraText, image, icon, meta, summary } = props
   const classes = cx(className, 'event')
   const rest = getUnhandledProps(FeedEvent, props)
   const ElementType = getElementType(FeedEvent, props)
@@ -41,18 +41,7 @@ FeedEvent.propTypes = {
   as: customPropTypes.as,
 
   /** Primary content of the FeedEvent. Mutually exclusive with all shorthand props. */
-  children: customPropTypes.every([
-    customPropTypes.disallow([
-      'date',
-      'extraImages',
-      'extraText',
-      'icon',
-      'image',
-      'meta',
-      'summary',
-    ]),
-    PropTypes.node,
-  ]),
+  children: customPropTypes.children(FeedEvent),
 
   /** Classes that will be added to the FeedEvent className. */
   className: PropTypes.string,
@@ -70,26 +59,10 @@ FeedEvent.propTypes = {
   extraText: FeedContent.propTypes.extraText,
 
   /** An event can contain icon label. Mutually exclusive with children. */
-  icon: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  icon: customPropTypes.icon,
 
   /** An event can contain image label. Mutually exclusive with children. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  image: customPropTypes.image,
 
   /** Shorthand for FeedMeta. Mutually exclusive with children. */
   meta: FeedContent.propTypes.meta,