import '../vendor/gridforms.css'

import React, {cloneElement, Children, PropTypes} from 'react'

let classNames = (...args) => args.filter(cn => !!cn).join(' ')

export let GridForm = ({children, className, component: Component, ...props}) =>
  <Component {...props} className={classNames('grid-form', className)}>
    {children}
  </Component>

GridForm.propTypes = {
  component: PropTypes.any
}

GridForm.defaultProps = {
  component: 'form'
}

export let Fieldset = ({children, legend, ...props}) =>
  <fieldset {...props}>
    {legend && <legend>{legend}</legend>}
    {children}
  </fieldset>

Fieldset.propTypes = {
  name: PropTypes.string.isRequired
}

export let Row = ({children, className}) => {
  let span = 0
  Children.forEach(children, child => span += Number(child.props.span))
  return <div data-row-span={span} className={className}>
    {children}
  </div>
}

export let Field = ({children, className, span}) =>
 <div data-field-span={span} className={className}>
   {children}
 </div>

Field.propTypes = {
  span: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ])
}

Field.defaultProps = {
  span: '1'
}

@@ -178,17 +178,127 @@
 dForm = 
-(
+React.createClass(%7B%0A  getDefaultProps() %7B%0A    return %7B%0A      component: 'form'%0A    %7D%0A  %7D,%0A  render() %7B%0A    let 
 %7Bchildre
@@ -342,22 +342,40 @@
 ..props%7D
-)
  =
-%3E%0A 
+ this.props%0A    return
  %3CCompon
@@ -437,24 +437,26 @@
 Name)%7D%3E%0A    
+  
 %7Bchildren%7D%0A 
@@ -456,16 +456,18 @@
 dren%7D%0A  
+ 
+ 
 %3C/Compon
@@ -475,134 +475,79 @@
 nt%3E%0A
-%0AGridForm.propTypes = %7B%0A  component: PropTypes.any%0A%7D%0A%0AGridForm.defaultProps = %7B%0A  component: 'form'%0A%7D%0A%0Aexport let Fieldset = (
+  %7D%0A%7D)%0A%0Aexport let Fieldset = React.createClass(%7B%0A  render() %7B%0A    let 
 %7Bchi
@@ -570,22 +570,40 @@
 ..props%7D
-)
  =
-%3E%0A 
+ this.props%0A    return
  %3Cfields
@@ -617,16 +617,18 @@
 props%7D%3E%0A
+  
     %7Bleg
@@ -661,16 +661,18 @@
 egend%3E%7D%0A
+  
     %7Bchi
@@ -674,24 +674,26 @@
  %7Bchildren%7D%0A
+  
   %3C/fieldset
@@ -698,69 +698,14 @@
 et%3E%0A
-%0AFieldset.propTypes = %7B%0A  name: PropTypes.string.isRequired
+  %7D
 %0A%7D
+)
 %0A%0Aex
@@ -719,17 +719,57 @@
 t Row = 
-(
+React.createClass(%7B%0A  render() %7B%0A    let 
 %7Bchildre
@@ -785,15 +785,24 @@
 ame%7D
-)
  =
-%3E %7B%0A
+ this.props%0A  
   le
@@ -814,16 +814,18 @@
 n = 0%0A  
+ 
+ 
 Children
@@ -886,16 +886,18 @@
 .span))%0A
+  
   return
@@ -946,16 +946,18 @@
 sName%7D%3E%0A
+  
     %7Bchi
@@ -963,16 +963,18 @@
 ildren%7D%0A
+  
   %3C/div%3E
@@ -974,17 +974,22 @@
  %3C/div%3E%0A
-%7D
+  %7D%0A%7D)
 %0A%0Aexport
@@ -1005,122 +1005,30 @@
 d = 
-(%7Bchildren, className, span%7D) =%3E%0A %3Cdiv data-field-span=%7Bspan%7D className=%7BclassName%7D%3E%0A   %7Bchildren%7D%0A %3C/div%3E%0A%0AField.
+React.createClass(%7B%0A  
 prop
@@ -1032,21 +1032,22 @@
 ropTypes
- =
+:
  %7B%0A
+  
   span: 
@@ -1068,24 +1068,26 @@
 fType(%5B%0A    
+  
 PropTypes.nu
@@ -1092,24 +1092,26 @@
 number,%0A    
+ 
+ 
 PropTypes.st
@@ -1119,47 +1119,67 @@
 ing%0A
+  
   %5D)%0A
-%7D%0A%0AField.defaultProps =
+  %7D,%0A  getDefaultProps() %7B%0A    return
  %7B%0A
+    
   span: 
 '1'%0A
@@ -1178,10 +1178,173 @@
 an: 
-'1'%0A%7D
+1%0A    %7D%0A  %7D,%0A  render() %7B%0A    let %7Bchildren, className, span%7D = this.props%0A   return %3Cdiv data-field-span=%7Bspan%7D className=%7BclassName%7D%3E%0A     %7Bchildren%7D%0A   %3C/div%3E%0A  %7D%0A%7D)
 %0A

Use a regular React component impl until hot reloading issues are resolved