Add more examples and add selected property on MenuItems

Author: agustin107

example/src/examples/aditional-properties/form-data.json

@@ -0,0 +1,5 @@
+{
+  "firstName": "Chuck",
+  "lastName": "Norris",
+  "assKickCount": "infinity"
+}

example/src/examples/aditional-properties/index.ts

@@ -0,0 +1,11 @@
+import schema from './schema.json';
+import uiSchema from './ui-schema.json';
+import formData from './form-data.json';
+
+export default {
+  key: 'aditionalProperties',
+  title: 'Aditional Properties',
+  schema,
+  uiSchema,
+  formData,
+};

example/src/examples/aditional-properties/schema.json

@@ -0,0 +1,19 @@
+{
+  "title": "A customizable registration form",
+  "description": "A simple form with additional properties example.",
+  "type": "object",
+  "required": ["firstName", "lastName"],
+  "additionalProperties": {
+    "type": "string"
+  },
+  "properties": {
+    "firstName": {
+      "type": "string",
+      "title": "First name"
+    },
+    "lastName": {
+      "type": "string",
+      "title": "Last name"
+    }
+  }
+}

example/src/examples/aditional-properties/ui-schema.json

@@ -0,0 +1,6 @@
+{
+  "firstName": {
+    "ui:autofocus": true,
+    "ui:emptyValue": ""
+  }
+}

example/src/examples/alternatives/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'alternatives',
   title: 'Alternatives',
   schema,
   uiSchema,

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

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'anyOf',
   title: 'Any Of',
   schema,
   uiSchema,

example/src/examples/arrays/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'arrays',
   title: 'Arrays',
   schema,
   uiSchema,
   formData,
-});
+};

example/src/examples/budget/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'budget',
   title: 'Budget',
   schema,
   uiSchema,
   formData,
-});
+};

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

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'customArray',
   title: 'Custom Array',
   schema,
   uiSchema,

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

@@ -0,0 +1,7 @@
+{
+  "firstName": "Chuck",
+  "lastName": "Norris",
+  "age": 75,
+  "bio": "Roundhouse kicking asses since 1940",
+  "password": "noneed"
+}

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

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

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

@@ -0,0 +1,34 @@
+{
+  "title": "A registration form",
+  "description": "This is the same as the simple form, but it is rendered as a bootstrap grid. Try shrinking the browser window to see it in action.",
+  "type": "object",
+  "required": ["firstName", "lastName"],
+  "properties": {
+    "firstName": {
+      "type": "string",
+      "title": "First name"
+    },
+    "lastName": {
+      "type": "string",
+      "title": "Last name"
+    },
+    "age": {
+      "type": "integer",
+      "title": "Age"
+    },
+    "bio": {
+      "type": "string",
+      "title": "Bio"
+    },
+    "password": {
+      "type": "string",
+      "title": "Password",
+      "minLength": 3
+    },
+    "telephone": {
+      "type": "string",
+      "title": "Telephone",
+      "minLength": 10
+    }
+  }
+}

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

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

example/src/examples/custom/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'custom',
   title: 'Custom',
   schema,
   uiSchema,

example/src/examples/errors/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'errors',
   title: 'Errors',
   schema,
   uiSchema,

example/src/examples/index.ts

@@ -1,9 +1,11 @@
+import aditionalProperties from './aditional-properties';
+import alternatives from './alternatives';
 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 customObject from './custom-object';
 import errors from './errors';
 import large from './large';
 import multipleChoice from './multiple-choice';
@@ -21,12 +23,14 @@ import single from './single';
 import validation from './validation';
 
 export default {
+  aditionalProperties,
+  alternatives,
   anyOf,
   arrays,
-  alternatives,
   budget,
   custom,
   customArray,
+  customObject,
   errors,
   large,
   multipleChoice,

example/src/examples/large/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'large',
   title: 'Large',
   schema,
   uiSchema,

example/src/examples/multiple-choice/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'multipleChoice',
   title: 'Multiple Choice',
   schema,
   uiSchema,
   formData,
-});
+};

