feat: added react-jsonschema-form & form example

Author: ngduc

README.md

@@ -17,11 +17,11 @@ I prefer to keep this setup trim but feel free to sprinkle some more pixie dust
 * Code coverage with [Isparta](https://github.com/douglasduteil/isparta)
 * Debug ES6 code with Webpack 2
 * ESLint ES6 configuration
-* Style guide: [JS Standard Style](docs/style-guide.md) - Want [semicolons?](docs/style-guide.md)
+* Style guide: [JS Standard Style](docs/style-guide.md)
 * Docker - build & launch your project - [Instructions](docs/docker.md)
 * Development: HMR (Hot Module Replacement) for both client & server
 * Production ready
-* Miscellaneous features: react-router-transition, pre-git, bunyan, mustache, GA tracking code, etc.
+* Miscellaneous features: react-router-transition, react-jsonschema-form, pre-git, bunyan, mustache, GA tracking code, etc.
 
 ## Documentation
 

docs/dependencies.md

@@ -17,7 +17,7 @@ NOTES
 * koa-better-body: use ^2.0.1 because ^3.0.0 causes issues with session (for login) (10/14/2016). Need investigation.
 
 * postcss-import: pinned to 8.1.0. Newer version causes this error (10/12/2016)
-    Error: ENOENT: no such file or directory, open '/Users/duc/Documents/wings/wingsui/object-assign'
+  * https://github.com/postcss/postcss-import/issues/207
 
 ```
 Module build failed: (SystemJS) ENOENT: no such file or directory, open '/Users/duc/Documents/work/react-setup/object-assign'

docs/style-guide.md

@@ -8,7 +8,7 @@
 
 React-Setup uses [JS Standard Style](https://github.com/feross/standard)
 
-We don't need semicolons since JS has ASI to take care of that. 
+We don't need semicolons since Javascript has ASI to take care of that.
 
 But if you really want semicolons, change ".eslintrc" to use: `"semi": [2, "always"]` then you can run this command to insert them automatically:
 ```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-setup",
   "description": "A Universal React setup with i18n: Babel 6, Koa 2, React, React Router, React Transmit, React Bootstrap, React-intl, Mocha, Webpack HMR, PostCSS, ESLint.",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "author": "Duc Nguyen (https://github.com/ngduc)",
   "license": "MIT",
   "homepage": "https://github.com/ngduc/react-setup",
@@ -105,6 +105,7 @@
     "react-dom": "^15.3.2",
     "react-inline-css": "^2.3.0",
     "react-intl": "^2.1.5",
+    "react-jsonschema-form": "^0.40.0",
     "react-motion": "^0.4.5",
     "react-router": "^2.8.1",
     "react-router-transition": "^0.0.6",

src/containers/About/About.js

@@ -1,14 +1,39 @@
 import React from 'react'
+import Form from 'react-jsonschema-form'
 
 import { Msg } from './messages'
 
+const schema = {
+  type: 'object',
+  required: ['name'],
+  properties: {
+    name: { type: 'string', title: 'Your name', default: '' },
+    feedback: { type: 'string', title: 'Feedback', default: '' }
+  }
+}
+const uiSchema = {
+  feedback: { 'ui:widget': 'textarea' }
+}
+
 export default class About extends React.Component {
+
+  onSubmit = (ev) => {
+    alert(`Thank you ${ev.formData.name}!`)
+  }
+
   render () {
     return (
       <section>
         <h3><Msg s="title"/></h3>
 
         <p><Msg s="intro"/></p>
+
+        <div>
+          <Form schema={schema} uiSchema={uiSchema}
+                autoFocus={true} showErrorList={false}
+                onSubmit={this.onSubmit}>
+          </Form>
+        </div>
       </section>
     )
   }

src/server.js

@@ -22,7 +22,7 @@ try {
   app.keys = ['seekreet', 'r3act-s3tup-k3y']
 
   app.use(koaCompress({ flush: zlib.Z_SYNC_FLUSH }))
-  app.use(koaConvert(koaStaticCache('static', { gzip: true, maxAge: 1 * 24 * 60 * 60 })))
+  app.use(koaConvert(koaStaticCache('static', { gzip: true, maxAge: 14 * 24 * 60 * 60 }))) // 2 weeks
   app.use(koaConvert(koaSession(app)))
   app.use(koaBetterBody({ textLimit: '5mb', formLimit: '5mb', jsonLimit: '5mb' }))