initial Label migration to fela

docs/app/Examples/elements/Label/Types/LabelExampleBasic.js

@@ -1,10 +1,77 @@
 import React from 'react'
-import { Icon, Label } from 'semantic-ui-react'
+import { Container, Divider, Icon, Image, Label } from 'semantic-ui-react'
 
 const LabelExampleBasic = () => (
-  <Label>
-    <Icon name='mail' /> 23
-  </Label>
+  <Container>
+    <Divider hidden />
+
+    <h2>_meta (statics)</h2>
+    <pre><code>Label._meta {JSON.stringify(Label._meta)}</code></pre>
+    <pre><code>Label.Detail._meta {JSON.stringify(Label.Detail._meta)}</code></pre>
+    <pre><code>Label.Group._meta {JSON.stringify(Label.Group._meta)}</code></pre>
+
+    <h2>Default</h2>
+    <div>
+      <Label>label</Label>
+    </div>
+
+    <h2>as='a'</h2>
+    <div>
+      <Label as='a'>
+        <Icon name='mail' /> 23
+      </Label>
+    </div>
+
+    <h2>Detail</h2>
+    <div>
+      <Label>
+        <Icon name='mail' />
+        23
+        <Label.Detail>View Mail</Label.Detail>
+      </Label>
+    </div>
+
+    <h2>Image</h2>
+    <div>
+      <Label as='a' image>
+        <Image avatar spaced='right' src='/assets/images/avatar/small/elliot.jpg' /> Elliot
+      </Label>
+      <Label
+        as='a'
+        image
+        renderImage={({ styles }) => <img className={styles.__img} src='/assets/images/avatar/small/stevie.jpg' />}
+        renderContent={() => 'Stevie'}
+      />
+    </div>
+
+    <h2>Image & Detail</h2>
+    <div>
+      <Label
+        as='a'
+        color='blue'
+        image
+        renderImage={({ styles }) => <img className={styles.__img} src='/assets/images/avatar/small/veronika.jpg' />}
+        renderContent={() => 'Veronika'}
+        renderDetail={() => 'Friend'}
+      />
+      <Label
+        as='a'
+        color='teal'
+        image
+        renderImage={({ styles }) => <img className={styles.__img} src='/assets/images/avatar/small/jenny.jpg' />}
+        renderContent={() => 'Veronika'}
+        renderDetail={() => 'Friend'}
+      />
+      <Label
+        as='a'
+        color='yellow'
+        image
+        renderImage={({ styles }) => <img className={styles.__img} src='/assets/images/avatar/small/christian.jpg' />}
+        renderContent={() => 'Helen'}
+        renderDetail={() => 'Co-worker'}
+      />
+    </div>
+  </Container>
 )
 
 export default LabelExampleBasic

docs/app/index.js

@@ -1,7 +1,26 @@
+import { createRenderer } from 'fela'
+import monolithic from 'fela-monolithic'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { Provider, ThemeProvider } from 'react-fela'
 
 import Router from './routes'
+import * as defaultSiteVariables from '../../src/lib/styles/defaultSiteVariables'
+
+// ----------------------------------------
+// Style Renderer
+// ----------------------------------------
+
+const config = {
+  middleware: [
+    // composes style objects
+  ],
+  enhancers: [
+    monolithic(),
+  ],
+}
+
+const renderer = createRenderer(config)
 
 // ----------------------------------------
 // Rendering
@@ -10,7 +29,14 @@ import Router from './routes'
 const mountNode = document.createElement('div')
 document.body.appendChild(mountNode)
 
-const render = NewApp => ReactDOM.render(<NewApp />, mountNode)
+const render = NewApp => ReactDOM.render(
+  <Provider renderer={renderer}>
+    <ThemeProvider theme={defaultSiteVariables}>
+      <NewApp />
+    </ThemeProvider>
+  </Provider>,
+  mountNode,
+)
 
 // ----------------------------------------
 // HMR

package.json

@@ -58,8 +58,12 @@
     "babel-runtime": "^6.25.0",
     "classnames": "^2.2.5",
     "fbjs": "^0.8.16",