example/src/examples/nested/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'nested',
   title: 'Nested',
   schema,
   uiSchema,
   formData,
-});
+};

example/src/examples/null-fields/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'nullFields',
   title: 'Null Fields',
   schema,
   uiSchema,

example/src/examples/nullable/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'nullable',
   title: 'Nullable',
   schema,
   uiSchema,

example/src/examples/numbers/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'numbers',
   title: 'Numbers',
   schema,
   uiSchema,
   formData,
-});
+};

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

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'oneOf',
   title: 'One Of',
   schema,
   uiSchema,

example/src/examples/ordering/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'ordering',
   title: 'Ordering',
   schema,
   uiSchema,

example/src/examples/property-dependencies/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'propertyDependencies',
   title: 'Property Dependencies',
   schema,
   uiSchema,

example/src/examples/references/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'references',
   title: 'References',
   schema,
   uiSchema,

example/src/examples/schema-dependencies/index.ts

@@ -3,6 +3,7 @@ import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
 export default {
+  key: 'schemaDependencies',
   title: 'Schema Dependencies',
   schema,
   uiSchema,

example/src/examples/simple/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'simple',
   title: 'Simple',
   schema,
   uiSchema,
   formData,
-});
+};

example/src/examples/single/index.ts

@@ -2,9 +2,10 @@ import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
 
-export default ({
+export default {
+  key: 'single',
   title: 'Single',
   schema,
   uiSchema,
   formData,
-});
+};

example/src/examples/validation/index.ts

@@ -4,6 +4,7 @@ import formData from './form-data.json';
 import validate from './validate';
 
 export default {
+  key: 'validation',
   title: 'Validation',
   schema,
   uiSchema,

example/src/index.tsx

@@ -18,7 +18,10 @@ const App = () => {
     <div>
       <CssBaseLine />
 
-      <Menu onSelectMenuItem={onSelectMenuItem} />
+      <Menu
+        onSelectMenuItem={onSelectMenuItem}
+        selectedMenuItem={selectedExample.key}
+      />
       <Body selectedDemo={selectedExample} />
     </div>
   );

example/src/menu/LeftDrawer.tsx

@@ -8,13 +8,20 @@ import MenuItems from './MenuItems';
 import menuStyles from './menu-styles';
 
 export default withStyles(menuStyles)(
-  ({ classes, open, toggleDrawer, onSelectMenuItem }: any) => (
+  ({
+    classes,
+    open,
+    toggleDrawer,
+    onSelectMenuItem,
+    selectedMenuItem,
+  }: any) => (
     <>
       <Hidden only={['xs', 'sm', 'md']}>
         <Drawer variant={'permanent'} className={classes.permanentLeftDrawer}>
           <MenuItems
             toggleDrawer={toggleDrawer}
             onSelectMenuItem={onSelectMenuItem}
+            selectedMenuItem={selectedMenuItem}
           />
         </Drawer>
       </Hidden>
@@ -27,6 +34,7 @@ export default withStyles(menuStyles)(
           <MenuItems
             toggleDrawer={toggleDrawer}
             onSelectMenuItem={onSelectMenuItem}
+            selectedMenuItem={selectedMenuItem}
           />
         </Drawer>
       </Hidden>

example/src/menu/Menu.tsx

@@ -23,7 +23,7 @@ class RawMenuAppBar extends React.Component<any, any> {
   };
 
   render() {
-    const { classes, onSelectMenuItem } = this.props;
+    const { classes, onSelectMenuItem, selectedMenuItem } = this.props;
     const { drawerOpen } = this.state;
 
     return (
@@ -49,6 +49,7 @@ class RawMenuAppBar extends React.Component<any, any> {
           open={drawerOpen}
           toggleDrawer={this.toggleDrawer}
           onSelectMenuItem={onSelectMenuItem}
+          selectedMenuItem={selectedMenuItem}
         />
       </AppBar>
     );