Examples from the documentation

.gitignore

@@ -8,4 +8,5 @@ yarn.lock
 .nyc_output/
 coverage/
 examples/bundle*
-package-lock.json
+package-lock.json
+built_docs/

docs/pages/examples/all-widgets/index.js

@@ -0,0 +1,136 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { reducer as formReducer } from 'redux-form'
+import { Provider } from 'react-redux'
+import Liform from '../../../../src/'
+
+const Demo = () => {
+    const reducer = combineReducers({ form: formReducer })
+    const store = createStore(reducer)
+    const schema = {
+        'type':'object',
+        'properties': {
+            'choice': {
+                'type': 'string',
+                'enum': [
+                    'foo',
+                    'bar'
+                ]
+            },
+            'string': {
+                'type': 'string'
+            },
+            'checkbox': {
+                'type': 'boolean',
+            },
+            'color': {
+                'type': 'string',
+                'widget': 'color'
+            },
+            'date': {
+                'type': 'string',
+                'widget': 'date'
+            },
+            'datetime': {
+                'type': 'string',
+                'widget': 'datetime'
+            },
+            'compatible-date': {
+                'type': 'string',
+                'widget': 'compatible-date',
+                'format': 'date'
+            },
+            'compatible-datetime': {
+                'type': 'string',
+                'widget': 'compatible-datetime',
+                'format': 'date-time'
+            },
+            'email': {
+                'type': 'string',
+                'widget': 'email',
+                'format': 'email'
+            },
+            'file': {
+                'type': 'string',
+                'widget': 'file'
+            },
+            'money': {
+                'type': 'string',
+                'widget': 'money'
+            },
+            'number': {
+                'type': 'number',
+                'widget': 'number'
+            },
+            'password': {
+                'type': 'string',
+                'widget': 'password'
+            },
+            'percent': {
+                'type': 'number',
+                'widget': 'percent'
+            },
+            'search': {
+                'type': 'string',
+                'widget': 'search'
+            },
+            'textarea': {
+                'type': 'string',
+                'widget': 'textarea'
+            },
+            'url': {
+                'type': 'string',
+                'widget': 'url'
+            },
+            'tasks': {
+                'type':'array',
+                'title': 'A list of objects',
+                'items': {
+                    'type': 'object',
+                    'properties': {
+                        'name': {
+                            'type': 'string',
+                            'title': 'Name of the Task'
+                        },
+                        'dueTo': {
+                            'type': 'string',
+                            'title': 'Due To',
+                            'widget': 'datetime',
+                            'format': 'date-time'
+                        }
+                    }
+                }
+            },
+            'multiple': {
+                'type': 'array',
+                'title': 'Multiple choices',
+                'items': {
+                    'type': 'string',
+                    'enum': [
+                        '1',
+                        '2'
+                    ],
+                    'enum_titles': [ 'one', 'two' ]
+                },
+                'uniqueItems': true
+            },
+        }
+    }
+    return (
+        <Provider store={store}>
+            <Liform schema={schema} onSubmit={(v) => {console.log(v)}} initialValues={{
+                'tasks' : [
+                    { 'name' : 'first task' },
+                ],
+                'multiple' : [ '1' ]
+            }}/>
+        </Provider>
+    )
+}
+
+ReactDOM.render(
+    <Demo/>,
+    document.getElementById('placeholder')
+)
+

docs/pages/examples/all-widgets/index.md

@@ -0,0 +1 @@
+Here we go.

docs/pages/examples/all-widgets/spec.json

@@ -0,0 +1,3 @@
+{
+  "title": "All the widgets"
+}

docs/pages/examples/arrays/index.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { reducer as formReducer } from 'redux-form'
+import { Provider } from 'react-redux'
+import Liform from '../../../../src/'
+
+const Demo = () => {
+    const reducer = combineReducers({ form: formReducer })
+    const store = createStore(reducer)
+    const schema = {
+        'type':'object',
+        'properties': {
+            'tasks': {
+                'type':'array',
+                'title': 'A list of objects',
+                'items': {
+                    'type': 'object',
+                    'properties': {
+                        'name': {
+                            'type': 'string',
+                            'title': 'Name of the Task'
+                        },
+                        'dueTo': {
+                            'type': 'string',
+                            'title': 'Due To',
+                            'widget': 'datetime',
+                            'format': 'date-time'
+                        }
+                    }
+                }
+            },
+            'multiple': {
+                'type': 'array',
+                'title': 'Multiple choices',
+                'items': {
+                    'type': 'string',
+                    'enum': [
+                        '1',
+                        '2'
+                    ],
+                    'enum_titles': [ 'one', 'two' ]
+                },
+                'uniqueItems': true
+            },
+        }
+    }
+    return (
+        <Provider store={store}>
+            <Liform schema={schema} onSubmit={(v) => {console.log(v)}} initialValues={{
+                'tasks' : [
+                    { 'name' : 'first task' },
+                ],
+                'multiple' : [ '1' ]
+            }}/>
+        </Provider>
+    )
+}
+
+ReactDOM.render(
+    <Demo/>,
+    document.getElementById('placeholder')
+)
+

