perf(parts): add reusable component parts

docs/app/Examples/views/Feed/Content/Date.js

@@ -19,7 +19,7 @@ const Date = () => {
       <Feed.Event>
         <Feed.Label image={imageSrc} />
         <Feed.Content>
-          <Feed.Date date='3 days ago' />
+          <Feed.Date>3 days ago</Feed.Date>
           <Feed.Summary>
             You added <a>Jenny Hess</a> to your <a>coworker</a> group.
           </Feed.Summary>

docs/app/Examples/views/Feed/Content/DateSummary.js

@@ -24,7 +24,7 @@ const DateSummary = () => {
           <Summary>
             You added <a>Jenny Hess</a> to your <a>coworker</a> group.
 
-            <Date date='3 days ago' />
+            <Date children='3 days ago' />
           </Summary>
         </Content>
       </Event>

src/lib/META.js

@@ -2,6 +2,7 @@ import _ from 'lodash/fp'
 
 export const TYPES = {
   ADDON: 'addon',
+  PART: 'part',
   COLLECTION: 'collection',
   ELEMENT: 'element',
   VIEW: 'view',

src/modules/Accordion/AccordionContent.js

@@ -1,44 +1,53 @@
 import React, { PropTypes } from 'react'
 import cx from 'classnames'
 
+import { ContentPart } from '../../parts'
 import { getElementType, getUnhandledProps, META, useKeyOnly } from '../../lib'
 
+// ========================================================
+// Brainstorming ways to abstract className buildup, etc.
+//
+// const AccordionContent = createContentPart({
+//   cx: ({ active }) => [
+//     useKeyOnly(active, 'active'),
+//   ],
+//   propTypes: {
+//     /** Whether or not the content is visible. */
+//     active: PropTypes.bool,
+//   },
+//   _meta: {
+//     name: 'AccordionContent',
+//     type: META.TYPES.MODULE,
+//     parent: 'Accordion',
+//   },
+// })
+// --------------------------------------------------------
+
 function AccordionContent(props) {
   const { active, children, className } = props
   const classes = cx(
-    'content',
     useKeyOnly(active, 'active'),
     className
   )
+
   const rest = getUnhandledProps(AccordionContent, props)
   const ElementType = getElementType(AccordionContent, props)
+
   return (
-    <ElementType {...rest} className={classes}>
+    <ContentPart as={ElementType} {...rest} className={classes}>
       {children}
-    </ElementType>
+    </ContentPart>
   )
 }
 
-AccordionContent.displayName = 'AccordionContent'
-
 AccordionContent.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-
+  ...ContentPart.propTypes,
   /** Whether or not the content is visible. */
   active: PropTypes.bool,
-
-  /** Primary content of the Content. */
-  children: PropTypes.node,
-
-  /** Classes to add to the content className. */
-  className: PropTypes.string,
 }
 
 AccordionContent._meta = {
+  ...ContentPart._meta,
   name: 'AccordionContent',
   type: META.TYPES.MODULE,
   parent: 'Accordion',

src/modules/Modal/Modal.js

@@ -2,10 +2,15 @@ import _ from 'lodash'
 import React, { PropTypes, Component } from 'react'
 import cx from 'classnames'
 
-import ModalHeader from './ModalHeader'
+import {
+  ActionsPart,
+  DescriptionPart,
+  HeaderPart,
+} from '../../parts'
+// import ModalHeader from './ModalHeader'
 import ModalContent from './ModalContent'
-import ModalActions from './ModalActions'
-import ModalDescription from './ModalDescription'
+// import ModalActions from './ModalActions'
+// import ModalDescription from './ModalDescription'
 import Portal from 'react-portal'
 
 import {
@@ -78,10 +83,13 @@ class Modal extends Component {
   }
 
   static _meta = _meta
-  static Header = ModalHeader
+  // static Header = ModalHeader
+  static Header = HeaderPart
   static Content = ModalContent
-  static Description = ModalDescription
-  static Actions = ModalActions
+  // static Description = ModalDescription
+  static Description = DescriptionPart
+  // static Actions = ModalActions
+  static Actions = ActionsPart
 
   state = {}
 

src/modules/Modal/ModalActions.js

@@ -1,44 +1,44 @@
-import React, { PropTypes } from 'react'
-import classNames from 'classnames'
-
-import { getElementType, getUnhandledProps, META } from '../../lib'
-
-function ModalActions(props) {
-  const { children, className } = props
-
-  const classes = classNames(
-    className,
-    'actions'
-  )
-
-  const rest = getUnhandledProps(ModalActions, props)
-  const ElementType = getElementType(ModalActions, props)
-
-  return (
-    <ElementType className={classes} {...rest}>
-      {children}
-    </ElementType>
-  )
-}
-
-ModalActions._meta = {
-  name: 'ModalActions',
-  type: META.TYPES.MODULE,
-  parent: 'Modal',
-}
-
-ModalActions.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-
-  /** Primary content of the modal actions */
-  children: PropTypes.any,
-
-  /** Classes to add to the modal actions className */
-  className: PropTypes.string,
-}
-
-export default ModalActions
+// import React, { PropTypes } from 'react'
+// import classNames from 'classnames'
+//
+// import { getElementType, getUnhandledProps, META } from '../../lib'
+//
+// function ModalActions(props) {
+//   const { children, className } = props
+//
+//   const classes = classNames(
+//     className,
+//     'actions'
+//   )
+//
+//   const rest = getUnhandledProps(ModalActions, props)
+//   const ElementType = getElementType(ModalActions, props)
+//
+//   return (
+//     <ElementType className={classes} {...rest}>
+//       {children}
+//     </ElementType>
+//   )
+// }
+//
+// ModalActions._meta = {
+//   name: 'ModalActions',
+//   type: META.TYPES.MODULE,
+//   parent: 'Modal',
+// }
+//
+// ModalActions.propTypes = {
+//   /** An element type to render as (string or function). */
+//   as: PropTypes.oneOfType([
+//     PropTypes.string,
+//     PropTypes.func,
+//   ]),
+//
+//   /** Primary content of the modal actions */
+//   children: PropTypes.any,
+//
+//   /** Classes to add to the modal actions className */
+//   className: PropTypes.string,
+// }
+//
+// export default ModalActions

src/modules/Modal/ModalDescription.js

@@ -1,43 +1,43 @@
-import React, { PropTypes } from 'react'
-import cx from 'classnames'
-
-import { getElementType, getUnhandledProps, META } from '../../lib'
-
-function ModalDescription(props) {
-  const { children, className } = props
-
-  const classes = cx(
-    className,
-    'description'
-  )
-
-  const rest = getUnhandledProps(ModalDescription, props)
-  const ElementType = getElementType(ModalDescription, props)
-  return (
-    <ElementType className={classes} {...rest}>
-      {children}
-    </ElementType>
-  )
-}
-
-ModalDescription._meta = {
-  name: 'ModalDescription',
-  type: META.TYPES.MODULE,
-  parent: 'Modal',
-}
-
-ModalDescription.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-
-  /** Primary content */
-  children: PropTypes.any,
-
-  /** Classes to add to the className */
-  className: PropTypes.string,
-}
-
-export default ModalDescription
+// import React, { PropTypes } from 'react'
+// import cx from 'classnames'
+//
+// import { getElementType, getUnhandledProps, META } from '../../lib'
+//
+// function ModalDescription(props) {
+//   const { children, className } = props
+//
+//   const classes = cx(
+//     className,
+//     'description'
+//   )
+//
+//   const rest = getUnhandledProps(ModalDescription, props)
+//   const ElementType = getElementType(ModalDescription, props)
+//   return (
+//     <ElementType className={classes} {...rest}>
+//       {children}
+//     </ElementType>
+//   )
+// }
+//
+// ModalDescription._meta = {
+//   name: 'ModalDescription',
+//   type: META.TYPES.MODULE,
+//   parent: 'Modal',
+// }
+//
+// ModalDescription.propTypes = {
+//   /** An element type to render as (string or function). */
+//   as: PropTypes.oneOfType([
+//     PropTypes.string,
+//     PropTypes.func,
+//   ]),
+//
+//   /** Primary content */
+//   children: PropTypes.any,
+//
+//   /** Classes to add to the className */
+//   className: PropTypes.string,
+// }
+//
+// export default ModalDescription

src/modules/Modal/ModalHeader.js

@@ -1,44 +1,44 @@
-import React, { PropTypes } from 'react'
-import classNames from 'classnames'
-
-import { getElementType, getUnhandledProps, META } from '../../lib'
-
-function ModalHeader(props) {
-  const { children, className } = props
-
-  const classes = classNames(
-    className,
-    'header'
-  )
-
-  const rest = getUnhandledProps(ModalHeader, props)
-  const ElementType = getElementType(ModalHeader, props)
-
-  return (
-    <ElementType className={classes} {...rest}>
-      {children}
-    </ElementType>
-  )
-}
-
-ModalHeader._meta = {
-  name: 'ModalHeader',
-  type: META.TYPES.MODULE,
-  parent: 'Modal',
-}
-
-ModalHeader.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-
-  /** Primary content of the modal header */
-  children: PropTypes.any,
-
-  /** Classes to add to the modal header className */
-  className: PropTypes.string,
-}
-
-export default ModalHeader
+// import React, { PropTypes } from 'react'
+// import classNames from 'classnames'
+//
+// import { getElementType, getUnhandledProps, META } from '../../lib'
+//
+// function ModalHeader(props) {
+//   const { children, className } = props
+//
+//   const classes = classNames(
+//     className,
+//     'header'
+//   )
+//
+//   const rest = getUnhandledProps(ModalHeader, props)
+//   const ElementType = getElementType(ModalHeader, props)
+//
+//   return (
+//     <ElementType className={classes} {...rest}>
+//       {children}
+//     </ElementType>
+//   )
+// }
+//
+// ModalHeader._meta = {
+//   name: 'ModalHeader',
+//   type: META.TYPES.MODULE,
+//   parent: 'Modal',
+// }
+//
+// ModalHeader.propTypes = {
+//   /** An element type to render as (string or function). */
+//   as: PropTypes.oneOfType([
+//     PropTypes.string,
+//     PropTypes.func,
+//   ]),
+//
+//   /** Primary content of the modal header */
+//   children: PropTypes.any,
+//
+//   /** Classes to add to the modal header className */
+//   className: PropTypes.string,
+// }
+//
+// export default ModalHeader