hippo-fw 0.9.1

data/client/hippo/components/data-table/table-styles.scss

@@ -0,0 +1,34 @@
+@import "~grommet/scss/grommet-core/settings";
+#hippo-root {
+    .data-table {
+        flex: 1;
+        max-width: 100%;
+        width: 100%;
+        border-collapse: collapse;
+
+        .ReactVirtualized__Table__headerRow {
+            font-weight: $text-font-weight;
+
+            border-bottom: 1px solid $border-color;
+
+            #{$dark-background-context} {
+                border-color: $colored-border-color;
+            }
+
+            #{$light-background-context} {
+                border-color: $border-color;
+            }
+        }
+
+        .ReactVirtualized__Table__row {
+            transition: 0.4s height;
+            &.editing {
+                border-top: 1px solid $border-color;
+                border-bottom: 1px solid $border-color;
+            }
+            &.o {
+                background-color: lighten($border-color, 75%);
+            }
+        }
+    }
+}

data/client/hippo/components/enabled.js.erb

@@ -0,0 +1,5 @@
+<% Hippo::Components.enabled_with_dependencies(self) do | component |
+    require_asset "hippo/components/#{component}"
+end %>
+
+<% Hippo::Screen.uncache_file_on_update(self) %>

data/client/hippo/components/field-validation.js

@@ -0,0 +1,7 @@
+export default function FieldValidation(props, propName) {
+    if (!props[propName]) {
+        return new Error(`${propName} is missing`);
+    } else if (!props[propName][props.name]) {
+        return new Error(`${propName} does not have ${props.name}`);
+    }
+}

data/client/hippo/components/form.jsx

@@ -0,0 +1,65 @@
+import {
+    negate, isNil, isString, isObject, mapValues, extend, forIn, isFunction, pick, isBoolean, get, keys,
+    merge,
+} from 'lodash';
+import moment from 'moment';
+import isEmail from 'validator/lib/isEmail';
+import isURL from 'validator/lib/isURL';
+import { isBlank } from '../lib/util';
+
+export Form from './form/wrapper';
+export Field from './form/fields';
+export FieldDefinitions from './form/model';
+export FormFieldPropType from './form/field-prop-type';
+
+function buildTest(options, defaultOptions) {
+    return merge({}, defaultOptions, options);
+}
+
+export function hasLength(length) {
+    const options = isObject(length) ? length : { length };
+    return buildTest(options, {
+        message: `must be of length ${length}`,
+        test(s) {
+            return s && (s.length >= this.length);
+        },
+    });
+}
+
+const NUMBER = /^[+-]?(\d*\.)?\d+$/;
+export function numberValue(options = {}) {
+    return buildTest(options, { message: 'must be a number', test: v => NUMBER.test(v) });
+}
+
+export function stringValue(options) {
+    return buildTest(options, { message: 'must be a string', isString });
+}
+
+const PHONE = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
+export function validPhone(options = {}) {
+    return buildTest(options, { message: 'need 10 digit phone number', test: v => PHONE.test(v) });
+}
+
+export function validEmail(options) {
+    return buildTest(options, { message: 'must be a valid email', test: email => isEmail(email || '') });
+}
+
+export function validURL(options) {
+    return buildTest(options, { message: 'must be a valid address', test: url => isURL(url || '') });
+}
+
+export function booleanValue(options = {}) {
+    return buildTest(options, { message: 'must be true or false', test: isBoolean });
+}
+
+export function nonBlank(options = {}) {
+    return buildTest(options, { message: 'is required', test: negate(isBlank) });
+}
+
+export function dateValue(options = {}) {
+    return buildTest(options, { message: 'must be valid date', test: v => moment(v, options.format).isValid() });
+}
+
+export function field(options) {
+    return buildTest(options, { test: () => true });
+}

data/client/hippo/components/form/field-prop-type.js

@@ -0,0 +1,16 @@
+import { get } from 'lodash';
+
+export default function FormFieldPropType(props) {
+    const fieldName = 'name';
+    const formPropName = 'formFields';
+    if (!get(props, `${formPropName}.fields`)) {
+        return new Error(`Missing form prop ${formPropName}`);
+    }
+    if (!props[fieldName]) {
+        return new Error(`Missing field name identifier prop ${fieldName}`);
+    }
+    if (!props[formPropName].fields.get(props[fieldName])) {
+        return new Error(`Form does not have a field named ${props[fieldName]}`);
+    }
+    return null;
+}

