Add more examples. Fix number type property

Add margin-top on TitleField

Fixes: #26

Author: agustin107

example/src/examples/alternatives/form-data.json

@@ -0,0 +1,6 @@
+{
+  "currentColor": "#00ff00",
+  "colorMask": ["#0000ff"],
+  "colorPalette": ["#ff0000"],
+  "blendMode": "screen"
+}

example/src/examples/alternatives/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Alternatives',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/alternatives/schema.json

@@ -0,0 +1,73 @@
+{
+  "definitions": {
+    "Color": {
+      "title": "Color",
+      "type": "string",
+      "anyOf": [
+        {
+          "type": "string",
+          "enum": ["#ff0000"],
+          "title": "Red"
+        },
+        {
+          "type": "string",
+          "enum": ["#00ff00"],
+          "title": "Green"
+        },
+        {
+          "type": "string",
+          "enum": ["#0000ff"],
+          "title": "Blue"
+        }
+      ]
+    },
+    "Toggle": {
+      "title": "Toggle",
+      "type": "boolean",
+      "oneOf": [
+        {
+          "title": "Enable",
+          "const": true
+        },
+        {
+          "title": "Disable",
+          "const": false
+        }
+      ]
+    }
+  },
+  "title": "Image editor",
+  "type": "object",
+  "required": ["currentColor", "colorMask", "blendMode"],
+  "properties": {
+    "currentColor": {
+      "$ref": "#/definitions/Color",
+      "title": "Brush color"
+    },
+    "colorMask": {
+      "type": "array",
+      "uniqueItems": true,
+      "items": {
+        "$ref": "#/definitions/Color"
+      },
+      "title": "Color mask"
+    },
+    "toggleMask": {
+      "title": "Apply color mask",
+      "$ref": "#/definitions/Toggle"
+    },
+    "colorPalette": {
+      "type": "array",
+      "title": "Color palette",
+      "items": {
+        "$ref": "#/definitions/Color"
+      }
+    },
+    "blendMode": {
+      "title": "Blend mode",
+      "type": "string",
+      "enum": ["screen", "multiply", "overlay"],
+      "enumNames": ["Screen", "Multiply", "Overlay"]
+    }
+  }
+}

example/src/examples/alternatives/ui-schema.json

@@ -0,0 +1,8 @@
+{
+  "blendMode": {
+    "ui:enumDisabled": ["multiply"]
+  },
+  "toggleMask": {
+    "ui:widget": "radio"
+  }
+}

example/src/examples/any-of/form-data.json

@@ -0,0 +1,3 @@
+{
+  "firstName": "Chuck"
+}

example/src/examples/any-of/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Any Of',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/any-of/schema.json

@@ -0,0 +1,56 @@
+{
+  "type": "object",
+  "properties": {
+    "age": {
+      "type": "integer",
+      "title": "Age"
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "anyOf": [
+          {
+            "properties": {
+              "foo": {
+                "type": "string"
+              }
+            }
+          },
+          {
+            "properties": {
+              "bar": {
+                "type": "string"
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  "anyOf": [
+    {
+      "title": "First method of identification",
+      "properties": {
+        "firstName": {
+          "type": "string",
+          "title": "First name",
+          "default": "Chuck"
+        },
+        "lastName": {
+          "type": "string",
+          "title": "Last name"
+        }
+      }
+    },
+    {
+      "title": "Second method of identification",
+      "properties": {
+        "idCode": {
+          "type": "string",
+          "title": "ID code"
+        }
+      }
+    }
+  ]
+}

example/src/examples/any-of/ui-schema.json

@@ -0,0 +1 @@
+{}

example/src/examples/custom-array/form-data.json

@@ -0,0 +1 @@
+["react", "jsonschema", "form"]

example/src/examples/custom-array/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Custom Array',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/custom-array/schema.json

@@ -0,0 +1,7 @@
+{
+  "title": "Custom array of strings",
+  "type": "array",
+  "items": {
+    "type": "string"
+  }
+}

example/src/examples/custom-array/ui-schema.json

@@ -0,0 +1 @@
+{}

example/src/examples/custom/form-data.json

@@ -0,0 +1,4 @@
+{
+  "lat": 0,
+  "lon": 0
+}

example/src/examples/custom/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Custom',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/custom/schema.json

@@ -0,0 +1,13 @@
+{
+  "title": "A localisation form",
+  "type": "object",
+  "required": ["lat", "lon"],
+  "properties": {
+    "lat": {
+      "type": "number"
+    },
+    "lon": {
+      "type": "number"
+    }
+  }
+}

example/src/examples/custom/ui-schema.json

@@ -0,0 +1,3 @@
+{
+  "ui:field": "geo"
+}

example/src/examples/errors/form-data.json

@@ -0,0 +1,6 @@
+{
+  "firstName": "Chuck",
+  "active": "wrong",
+  "skills": ["karate", "budo", "aikido"],
+  "multipleChoicesList": ["foo", "bar", "fuzz"]
+}

example/src/examples/errors/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Errors',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/errors/schema.json

@@ -0,0 +1,33 @@
+{
+  "title": "Contextualized errors",
+  "type": "object",
+  "properties": {
+    "firstName": {
+      "type": "string",
+      "title": "First name",
+      "minLength": 8,
+      "pattern": "\\d+"
+    },
+    "active": {
+      "type": "boolean",
+      "title": "Active"
+    },
+    "skills": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "minLength": 5
+      }
+    },
+    "multipleChoicesList": {
+      "type": "array",
+      "title": "Pick max two items",
+      "uniqueItems": true,
+      "maxItems": 2,
+      "items": {
+        "type": "string",
+        "enum": ["foo", "bar", "fuzz"]
+      }
+    }
+  }
+}

example/src/examples/errors/ui-schema.json

@@ -0,0 +1 @@
+{}

example/src/examples/index.ts

@@ -1,18 +1,44 @@
+import anyOf from './any-of';
 import arrays from './arrays';
+import alternatives from './alternatives';
 import budget from './budget';
+import custom from './custom';
+import customArray from './custom-array';
+import errors from './errors';
+import large from './large';
+import multipleChoice from './multiple-choice';
 import nested from './nested';
+import nullable from './nullable';
+import nullFields from './null-fields';
 import numbers from './numbers';
-import multipleChoice from './multiple-choice';
+import oneOf from './one-of';
+import ordering from './ordering';
+import propertyDependencies from './property-dependencies';
+import references from './references';
+import schemaDependencies from './schema-dependencies';
 import simple from './simple';
 import single from './single';
 import validation from './validation';
 
 export default {
+  anyOf,
   arrays,
+  alternatives,
   budget,
+  custom,
+  customArray,
+  errors,
+  large,
+  multipleChoice,
   nested,
+  nullable,
+  nullFields,
   numbers,
-  multipleChoice,
+  oneOf,
+  ordering,
+  propertyDependencies,
+  references,
+  schemaDependencies,
   simple,
   single,
   validation,

example/src/examples/large/form-data.json

@@ -0,0 +1 @@
+{}

example/src/examples/large/index.ts

@@ -0,0 +1,10 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  title: 'Large',
+  schema,
+  uiSchema,
+  formData,
+};