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