hippo-fw 0.9.1

data/client/hippo/styles/fonts/font-awesome.scss

@@ -0,0 +1,18 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

data/client/hippo/styles/fonts/index.scss

@@ -0,0 +1,2 @@
+$fa-css-prefix: "icon";
+@import "./font-awesome";

data/client/hippo/styles/global.scss

@@ -0,0 +1,3 @@
+@import "global/fancy-header";
+@import "global/mixins";
+@import "global/styles";

data/client/hippo/styles/global/fancy-header.scss

@@ -0,0 +1,14 @@
+.fancy-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 400px;
+    :first-child {
+        border: 1px solid black;
+        border-width: 1px 0;
+        padding: 20px;
+        line-height: 0.5;
+        text-align: center;
+    }
+}

data/client/hippo/styles/global/mixins.scss

@@ -0,0 +1,5 @@
+@mixin hidden-print {
+  @media print {
+      display: none !important;
+  }
+}

data/client/hippo/styles/global/styles.scss

@@ -0,0 +1,6 @@
+a               { cursor: pointer;       }
+.cursor-pointer,
+.clickable      { cursor: pointer;       }
+.non-printable  { @include hidden-print; }
+.align-right    { text-align: right;     }
+.align-center   { text-align: center;    }

data/client/hippo/styles/variables.scss

@@ -0,0 +1,28 @@
+$hippo-field-value-height: 30px;
+
+$hippo-color-selections: (
+    #4D4D4D, // (gray)
+    #5DA5DA, // (blue)
+    #FAA43A, // (orange)
+    #60BD68, // (green)
+    #F17CB0, // (pink)
+    #B2912F, // (brown)
+    #B276B2, // (purple)
+    #DECF3F, // (yellow)
+    #F15854, // (red)
+    #F5DEB3  // (tan)
+);
+
+$hippo-text-color-selections: (
+    // background colors
+    white, // (gray)
+    black, // (blue)
+    white, // (orange)
+    black, // (green)
+    black, // (pink)
+    white, // (brown)
+    white, // (purple)
+    black, // (yellow)
+    white, // (red)
+    black  // (tan)
+);

data/client/hippo/testing/index.js

@@ -0,0 +1,6 @@
+export React from 'react';
+
+export { getScreenInstance, Snapshot } from './screens';
+
+jest.mock('hippo/config');
+jest.mock('hippo/models/sync');

data/client/hippo/testing/matchers.js

@@ -0,0 +1,14 @@
+module.exports = {
+
+    toHaveRendered(wrapper, selector) {
+        const matchCount = wrapper.find(selector).length;
+        const result = { pass: 1 === matchCount };
+        if (result.pass) {
+            result.message = `${selector} was found`;
+        } else {
+            result.message = `Expected wrapper to contain '${selector}' only once, but it was found ${matchCount} times`;
+        }
+        return result;
+    },
+
+};

data/client/hippo/testing/mocks/fetch.js

@@ -0,0 +1,54 @@
+/* global jest */
+
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * Implements basic mock for the fetch interface use `whatwg-fetch` polyfill.
+ *
+ * See https://fetch.spec.whatwg.org/
+ */
+
+
+function ResponseWrapper(body) {
+    const response = {};
+    response.body = ('object' === typeof body) ? JSON.stringify(body) : body;
+    const actualClone = response.clone;
+    response.clone = () => {
+        const clone = actualClone.call(response);
+        const [body1, body2] = body.tee();
+        response.body = body1;
+        clone.body = body2;
+        return clone;
+    };
+    response.json = () => (response.body ? JSON.parse(response.body) : {});
+    return response;
+}
+
+const fetch = jest.fn();
+
+fetch.Response = ResponseWrapper;
+
+fetch.mockResponse = (body, init) => {
+    fetch.mockImplementation(
+    () => Promise.resolve(new ResponseWrapper(body, init)),
+  );
+};
+
+fetch.mockResponseOnce = (body, init) => {
+    fetch.mockImplementationOnce(
+    () => Promise.resolve(new ResponseWrapper(body, init)),
+  );
+};
+
+fetch.mockResponses = (...responses) => {
+    responses.forEach(([body, init]) => {
+        fetch.mockImplementationOnce(
+      () => Promise.resolve(new ResponseWrapper(body, init)),
+    );
+    });
+};
+
+// Default mock is just a empty string.
+fetch.mockResponse('');
+
+module.exports = fetch;

