Added support for uiSchema and alternative widgets.

Author: n1k0

README.md

@@ -3,8 +3,7 @@ react-jsonschema-form
 
 [![Build Status](https://travis-ci.org/mozilla-services/react-jsonschema-form.svg)](https://travis-ci.org/mozilla-services/react-jsonschema-form)
 
-A simple [React](http://facebook.github.io/react/) component capable of building
-HTML forms out of a [JSON schema](http://jsonschema.net/).
+A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/).
 
 Requires React 0.14+.
 
@@ -60,15 +59,46 @@ render((
 ), document.getElementById("app"));
 ```
 
+### Alternative widgets
+
+JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing which UI widget should be used to render a certain field
+
+Example:
+
+```js
+const uiSchema =  {
+  done: {
+    widget: "radio" // could also be "select"
+  }
+};
+
+render((
+  <Form schema={schema}
+        uiSchema={uiSchema}
+        formData={formData} />
+), document.getElementById("app"));
+```
+
+Here's a list of supported alternative widgets for different JSONSchema data types:
+
+#### `boolean`
+
+  * `radio`: a radio button group with `true` and `false` as selectable values;
+  * `select`: a select box with `true` and `false` as options;
+  * by default, a checkbox is used
+
+#### `string`:
+
+  * `textarea`: a `textarea` element
+  * by default, a regular `input[type=text]` element is used.
+
 ## Development server
 
 ```
 $ npm start
 ```
 
-A [Cosmos development server](https://github.com/skidding/cosmos) showcasing
-components with hot reload enabled is available at
-[localhost:8080](http://localhost:8080).
+A [Cosmos development server](https://github.com/skidding/cosmos) showcasing components with hot reload enabled is available at [localhost:8080](http://localhost:8080).
 
 ## Tests
 

fixtures/Form/nested-default.js

@@ -0,0 +1,46 @@
+module.exports = {
+  schema: {
+    title: "Todo Tasks",
+    description: "Tasks collection.",
+    type: "object",
+    additionalProperties: false,
+    required: [
+      "title", "tasks"
+    ],
+    default: {
+      title: "Default task list",
+      tasks: [
+        {title: "A default task", done: true},
+        {title: "Another default task", done: false},
+      ]
+    },
+    properties: {
+      title: {
+        type: "string",
+        title: "Tasks list title",
+      },
+      tasks: {
+        type: "array",
+        title: "Tasks list",
+        items: {
+          type: "object",
+          properties: {
+            done: {
+              type: "boolean",
+              title: "Done?",
+              description: "Is that task done already?"
+            },
+            title: {
+              type: "string",
+              title: "Title",
+              description: "The task title.",
+              minLength: 1
+            }
+          }
+        }
+      }
+    }
+  },
+  onSubmit: console.log.bind(console, "submit"),
+  onError: console.log.bind(console, "errors")
+};

fixtures/Form/nested-uiSchema.js

@@ -0,0 +1,62 @@
+module.exports = {
+  schema: {
+    title: "Todo Tasks",
+    description: "Tasks collection.",
+    type: "object",
+    additionalProperties: false,
+    required: [
+      "title", "tasks"
+    ],
+    properties: {
+      title: {
+        type: "string",
+        title: "Tasks list title",
+      },
+      tasks: {
+        type: "array",
+        title: "Tasks list",
+        items: {
+          type: "object",
+          properties: {
+            type: {
+              type: "string",
+              title: "Category",
+              enum: ["coding", "sleeping"]
+            },
+            done: {
+              type: "boolean",
+              title: "Done?",
+              description: "Is that task done already?"
+            },
+            title: {
+              type: "string",
+              title: "Title",
+              description: "The task title.",
+              minLength: 1
+            }
+          }
+        }
+      }
+    }
+  },
+  uiSchema: {
+    title: {
+      widget: "textarea",
+    },
+    tasks: {
+      items: {
+        type: {
+          widget: "radio"
+        },
+        done: {
+          widget: "radio",
+        },
+        title: {
+          widget: "textarea"
+        }
+      }
+    }
+  },
+  onSubmit: console.log.bind(console, "submit"),
+  onError: console.log.bind(console, "errors")
+};

fixtures/fields/ArrayField/index.js

@@ -7,5 +7,5 @@ module.exports = {
       title: "item"
     }
   },
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };

fixtures/fields/ArrayField/with-default.js

@@ -8,5 +8,5 @@ module.exports = {
       title: "item"
     }
   },
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };

fixtures/fields/ArrayField/with-formData.js

@@ -8,5 +8,5 @@ module.exports = {
     }
   },
   formData: ["item1", "item2"],
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };

fixtures/fields/ArrayField/with-uiSchema.js

@@ -0,0 +1,17 @@
+module.exports = {
+  schema: {
+    type: "array",
+    title: "title",
+    items: {
+      type: "string",
+      title: "item"
+    }
+  },
+  uiSchema: {
+    items: {
+      widget: "textarea"
+    }
+  },
+  formData: ["item1", "item2"],
+  onChange: console.log.bind(console, "change")
+};

fixtures/fields/BooleanField/index.js

@@ -3,5 +3,5 @@ module.exports = {
     type: "boolean",
     title: "My boolean",
   },
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };

fixtures/fields/BooleanField/with-default.js

@@ -4,5 +4,5 @@ module.exports = {
     title: "My boolean",
     default: true,
   },
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };

fixtures/fields/BooleanField/with-formData.js

@@ -4,5 +4,5 @@ module.exports = {
     title: "My boolean",
   },
   formData: true,
-  onChange: console.log.bind(console)
+  onChange: console.log.bind(console, "change")
 };