From 90c2c9972610dc3d8f772a3681a966800c9cd720 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Mon, 3 Aug 2015 15:50:55 +0200
Subject: [PATCH 1/7] [field] built in components, all built in components pass
 all the props to the son component, rewrite es6 style, Fix #156 , Fix 159

---
 common/field/mixin/built-in-components.js | 132 +++++++++++-----------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/common/field/mixin/built-in-components.js b/common/field/mixin/built-in-components.js
index dda2bc2ac..e296dd9eb 100644
--- a/common/field/mixin/built-in-components.js
+++ b/common/field/mixin/built-in-components.js
@@ -4,7 +4,7 @@ let React = require('react');
 let type = require('focus').component.types;
 let find = require('lodash/collection/find');
 let result = require('lodash/object/result');
-
+let assign = require('object-assign');
 // Components
 
 let InputText = require('../../input/text').component;
@@ -62,75 +62,78 @@ let fieldBuiltInComponentsMixin = {
         SelectComponent: type(['object', 'function']),
         DisplayComponent: type(['object', 'function'])
     },
+    _buildStyle(){
+        let {style} = this.props;
+        style = style || {};
+        style.className = style && style.className ? style.className : '';
+        return style;
+    },
     /**
     * Render the label part of the component.
-    * @returns {[type]} [description]
+    * @returns {Component} - The builded label component.
     */
     label() {
         if (this.props.FieldComponent || this.props.InputLabelComponent) {
             return undefined;
         }
         if (this.props.hasLabel) {
+            //In the labelCasen there is no reason to pass all props.
             let labelClassName = this._getLabelGridClassName();
+            let {isEdit, isRequired, name} = this.props;
             return (
                 <Label
+                    isEdit={isEdit}
+                    isRequired={isRequired}
+                    key={name}
+                    name={name}
                     style={{className: labelClassName}}
-                    name={this.props.name}
-                    key={this.props.name}
-                    isRequired={this.props.isRequired}
-                    isEdit={this.props.isEdit}
                 />
             );
         }
     },
     /**
     * Rendet the input part of the component.
-    * @return {[type]} [description]
+    * @return {Component} - The constructed input component.
     */
     input() {
         if (this.props.FieldComponent || this.props.InputLabelComponent) {
             return this.renderFieldComponent();
         }
-        let inputClassName = `form-control`;
+        let {name, style} = this.props;
+        let {value} = this.state;
+        let inputClassName = `form-control ${style.className ? style.className : ''}`;
+        let inputBuildedProps = assign({}, this.props, {
+            id: name,
+            style: this._buildStyle(),
+            onChange: this.onInputChange,
+            value: value,
+            ref: 'input'
+        });
         return (
             <div className ={`${this._getContentGridClassName()} input-group`}>
-                <this.props.InputComponent
-                    style={{class: inputClassName}}
-                    id={this.props.name}
-                    name={this.props.name}
-                    value={this.state.value}
-                    type={this.props.type}
-                    onChange={this.onInputChange}
-                    formatter={this.props.formatter}
-                    unformatter={this.props.unformatter}
-                    options={this.props.options}
-                    ref='input'
-                />
+                <this.props.InputComponent {...inputBuildedProps}/>
             </div>
         );
     },
     /**
-    * [select description]
-    * @return {[type]} [description]
-    */
+     * Build a select component depending on the domain, definition and props.
+     * @return {Component} - The builded select component.
+     */
     select() {
         if (this.props.FieldComponent || this.props.InputLabelComponent) {
             return this.renderFieldComponent();
         }
-        let selectClassName = `form-control`;
+        let {value, values} = this.state;
+        let buildedSelectProps = assign({}, this.props, {
+            value: value,
+            values: values,
+            style: this._buildStyle(),
+            onChange: this.onInputChange,
+            ref: 'input'
+        });
         return (
             <div className ={`input-group ${this._getContentGridClassName()}`}>
-            <this.props.SelectComponent
-            style={{class: selectClassName}}
-            id={this.props.name}
-            name={this.props.name}
-            value={this.state.value}
-            values={this.state.values}
-            type={this.props.type}
-            onChange={this.onInputChange}
-            options={this.props.options}
-            ref='input'
-            />
+                <this.props.SelectComponent {...buildedSelectProps} />
             </div>
         );
     },
