Added bootstrap4 theme

.editorconfig

@@ -0,0 +1,16 @@
+# http://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 4
+
+[{package.json}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1,3 +1,4 @@
-coverage
-lib
-node_modules
+/node_modules
+packages/*/coverage
+packages/*/lib
+packages/*/node_modules

packages/uniforms-bootstrap4/README.md

@@ -0,0 +1,11 @@
+# uniforms-bootstrap4
+
+> Bootstrap4 UI components for `uniforms`.
+
+## Install
+
+```sh
+$ npm install uniforms-bootstrap4
+```
+
+For more in depth documentation see: [https://github.com/vazco/uniforms/](https://github.com/vazco/uniforms/).

packages/uniforms-bootstrap4/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "uniforms-bootstrap4",
+  "version": "1.0.0-rc.4",
+  "main": "lib/index.js",
+  "jsnext:main": "src/index.js",
+  "description": "Bootstrap4 UI components for uniforms.",
+  "repository": "https://github.com/vazco/uniforms/tree/master/packages/uniforms-bootstrap4",
+  "homepage": "https://github.com/vazco/uniforms/",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vazco/uniforms/issues"
+  },
+  "keyword": [
+    "forms",
+    "meteor",
+    "react",
+    "schema"
+  ],
+  "scripts": {
+    "lint": "./node_modules/.bin/eslint src",
+    "test": "true",
+    "cover": "true",
+    "build": "./node_modules/.bin/babel --out-dir lib src",
+    "watch": "./node_modules/.bin/babel --out-dir lib src --watch",
+    "prepublish": "npm run lint && npm run test && npm run build"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.8.0",
+    "babel-eslint": "^6.0.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "eslint": "^2.9.0",
+    "eslint-config-vazco": "^1.0.0",
+    "eslint-plugin-babel": "^3.2.0",
+    "eslint-plugin-react": "^5.0.1"
+  },
+  "peerDependencies": {
+    "react": "^15.0.2",
+    "uniforms": "^1.0.0-rc.4"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react",
+      "stage-0"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "vazco"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.2.5"
+  }
+}

packages/uniforms-bootstrap4/src/components/fields/AutoField.js

@@ -0,0 +1,34 @@
+import {connectField}  from 'uniforms';
+import {createElement} from 'react';
+
+import NumField    from './NumField';
+import BoolField   from './BoolField';
+import DateField   from './DateField';
+import ListField   from './ListField';
+import NestField   from './NestField';
+import TextField   from './TextField';
+import SelectField from './SelectField';
+
+const Auto = props => {
+    let component = props.component;
+    if (component === undefined) {
+        if (props.allowedValues) {
+            component = SelectField;
+        } else {
+            switch (props.type) {
+                case Date:    component = DateField; break;
+                case Array:   component = ListField; break;
+                case Number:  component = NumField;  break;
+                case Object:  component = NestField; break;
+                case String:  component = TextField; break;
+                case Boolean: component = BoolField; break;
+
+                default: throw new Error(`Unsupported field type: ${props.type.toString()}`);
+            }
+        }
+    }
+
+    return createElement(component, props);
+};
+
+export default connectField(Auto, {includeInChain: false});

packages/uniforms-bootstrap4/src/components/fields/BoolField.js

@@ -0,0 +1,25 @@
+import React          from 'react';
+import {connectField} from 'uniforms';
+
+import FormGroup from './FormGroup';
+
+const Bool = props =>
+    <FormGroup {...props}>
+        <section className={`checkbox${props.inline ? '-inline' : ''}`}>
+            <label onClick={() => props.onChange(!props.value)}>
+                <input
+                    checked={props.value}
+                    className="hidden"
+                    disabled={props.disabled}
+                    name={props.name}
+                    onChange={() => props.onChange(!props.value)}
+                    type="checkbox"
+                />
+                {props.label}
+            </label>
+        </section>
+    </FormGroup>
+;
+
+export default connectField(Bool);
+

packages/uniforms-bootstrap4/src/components/fields/DateField.js

@@ -0,0 +1,36 @@
+import React          from 'react';
+import classnames     from 'classnames';
+import {connectField} from 'uniforms';
+
+import FormGroup from './FormGroup';
+
+const dateFormat = value => value && value.toISOString().slice(0, -8);
+const dateParse = (timestamp, onChange) => {
+    let date = new Date(timestamp);
+    if (date.getFullYear() < 10000) {
+        onChange(date);
+    }
+};
+
+const Date_ = props =>
+    <FormGroup {...props}>
+        <input
+            className={classnames(
+                props.inputClassName,
+                'form-control',
+                {'form-control-danger': props.error}
+            )}
+            disabled={props.disabled}
+            max={dateFormat(props.max)}
+            min={dateFormat(props.min)}
+            name={props.name}
+            onChange={event => dateParse(event.target.valueAsNumber, props.onChange)}
+            type="datetime-local"
+            value={dateFormat(props.value)}
+        />
+    </FormGroup>
+;
+
+Date_.displayName = 'Date';
+
+export default connectField(Date_);

packages/uniforms-bootstrap4/src/components/fields/ErrorsField.js

@@ -0,0 +1,30 @@
+import React       from 'react';
+import classnames  from 'classnames';
+import {BaseField} from 'uniforms';
+
+const ErrorsField = ({className, children, ...props}, {uniforms: {error, schema}}) =>
+    (!error && !children) ? null : (
+        <section className={classnames(
+          'card card-inverse card-danger text-xs-left',
+          className,
+          'error message'
+        )} {...props}>
+            <section className="card-block">
+                <section className="card-text">
+                    {children}
+                    <ul className="list">
+                        {schema.getErrorMessages(error).map((message, index) =>
+                            <li key={index}>
+                                {message}
+                            </li>
+                        )}
+                    </ul>
+                </section>
+            </section>
+        </section>
+    )
+;
+
+ErrorsField.contextTypes = BaseField.contextTypes;
+
+export default ErrorsField;

packages/uniforms-bootstrap4/src/components/fields/FormGroup.js

@@ -0,0 +1,52 @@
+import React      from 'react';
+import classnames from 'classnames';
+
+import gridClassName from '../../lib/gridClassName';
+
+const makeHelp = (help, helpClassName) => help && (
+    <span className={helpClassName || 'text-muted'}>
+        {help}
+    </span>
+);
+
+const FormGroup = ({
+    children,
+    className,         // class name for the whole .form-group
+    disabled,          // boolean, if true, show fields as disabled
+    error,             // error validation response
+    grid,              // grid is either a int [1-11] or object {xs:6,sm:4,md:2}
+    help,              // help text
+    helpClassName,     // class name for the help text (default: 'text-muted')
+    label,             // string label (or false)
+    required,
+    wrapClassName     // class name for the section wrapping the input(s)
+}) =>
+    <section
+        className={classnames(
+            className,
+            'field',
+            'form-group',
+            {disabled, 'has-danger': error, required, row: grid}
+        )}
+    >
+        {label && (
+            <label className={classnames('form-control-label', gridClassName(grid, 'label'))}>
+                {label}
+            </label>
+        )}
+
+        {(grid || wrapClassName) ? (
+            <section className={classnames(wrapClassName, gridClassName(grid, 'input'))}>
+                {children}
+                {makeHelp(help, helpClassName)}
+            </section>
+        ) : (
+            <span>
+                {children}
+                {makeHelp(help, helpClassName)}
+            </span>
+        )}
+    </section>
+;
+
+export default FormGroup;

packages/uniforms-bootstrap4/src/components/fields/ListAddField.js

@@ -0,0 +1,23 @@
+import React          from 'react';
+import classnames     from 'classnames';
+import {connectField} from 'uniforms';
+
+const ListAdd = ({className, parent, value, ...props}) => {
+    const limitNotReached = !(parent.maxCount <= parent.value.length);
+
+    return (
+        <i
+            {...props}
+            className={classnames(
+                'add octicon octicon-plus', // TODO configure to alternate icon
+                className,
+                limitNotReached
+                    ? 'link'
+                    : 'disabled',
+            )}
+            onClick={() => limitNotReached && parent.onChange(parent.value.concat([value]))}
+        />
+    );
+};
+
+export default connectField(ListAdd, {includeParent: true, initialValue: false});

packages/uniforms-bootstrap4/src/components/fields/ListDelField.js

@@ -0,0 +1,27 @@
+import React          from 'react';
+import classnames     from 'classnames';
+import {connectField} from 'uniforms';
+
+const ListFieldDel = ({className, disabled, parent, name, ...props}) => {
+    const fieldIndex      = +name.slice(1 + name.lastIndexOf('.'));
+    const limitNotReached = !(parent.minCount >= parent.value.length);
+
+    return (
+        <i
+            {...props}
+            className={classnames(
+                'del octicon octicon-dash', // TODO configure to alternate icon
+                className,
+                limitNotReached && !disabled
+                    ? 'link'
+                    : 'disabled',
+            )}
+            onClick={() => limitNotReached && parent.onChange(
+                [].concat(parent.value.slice(0,  fieldIndex))
+                  .concat(parent.value.slice(1 + fieldIndex))
+            )}
+       />
+   );
+};
+
+export default connectField(ListFieldDel, {includeParent: true, initialValue: false});