import React from 'react';
import { render } from 'react-dom';
import Form, { Boolean, Buttons, Calendar, Checkboxes, Input, Select, Yup } from '../src/index.js';

//var App = React.createClass({
class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      schema: Yup.object().shape({
        name: Yup.string().required(),
        roles: Yup.string().required(),
        noob: Yup.boolean().required(),
        rank: Yup.string().required()
        /*when: Yup.number(),
        valid: Yup.string().required()*/
      })
    };
  }
  
  submit(data) {
    console.log(data);
  }

  render() {
    return (
      <div className="app">
        <Form
          onSubmit={this.submit.bind(this)}
          schema={this.state.schema}>
          <Input name="name" type="text" label="Name" value="" className="name"/>
          <Input name="niveau" type="text" label="Niveau" value="Noob" disabled />
          <Checkboxes
            name="roles"
            checkboxClass="checkbox"
            values={['top', 'jungle', 'mid', 'adc', 'support'].map( (i) => { return {label: i.toUpperCase(), value:i};})} />
          <Boolean name="noob" labelTrue="Yes very noob" labelFalse="Yes, a bit noob" />
          <Select 
            className="rank"
            name="rank"
            options={ [
              { label: 'Bronze', value: 'b' },
              { label: 'Silver', value: 's' },
              { label: 'Gold', value: 'g' },
              { label: 'Platinium', value: 'p' },
              { label: 'Diamond', value: 'd' },
              { label: 'Master', value: 'm' },
              { label: 'Chalenger', value: 'c' }
            ]}
          />
          <Calendar name="when" label="When" className="date" />
          <Buttons values={[
            {value:'ok', class:'btn-approve', label:<div>OK</div>},
            {value:'ko', class:'btn-deny', label:<div>Nop</div>}
          ]} name="valid" btnClasses="i-am-a-button" className="we-are-buttons" />
        </Form>
      </div>
    );
  }
}

render(
  <App />,
  document.getElementById('content')
);

@@ -125,16 +125,22 @@
  Select,
+ Tags,
  Yup %7D f
@@ -343,24 +343,27 @@
     
-name: Yup.string
+keywords: Yup.array
 ().r
@@ -381,21 +381,20 @@
         
-roles
+name
 : Yup.st
@@ -444,32 +444,72 @@
 n().required(),%0A
+        roles: Yup.string().required(),%0A
         rank: Yu
@@ -1735,24 +1735,196 @@
          /%3E%0A
+          %3CTags%0A            label=%22Adj%22%0A            name=%22keywords%22%0A            inputProps=%7B %7Bplaceholder: 'what?'%7D %7D%0A            value=%7B %5B'noob', 'newbee'%5D %7D%0A          /%3E%0A
           %3CC

Add Tags example