data/client/hippo/testing/screens.js

@@ -0,0 +1,64 @@
+/* global jest */
+
+import React from 'react';
+import SnapShot   from 'react-test-renderer';
+
+import Screens from 'hippo/screens';
+import ScreenDefinitions from 'hippo/screen-definitions';
+
+export { Screens, ScreenDefinitions };
+
+export function getScreenInstance(screenId) {
+    return Screens.all.get(screenId).display();
+}
+
+
+class TestRouter {
+    constructor() {
+        Object.assign(this, {
+            isActive:   jest.fn(),
+            push:       jest.fn(),
+            replace:    jest.fn(),
+            createPath: jest.fn(),
+            listen:     jest.fn(() => {
+                this.unlisten = jest.fn();
+                return this.unlisten;
+            }),
+        });
+    }
+}
+
+function makeContext() {
+    return {
+        router: new TestRouter(),
+    };
+}
+
+function childContextTypes() {
+    return {
+        router: React.PropTypes.object,
+    };
+}
+
+export class Context {
+    constructor() {
+        this.childContextTypes = childContextTypes();
+        this.context = makeContext();
+    }
+}
+
+export function Snapshot(el) {
+    class Wrapper extends React.Component {
+        static childContextTypes = childContextTypes();
+
+        getChildContext() {
+            return this._childContext || (this._childContext = makeContext());
+        }
+
+        render() {
+            return el;
+        }
+    }
+    const snapshot = SnapShot.create(React.createElement(Wrapper, {}, el));
+    return snapshot.toJSON();
+}

data/client/hippo/testing/utils.js

@@ -0,0 +1 @@
+export * from './screens';

data/client/hippo/user.js

@@ -0,0 +1,93 @@
+import { pick, merge, includes } from 'lodash';
+import { action } from 'mobx';
+
+import {
+    BaseModel, identifiedBy, field, identifier, computed,
+} from './models/base';
+
+import Config from './config';
+
+@identifiedBy('hippo/user-session')
+class Session extends BaseModel {
+    @identifier id;
+    @field login;
+    @field password;
+
+    set syncData(data) {
+        this.data = data;
+    }
+    @computed
+    get syncData() {
+        return this.serialize();
+    }
+}
+
+const ADMIN = 'administrator';
+
+@identifiedBy('hippo/user')
+export class UserModel extends BaseModel {
+
+    @identifier({ type: 'number' }) id;
+    @field login;
+    @field name;
+    @field email;
+    @field password;
+    @field password_confirm;
+    @field({ type: 'array' }) role_names;
+    @field({ type: 'object' }) access;
+
+    set is_admin(val) {
+        if (val) {
+            if (!includes(this.role_names, ADMIN)) { this.role_names.push(ADMIN); }
+        } else {
+            this.role_names.remove(ADMIN);
+        }
+    }
+
+    get is_admin() {
+        return includes(this.role_names, ADMIN);
+    }
+
+    @computed get isLoggedIn() { return !!Config.access_token; }
+
+    @action logout() {
+        const req = new Session({ id: this.id });
+        return req.destroy().then(() => {
+            this.reset();
+            Config.reset();
+            return this;
+        });
+    }
+
+    @action attemptLogin(login, password) {
+        const req = new Session({ login, password });
+        return req.save().then(this.setFromSessionRequest);
+    }
+
+    @action checkAccess() {
+        const req = new Session({ id: 'test' });
+        return req.fetch().then(this.setFromSessionRequest);
+    }
+
+    @action.bound
+    setFromSessionRequest(req) {
+        merge(this, pick(req, 'errors', 'lastServerMessage'));
+        if (req.isValid) {
+            Config.data = req.data;
+            Config.persistToStorage();
+            Config.bootstrapUserData();
+            this.errors = {};
+        }
+        return this;
+    }
+
+    toJSON() {
+        return merge(this.serialize(), { is_admin: this.is_admin });
+    }
+
+}
+
+const current_user = new UserModel();
+Config.user = current_user;
+
+export default current_user;

