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';