Merge pull request #100 from mozilla-services/bootstrap

Switched to use Bootstrap semantics

README.md

@@ -3,15 +3,17 @@ react-jsonschema-form
 
 [![Build Status](https://travis-ci.org/mozilla-services/react-jsonschema-form.svg)](https://travis-ci.org/mozilla-services/react-jsonschema-form)
 
-A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/).
+A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/) and using [Bootstrap](http://getbootstrap.com/) semantics by default.
 
-A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
+A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
 
-![](http://i.imgur.com/oxBlg96.png)
+![](http://i.imgur.com/bmQ3HlO.png)
 
 ## Table of Contents
 
   - [Installation](#installation)
+     - [As a npm-based project dependency](#as-a-npm-based-project-dependency)
+     - [As a script served from a CDN](#as-a-script-served-from-a-cdn)
   - [Usage](#usage)
   - [Form customization](#form-customization)
      - [The uiSchema object](#the-uischema-object)
@@ -23,12 +25,14 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
      - [Custom CSS class names](#custom-css-class-names)
      - [Custom labels for enum fields](#custom-labels-for-enum-fields)
      - [Multiple choices list](#multiple-choices-list)
+     - [Autogenerated widget ids](#autogenerated-widget-ids)
      - [Form action buttons](#form-action-buttons)
   - [Advanced customization](#advanced-customization)
      - [Custom widget components](#custom-widget-components)
      - [Custom field components](#custom-field-components)
      - [Custom SchemaField](#custom-schemafield)
      - [Custom titles](#custom-titles)
+  - [Styling your forms](#styling-your-forms)
   - [Schema definitions and references](#schema-definitions-and-references)
   - [Contributing](#contributing)
      - [Development server](#development-server)
@@ -42,27 +46,24 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
 
 Requires React 0.14+.
 
-As a npm-based project dependency:
+
+### As a npm-based project dependency
 
 ```
 $ npm install react-jsonschema-form --save
 ```
 
-As a script dependency served from a CDN:
+> Note: While the library renders [Bootstrap](http://getbootstrap.com/) HTML semantics, you have to build/load the Bootstrap styles on your own.
+
+### As a script served from a CDN
 
 ```html
   <script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
 ```
 
 Source maps are available at [this url](https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js.map).
 
-Note that the CDN version **does not** embed *react* nor *react-dom*.
-
-A default, very basic CSS stylesheet is provided, though you're encouraged to build your own.
-
-```html
-<link rel="stylesheet" href="https://npmcdn.com/react-jsonschema-form@0.10.0/dist/react-jsonschema-form.css">
-```
+> Note: The CDN version **does not** embed *react* nor *react-dom*.
 
 ## Usage
 
@@ -73,7 +74,7 @@ import { render } from "react-dom";
 import Form from "react-jsonschema-form";
 
 const schema = {
-  title: "Todo Tasks",
+  title: "Todo",
   type: "object",
   required: ["title"],
   properties: {
@@ -98,9 +99,9 @@ render((
 ), document.getElementById("app"));
 ```
 
-That should give something like this (if you use the default stylesheet):
+That should give something like this (if you took care of loading the standard [Bootstrap](http://getbootstrap.com/) stylesheet):
 
-![](http://i.imgur.com/qKFvod6.png)
+![](http://i.imgur.com/DZQYPyu.png)
 
 ## Form customization
 
@@ -256,6 +257,18 @@ The default behavior for array fields is a list of text inputs with add/remove b
 
 See the "Arrays" section of the demo app and [this issue](https://github.com/mozilla-services/react-jsonschema-form/issues/41) for more information.
 
+### Autogenerated widget ids
+
+By default, the lib will generate ids unique to the form for all rendered widgets. But if you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:
+
+```js
+const uiSchema = {
+  "ui:rootFieldId": "myform"
+};
+```
+
+So all widgets will have an id prefixed with `myform`.
+
 ### Form action buttons
 
 You can provide custom buttons to your form via the `Form` component's `children`. A default submit button will be rendered if you don't provide children to the `Form` component.
@@ -458,6 +471,22 @@ render((
 ), document.getElementById("app"));
 ```
 
+## Styling your forms
+
+This library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics. That means your forms will be beautiful by default if you're loading its stylesheet in your page.
+
+You're not necessarily forced to use Bootstrap; while it uses its semantics, it also provides a bunch of other class names so you can bring new styles or override default ones quite easily in your own personalized stylesheet. That's just HTML after all :)
+
+If you're okay with using styles from the Bootstrap ecosystem though, then the good news is that you have access to many themes for it, which are compatible with our generated forms!
+
+Here are some examples from the [playground](http://mozilla-services.github.io/react-jsonschema-form/), using some of the [Bootswatch](http://bootswatch.com/) free themes:
+
+![](http://i.imgur.com/1Z5oUK3.png)
+![](http://i.imgur.com/IMFqMwK.png)
+![](http://i.imgur.com/HOACwt5.png)
+
+Last, if you really really want to override the semantics generated by the lib, you can always create and use your own custom [widget](#custom-widget-components), [field](#custom-field-components) and/or [schema field](#custom-schemafield) components.
+
 ## Schema definitions and references
 
 This library partially supports [inline schema definition dereferencing]( http://json-schema.org/latest/json-schema-core.html#rfc.section.7.2.3), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:

devServer.js

@@ -19,10 +19,6 @@ app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, "playground", "index.html"));
 });
 
-app.get("/react-jsonschema-form.css", function(req, res) {
-  res.sendFile(path.join(__dirname, "css", "react-jsonschema-form.css"));
-});
-
 app.listen(port, "localhost", function(err) {
   if (err) {
     console.log(err);

package.json

@@ -4,11 +4,10 @@
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
-    "build:css": "cp css/react-jsonschema-form.css dist/",
     "build:lib": "rimraf lib && NODE_ENV=production babel -d lib/ src/",
     "build:dist": "rimraf dist && NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
     "build:playground": "rimraf build && NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
-    "dist": "npm run build:lib && npm run build:dist && npm run build:css",
+    "dist": "npm run build:lib && npm run build:dist",
     "lint": "eslint src test",
     "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
     "publish-to-npm": "npm run build:readme && npm run dist && npm publish",
@@ -37,7 +36,7 @@
   "devDependencies": {
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
@@ -47,7 +46,7 @@
     "chai": "^3.3.0",
     "codemirror": "^5.13.2",
     "css-loader": "^0.23.1",
-    "eslint": "^2.4.0",
+    "eslint": "^2.5.1",
     "eslint-plugin-react": "^4.2.3",
     "estraverse": "^4.2.0",
     "estraverse-fb": "^1.3.1",