reduce complexity of code organization, fixes

- there's not real need in Form.jsx to be located under 'components'
subfolder, and utils.js under 'utils' subfolder. placing them both
under 'src' root folder.
- fix `bindState` export in 'src/index.js'
- update demo's App.jsx to use bindState helper
- update tests accordingly

Author: akuzko

CHANGELOG

@@ -1,5 +1,7 @@
 === master
 
+Reduce complexity of code organization, fixes (akuzko)
+
 Add bindState helper method, improve Form props (akuzko)
 
 Fix rendering flaws in Demo forms, add CHANGELOG (akuzko)

demo/src/App.jsx

@@ -1,14 +1,15 @@
 import React, { PureComponent } from 'react';
 import { Intro, InputPrerequisites } from './components';
 import * as Forms from './forms';
+import { bindState } from '../../src';
 
 const sections = [
   'inputs', 'form01', 'form02', 'form03', 'form04',
   'form05', 'form06', 'form07', 'form08', 'form09', 'form10'
 ].reverse();
 
 export default class App extends PureComponent {
-  state = { forms: {}, section: 'inputs' };
+  state = { section: 'inputs' };
 
   componentDidMount() {
     window.addEventListener('scroll', this.setActiveSection);
@@ -30,17 +31,6 @@ export default class App extends PureComponent {
     return this.state.section === section ? 'active' : '';
   }
 
-  formProps(name) {
-    const props = this.state.forms[name] || {};
-
-    return {
-      attrs: props.attrs || {},
-      onChange: (attrs, errors) => this.setState({
-        forms: { ...this.state.forms, [name]: { attrs, errors } }
-      })
-    };
-  }
-
   saveForm11 = (attrs, form) => {
     // simulated AJAX request
     return new Promise((resolve, reject) => {
@@ -77,17 +67,17 @@ export default class App extends PureComponent {
           <div className="content paper flex-item p-20">
             <Intro />
             <div id="inputs"><InputPrerequisites /></div>
-            <div id="form01"><Forms.Form1 {...this.formProps('form1')} /></div>
-            <div id="form02"><Forms.Form2 {...this.formProps('form2')} /></div>
-            <div id="form03"><Forms.Form3 {...this.formProps('form3')} /></div>
-            <div id="form04"><Forms.Form4 {...this.formProps('form4')} /></div>
-            <div id="form05"><Forms.Form5 {...this.formProps('form5')} /></div>
-            <div id="form06"><Forms.Form6 {...this.formProps('form6')} /></div>
-            <div id="form07"><Forms.Form7 {...this.formProps('form7')} /></div>
-            <div id="form08"><Forms.Form8 {...this.formProps('form8')} /></div>
-            <div id="form09"><Forms.Form9 {...this.formProps('form9')} /></div>
-            <div id="form10"><Forms.Form10 {...this.formProps('form10')} /></div>
-            <div id="form11"><Forms.Form11 {...this.formProps('form11')} onRequestSave={this.saveForm11} /></div>
+            <div id="form01"><Forms.Form1  {...bindState(this, 'form1')} /></div>
+            <div id="form02"><Forms.Form2  {...bindState(this, 'form2')} /></div>
+            <div id="form03"><Forms.Form3  {...bindState(this, 'form3')} /></div>
+            <div id="form04"><Forms.Form4  {...bindState(this, 'form4')} /></div>
+            <div id="form05"><Forms.Form5  {...bindState(this, 'form5')} /></div>
+            <div id="form06"><Forms.Form6  {...bindState(this, 'form6')} /></div>
+            <div id="form07"><Forms.Form7  {...bindState(this, 'form7')} /></div>
+            <div id="form08"><Forms.Form8  {...bindState(this, 'form8')} /></div>
+            <div id="form09"><Forms.Form9  {...bindState(this, 'form9')} /></div>
+            <div id="form10"><Forms.Form10 {...bindState(this, 'form10')} /></div>
+            <div id="form11"><Forms.Form11 {...bindState(this, 'form11')} onRequestSave={this.saveForm11} /></div>
           </div>
         </div>
       </div>

demo/src/forms/Form7.jsx

@@ -42,6 +42,7 @@ const SOURCE = [['Form7.jsx', `
   }
 `], ['Page.jsx', `
   import React, { Component } from 'react';
+  import { bindState } from 'react-form-base';
   import Form7 from './Form7';
 
   class Page extends Component {

src/components/Form.jsx renamed to src/Form.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes, PureComponent } from 'react';
 
-import { nameToPath, buildFormValidator } from '../utils';
+import { nameToPath, buildFormValidator } from './utils';
 import isPlainObject from 'lodash/isPlainObject';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';

src/index.js

@@ -1,2 +1,2 @@
-export default from './components/Form';
-export bindState from './utils';
+export default from './Form';
+export { bindState } from './utils';

src/utils/utils.js renamed to src/utils.js

@@ -4,7 +4,7 @@ import isPlainObject from 'lodash/isPlainObject';
 export function bindState(component, key = 'form') {
   return {
     attrs: (component.state && component.state[key]) || {},
-    onChange: function(attrs) { return component.setState({ [key]: attrs }) }
+    onChange: function(attrs) { return component.setState({ [key]: attrs }); }
   };
 }
 

src/utils/index.js

@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react';
-import Form from '../../src';
+import Form from '../src';
 import { mount, shallow } from 'enzyme';
 import expect, { createSpy } from 'expect';
 import range from 'lodash/range';
@@ -12,6 +12,7 @@ describe('<Form />', function() {
   class Input extends Component {
     static propTypes = {
       onChange: PropTypes.func,
+      value: PropTypes.string,
       error: PropTypes.string
     };
 

test/components/Form.test.js renamed to test/Form.test.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Form from '../../src/Form';
-import { nameToPath, bindState } from '../../src/utils';
+import Form from '../src/Form';
+import { nameToPath, bindState } from '../src/utils';
 import { shallow } from 'enzyme';
 import expect from 'expect';