docs/pages/examples/arrays/index.md

@@ -0,0 +1,5 @@
+Arrays are just regular items. Currently, the default theme has two ways of represent them (you can of course write your own widget for arrays).
+
+An array of other objects will be presented as a collection where you can add more items or remove them.
+
+An array of strings with the restriction `uniqueItems` will be presented as multiple choice list.

docs/pages/examples/arrays/spec.json

@@ -0,0 +1,3 @@
+{
+  "title": "Arrays"
+}

docs/pages/examples/change-layout/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { reducer as formReducer } from 'redux-form'
+import { Provider } from 'react-redux'
+import Liform from '../../../../src/'
+
+const MyBaseForm = props => {
+    const { schema, handleSubmit, theme, error, submitting } = props
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+                {error && <strong>{error}</strong>}
+                {error && <hr/>}
+            </div>
+            {renderField(schema, null, theme || DefaultTheme)}
+            <button className="btn btn-primary" type="submit" disabled={submitting}><span className="glyphicon glyphicon-chevron-right"></span></button>
+        </form>)
+}
+
+const Demo = () => {
+    const reducer = combineReducers({ form: formReducer })
+    const store = createStore(reducer)
+    const schema = {
+        'type':'object',
+        'properties': {
+            'title': { 'type':'string', 'widget': 'textarea', 'title': 'Title' },
+            'type': { 'enum':[ 'One','Two' ], 'type':'string', 'title': 'Select a type' },
+            'color': { 'type':'string', 'widget': 'color', 'title': 'In which color' },
+            'checkbox': { 'type':'boolean', 'title': 'I agree with your terms' }
+        }
+    }
+
+    return (
+        <Provider store={store}>
+            <Liform schema={schema} onSubmit={(v) => {console.log(v)}} baseForm={MyBaseForm}/>
+        </Provider>
+    )
+}
+
+
+ReactDOM.render(
+    <Demo/>,
+    document.getElementById('placeholder')
+)
+

docs/pages/examples/change-layout/index.md

@@ -0,0 +1,2 @@
+What if instead of writing our own widgets we want to change the form's layout?
+The default layout has a simple submit button with the text "Submit" and shows global errors just above of it.

docs/pages/examples/change-layout/spec.json

@@ -0,0 +1,3 @@
+{
+  "title": "Change layout"
+}

docs/pages/examples/combining-schemas/index.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, combineReducers } from 'redux'
+import { reducer as formReducer } from 'redux-form'
+import { Provider } from 'react-redux'
+import Liform from '../../../../src/'
+
+
+const Demo = () => {
+    const reducer = combineReducers({ form: formReducer })
+    const store = createStore(reducer)
+    const schema = {
+        "description" : "schema validating people and vehicles",
+        "type" : "object",
+        "oneOf" : [{
+            "properties" : {
+                "firstName" : {
+                    "type" : "string"
+                },
+                "lastName" : {
+                    "type" : "string"
+                },
+                "sport" : {
+                    "type" : "string"
+                }
+            },
+            "required" : ["firstName"]
+        }, {
+            "properties" : {
+                "vehicle" : {
+                    "type" : "string"
+                },
+                "price" : {
+                    "type" : "integer"
+                }
+            },
+            "additionalProperties":false
+        }]
+    }
+    return (
+        <Provider store={store}>
+            <Liform schema={schema} onSubmit={(v) => {console.log(v)}}/>
+        </Provider>
+    )
+}
+
+ReactDOM.render(
+    <Demo/>,
+    document.getElementById('placeholder')
+)
+

docs/pages/examples/combining-schemas/index.md

@@ -0,0 +1,2 @@
+Lifrm react supports oneOf and allOf, that are ways of combining schemas. [Read about them here](https://spacetelescope.github.io/understanding-json-schema/reference/combining.html).
+

docs/pages/examples/combining-schemas/spec.json

@@ -0,0 +1,3 @@
+{
+  "title": "Combining schemas"
+}