data/client/hippo/components/form/fields.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { inject, observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Col, getColumnProps } from 'react-flexbox-grid';
+
+import Field     from 'grommet/components/FormField';
+import NumberInput from 'grommet/components/NumberInput';
+
+import { titleize } from '../../lib/util';
+import FormFieldPropType from './field-prop-type';
+
+import DateWrapper     from './fields/date-wrapper';
+import SelectWrapper   from './fields/select-wrapper';
+import TextWrapper     from './fields/text-wrapper';
+import CheckBoxWrapper from './fields/checkbox-wrapper';
+
+import './fields/form-field.scss';
+
+const TypesMapping = {
+    text:     TextWrapper,
+    date:     DateWrapper,
+    select:   SelectWrapper,
+    number:   NumberInput,
+    checkbox: CheckBoxWrapper,
+
+};
+
+@inject('formFields') @observer
+export default class FormField extends React.PureComponent {
+    static defaultProps = {
+        label:     '',
+        className: '',
+        type:      'text',
+    }
+
+    focus() {
+        if (this.inputRef) { this.inputRef.focus(); }
+    }
+
+    static propTypes = Object.assign({
+        label: PropTypes.string,
+        name:  PropTypes.string.isRequired,
+        formFields: FormFieldPropType,
+        className: PropTypes.string,
+        type: PropTypes.string,
+    }, Col.PropTypes)
+
+    render() {
+        const {
+            name, className, autoFocus, type, children, label, formFields, ...otherProps
+        } = getColumnProps(this.props);
+        const InputTag = TypesMapping[type] || TypesMapping.text;
+        const field = formFields.get(name);
+        return (
+            <div className={classnames('form-field', className)}>
+                <Field
+                    label={label || titleize(name)}
+                    error={field.invalidMessage}
+                >
+                    <InputTag
+                        name={name}
+                        autoFocus={autoFocus}
+                        ref={f => (this.inputRef = f)}
+                        value={field.value || ''}
+                        type={InputTag === TypesMapping.text ? this.props.type : undefined}
+                        {...field.events}
+                        {...otherProps}
+                    />
+                    {children}
+                </Field>
+            </div>
+        );
+    }
+}

data/client/hippo/components/form/fields/checkbox-wrapper.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import CheckBox from 'grommet/components/CheckBox';
+
+@observer
+export default class CheckBoxWrapper extends React.PureComponent {
+    @action.bound onBlur(ev) {
+        this.props.onBlur({ target: { value: ev.target.checked } });
+    }
+    @action.bound onChange({ target: { checked: value } }) {
+        this.props.onChange({ target: { value } });
+    }
+    render() {
+        return (
+            <CheckBox
+                {...this.props} onChange={this.onChange}
+                onBlur={this.onBlur} checked={!!this.props.value} />
+        );
+    }
+}

data/client/hippo/components/form/fields/date-wrapper.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action, observable } from 'mobx';
+import moment from 'moment';
+import DateTime  from 'grommet/components/DateTime';
+
+@observer
+export default class DateWrapper extends React.PureComponent {
+    static defaultProps = { format: 'M/D/YYYY h:mm a' }
+    static childContextTypes = { onDropChange: PropTypes.func }
+    @observable isSelecting;
+    @observable dateValue;
+
+    getChildContext() {
+        return { onDropChange: this.onDropChange };
+    }
+
+    @action.bound onDropChange(active) {
+        const ev = { target: { value: moment(this.dateValue, this.props.format, true).toDate() } };
+        if (this.isSelecting && !active) {
+            this.props.onBlur(ev);
+        }
+        this.isSelecting = active;
+    }
+
+    @action.bound onDateChange(date) {
+        this.dateValue = date;
+        this.props.onChange({ target: { value: this.dateValue } });
+    }
+
+
+    @action.bound onBlur(ev) {
+        this.dateValue = moment(ev.target.value, this.props.format).toDate();
+        const event = { target: { value: this.dateValue } };
+        this.props.onChange(event);
+        this.props.onBlur(event);
+    }
+
+    render() {
+        return (
+            <DateTime
+                {...this.props}
+                onChange={this.onDateChange}
+                onBlur={this.onBlur}
+            />
+        );
+    }
+}

data/client/hippo/components/form/fields/form-field.scss

@@ -0,0 +1,4 @@
+.form-field {
+    margin-top: 0.5rem;
+    .grommetux-form-field { width: 100%; }
+}

