hippo-fw 0.9.1 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 360b0939a3298ae53f570048af34125777a3f202
-  data.tar.gz: 8bb44bc92271a71e436ae7fc55102c629c878301
+  metadata.gz: 646a4300a544e32e68520975fb4b9bad15e7ddd4
+  data.tar.gz: 98f55a67a95e64261cff0560af01143f2afaddeb
 SHA512:
-  metadata.gz: 24c7a833728de14eeaec24dcae6fce1805c877f60d06ba579451a5d93730dbb61cc59b9559e5a7313fca099ec198ce5b27e8f05268299be026dc940e2ce29521
-  data.tar.gz: 16d0cf71e576fd65d88a82defa3820afc943285e938f1626ebc6feed9b34c380e99ae1cee3852150fec24bc98dc2c6eb3bfe3b48d3032e9d3579f892e1c8a91d
+  metadata.gz: cfd18318f831660561a8e30f848c2b8f52540a2dc982b780ef7a4f331ac163b9c9073c2348dacd3fc22d62accd7367fd92b57563089592a8bd1562857df2eb25
+  data.tar.gz: 7862bfe0cc3c3e977c9958be2a8600522d9dbbf597d62968250d538ab0fc23393fab759c89a8789d9fc0c0722308d2ba4bc2daeb75bee5e8b5b2f41eada9d15a

data/.ruby-version

@@ -1 +1 @@
-2.4.0
+2.4.1

data/Gemfile

@@ -1,17 +1,22 @@
 source 'https://rubygems.org'
 
-gem "yard-activerecord",
-    git: 'https://github.com/nathanstitt/yard-activerecord',
-    branch: 'develop'
+gemspec
 
-gem "temping", '~> 3.9.0'
+gem "activerecord-multi-tenant", git: 'https://github.com/citusdata/activerecord-multi-tenant.git', branch: 'release-0.5.1'
 
-gem 'puma'
-gem 'pry-byebug'
+# gem "activerecord-multi-tenant", git: "https://github.com/nathanstitt/activerecord-multi-tenant", branch: 'query_rewriter'
 
-gem "knitter", git: "https://github.com/nathanstitt/knitter", branch: 'master'
-gem "webpack_driver", git: "https://github.com/nathanstitt/webpack_driver", branch: 'master'
-gem "guard-jest", git: "https://github.com/nathanstitt/guard-jest", branch: 'master'
-gem "bump"
+# gem "webpack_driver", git: "https://github.com/nathanstitt/webpack_driver", branch: 'master'
 
-gemspec
+group :development, :test do
+    gem "yard-activerecord",
+        git: 'https://github.com/nathanstitt/yard-activerecord',
+        branch: 'develop'
+
+    gem "temping", '~> 3.9.0'
+
+    gem 'puma'
+    gem 'pry-byebug'
+#    gem "guard-jest", git: "https://github.com/nathanstitt/guard-jest", branch: 'master'
+    gem "bump"
+end

data/Rakefile

@@ -1,6 +1,5 @@
 require 'bundler/setup'
 require "bundler/gem_tasks"
-require 'rake/testtask'
 require 'yard'
 require 'yard-activerecord'
 require_relative 'yard_ext/all'
@@ -11,12 +10,6 @@ require "bump/tasks"
 
 Dir.glob('tasks/*.rake').each { |r| load r}
 
