initial Label migration to fela

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -1,14 +1,14 @@
 import * as Babel from 'babel-standalone'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createElement, isValidElement } from 'react'
+import React, { Component, isValidElement } from 'react'
 import { withRouter } from 'react-router'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils'
-import { Divider, Grid, Menu, Visibility } from 'src'
+import { Divider, Grid, Menu, Provider, Visibility } from 'src'
 import { shallowEqual } from 'src/lib'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
@@ -65,6 +65,7 @@ class ComponentExample extends Component {
     // show code for direct links to examples
     const showCode = this.anchorName === location.hash.replace('#', '')
     const exampleElement = this.renderOriginalExample()
+    console.log('ComponentExample', this.context)
     const markup = renderToStaticMarkup(exampleElement)
 
     this.setState({
@@ -119,8 +120,9 @@ class ComponentExample extends Component {
 
     this.setState({ showCode: !showCode })
 
-    if (!showCode) this.setHashAndScroll()
-    else if (!showHTML) this.removeHash()
+    if (!showCode) {
+      this.setHashAndScroll()
+    } else if (!showHTML) this.removeHash()
   }
 
   handleShowHTMLClick = (e) => {
@@ -130,8 +132,9 @@ class ComponentExample extends Component {
 
     this.setState({ showHTML: !showHTML })
 
-    if (!showHTML) this.setHashAndScroll()
-    else if (!showCode) this.removeHash()
+    if (!showHTML) {
+      this.setHashAndScroll()
+    } else if (!showCode) this.removeHash()
   }
 
   handlePass = () => {
@@ -175,7 +178,13 @@ class ComponentExample extends Component {
 
   renderOriginalExample = () => {
     const { examplePath } = this.props
-    return createElement(exampleContext(`./${examplePath}.js`).default)
+    const ExampleComponent = exampleContext(`./${examplePath}.js`).default
+
+    return (
+      <Provider>
+        <ExampleComponent />
+      </Provider>
+    )
   }
 
   renderSourceCode = _.debounce(() => {

docs/app/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import Router from './routes'
+import Provider from '../../src/addons/Provider'
 
 // ----------------------------------------
 // Rendering
@@ -10,7 +11,12 @@ 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>
+    <NewApp />
+  </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/addons/Provider/Provider.js

@@ -0,0 +1,36 @@
+import { createRenderer } from 'fela'
+import monolithic from 'fela-monolithic'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Provider as RendererProvider, ThemeProvider } from 'react-fela'
+
+import * as defaultSiteVariables from '../../lib/styles/defaultSiteVariables'
+
+// ----------------------------------------
+// Style Renderer
+// ----------------------------------------
+
+const config = {
+  middleware: [
+    // composes style objects
+  ],
+  enhancers: [
+    monolithic(),
+  ],
+}
+
+const renderer = createRenderer(config)
+
+const Provider = ({ children }) => (
+  <RendererProvider renderer={renderer}>
+    <ThemeProvider theme={defaultSiteVariables}>
+      {children}
+    </ThemeProvider>
+  </RendererProvider>
+)
+
+Provider.propTypes = {
+  children: PropTypes.node,
+}
+
+export default Provider

src/addons/Provider/index.js

@@ -0,0 +1 @@
+export default from './Provider'

src/elements/Label/Label.js

@@ -1,31 +1,38 @@
 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 contextTypes = {
+    renderer: PropTypes.any,
+  }
   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 +115,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 +140,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,
@@ -143,55 +169,70 @@ export default class Label extends Component {
   })
 
   render() {
+    console.log('Label', { props: this.props, context: this.context })
     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 +242,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',
+})