@@ -142,19 +145,18 @@ let fieldBuiltInComponentsMixin = {
         if (this.props.FieldComponent || this.props.InputLabelComponent) {
             return this.renderFieldComponent();
         }
-        let displayClassName = ``;
-        let value = this.state.values ? result(find(this.state.values, {code: this.state.value}), 'label') : this.state.value;
+        let {values, value} = this.state;
+        let {name, valueKey, labelKey} = this.props;
+        let _processValue = values ? result(find(values, {[valueKey || 'code']: value}), labelKey || 'label') : value;
+        let buildedDislplayProps = assign({}, this.props, {
+            id: name,
+            style: this._buildStyle(),
+            value: _processValue,
+            ref: 'display'
+        });
         return (
             <div className ={`input-group ${this._getContentGridClassName()}`}>
-                <this.props.DisplayComponent
-                    style={{class: displayClassName}}
-                    id={this.props.name}
-                    name={this.props.name}
-                    value={value}
-                    type={this.props.type}
-                    ref='display'
-                    formatter={this.props.formatter}
-                />
+                <this.props.DisplayComponent {...buildedDislplayProps}/>
             </div>
         );
     },
@@ -163,52 +165,52 @@ let fieldBuiltInComponentsMixin = {
     * @return {object} - The error part of the component.
     */
     error() {
-        if (this.state.error) {
+        let {error} = this.state;
+        if (error) {
             if (this.props.FieldComponent) {
                 return;
             }
             return (
-                /*<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>*/
                 <span className='help-block'>
-                    {this.state.error}
+                    {error}
                 </span>
-            )
+            );
         }
+        return;
     },
     /**
     * Render the help component.
     * @return {object} - The help part of the component.
     */
     help() {
-        if (this.props.help) {
-            if (this.props.FieldComponent) {
+        let {help, FieldComponent} = this.props;
+        if (help) {
+            if (FieldComponent) {
                 return;
             }
             return (
                 <span className='help-block'>
-                    {this.props.help}
+                    {help}
                 </span>
             );
         }
     },
     /**
-    * Render the field component if it is overriden in the component definition.
-    */
+     * Render the field component if it is overriden in the component definition.
+     * @return {Component} - The builded field component.
+     */
     renderFieldComponent() {
-        let Component = this.props.FieldComponent || this.props.InputLabelComponent;
-        return React.createElement(Component, {
+        let FieldComponent = this.props.FieldComponent || this.props.InputLabelComponent;
+        let {value, error} = this.state;
+        let buildedProps = assign({}, this.props, {
             id: this.props.name,
-            name: this.props.name,
-            label: this.props.label,
-            value: this.state.value,
-            type: this.props.type,
-            style: this.props.style.input,
-            labelSize: this.props.labelSize,
-            error: this.state.error,
-            help: this.props.help,
+            style: this._buildStyle(),
+            value: value,
+            error: error,
             onChange: this.onInputChange,
             ref: 'input'
         });
+        return <FieldComponent {...buildedProps} />;
     }
 };
 

From a029409935fd138b3aea16bcb38529b3a5922810 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 08:49:46 +0200
Subject: [PATCH 2/7] [field] Rewrite the field.

---
 common/field/index.js | 42 +++++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/common/field/index.js b/common/field/index.js
index 44ba3d213..c5563b481 100644
--- a/common/field/index.js
+++ b/common/field/index.js
@@ -12,13 +12,15 @@ let validationBehaviour = require('./mixin/validation-behaviour');
 
 let builtInComponents = require('./mixin/built-in-components');
 
-
+/**
+ * Mixin for the field helper.
+ * @type {Object}
+ */
 let FieldMixin = {
+    /** @inheriteDoc */
     mixins: [valueBehaviour, validationBehaviour, builtInComponents],
-    /**
-    * Get field default properties.
-    */
-    getDefaultProps: function getFieldDefaultProps() {
+    /** @inheriteDoc */
+   getDefaultProps() {
         return {
 
             /**
@@ -50,7 +52,6 @@ let FieldMixin = {
         name: type('string'),
         value: type(['string', 'number'])
     },
-
     /** @inheritdoc */
     componentWillReceiveProps: function fieldWillReceiveProps(newProps){
         this.setState({value: newProps.value, values: newProps.values});
@@ -58,19 +59,22 @@ let FieldMixin = {
     /**
     * Get the css class of the field component.
     */
-    _className: function() {
-        let stateClass = this.state.error ? "has-feedback has-error" : "";
+    _className(){
+        let stateClass = this.state.error ? 'has-feedback has-error' : '';
         return `form-group ${stateClass} ${this.props.style.className}`;
     },
-
-    render: function renderField() {
+    /** @inheritdoc */
+    render() {
+        let {domain, isRequired, isEdit, values} = this.props;
+        let {input, label, select, display, help, error, _className} = this;
         return (
-            <div className={this._className()} data-focus='field' data-domain={this.props.domain} data-required={this.props.isRequired} data-mode={this.props.isEdit ? 'edit' : 'consult'}>
-                {this.label()}
-                {this.props.isEdit ? (this.props.values ? this.select() : this.input()) : this.display()}
-                {this.help()}
-                {this.error()}
-            </div>);
-        }
-    };
-    module.exports = builder(FieldMixin);
+            <div className={_className()} data-domain={domain} data-focus='field' data-mode={isEdit ? 'edit' : 'consult'} data-required={isRequired}>
+                {label()}
+                {isEdit ? (values ? select() : input()) : display()}
+                {help()}
+                {error()}
+            </div>
+        );
+    }
+};
+module.exports = builder(FieldMixin);

From b2e011c9c24bf47103863fe2df075c58e691dcb8 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 09:05:51 +0200
Subject: [PATCH 3/7] [input] es6 rewrite and cs sclass.

---
 common/input/text/index.js | 128 +++++++++++++++++++++----------------
 1 file changed, 73 insertions(+), 55 deletions(-)

diff --git a/common/input/text/index.js b/common/input/text/index.js
index 11861d1e0..88a88da90 100644
--- a/common/input/text/index.js
+++ b/common/input/text/index.js
@@ -1,78 +1,96 @@
 //Dependencies.
-var builder = require('focus').component.builder;
-var React = require('react');
-var type = require('focus').component.types;
+let builder = require('focus').component.builder;
+let React = require('react');
+let type = require('focus').component.types;
 
 /**
  * Input text mixin.
  * @type {Object}
  */
-var inputTextMixin = {
-  /** @inheritdoc */
-  getDefaultProps: function getInputDefaultProps() {
-    return { 
-      type: 'text',
-      value: undefined,
-      name: undefined,
-      style: {},
-      formatter: function(d){return d},
-      unformatter: function(d){return d}
-    };
-  },
-  /** @inheritdoc */
-  propTypes: {
-    type: type('string'),
-    value: type(['string', 'number']),
-    name: type('string'),
-    style: type('object')
-  },
-  /** @inheritdoc */
-  getInitialState: function getInitialStateInputText() {
-    return {
-      value: this.props.formatter(this.props.value)
-    };
-  },
-  /**
-   * Update the component.
-   * @param {object} newProps - The new props to update.
-   */
-  componentWillReceiveProps: function inputWillReceiveProps(newProps){
-    this.setState({value: this.props.formatter(newProps.value)});
-  },
+let inputTextMixin = {
+    /** @inheritdoc */
+    getDefaultProps() {
+        return {
+            type: 'text',
+            value: undefined,
+            name: undefined,
+            style: {},
+            /**
+             * Default formatter.
+             * @param  {object} d - Data to format.
+             * @return {object}   - The formatted data.
+             */
+            formatter(d){
+                return d;
+            },
+            /**
+             * Default unformatter.
+             * @param  {object} d - Data to unformat.
+             * @return {object}   - The unformatted data.
+             */
+            unformatter(d){
+                return d;
+            }
+        };
+    },
+    /** @inheritdoc */
+    propTypes: {
+        type: type('string'),
+        value: type(['string', 'number']),
+        name: type('string'),
+        style: type('object')
+    },
+    /** @inheritdoc */
+    getInitialState() {
+        let {formatter, value} = this.props;
+        return {
+            value: formatter(value)
+        };
+    },
+    /**
+     * Update the component.
+     * @param {object} newProps - The new props to update.
+     */
+      componentWillReceiveProps: function inputWillReceiveProps(newProps){
+          this.setState({value: this.props.formatter(newProps.value)});
+      },
   /**
    * Get the value from the input in the DOM.
    */
-  getValue: function getInputTextValue() {
-    return this.props.unformatter(this.getDOMNode().value);
-  },
+    getValue: function getInputTextValue() {
+        return this.props.unformatter(React.findDOMNode(this).value);
+    },
   /**
    * Handle the change value of the input.
    * @param {object} event - The sanitize event of input.
    */
   _handleOnChange: function inputOnChange(event){
-    //On change handler.
-    if(this.props.onChange){
-      return this.props.onChange(event);
-    }else {
-      //Set the state then call the change handler.
-      this.setState({value: event.target.value});
-    }
-
+      //On change handler.
+      let {onChange} = this.props;
+      if(onChange){
+          return onChange(event);
+      }else {
+          //Set the state then call the change handler.
+          this.setState({value: event.target.value});
+      }
   },
   /**
    * Render an input.
    * @return {DOM} - The dom of an input.
    */
   render: function renderInput() {
-    return (
-      <input
-        id={this.props.name}
-        name={this.props.name}
-        value={this.state.value}
-        type={this.props.type}
-        className={this.props.style.class}
-        onChange={this._handleOnChange}
-      />
+      let {name, style} = this.props;
+      let htmlType = this.props.type;
+      let {value} = this.state;
+      return (
+        <input
+          id={name}
+          name={name}
+          onChange={this._handleOnChange}
+          style={style}
+          type={htmlType}
+          value={value}
+        />
     );
   }
 };

From 9de704dac522bbecac57eca6fab809b98fef6d60 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 09:06:20 +0200
Subject: [PATCH 4/7] [form] Example.

---
 common/form/example/index.html | 47 +++++++++++++++++-----------------
 example/js/initFocus.js        | 13 +++++++---
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/common/form/example/index.html b/common/form/example/index.html
index 7ddd05002..fb164cc5f 100644
--- a/common/form/example/index.html
+++ b/common/form/example/index.html
@@ -122,47 +122,48 @@
             status: 'saved',
             preStatus: 'saving',
             node: 'contact',
-            service: function(data){
+            service: function myCustomSaveService(data){
+                console.log('save', data);
                 return Promise.resolve(data);
             }
         })
     };
-
+    var Block = FocusComponents.common.block.component;
     //Create the view.
-    var Form = React.createClass({
+    var FormExample = React.createClass({
         displayName: "FormExample",
         mixins: [formMixin],
         stores: [{
             store: contactStore,
-            properties: ["contact", "commandes"]
+            properties: ["contact", "commandes"],
         }],
         definitionPath: "contact",
         action: action,
-        referenceNames: ['papas'],
+        referenceNames: ['papas', 'monkeys'],
         renderContent: function renderUserDetail() {
             return (
-                    React.createElement(Panel, {title: "Fiche de l'utilisateur"},
-                            this._renderActions(),
-                            this.fieldFor("firstName"),
-                            this.fieldFor("lastName"),
-                            this.textFor("birthDate", {
-                                formatter: function (date) {
-                                    return "formatted date" + date
-                                }
-                            }),
-                            this.fieldFor("bio"),
-                            this.fieldFor("isCool"),
-                            this.fieldFor("isNice"),
-                            this.fieldFor("birthDate"),
-                            //this.tableFor("commandes", {lineComponent: TableLine, columns: columns}),
-                            this.listFor("commandes", {lineComponent: ListLine})
-                            /*this.selectFor('papaCode', 'papas')*/
-                    )
+                    <Block title="Fiche de l'utilisateur" actions={this._renderActions}>
+                      {this.fieldFor("firstName")}
+                      {this.fieldFor("lastName")}
+                      {
+                          this.textFor("birthDate", {
+                              formatter: function (date) {
+                                  return "formatted date" + date
+                              }
+                          })}
+                      {this.fieldFor('papaCode', {listName: 'papas'})}
+                      {this.fieldFor('monkeyCode', {listName: 'monkeys', valueKey: 'myCustomCode', labelKey: 'myCustomLabel' })}
+                      {this.fieldFor("bio")}
+                      {this.fieldFor("isCool")}
+                      {this.fieldFor("isNice")}
+                      {this.fieldFor("birthDate")}
+                      {this.listFor("commandes", {lineComponent: ListLine})}
+                    </Block>
             );
         }
     });
     //Render the created View.
-    React.render(React.createElement(Form, null), document.querySelector("#form-container"));
+    React.render(<FormExample />, document.querySelector("#form-container"));
 </script>
 
 </body>
diff --git a/example/js/initFocus.js b/example/js/initFocus.js
index 1661f8286..981f68a37 100644
--- a/example/js/initFocus.js
+++ b/example/js/initFocus.js
@@ -94,17 +94,24 @@ var entities = {
 };
 Focus.definition.entity.container.setEntityConfiguration(entities);
 
-function loadRedList(name) {
+function loadRefList(name) {
   return function loadRef() {
     var refLst = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (cd) {
       return {
-        code: cd,
+        code: ''+cd,
         label: ('' + cd + ' ' + name)
       };
     });
     return Promise.resolve(refLst);
   };
 }
+function loadMonkeyList(){
+    return loadRefList('monkey')().then(function(data){
+        return data.map(function(element){
+            return {myCustomCode: element.code, myCustomLabel: element.label};
+        });
+    });
+}
 
-Focus.reference.config.set({'papas': loadRedList('papas'), 'singe': loadRedList('singe')});
+Focus.reference.config.set({papas: loadRefList('papas'), singe: loadRefList('singe'), monkeys: loadMonkeyList});
 Focus.definition.entity.container.setEntityConfiguration(entities);

From 333b03ead88a6fadf9cded8a4dd4593e9b0f3dc1 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 09:38:51 +0200
Subject: [PATCH 5/7] [field] rewrite example.

---
 common/field/example/index.html | 50 ++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/common/field/example/index.html b/common/field/example/index.html
index 47166d040..a92b4ee97 100644
--- a/common/field/example/index.html
+++ b/common/field/example/index.html
@@ -9,23 +9,19 @@
 
   <!-- Place favicon.ico in the root directory -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://fb.me/react-0.13.3.js"></script>
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
   <!-- Material degign-->
   <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
-
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
-  <!-- Material degign-->
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
 
   <script src="/focus-components/dist/js/focus.js"></script>
   <script src="/focus-components/dist/js/focus-components.js"></script>
@@ -44,21 +40,23 @@ <h2>Champ 3 type number</h2>
   -->
 
   <div id="form-container" class="container"></div>
-  <script type="text/javascript">
+  <script type="text/jsx">
     Focus.components = FocusComponents;
-  var Field = Focus.components.common.field.component;
+    var Field = Focus.components.common.field.component;
     React.render(
-      React.createElement("form", {className: "form-horizontal"},
-      React.createElement("h2", null, "Champ 1"),
-      React.createElement(Field, {name: "field1", value: "field1value", isEdit: true}),
-      React.createElement("h2", null, "Consultation"),
-      React.createElement(Field, {name: "field Consult", value: "fieldConsultValue", isEdit: false}),
-      React.createElement(Field, {name: "field Consult", value: "fieldConsultValue", isEdit: false,formatter: function(data){return data + " formatter applied";}}),
-      React.createElement("h2", null, "Champ 2 (erreur)"),
-      React.createElement(Field, {name: "field2", value: "field2value", type: "text", error: "error on field2"}),    React.createElement("h2", null, "Champ 3 type number"),
-      React.createElement(Field, {name: "field3", value: 3, type: "number"}),
-      React.createElement(Field, {name: "field4", value: "popop", type: "text", help: "Here to help ..."})
-  ),
+        <form className='form-horizontal'>
+            <h2> Premier champ</h2>
+            <Field  name='field1' value='fieldValue' isEdit={true}/>
+            <h2> Consultation </h2>
+            <Field  name='field Consult' value='fieldConsultValue' isEdit={false}/>
+            <Field  name='field Consult formated' value='fieldConsultValue' isEdit={false} formatter={function(data){return data + " formatter applied";}}/>
+            <h2>Erreur</h2>
+            <Field  name='field2' value='field2Value' error='error in field2' isEdit={true} />
+            <h2>Type number</h2>
+            <Field  name='field3' value={3} type='number'/>
+            <Field  name='field4' value='popop' isEdit={true} help='Here to help'/>
+        </form>
+    ,
     document.querySelector("#form-container")
   );
   </script>

From 1325199d546db6bd58af67abf708048e257a9f62 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 09:40:59 +0200
Subject: [PATCH 6/7] [block] fix example

---
 common/block/example/index.html | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/common/block/example/index.html b/common/block/example/index.html
index 505683a96..5651f7309 100644
--- a/common/block/example/index.html
+++ b/common/block/example/index.html
@@ -9,22 +9,19 @@
 
   <!-- Place favicon.ico in the root directory -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://fb.me/react-0.13.3.js"></script>
-  <!-- Material degign-->
-  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
   <!-- Material degign-->
+  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
 
   <script src="/focus-components/dist/js/focus.js"></script>
   <script src="/focus-components/dist/js/focus-components.js"></script>

From c4469081903705f64ac16b9b9789d634170cbf42 Mon Sep 17 00:00:00 2001
From: Pierre Besson <pierre.besson7@gmail.com>
Date: Tue, 4 Aug 2015 09:41:50 +0200
Subject: [PATCH 7/7] [button] Fix example

---
 common/button/action/example/index.html | 33 +++++++++++--------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/common/button/action/example/index.html b/common/button/action/example/index.html
index 85861211e..b40ff5440 100644
--- a/common/button/action/example/index.html
+++ b/common/button/action/example/index.html
@@ -7,28 +7,25 @@
     <meta name="description" content="Example of the component.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
     <script src="https://fb.me/react-0.13.3.js"></script>
-    <script src="/focus-components/dist/js/focus.js"></script>
-    <script src="/focus-components/dist/js/focus-components.js"></script>
-    <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css"/>
+    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
     <!-- Material degign-->
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
-
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
-    <!-- Material degign-->
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+    <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+    <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
+
+    <script src="/focus-components/dist/js/focus.js"></script>
+    <script src="/focus-components/dist/js/focus-components.js"></script>
+    <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css">
 
 </head>
 <body>