+    "fela": "^6.1.7",
+    "fela-monolithic": "^5.0.21",
+    "hoist-non-react-statics": "^2.5.0",
     "lodash": "^4.17.4",
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "react-fela": "^7.2.0"
   },
   "devDependencies": {
     "@types/react": "^16.0.0",

src/elements/Label/Label.js

@@ -1,31 +1,35 @@
 import cx from 'classnames'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
-  createShorthand,
-  createShorthandFactory,
+  createComponent,
   customPropTypes,
-  getElementType,
-  getUnhandledProps,
   META,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
 import LabelDetail from './LabelDetail'
 import LabelGroup from './LabelGroup'
 
+import * as rules from './rules'
+import variables from './variables'
+
 /**
  * A label displays content classification.
  */
-export default class Label extends Component {
+class Component extends React.Component {
   static propTypes = {
+    styles: PropTypes.objectOf(PropTypes.string),
+    ElementType: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string,
+    ]),
+    rest: PropTypes.object,
+
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
@@ -108,6 +112,18 @@ export default class Label extends Component {
     /** Shorthand for Icon to appear as the last child and trigger onRemove. */
     removeIcon: customPropTypes.itemShorthand,
 
+    /** A function to render the content part. */
+    renderContent: PropTypes.func,
+
+    /** A function to render the detail part. */
+    renderDetail: PropTypes.func,
+
+    /** A function to render the icon part. */
+    renderIcon: PropTypes.func,
+
+    /** A function to render the image part. */
+    renderImage: PropTypes.func,
+
     /** A label can appear as a ribbon attaching itself to an element. */
     ribbon: PropTypes.oneOfType([
       PropTypes.bool,
@@ -121,6 +137,13 @@ export default class Label extends Component {
     tag: PropTypes.bool,
   }
 
+  static defaultProps = {
+    renderContent: ({ content }) => content,
+    renderDetail: ({ detail }) => LabelDetail.create(detail),
+    renderIcon: ({ icon }) => Icon.create(icon),
+    renderImage: ({ image }) => Image.create(image),
+  }
+
   static _meta = {
     name: 'Label',
     type: META.TYPES.ELEMENT,
@@ -144,54 +167,68 @@ export default class Label extends Component {
 
   render() {
     const {
-      active,
-      attached,
-      basic,
+      // active,
+      // attached,
+      // basic,
       children,
-      circular,
+      // circular,
       className,
-      color,
+      // color,
       content,
-      corner,
+      // corner,
       detail,
-      empty,
-      floating,
-      horizontal,
+      // empty,
+      // floating,
+      // horizontal,
       icon,
       image,
       onRemove,
-      pointing,
+      // pointing,
       removeIcon,
-      ribbon,
-      size,
-      tag,
+      renderContent,
+      renderDetail,
+      renderIcon,
+      renderImage,
+      // ribbon,
+      // size,
+      // tag,
+      styles,
+      ElementType,
+      rest,
     } = this.props
 
-    const pointingClass = (pointing === true && 'pointing')
-      || ((pointing === 'left' || pointing === 'right') && `${pointing} pointing`)
-      || ((pointing === 'above' || pointing === 'below') && `pointing ${pointing}`)
+    // const pointingClass = (pointing === true && 'pointing')
+    //   || ((pointing === 'left' || pointing === 'right') && `${pointing} pointing`)
+    //   || ((pointing === 'above' || pointing === 'below') && `pointing ${pointing}`)
+    //
+    // const classes = cx(
+    //   'ui',
+    //   color,
+    //   pointingClass,
+    //   size,
+    //   useKeyOnly(active, 'active'),
+    //   useKeyOnly(basic, 'basic'),
+    //   useKeyOnly(circular, 'circular'),
+    //   useKeyOnly(empty, 'empty'),
+    //   useKeyOnly(floating, 'floating'),
+    //   useKeyOnly(horizontal, 'horizontal'),
+    //   useKeyOnly(image === true, 'image'),
+    //   useKeyOnly(tag, 'tag'),
+    //   useKeyOrValueAndKey(corner, 'corner'),
+    //   useKeyOrValueAndKey(ribbon, 'ribbon'),
+    //   useValueAndKey(attached, 'attached'),
+    //   'label',
+    //   className,
+    // )
 
     const classes = cx(
-      'ui',
-      color,
-      pointingClass,
-      size,
-      useKeyOnly(active, 'active'),
-      useKeyOnly(basic, 'basic'),
-      useKeyOnly(circular, 'circular'),
-      useKeyOnly(empty, 'empty'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(horizontal, 'horizontal'),
-      useKeyOnly(image === true, 'image'),
-      useKeyOnly(tag, 'tag'),
-      useKeyOrValueAndKey(corner, 'corner'),
-      useKeyOrValueAndKey(ribbon, 'ribbon'),
-      useValueAndKey(attached, 'attached'),
-      'label',
+      styles.label,
+      {
+        [styles.link]: ElementType === 'a',
+        [styles.image]: image === true,
+      },
       className,
     )
-    const rest = getUnhandledProps(Label, this.props)
-    const ElementType = getElementType(Label, this.props)
 
     if (!childrenUtils.isNil(children)) {
       return <ElementType {...rest} className={classes} onClick={this.handleClick}>{children}</ElementType>
@@ -201,14 +238,20 @@ export default class Label extends Component {
 
     return (
       <ElementType className={classes} onClick={this.handleClick} {...rest}>
-        {Icon.create(icon)}
-        {typeof image !== 'boolean' && Image.create(image)}
-        {content}
-        {createShorthand(LabelDetail, val => ({ content: val }), detail)}
-        {onRemove && Icon.create(removeIconShorthand, { overrideProps: this.handleIconOverrides })}
+        {renderIcon(this.props)}
+        {renderImage(this.props)}
+        {renderContent(this.props)}
+        {renderDetail(this.props)}
+        {(onRemove && Icon.create(removeIconShorthand, { overrideProps: this.handleIconOverrides }))}
       </ElementType>
     )
   }
 }
 
-Label.create = createShorthandFactory(Label, value => ({ content: value }))
+export default createComponent({
+  Component,
+  shorthand: value => ({ content: value }),
+  rules,
+  variables,
+  // getDefaultElement: (props) => 'div',
+})

src/elements/Label/LabelDetail.js

@@ -4,17 +4,17 @@ import React from 'react'
 
 import {
   childrenUtils,
+  createComponent,
   customPropTypes,
-  getElementType,
-  getUnhandledProps,
   META,
 } from '../../lib'
 
+import variables from './variables'
+import * as rules from './rules'
+
 function LabelDetail(props) {
-  const { children, className, content } = props
-  const classes = cx('detail', className)
-  const rest = getUnhandledProps(LabelDetail, props)
-  const ElementType = getElementType(LabelDetail, props)
+  const { children, className, content, ElementType, rest, styles } = props
+  const classes = cx(styles.__detail, className)
 
   return (
     <ElementType {...rest} className={classes}>
@@ -30,6 +30,13 @@ LabelDetail._meta = {
 }
 
 LabelDetail.propTypes = {
+  styles: PropTypes.objectOf(PropTypes.string),
+  ElementType: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+  ]),
+  rest: PropTypes.object,
+
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
@@ -43,4 +50,9 @@ LabelDetail.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-export default LabelDetail
+export default createComponent({
+  Component: LabelDetail,
+  shorthand: val => ({ content: val }),
+  rules,
+  variables,
+})