Merge pull request #30 from mozilla-services/namespace-uiSchema-widget

Renamed uiSchema widget to ui:widget to avoid name collisions.

README.md

@@ -75,14 +75,14 @@ That should give something like this (if you use the default stylesheet):
 
 ### 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.
+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 how the form should be rendered, eg. which UI widget should be used to render a certain field thanks to the `ui:widget` property:
 
 Example:
 
 ```jsx
 const uiSchema =  {
   done: {
-    widget: "radio" // could also be "select"
+    "ui:widget": "radio" // could also be "select"
   }
 };
 
@@ -176,7 +176,7 @@ const schema = {
 };
 
 const uiSchema = {
-  widget: (props) => {
+  "ui:widget": (props) => {
     return (
       <input type="text"
         className="custom"

playground/samples/nested.js

@@ -39,7 +39,7 @@ module.exports = {
     tasks: {
       items: {
         details: {
-          widget: "textarea"
+          "ui:widget": "textarea"
         }
       }
     }

playground/samples/numbers.js

@@ -33,13 +33,13 @@ module.exports = {
   },
   uiSchema: {
     integer: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     integerRange: {
-      widget: "range"
+      "ui:widget": "range"
     },
     integerRangeSteps: {
-      widget: "range"
+      "ui:widget": "range"
     }
   },
   formData: {

playground/samples/ordering.js

@@ -29,13 +29,13 @@ module.exports = {
   uiSchema: {
     "ui:order": ["firstName", "lastName", "age", "bio", "password"],
     age: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     bio: {
-      widget: "textarea"
+      "ui:widget": "textarea"
     },
     password: {
-      widget: "password"
+      "ui:widget": "password"
     }
   },
   formData: {

playground/samples/simple.js

@@ -28,13 +28,13 @@ module.exports = {
   },
   uiSchema: {
     age: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     bio: {
-      widget: "textarea"
+      "ui:widget": "textarea"
     },
     password: {
-      widget: "password"
+      "ui:widget": "password"
     }
   },
   formData: {

playground/samples/widgets.js

@@ -40,15 +40,15 @@ module.exports = {
   uiSchema: {
     boolean: {
       radio: {
-        widget: "radio"
+        "ui:widget": "radio"
       },
       select: {
-        widget: "select"
+        "ui:widget": "select"
       }
     },
     string: {
       textarea: {
-        widget: "textarea"
+        "ui:widget": "textarea"
       }
     }
   },

src/components/fields/BooleanField.js

@@ -5,7 +5,7 @@ import CheckboxWidget from "./../widgets/CheckboxWidget";
 
 function BooleanField({schema, name, uiSchema, formData, required, onChange}) {
   const {title, description} = schema;
-  const {widget} = uiSchema;
+  const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
     onChange,

src/components/fields/StringField.js

@@ -7,7 +7,7 @@ import SelectWidget from "./../widgets/SelectWidget";
 
 function StringField({schema, name, uiSchema, formData, required, onChange}) {
   const {title, description} = schema;
-  const {widget} = uiSchema;
+  const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
     label: title || name,

test/index_test.js

@@ -605,7 +605,7 @@ describe("Form", () => {
       };
 
       const uiSchema = {
-        widget: (props) => {
+        "ui:widget": (props) => {
           return (
             <input type="text"
               className="custom"
@@ -637,7 +637,7 @@ describe("Form", () => {
       describe("textarea", () => {
         const uiSchema = {
           foo: {
-            widget: "textarea"
+            "ui:widget": "textarea"
           }
         };
 
@@ -673,7 +673,7 @@ describe("Form", () => {
       describe("password", () => {
         const uiSchema = {
           foo: {
-            widget: "password"
+            "ui:widget": "password"
           }
         };
 
@@ -721,7 +721,7 @@ describe("Form", () => {
       describe("radio", () => {
         const uiSchema = {
           foo: {
-            widget: "radio"
+            "ui:widget": "radio"
           }
         };
 
@@ -768,7 +768,7 @@ describe("Form", () => {
       describe("updown", () => {
         const uiSchema = {
           foo: {
-            widget: "updown"
+            "ui:widget": "updown"
           }
         };
 
@@ -804,7 +804,7 @@ describe("Form", () => {
       describe("range", () => {
         const uiSchema = {
           foo: {
-            widget: "range"
+            "ui:widget": "range"
           }
         };
 
@@ -851,7 +851,7 @@ describe("Form", () => {
       describe("updown", () => {
         const uiSchema = {
           foo: {
-            widget: "updown"
+            "ui:widget": "updown"
           }
         };
 
@@ -887,7 +887,7 @@ describe("Form", () => {
       describe("range", () => {
         const uiSchema = {
           foo: {
-            widget: "range"
+            "ui:widget": "range"
           }
         };
 
@@ -934,7 +934,7 @@ describe("Form", () => {
       describe("radio", () => {
         const uiSchema = {
           foo: {
-            widget: "radio"
+            "ui:widget": "radio"
           }
         };
 
@@ -996,7 +996,7 @@ describe("Form", () => {
       describe("select", () => {
         const uiSchema = {
           foo: {
-            widget: "select"
+            "ui:widget": "select"
           }
         };