-Rake::TestTask.new do |t|
-    t.libs << 'test'
-    t.pattern = "test/*_test.rb"
-end
-
-
 YARD::Rake::YardocTask.new do |t|
     t.files   = ['lib/skr/concerns/*.rb','lib/**/*.rb','db/schema.rb']
     t.options = ["--title=Stockor Core Documentation",

data/bin/hippo

@@ -1,5 +1,9 @@
 #!/usr/bin/env ruby
 
-require_relative '../lib/hippo/cli'
+require 'rubygems'
+Bundler.require :default, ENV['HIPPO_ENV'] || "development"
+
+require 'hippo'
+require 'hippo/cli'
 
 Hippo::CLI.start(ARGV)

data/client/hippo/__mocks__/config.js

@@ -1,9 +1,8 @@
+/* global jest */
 window.localStorage = {
-
     getItem() {
         return '{}';
     },
-
 };
 
 const config = jest.genMockFromModule('hippo/config');
@@ -11,7 +10,7 @@ const config = jest.genMockFromModule('hippo/config');
 config.bootstrapUserData = jest.fn();
 config.reset = jest.fn();
 Object.defineProperty(config, 'api_path', {
-    value: '/api'
+    value: '/api',
 });
 
 export default config;

data/client/hippo/boot.jsx

@@ -5,8 +5,6 @@ import { delay } from 'lodash';
 import { AppContainer } from 'react-hot-loader';
 import { withAsyncComponents } from 'react-async-component';
 
-import Config from './config';
-
 const Workspace = require('hippo/workspace').default;
 
 let Root;

data/client/hippo/components/asset.jsx

@@ -45,7 +45,7 @@ export default class Asset extends React.PureComponent {
     }
 
     preview() {
-        if (this.asset) {
+        if (this.asset && this.asset.exists) {
             return this.asset.isImage ?
                 <img src={this.asset.previewUrl} alt="" /> :
                 <DocumentIcon size="xlarge" type="status" />;

data/client/hippo/components/form.jsx

@@ -9,8 +9,7 @@ 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';
+export { FormField, FormState } from './form/model';
 
 function buildTest(options, defaultOptions) {
     return merge({}, defaultOptions, options);
@@ -44,8 +43,13 @@ 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 validURL(options = {}) {
+    return buildTest(options, {
+        message: 'must be a valid address',
+        test(url) {
+            return (options.allowBlank && !url) || isURL(url || '');
+        },
+    });
 }
 
 export function booleanValue(options = {}) {

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

@@ -5,12 +5,13 @@ import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Col, getColumnProps } from 'react-flexbox-grid';
 
+import invariant from 'invariant';
 import Field     from 'grommet/components/FormField';
 import NumberInput from 'grommet/components/NumberInput';
 
 import { titleize } from '../../lib/util';
-import FormFieldPropType from './field-prop-type';
 
+import { FormField as FormFieldModel }   from './model';
 import DateWrapper     from './fields/date-wrapper';
 import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
@@ -27,8 +28,17 @@ const TypesMapping = {
 
 };
 
-@inject('formFields') @observer
+
+@inject('formState')
+@observer
 export default class FormField extends React.PureComponent {
+    static propTypes = Object.assign({
+        label: PropTypes.string,
+        name:  PropTypes.string.isRequired,
+        className: PropTypes.string,
+        type: PropTypes.string,
+    }, Col.PropTypes)
+
     static defaultProps = {
         label:     '',
         className: '',
@@ -39,33 +49,37 @@ export default class FormField extends React.PureComponent {
         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)
+    componentWillMount() {
+        this.field = this.props.formState.setField(this.props.name, this.props);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        invariant(nextProps.name === this.props.name,
+                  `cannot update 'name' prop from ${this.props.name} to ${nextProps.name}`);
+        this.field.update(this.props);
+    }
 
     render() {
         const {
-            name, className, autoFocus, type, children, label, formFields, ...otherProps
+            name, className, autoFocus, type, children, label,
+            validate: _, formState: __, help: ___, ...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}
+                    error={this.field.invalidMessage}
+                    help={this.field.help}
                 >
                     <InputTag
                         name={name}
                         autoFocus={autoFocus}
                         ref={f => (this.inputRef = f)}
-                        value={field.value || ''}
+                        value={this.field.value || ''}
                         type={InputTag === TypesMapping.text ? this.props.type : undefined}
-                        {...field.events}
+                        {...this.field.events}
                         {...otherProps}
                     />
                     {children}

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

@@ -1,30 +1,41 @@
-/* eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["field", "model"] }] */
-import { observable, computed, when, action, } from 'mobx';
+/* 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,
+    pick, isFunction, mapValues, every, get, filter, isNil, each,
 } from 'lodash';
 
-class Field {
+export class FormField {
     name: '';
     @observable isTouched = false
+    @observable isChanged = false;
     @observable value = '';
     @observable message = '';
+    @observable help;
+    @observable validate;
+    @observable default;
 
     constructor(name, attrs) {
         this.name = name;
-        let extendWith = isFunction(attrs) ? attrs() : attrs;
-        if (!isObject(extendWith)) {
-            extendWith = { test: extendWith };
-        }
-        extend(this, extendWith);
+        this.update(attrs);
         if (this.default) {
             this.value = this.default;
         }
     }
 
+    update(attrs) {
+        each(pick(attrs, [
+            'name', 'default', 'help', 'validate',
+        ]), (v, k) => {
+            this[k] = isFunction(v) ? v.call(this) : v;
+        });
+    }
+
     @action.bound
-    onChange(ev) {
-        this.value = ev.target.value;
+    onChange({ target: { value: updatedValue } }) {
+        this.isChanged = (this.value !== updatedValue);
+        this.value = updatedValue;
     }
 
     @action.bound
@@ -33,11 +44,12 @@ class Field {
     }
 
     @computed get isValid() {
-        return !!(!this.test || this.test(this.value));
+        if (!this.validate) { return true; }
+        return !!this.validate.test(this.value);
     }
 
     @computed get invalidMessage() {
-        return (!this.isValid && this.isTouched) ? this.message : null;
+        return (!this.isValid && this.isTouched) ? this.validate.message : null;
     }
 
     get events() {
@@ -47,33 +59,66 @@ class Field {
 
         };
     }
+
+    reset() {
+        this.value = '';
+        this.isTouched = false;
+        this.isChanged = false;
+    }
 }
 
 
-export default class FormFieldDefinitions {
+export class FormState {
 
     fields = observable.map();
 
-    constructor(fields) {
+    @action
+    setFields(fields) {
         this.fields.replace(
-            mapValues(fields, (field, name) => new Field(name, field)),
+            mapValues(fields, (field, name) => new FormField(name, field)),
         );
     }
 
+    @action
+    setField(name, attrs) {
+        let field = this.fields.get(name);
+        if (field) {
+            field.update(attrs);
+        } else {
+            field = new FormField(name, attrs);
+            this.fields.set(name, field);
+        }
+        return field;
+    }
+
+    @computed get invalidFields() {
+        return filter(this.fields.values(), { isValid: false });
+    }
+
     @computed get isValid() {
-        return every(this.fields.values(), 'isValid');
+        return 0 === this.invalidFields.length;
     }
 
     @computed get isTouched() {
         return !every(this.fields.values(), { isTouched: false });
     }
 
-    get(name) {
-        return this.fields.get(name);
+    get(path, defaultValue) {
+        const [name, ...rest] = path.split('.');
+        const field = this.fields.get(name);
+        if (!field) { return defaultValue; }
+        if (rest.length) {
+            return get(field, rest.join('.'), defaultValue);
+        }
+        return field;
+    }
+
+    reset() {
+        this.fields.forEach(field => field.reset());
     }
 
     set(values) {
-        this.fields.forEach((field, name) => (field.value = values[name]));
+        this.fields.forEach((field, name) => (field.value = isNil(values[name]) ? '' : values[name]));
     }
 
     setFromModel(model) {

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

@@ -2,30 +2,36 @@ import React from 'react';
 
 import { Provider, observer } from 'mobx-react';
 
-import FormFields from './model';
+import { FormState } from './model';
 
 @observer
 export default class FormWrapper extends React.PureComponent {
 
     static propTypes = {
         children: React.PropTypes.node.isRequired,
-        fields: React.PropTypes.instanceOf(FormFields),
+        state: React.PropTypes.instanceOf(FormState),
         tag: React.PropTypes.string,
         className: React.PropTypes.string,
     }
 
+    static get defaultProps() {
+        return {
+            state: new FormState(),
+        };
+    }
+
     renderTagless() {
         return (
-            <Provider formFields={this.props.fields}>
+            <Provider formState={this.props.state}>
                 {this.props.children}
             </Provider>
         );
     }
 
     renderTagged() {
-        const { tag: Tag, fields, children, ...otherProps } = this.props;
+        const { tag: Tag, state, children, ...otherProps } = this.props;
         return (
-            <Provider formFields={fields}>
+            <Provider formState={state}>
                 <Tag {...otherProps}>
                     {children}
                 </Tag>

data/client/hippo/components/icon.jsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 
 const DEFAULT_TOOLTIP_PROPS = { placement: 'top', trigger: 'click' };
 
-export default class Icon extends React.Component {
+export default class Icon extends React.PureComponent {
 
     static propTypes = {
         type:         PropTypes.string.isRequired,

data/client/hippo/components/master-detail.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { observable, action, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { delay } from 'lodash';
+
+import './master-detail.scss';
+
+const DELAY_TIME = 500;
+
+@observer
+export default class MasterDetail extends React.PureComponent {
+
+
+    static propTypes = {
+        master: PropTypes.element.isRequired,
+        detail: PropTypes.element,
+    }
+
+    @observable detailVisible;
+
+    componentWillUnmount() {
+        if (this.pendingDefer) { this.clearTimeout(this.pendingDefer); }
+    }
+
+    @action.bound
+    setVisible(val) {
+        this.pendingDefer = delay(() => {
+            this.pendingDefer = null;
+            this.detailVisible = val;
+        }, DELAY_TIME);
+    }
+
+    setVisible
+    componentWillReceiveProps(nextProps) {
+        if (this.props.detail && !nextProps.detail) {
+            this.setVisible(false);
+        } else if (!this.props.detail && nextProps.detail) {
+            this.setVisible(true);
+        }
+    }
+
+    @computed get className() {
+        return cn('master-detail-wrapper', {
+            'detail-visible': this.detailVisible,
+            'has-detail': this.props.detail,
+            'detail-removed': this.detailVisible && !this.props.detail,
+        });
+    }
+
+    render() {
+        return (
+            <div
+                className={this.className}
+            >
+                <div className="master">
+                    {this.props.master}
+                </div>
+                <div className="detail">
+                    {this.props.detail}
+                </div>
+            </div>
+        );
+    }
+}