data/client/hippo/workspace/content.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Tabs from './tabs';
+
+import Box   from 'grommet/components/Box';
+import Paragraph from 'grommet/components/Paragraph';
+
+export default class Content extends React.Component {
+
+    render() {
+        return (
+            <Box className="content-pane" justify="start" align="stretch" pad="none" direction="column" full="vertical">
+                <Tabs />
+
+                <Box justify="start" align="stretch" pad="none" flex="grow">
+                    {this.props.children}
+               </Box>
+
+            </Box>
+        );
+    }
+}

data/client/hippo/workspace/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { bindAll } from 'lodash';
+import { Router, Route, browserHistory } from 'react-router';
+
+import App   from 'grommet/components/App';
+import Sidebar from 'react-sidebar';
+
+import 'hippo/config-data';
+import 'hippo/screen-definitions';
+
+import Menu        from './menu';
+import Screen      from './screen';
+import LoginDialog from '../access/login-dialog';
+
+import './styles.scss';
+
+const DOCKED_WIDTH_BREAKPOINT = 950;
+
+@observer
+class Workspace extends React.Component {
+
+    @observable sidebarOpen   = true;
+    @observable sidebarDocked = false;
+
+    constructor() {
+        super();
+        bindAll(this, 'onMediaQueryChanged', 'onSetSidebarOpen');
+        this.mql = window.matchMedia(`(min-width: ${DOCKED_WIDTH_BREAKPOINT}px)`);
+        this.mql.addListener(this.onMediaQueryChanged);
+        this.onMediaQueryChanged();
+    }
+
+    componentWillUnmount() {
+        this.mql.removeListener(this.onMediaQueryChanged);
+    }
+
+    @action
+    onMediaQueryChanged() {
+        this.sidebarDocked = this.mql.matches;
+    }
+
+    @action
+    onSetSidebarOpen(open) {
+        this.sidebarOpen = open;
+    }
+    render() {
+        return (
+            <App
+                centered={false}
+            >
+                <LoginDialog />
+                <Sidebar
+                    styles={{ sidebar: { zIndex: 5 } }}
+                    sidebar={<Menu />}
+                    open={this.sidebarOpen}
+                    docked={this.sidebarDocked}
+                    onSetOpen={this.onSetSidebarOpen}
+                >
+                    {this.props.children || "Welcome"}
+                </Sidebar>
+            </App>
+        );
+    }
+}
+
+
+function NoMatch() {
+    return (
+        <h1>Not Found</h1>
+    );
+}
+
+export default function WorkspaceRoot() {
+    return (
+        <Router history={browserHistory}>
+            <Route path="/" component={Workspace}>
+                <Route name='screen' path="/:screenId(/:identifier)" component={Screen} />
+                <Route path="*" component={NoMatch} />
+            </Route>
+        </Router>
+    );
+}

data/client/hippo/workspace/menu-group.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { bindAll } from 'lodash';
+import { observer } from 'mobx-react';
+
+import Heading from 'grommet/components/Heading';
+import Header  from 'grommet/components/Header';
+
+import MenuOption from './menu-option';
+import Menu from 'grommet/components/Menu';
+import Icon   from '../components/icon';
+
+@observer
+export default class Group extends React.Component {
+
+    static propTypes = {
+        group: PropTypes.shape({
+            active: PropTypes.bool.isRequired,
+            title:  PropTypes.string.isRequired,
+            icon:   PropTypes.string.isRequired,
+        }).isRequired,
+    }
+
+    render() {
+        const { group } = this.props;
+        return (
+            <Menu direction="column" align="start" justify="between" primary>
+                <Header align="end" pad={{ horizontal: 'medium' }}>
+                    <Heading tag="h4" strong>
+                        {group.title}
+                        <Icon type={group.icon} />
+                    </Heading>
+                </Header>
+                {group.screens.map(s => <MenuOption key={s.id} screen={s} />)}
+            </Menu>
+        );
+    }
+}