data/client/hippo/components/form/fields/select-wrapper.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action, computed, observable } from 'mobx';
+import Select from 'grommet/components/Select';
+import { get, find, defer } from 'lodash';
+
+@observer
+export default class SelectFieldWrapper extends React.PureComponent {
+    @action.bound
+    onSelectChange({ value: { id } }) {
+        const ev = { target: { value: id } };
+        this.props.onChange(ev);
+        this.props.onBlur(ev);
+    }
+
+    @computed get value() {
+        return this.props.value ? get(find(this.props.collection, { id: this.props.value }), 'label', '') : '';
+    }
+    render() {
+        const { collection, ...otherProps } = this.props;
+        return (
+            <Select
+                {...otherProps}
+                value={this.value}
+                options={collection}
+                onChange={this.onSelectChange}
+            />
+        );
+    }
+}

data/client/hippo/components/form/fields/text-wrapper.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import TextInput from 'grommet/components/TextInput';
+
+
+@observer
+export default class TextWrapper extends React.PureComponent {
+    @action.bound focus() {
+        this.inputRef.componentRef.focus();
+    }
+    render() {
+        return (
+            <TextInput
+                ref={f => (this.inputRef = f)}
+                {...this.props} onDOMChange={this.props.onChange}
+            />
+        );
+    }
+}

data/client/hippo/components/form/model.js

@@ -0,0 +1,95 @@
+/* eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["field", "model"] }] */
+import { observable, computed, when, action, } from 'mobx';
+import {
+    extend, isObject, isFunction, mapValues, every, find, get,
+} from 'lodash';
+
+class Field {
+    name: '';
+    @observable isTouched = false
+    @observable value = '';
+    @observable message = '';
+
+    constructor(name, attrs) {
+        this.name = name;
+        let extendWith = isFunction(attrs) ? attrs() : attrs;
+        if (!isObject(extendWith)) {
+            extendWith = { test: extendWith };
+        }
+        extend(this, extendWith);
+        if (this.default) {
+            this.value = this.default;
+        }
+    }
+
+    @action.bound
+    onChange(ev) {
+        this.value = ev.target.value;
+    }
+
+    @action.bound
+    onBlur() {
+        this.isTouched = true;
+    }
+
+    @computed get isValid() {
+        return !!(!this.test || this.test(this.value));
+    }
+
+    @computed get invalidMessage() {
+        return (!this.isValid && this.isTouched) ? this.message : null;
+    }
+
+    get events() {
+        return {
+            onBlur: this.onBlur,
+            onChange: this.onChange,
+
+        };
+    }
+}
+
+
+export default class FormFieldDefinitions {
+
+    fields = observable.map();
+
+    constructor(fields) {
+        this.fields.replace(
+            mapValues(fields, (field, name) => new Field(name, field)),
+        );
+    }
+
+    @computed get isValid() {
+        return every(this.fields.values(), 'isValid');
+    }
+
+    @computed get isTouched() {
+        return !every(this.fields.values(), { isTouched: false });
+    }
+
+    get(name) {
+        return this.fields.get(name);
+    }
+
+    set(values) {
+        this.fields.forEach((field, name) => (field.value = values[name]));
+    }
+
+    setFromModel(model) {
+        if (get(model, 'syncInProgress.isFetch')) {
+            when(
+                () => !get(model, 'syncInProgress.isFetch'),
+                () => this.set(model),
+            );
+        } else {
+            this.set(model);
+        }
+    }
+
+    persistTo(model) {
+        this.fields.forEach((field, name) => (model[name] = field.value));
+        return Promise.resolve(model);
+    }
+
+}

data/client/hippo/components/form/wrapper.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Provider, observer } from 'mobx-react';
+
+import FormFields from './model';
+
+@observer
+export default class FormWrapper extends React.PureComponent {
+
+    static propTypes = {
+        children: React.PropTypes.node.isRequired,
+        fields: React.PropTypes.instanceOf(FormFields),
+        tag: React.PropTypes.string,
+        className: React.PropTypes.string,
+    }
+
+    renderTagless() {
+        return (
+            <Provider formFields={this.props.fields}>
+                {this.props.children}
+            </Provider>
+        );
+    }
+
+    renderTagged() {
+        const { tag: Tag, fields, children, ...otherProps } = this.props;
+        return (
+            <Provider formFields={fields}>
+                <Tag {...otherProps}>
+                    {children}
+                </Tag>
+            </Provider>
+        );
+    }
+
+    render() {
+        return this.props.tag ? this.renderTagged() : this.renderTagless();
+    }
+
+}