Making Fieldset double-linkable. Updating documentation + adding for Fieldset. Removing lodash as a dependency (only get and toPath are used now). Adding unit tests for Fieldset + deep resolves

Author: davidkpiano

docs/api/Fieldset.md

@@ -0,0 +1,49 @@
+# Fieldset Component
+
+The `<Fieldset>` component is a way to contain related fields. This might not sound like much, but it's incredibly useful when creating **reusable groups of controls**. Here's an example:
+
+```jsx
+// in render():
+<Form model="user">
+  <Fieldset model=".address">
+    <Control.text model=".city" />
+    <Control.text model=".state" />
+    <Control.text model=".zip" />
+  </Fieldset>
+</Form>
+```
+
+If you extract the `<Fieldset model=".address">` out into its own component, you can then reuse it inside any other `<Form>`:
+
+```jsx
+const Address = () => (
+  <Fieldset model=".address">
+    <Control.text model=".city" />
+    <Control.text model=".state" />
+    <Control.text model=".zip" />
+  </Fieldset>
+);
+
+// in render():
+<Form model="user">
+  <Address />
+</Form>
+
+<Form model="admin">
+  <Address />
+</Form>
+```
+
+# Prop Types
+
+## `model="..."` (required)
+_(String | Function)_: The string or [tracker](../guides/tracking) representing the model value of the entire form in the store.
+
+You can also use [partial models](../guides/partial-models) for `<Control>`, `<Field>`, and `<Errors>` components inside of `<Fieldset>` - they will be resolved to the fieldset's model.
+
+In addition, you can use a partial model for `<Fieldset>` itself - it will resolve to the parent `<Fieldset>` (yes, you can nest fieldsets) or `<Form>` models.
+
+## `component={...}`
+_(Any)_ The `component` that the `<Fieldset>` should be rendered to (default: `"div"`).
+
+- For React Native, the `View` component is used to render the fieldset, if you `import { Fieldset } from 'react-redux-form/native'`.

docs/api/Form.md

@@ -47,7 +47,7 @@ _(String | Function)_: The string representing the model value of the entire for
 
 Typically, the `<Control>` (and/or `<Field>`) components nested inside `<Form>` would be _members_ of the form model; e.g. `user.email` and `user.password` are members of the `user` model.
 
-You can also use [partial models](../guides/partial-models) for `<Control>`, `<Field>`, and `<Errors>` components inside of `<Form>` - they will be resolved to the form's model.
+You can also use [partial models](../guides/partial-models) for `<Control>`, `<Field>`, `<Fieldset>`, and `<Errors>` components inside of `<Form>` - they will be resolved to the form's model.
 
 ## `validators={{...}}`
 _(Object)_: An object representing the validators for the fields inside the form, where:

docs/guides/partial-models.md

@@ -54,3 +54,20 @@ const AddressFields = () => (
   <AddressFields />
 </Form>
 ```
+
+## Deeply Resolved Models
+
+With [`<Fieldset>`](../api/Fieldset), you can deeply resolve models:
+
+```jsx
+// in render():
+<Form model="user">
+  <Fieldset model=".address">
+    <Control.text model=".city" />
+    <Control.text model=".state" />
+    <Control.text model=".zip" />
+  </Fieldset>
+</Form>
+```
+
+This makes it even easier to create reusable groups of controls.

package.json

@@ -90,7 +90,8 @@
   "dependencies": {
     "icepick": "^1.1.0",
     "invariant": "~2.2.1",
-    "lodash": "^4.10.0"
+    "lodash.get": "~4.4.2",
+    "lodash.topath": "~4.5.2"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

src/components/fieldset-component.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import getModel from '../utils/get-model';
 import omit from '../utils/omit';
+import resolveModel from '../utils/resolve-model';
 
 const propTypes = {
   model: PropTypes.string.isRequired,
@@ -30,6 +31,8 @@ class Fieldset extends Component {
   }
 }
 
+Fieldset.displayName = 'Fieldset';
+
 Fieldset.childContextTypes = {
   model: PropTypes.any,
 };
@@ -48,4 +51,4 @@ function mapStateToProps(state, { model }) {
   };
 }
 
-export default connect(mapStateToProps)(Fieldset);
+export default resolveModel(connect(mapStateToProps)(Fieldset));

src/utils/get.js

@@ -1,4 +1,4 @@
-import _get from 'lodash/get';
+import _get from 'lodash.get';
 import endsWith from './ends-with';
 
 export default function get(object, path, defaultValue) {

src/utils/path-starts-with.js

@@ -1,4 +1,4 @@
-import toPath from 'lodash/toPath';
+import toPath from 'lodash.toPath';
 
 export default function pathStartsWith(pathString, subPathString) {
   if (pathString === subPathString) return true;

src/utils/to-path.js

@@ -1,4 +1,4 @@
-import _toPath from 'lodash/toPath';
+import _toPath from 'lodash.toPath';
 import endsWith from './ends-with';
 
 export default function toPath(value) {

test/model-resolving-spec.js

@@ -160,4 +160,39 @@ describe('model resolving', () => {
       assert.equal(errors[0].innerHTML, 'this is incorrect');
     });
   });
+
+  describe('deep resolves with <Fieldset>', () => {
+    const deepInitialState = {
+      foo: {
+        field: 'field value',
+        control: 'control value',
+      },
+    };
+
+    const deepStore = testCreateStore({
+      test: modelReducer('test', deepInitialState),
+      testForm: formReducer('test', deepInitialState),
+    });
+
+    const app = testRender(
+      <Form model="test">
+        <Fieldset model=".foo">
+          <Field model=".field">
+            <input type="text" />
+          </Field>
+          <Control.text model=".control" />
+        </Fieldset>
+      </Form>, deepStore);
+
+    const [fieldInput, controlInput] = TestUtils
+      .scryRenderedDOMComponentsWithTag(app, 'input');
+
+    it('deeply resolve a Field', () => {
+      assert.equal(fieldInput.value, 'field value');
+    });
+
+    it('deeply resolve a Control', () => {
+      assert.equal(controlInput.value, 'control value');
+    });
+  });
 });