More for the demo, build process, readme updates

Author: eiof

README.md

@@ -35,23 +35,25 @@ React.render(contactForm.parseSchema(schema),
   document.getElementById('json-react-schema'));
 ```
 
-### Contribution and Code of Conduct
-
-Please use a linter that recognizes eslint rules
+### Try the Demo
 
 To run the demo
 * have webpack and webpack-dev-server globally installed
 * `npm install`
-* `npm start`
+* `npm run demo`
 * The app will be served at http://localhost:8080
 
-To run tests
+### Contribution and Code of Conduct
+
+Please use a linter that recognizes eslint rules
+
 * have webpack, webpack-dev-server and jasmine globally installed
 * `npm install`
-* `npm test`
-* Jasmine's test report will output in /spec/index.html
+* `npm test` (Jasmine's test report will output in /spec/index.html)
+* `npm run build`
 
 ### Roadmap
 
 * Support custom keys for children
 * Support native html tags as components, with the option to add custom tag definitions
+* Drop lodash dependency?

demo/components/CheckboxField.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Input } from 'react-bootstrap';
+
+class CheckboxField extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderCheckboxes() {
+    const checkboxes = [];
+    this.props.checkboxes.forEach(function loop(checkbox, index) {
+      checkboxes.push(
+        <Input key={index} type="checkbox" label={checkbox.label} {...checkbox} />
+      );
+    });
+    return checkboxes;
+  }
+
+  render() {
+    const checkboxes = this.renderCheckboxes();
+    return (
+      <div className="checkboxes">
+        {checkboxes}
+      </div>
+    );
+  }
+}
+
+CheckboxField.propTypes = {
+  checkboxes: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired
+    }).isRequired
+  ).isRequired
+};
+
+export default CheckboxField;

demo/index.jsx

@@ -1,21 +1,36 @@
 import React from 'react';
-import ReactJsonSchema from '../lib/ReactJsonSchema';
 import ContactForm from './components/ContactForm';
 import StringField from './components/StringField';
+import CheckboxField from './components/CheckboxField';
+
+// If a package dependency: import ReactJsonSchema from 'react-json-schema';
+import ReactJsonSchema from '../dist/react-json-schema';
 
 const schema = {
   'component': 'ContactForm',
-  'title': 'Tell us a little about yourself...',
+  'title': 'Tell us a little about yourself, we\'d appreciate it',
   'children': [
     {
       'component': 'StringField',
       'label': 'What\'s your name',
       'help': 'It\'s okay, don\'t be shy :)'
+    },
+    {
+      'component': 'CheckboxField',
+      'checkboxes': [
+        {
+          'label': 'I\'m already checked!',
+          'defaultChecked': true
+        },
+        {
+          'label': 'Here\'s another'
+        }
+      ]
     }
   ]
 };
 
-const componentMap = { ContactForm, StringField };
+const componentMap = { ContactForm, StringField, CheckboxField };
 const contactForm = new ReactJsonSchema();
 contactForm.setComponentMap(componentMap);
 

dist/react-json-schema.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _componentMap = null;
+
+var ReactJsonSchema = (function () {
+  function ReactJsonSchema() {
+    _classCallCheck(this, ReactJsonSchema);
+  }
+
+  _createClass(ReactJsonSchema, [{
+    key: 'parseSchema',
+    value: function parseSchema(schema) {
+      var element = null;
+      var elements = null;
+      if (_lodash2['default'].isArray(schema)) {
+        elements = this.parseSubSchemas(schema);
+      } else {
+        element = this.createComponent(schema);
+      }
+      return element || elements;
+    }
+  }, {
+    key: 'parseSubSchemas',
+    value: function parseSubSchemas(subSchemas) {
+      var _this = this;
+
+      var Components = [];
+      _lodash2['default'].forEach(subSchemas, function (subSchema, index) {
+        subSchema.key = index;
+        Components.push(_this.parseSchema(subSchema));
+      });
+      return Components;
+    }
+  }, {
+    key: 'createComponent',
+    value: function createComponent(schema) {
+      var props = _lodash2['default'].clone(schema);
+      props = _lodash2['default'].omit(props, ['component', 'children']);
+      var Component = this.resolveComponent(schema);
+      var Children = this.resolveComponentChildren(schema);
+      return _react2['default'].createElement(Component, props, Children);
+    }
+  }, {
+    key: 'resolveComponent',
+    value: function resolveComponent(schema) {
+      var Component = null;
+      if (_lodash2['default'].has(schema, 'component')) {
+        if (_lodash2['default'].isObject(schema.component)) {
+          Component = schema.component;
+        } else if (_lodash2['default'].isString(schema.component)) {
+          Component = _componentMap[schema.component];
+        }
+      } else {
+        throw new Error('ReactJsonSchema could not resolve a component due to a missing component attribute in the schema.');
+      }
+      return Component;
+    }
+  }, {
+    key: 'resolveComponentChildren',
+    value: function resolveComponentChildren(schema) {
+      return _lodash2['default'].has(schema, 'children') ? this.parseSchema(schema.children) : [];
+    }
+  }, {
+    key: 'getComponentMap',
+    value: function getComponentMap() {
+      return _componentMap;
+    }
+  }, {
+    key: 'setComponentMap',
+    value: function setComponentMap(componentMap) {
+      _componentMap = componentMap;
+    }
+  }]);
+
+  return ReactJsonSchema;
+})();
+
+exports['default'] = ReactJsonSchema;
+module.exports = exports['default'];

dist/react-json-schema.min.js

@@ -1,21 +1,33 @@
 {
   "name": "react-json-schema",
   "version": "0.1.0",
-  "description": "Write component schema in JSON to assemble a react node",
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --progress --colors --inline --config webpack.config.demo.js",
-    "test": "webpack --progress --profile --colors --config webpack.config.spec.js"
-  },
+  "description": "Write component schema in JSON; parse to create react elements.",
   "keywords": [
+    "react",
     "JSON",
-    "React",
-    "JSON",
-    "Schema",
-    "Components"
+    "schema",
+    "components"
   ],
-  "author": "elliottisonfire",
+  "author": {
+    "name": "elliottisonfire",
+    "url": "http://elliottisonfire.com"
+  },
   "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/TechniqueSoftware/react-json-schema/issues"
+  },
+  "scripts": {
+    "prebuild": "rm -rf dist && mkdir dist",
+    "build": "babel lib/ReactJsonSchema.js -o dist/react-json-schema.js",
+    "postbuild": "node_modules/uglify-js/bin/uglifyjs dist/react-json-schema.js -o dist/react-json-schema.min.js",
+    "demo": "webpack-dev-server --progress --colors --inline --config webpack.config.demo.js",
+    "test": "webpack --progress --profile --colors --config webpack.config.spec.js"
+  },
+  "main": "dist/react-json-schema.js",
+  "files": [
+    "lib",
+    "dist"
+  ],
   "dependencies": {
     "lodash": "^3.10.1",
     "react": "^0.13.3"
@@ -32,6 +44,7 @@
     "jsx-loader": "^0.13.2",
     "path": "^0.12.7",
     "react-bootstrap": "^0.25.2",
+    "uglify-js": "^2.4.24",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.0"
   }

package.json

@@ -1 +1 @@
-export * from './react-json-schema.spec.js';
+export * from './ReactJsonSchemaSpec.js';