├── README.md
├── src
    ├── img
    │   └── Chatter-box-wendy.jpg
    ├── scss
    │   └── index.scss
    ├── js
    │   ├── Chat.js
    │   ├── Routes.js
    │   ├── ConversationAdd.js
    │   ├── index.js
    │   ├── Login.js
    │   ├── Conversations.js
    │   ├── Main.js
    │   └── ConversationForm.js
    └── index.html
├── .babelrc
├── .gitignore
├── .editorconfig
├── gulpfile.babel.js
├── grommet-toolbox.config.js
├── server
    └── server.js
├── package.json
├── .eslintrc
├── .scss-lint.yml
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # grommet-chat
2 | 
3 | This is an WIP project. Please do not use it yet.
4 | 


--------------------------------------------------------------------------------
/src/img/Chatter-box-wendy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grommet/grommet-chat/master/src/img/Chatter-box-wendy.jpg


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "es2015", "react" ],
3 |   "plugins": [
4 |     "transform-object-rest-spread"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
2 | 
3 | @import '~grommet/scss/vanilla/index';
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | **bower_components**
 2 | node_modules
 3 | **/dist*/**
 4 | **/dist-bower*/**
 5 | .DS_Store
 6 | .sass-cache
 7 | *.log
 8 | *tmp*
 9 | **sublime-project**
10 | **sublime-workspace**
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | max_line_length = 80
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | max_line_length = 0
14 | trim_trailing_whitespace = false
15 | 
16 | [COMMIT_EDITMSG]
17 | max_line_length = 0
18 | 


--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
 1 | import gulp from 'gulp';
 2 | import { argv } from 'yargs';
 3 | import grommetToolbox, { getOptions } from 'grommet-toolbox';
 4 | 
 5 | const options = getOptions();
 6 | 
 7 | gulp.task('set-webpack-alias', function () {
 8 |   if (options.alias && argv.useAlias) {
 9 |     options.webpack.resolve.alias = options.alias;
10 |   }
11 | });
12 | 
13 | grommetToolbox(gulp);
14 | 


--------------------------------------------------------------------------------
/src/js/Chat.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import React, { Component } from 'react';
 4 | import App from 'grommet/components/App';
 5 | 
 6 | export default class Chat extends Component {
 7 | 
 8 |   render () {
 9 |     return (
10 |       <App centered={false}>
11 |         {this.props.children}
12 |       </App>
13 |     );
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/js/Routes.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import Chat from './Chat';
 4 | import Login from './Login';
 5 | import Main from './Main';
 6 | import Conversations from './Conversations';
 7 | import ConversationAdd from './ConversationAdd';
 8 | // import TBD from 'grommet/components/TBD';
 9 | 
10 | export let routes = {
11 |   path: '/', component: Chat,
12 |   childRoutes: [
13 |     { path: 'login', component: Login },
14 |     { component: Main,
15 |       childRoutes: [
16 |         { path: 'conversations', component: Conversations,
17 |           childRoutes: [
18 |             { path: 'add', component: ConversationAdd }
19 |           ]
20 |         }
21 |       ]
22 |     }
23 |   ]
24 | };
25 | 


--------------------------------------------------------------------------------
/src/js/ConversationAdd.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import React, { Component, PropTypes } from 'react';
 4 | import Layer from 'grommet/components/Layer';
 5 | import ConversationForm from './ConversationForm';
 6 | 
 7 | export default class ConversationAdd extends Component {
 8 | 
 9 |   constructor () {
10 |     super();
11 |     this._onSubmit = this._onSubmit.bind(this);
12 |   }
13 | 
14 |   _onSubmit (size) {
15 |     const { router } = this.context;
16 |     // this.props.dispatch(addItem(size));
17 |     router.push({ pathname: '/conversations' });
18 |   }
19 | 
20 |   render () {
21 |     return (
22 |       <Layer closer={false} align="right">
23 |         <ConversationForm heading="Add Conversation" submitLabel="Add"
24 |           conversation={{}} onSubmit={this._onSubmit} />
25 |       </Layer>
26 |     );
27 |   }
28 | }
29 | 
30 | ConversationAdd.contextTypes = {
31 |   router: PropTypes.any
32 | };
33 | 


--------------------------------------------------------------------------------
/grommet-toolbox.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import webpack from 'webpack';
 3 | 
 4 | export default {
 5 |   copyAssets: [
 6 |     'src/index.html',
 7 |     {
 8 |       asset: 'src/img/**',
 9 |       dist: 'dist/img/'
10 |     }
11 |   ],
12 |   scssAssets: ['src/scss/**/*.scss'],
13 |   jsAssets: ['src/js/**/*.js'],
14 |   mainJs: 'src/js/index.js',
15 |   mainScss: 'src/scss/index.scss',
16 |   webpack: {
17 |     resolve: {
18 |       root: [
19 |         path.resolve(__dirname, './node_modules')
20 |       ]
21 |     },
22 |     plugins: [
23 |       new webpack.ProvidePlugin({
24 |         'fetch': 'exports?self.fetch!whatwg-fetch'
25 |       })
26 |     ]
27 |   },
28 |   devServerPort: 8019,
29 |   devServerProxy: {
30 |     "/rest/*": 'http://localhost:8119'
31 |   },
32 |   websocketHost: 'localhost:8119',
33 |   scsslint: true,
34 |   sync: {
35 |     hostname: 'grommet.us.rdlabs.hpecorp.net',
36 |     username: 'ligo',
37 |     remoteDestination: '/var/www/html/examples/chat/dist'
38 |   },
39 |   alias: {
40 |     'grommet-templates': path.resolve(__dirname, '../grommet-templates/src/js'),
41 |     'grommet-addons': path.resolve(__dirname, '../grommet-addons/src/js'),
42 |     'grommet/scss': path.resolve(__dirname, '../grommet/src/scss'),
43 |     'grommet': path.resolve(__dirname, '../grommet/src/js')
44 |   },
45 |   devPreprocess: ['set-webpack-alias'],
46 |   distPreprocess: ['set-webpack-alias']
47 | };
48 | 


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import 'whatwg-fetch';
 4 | import { polyfill as promisePolyfill } from 'es6-promise';
 5 | promisePolyfill();
 6 | 
 7 | import '../scss/index.scss';
 8 | 
 9 | import React from 'react';
10 | import ReactDOM from 'react-dom';
11 | import { Router, browserHistory } from 'react-router';
12 | import { createHistory, useBasename } from 'history';
13 | import { routes } from './Routes';
14 | 
15 | // import store from './store';
16 | // import { initialize as initializeSession } from './Session';
17 | 
18 | let history;
19 | if (window && window.location &&
20 |   'grommet.us.rdlabs.hpecorp.net' === window.location.host) {
21 |   history = useBasename(createHistory)({ basename: '/chat' });
22 | } else {
23 |   history = browserHistory;
24 | }
25 | 
26 | // let wsProtocol = 'ws';
27 | // if (window.location.protocol === 'https:') {
28 | //   wsProtocol = 'wss';
29 | // }
30 | //
31 | // // The port number needs to align with devServerProxy and websocketHost in grommet-toolbox.config.js
32 | // let hostName = NODE_ENV === 'development' ? 'localhost:8119' : window.location.host;
33 | // apiConfigure({
34 | //   urlPrefix: ROUTE_PREFIX,
35 | //   webSocketUrl: `${wsProtocol}://${hostName}${ROUTE_PREFIX}/ws`
36 | // });
37 | 
38 | let element = document.getElementById('content');
39 | 
40 | ReactDOM.render((
41 |   <Router routes={routes} history={history} />
42 | ), element);
43 | 
44 | document.body.classList.remove('loading');
45 | 
46 | // initializeSession();
47 | 


--------------------------------------------------------------------------------
/src/js/Login.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import React, { Component, PropTypes } from 'react';
 4 | import Split from 'grommet/components/Split';
 5 | import Sidebar from 'grommet/components/Sidebar';
 6 | import LoginForm from 'grommet/components/LoginForm';
 7 | import ChatIcon from 'grommet/components/icons/base/Chat';
 8 | import Box from 'grommet/components/Box';
 9 | 
10 | export default class Login extends Component {
11 | 
12 |   constructor (props) {
13 |     super(props);
14 |     this._onSubmit = this._onSubmit.bind(this);
15 |     this.state = { busy: false };
16 |   }
17 | 
18 |   componentWillReceiveProps (nextProps) {
19 |     if (this.state.busy) {
20 |       this.setState({ busy: false });
21 |     }
22 |   }
23 | 
24 |   _onSubmit (fields) {
25 |     this.setState({ busy: true });
26 |     // this.props.dispatch(login('', fields.username, fields.password));
27 |     this.context.router.push('/conversations'); /// for now
28 |   }
29 | 
30 |   render () {
31 |     return (
32 |       <Split flex="left" >
33 |         <Box texture="img/Chatter-box-wendy.jpg" full="vertical" />
34 |         <Sidebar justify="center" pad="none" size="large" colorIndex="grey-3">
35 |           <LoginForm align="start"
36 |             logo={<ChatIcon size="large" />}
37 |             title="Chat"
38 |             onSubmit={this.state.busy ? null : this._onSubmit}
39 |             errors={[]}
40 |             usernameType="email" />
41 |         </Sidebar>
42 |       </Split>
43 |     );
44 |   }
45 | }
46 | 
47 | /// for now
48 | Login.contextTypes = {
49 |   router: PropTypes.any
50 | };
51 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | var compression = require('compression');
 4 | var Ddos = require('ddos');
 5 | // increase ddos burst to avoid false positives with this app
 6 | var ddos = new Ddos({ burst: 80 });
 7 | var express = require('express');
 8 | var http = require("http");
 9 | var morgan = require('morgan');
10 | var bodyParser = require('body-parser');
11 | var busboyBodyParser = require('busboy-body-parser');
12 | var cookieParser = require('cookie-parser');
13 | var path = require('path');
14 | var rest = require('./rest');
15 | var throng = require('throng');
16 | 
17 | var PORT = process.env.PORT || 8119;
18 | var PREFIX = '/';
19 | if (process.env.PREFIX) {
20 |   PREFIX = '/' + process.env.PREFIX + '/';
21 | }
22 | 
23 | var WORKERS = process.env.WEB_CONCURRENCY || 1;
24 | 
25 | throng(WORKERS, start);
26 | 
27 | function start () {
28 |   var app = express();
29 | 
30 |   app.use(ddos.express);
31 | 
32 |   app.use(compression());
33 | 
34 |   app.use(cookieParser());
35 | 
36 |   app.use(morgan('tiny'));
37 | 
38 |   app.use(bodyParser.json());
39 | 
40 |   app.use(busboyBodyParser());
41 | 
42 |   app.use('/rest', rest.router);
43 | 
44 |   // UI serving
45 |   app.use('/', express.static(path.join(__dirname, '/../dist')));
46 |   app.get('/*', function (req, res) {
47 |     res.sendFile(path.resolve(path.join(__dirname, '/../dist/index.html')));
48 |   });
49 | 
50 |   var server = http.createServer(app);
51 | 
52 |   rest.setup(server, PREFIX);
53 | 
54 |   server.listen(PORT);
55 | 
56 |   console.log('Server started, listening at: http://localhost:' + PORT);
57 | }
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grommet-chat",
 3 |   "version": "0.1.0",
 4 |   "license": "Apache-2.0",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/grommet/grommet-chat.git"
 8 |   },
 9 |   "dependencies": {
10 |     "babel-plugin-transform-object-rest-spread": "^6.6.5",
11 |     "babel-preset-es2015": "^6.3.13",
12 |     "babel-preset-react": "^6.3.13",
13 |     "babel-register": "^6.5.2",
14 |     "body-parser": "^1.10.0",
15 |     "busboy-body-parser": "0.0.9",
16 |     "classnames": "^2.2.5",
17 |     "compression": "^1.4.4",
18 |     "cookie-parser": "^1.3.4",
19 |     "ddos": "^0.1.7",
20 |     "es6-promise": "^3.2.1",
21 |     "exports-loader": "^0.6.3",
22 |     "express": "^4.10.6",
23 |     "grommet": "https://github.com/grommet/grommet/tarball/stable",
24 |     "grommet-templates": "https://github.com/grommet/grommet-templates/tarball/stable",
25 |     "json-server": "^0.5.5",
26 |     "json-stringify-pretty-compact": "^1.0.1",
27 |     "morgan": "^1.5.0",
28 |     "react": "^15.3.0",
29 |     "react-redux": "^3.1.0",
30 |     "react-router": "^2.4.0",
31 |     "redux": "^3.0.2",
32 |     "redux-thunk": "^1.0.0",
33 |     "request": "^2.53.0",
34 |     "serve-static": "^1.7.1",
35 |     "throng": "^4.0.0",
36 |     "whatwg-fetch": "^1.0.0",
37 |     "ws": "^0.7.2"
38 |   },
39 |   "devDependencies": {
40 |     "del": "^2.0.2",
41 |     "grommet-toolbox": "^0.4.0",
42 |     "gulp": "^3.9.0",
43 |     "gulp-git": "^1.2.3",
44 |     "gulp-nodemon": "^2.0.3",
45 |     "gulp-rsync": "0.0.5",
46 |     "mkdirp": "^0.5.1",
47 |     "redux-devtools": "^2.1.5",
48 |     "webpack": "^1.9.11",
49 |     "webpack-stream": "^3.2.0",
50 |     "yargs": "^4.7.0"
51 |   },
52 |   "scripts": {
53 |     "build": "gulp dist",
54 |     "start": "node server/server.js"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | ---
 2 | parser: babel-eslint
 3 | 
 4 | plugins:
 5 |   - react
 6 | 
 7 | ecmaFeatures:
 8 |   jsx: true
 9 | 
10 | env:
11 |   browser: true
12 |   node: true
13 | 
14 | globals:
15 |   __DEV__: true
16 |   __THEME__: true
17 |   __DEV_MODE__: true
18 |   __SOCKET_HOST__: true
19 |   IntlPolyfill: true
20 |   Modernizr: true
21 |   describe: true
22 |   it: true
23 |   beforeEach: true
24 |   afterEach: true
25 |   before: true
26 |   after: true
27 | 
28 | rules:
29 |   # ERRORS
30 |   space-before-blocks: 2
31 |   indent: [2, 2, { SwitchCase: 1 }]
32 |   brace-style: 2
33 |   # keyword-spacing: 2
34 |   comma-dangle: 2
35 |   no-unused-expressions: 2
36 |   block-scoped-var: 2
37 |   eol-last: 2
38 |   dot-notation: 2
39 |   consistent-return: 2
40 |   no-unused-vars: [2, args: none]
41 |   semi: [2, "always"]
42 | 
43 |   # DISABLED
44 |   max-len: 0
45 |   #change soon back to max-len: [1, 80]
46 |   no-underscore-dangle: 0
47 |   new-cap: 0
48 |   no-use-before-define: 0
49 |   key-spacing: 0
50 |   eqeqeq: 0
51 |   strict: 0
52 |   space-unary-ops: 0
53 |   yoda: 0
54 |   no-loop-func: 0
55 |   no-trailing-spaces: 0
56 |   no-multi-spaces: 0
57 |   no-shadow: 0
58 |   no-alert: 0
59 |   no-process-exit: 0
60 |   no-extend-native: 0
61 |   # block-scoped-var: 0
62 |   quotes: 0
63 |   jsx-quotes: 0
64 | 
65 |   # REACT DISABLED
66 |   react/display-name: 0
67 |   react/jsx-sort-prop-types: 0
68 |   react/prop-types: 0
69 |   react/no-did-mount-set-state: 0
70 |   react/no-did-update-set-state: 0
71 |   react/jsx-max-props-per-line: 0
72 |   react/jsx-sort-props: 0
73 |   react/no-multi-comp: 0
74 |   react/jsx-boolean-value: 0
75 |   react/no-danger: 0
76 | 
77 |   react/jsx-curly-spacing: 1
78 |   react/jsx-no-duplicate-props: 1
79 |   react/jsx-no-undef: 1
80 |   react/jsx-uses-react: 1
81 |   react/jsx-uses-vars: 1
82 |   react/no-unknown-property: 1
83 |   react/react-in-jsx-scope: 1
84 |   react/require-extension: 1
85 |   react/self-closing-comp: 1
86 |   react/sort-comp: 1
87 |   react/wrap-multilines: 1
88 | 


--------------------------------------------------------------------------------
/src/js/Conversations.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import React, { Component, PropTypes } from 'react';
 4 | import Tiles from 'grommet/components/Tiles';
 5 | import Tile from 'grommet/components/Tile';
 6 | import Heading from 'grommet/components/Heading';
 7 | import Box from 'grommet/components/Box';
 8 | 
 9 | // hard code for now
10 | const STATE = {
11 |   conversations: [
12 |     {
13 |       _id: '1',
14 |       name: 'grommet-core',
15 |       messages: [
16 |         {
17 |           _id: '1',
18 |           text: 'Where do you guys eat lunch?',
19 |           personId: '1',
20 |           date: (new Date()).toISOString()
21 |         },
22 |         {
23 |           _id: '2',
24 |           text: 'Sushirito',
25 |           personId: '2',
26 |           date: (new Date()).toISOString()
27 |         }
28 |       ]
29 |     }
30 |   ],
31 |   people: {
32 |     1: { name: 'Alan' },
33 |     2: { name: 'Chris' }
34 |   }
35 | };
36 | 
37 | export default class Conversations extends Component {
38 | 
39 |   constructor () {
40 |     super();
41 |     this._onSubmit = this._onSubmit.bind(this);
42 |     this.state = STATE;
43 |   }
44 | 
45 |   _onSubmit (size) {
46 |     const { router } = this.context;
47 |     // this.props.dispatch(addItem(size));
48 |     router.push({ pathname: '/conversations' });
49 |   }
50 | 
51 |   render () {
52 |     const { conversations } = this.state;
53 | 
54 |     const tiles = conversations.map(conversation => {
55 |       const messages = conversation.messages.map(message => {
56 |         return (
57 |           <Box key={message._id}>
58 |             {message.text}
59 |           </Box>
60 |         );
61 |       });
62 |       return (
63 |         <Tile key={conversation._id}>
64 |           <Heading tag="h3">{conversation.name}</Heading>
65 |           {messages}
66 |           <input type="text" />
67 |         </Tile>
68 |       );
69 |     });
70 | 
71 |     return (
72 |       <Box pad="medium">
73 |         <Tiles>
74 |           {tiles}
75 |         </Tiles>
76 |         {this.props.children}
77 |       </Box>
78 |     );
79 |   }
80 | }
81 | 
82 | Conversations.contextTypes = {
83 |   router: PropTypes.any
84 | };
85 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |   <title>Grommet Chat</title>
 7 |   <meta name="description" content="" />
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 9 |   <meta name="mobile-web-app-capable" content="yes">
10 |   <link rel="shortcut icon" type="image/png" href="/img/shortcut-icon.png" />
11 |   <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/img/mobile-app-icon.png">
12 |   <style>
13 |   body.loading {margin: 0px; width: 100vw; height: 100vh;
14 |     background-image: radial-gradient(circle at 50% 15%, #fff, #fff 30%, #ccc);
15 |   }
16 |   body.loading #content {
17 |     position: relative;
18 |     width: 100%;
19 |     height: 100%;
20 |     font-size: 0px;
21 |   }
22 |   body.loading #logo {
23 |     position: absolute; display: block; width: 140px; height: 140px;
24 |     top: calc(50vh - 70px); left: calc(50vw - 70px);
25 |   }
26 |   div.t {
27 |     display: inline-block;
28 |     box-sizing: border-box;
29 |     margin: 0px;
30 |     width: 10vw;
31 |     height: 10vh;
32 |     background-color: #e2e2e2;
33 |   }
34 |   div.t.on {
35 |     -webkit-animation: pulse 3s infinite linear alternate;
36 |     -moz-animation: pulse 3s infinite linear alternate;
37 |     animation: pulse 3s infinite linear alternate;
38 |   }
39 |   div.t.on:hover {
40 |     -webkit-animation: none;
41 |     background-color: #ccc;
42 |   }
43 |   @-webkit-keyframes pulse {
44 |     100% { background-color: #fff; }
45 |   }
46 |   @-moz-keyframes pulse {
47 |     100% { background-color: #fff; }
48 |   }
49 |   @keyframes pulse {
50 |     100% { background-color: #fff; }
51 |   </style>
52 | </head>
53 | <body class="loading">
54 |   <div id="content">
55 |     <svg id="logo" viewBox="0 0 182 182" version="1.1" role="img">
56 |       <path role="presentation"
57 |         d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"
58 |         stroke-width="18" stroke="#865CD6" fill="none"></path>
59 |     </svg>
60 |     <script>
61 |     var c = document.getElementById("content");
62 |     for (var i = 0; i < 100; i += 1) {
63 |       c.insertAdjacentHTML('beforeend', '<div class="t off"></div>');
64 |     }
65 |     var timer = setInterval(function () {
66 |       var again = false;
67 |       if (document.body.classList.contains('loading')) {
68 |         var ts = c.querySelectorAll('div.t.off');
69 |         if (ts.length > 0) {
70 |           var index = Math.floor(Math.random() * ts.length);
71 |           ts[index].classList.remove('off');
72 |           ts[index].classList.add('on');
73 |           if (ts.length > 1) {
74 |             again = true;
75 |           }
76 |         }
77 |       }
78 |       if (! again) {
79 |         clearInterval(timer);
80 |       }
81 |     }, 100)
82 |     </script>
83 |   </div>
84 |   <script src="/index.js"></script>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/src/js/Main.js:
--------------------------------------------------------------------------------
 1 | // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 2 | 
 3 | import React, { Component } from 'react';
 4 | import SideSplit from 'grommet-addons/components/SideSplit';
 5 | import Sidebar from 'grommet/components/Sidebar';
 6 | import Header from 'grommet/components/Header';
 7 | import Footer from 'grommet/components/Footer';
 8 | import Title from 'grommet/components/Title';
 9 | import Heading from 'grommet/components/Heading';
10 | import UserIcon from 'grommet/components/icons/base/User';
11 | import Box from 'grommet/components/Box';
12 | import Search from 'grommet/components/Search';
13 | import Menu from 'grommet/components/Menu';
14 | import Anchor from 'grommet/components/Anchor';
15 | import Button from 'grommet/components/Button';
16 | import ChatIcon from 'grommet/components/icons/base/Chat';
17 | import AddIcon from 'grommet/components/icons/base/Add';
18 | 
19 | export default class Main extends Component {
20 | 
21 |   constructor () {
22 |     super();
23 |     this.state = { navActive: true };
24 |   }
25 | 
26 |   render () {
27 |     const { navActive } = this.state;
28 | 
29 |     let sidebar;
30 |     if (navActive) {
31 |       sidebar = (
32 |         <Sidebar colorIndex="grey-3" fixed={true}>
33 |           <Header size="large" justify="between" pad={{horizontal: 'medium'}}>
34 |             <Title>
35 |               <ChatIcon />
36 |               <span>Chat</span>
37 |             </Title>
38 |             <SideSplit.SideCloser
39 |               onClick={() => this.setState({ navActive: false })} />
40 |           </Header>
41 |           <Box flex={true}>
42 |             <Menu primary={true}>
43 |               <Anchor label="Conversations" path="/conversations" />
44 |             </Menu>
45 |           </Box>
46 |           <Footer pad={{horizontal: 'medium', vertical: 'small'}}>
47 |             <Menu icon={<UserIcon />} dropAlign={{ bottom: 'top' }}
48 |               a11yTitle="Session">
49 |               <Box pad="medium">
50 |                 <Heading tag="h3" margin="none">User name</Heading>
51 |               </Box>
52 |               <Anchor label="Logout" path="/login" />
53 |             </Menu>
54 |           </Footer>
55 |         </Sidebar>
56 |       );
57 |     }
58 | 
59 |     return (
60 |       <SideSplit active={navActive}>
61 |         {sidebar}
62 |         <Box>
63 |           <Header size="large" pad={{horizontal: 'medium'}}>
64 |             <SideSplit.SideOpener active={! navActive}
65 |               onClick={() => this.setState({ navActive: true })}>
66 |               <ChatIcon />
67 |             </SideSplit.SideOpener>
68 |             <Search placeHolder="Search" size="medium"
69 |               inline={true} fill={true} />
70 |             <Menu inline={true} direction="row" responsive={false}>
71 |               <Button icon={<AddIcon />} path="/conversations/add" />
72 |             </Menu>
73 |           </Header>
74 |           {this.props.children}
75 |         </Box>
76 |       </SideSplit>
77 |     );
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/.scss-lint.yml:
--------------------------------------------------------------------------------
  1 | # Default application configuration that all configurations inherit from.
  2 | 
  3 | scss_files: "**/*.scss"
  4 | 
  5 | linters:
  6 |   BangFormat:
  7 |     enabled: true
  8 |     space_before_bang: true
  9 |     space_after_bang: false
 10 | 
 11 |   BorderZero:
 12 |     enabled: true
 13 |     convention: none # or `zero`
 14 | 
 15 |   ColorKeyword:
 16 |     enabled: true
 17 | 
 18 |   ColorVariable:
 19 |     enabled: false
 20 | 
 21 |   Comment:
 22 |     enabled: true
 23 | 
 24 |   DebugStatement:
 25 |     enabled: true
 26 | 
 27 |   DeclarationOrder:
 28 |     enabled: false
 29 | 
 30 |   DuplicateProperty:
 31 |     enabled: true
 32 | 
 33 |   ElsePlacement:
 34 |     enabled: true
 35 |     style: same_line # or 'new_line'
 36 | 
 37 |   EmptyLineBetweenBlocks:
 38 |     enabled: true
 39 |     ignore_single_line_blocks: true
 40 | 
 41 |   EmptyRule:
 42 |     enabled: true
 43 | 
 44 |   FinalNewline:
 45 |     enabled: true
 46 |     present: true
 47 | 
 48 |   HexLength:
 49 |     enabled: false
 50 |     style: short # or 'long'
 51 | 
 52 |   HexNotation:
 53 |     enabled: false
 54 |     style: lowercase # or 'uppercase'
 55 | 
 56 |   HexValidation:
 57 |     enabled: true
 58 | 
 59 |   IdSelector:
 60 |     enabled: false
 61 | 
 62 |   ImportantRule:
 63 |     enabled: true
 64 | 
 65 |   ImportPath:
 66 |     enabled: true
 67 |     leading_underscore: false
 68 |     filename_extension: false
 69 | 
 70 |   Indentation:
 71 |     enabled: false
 72 |     allow_non_nested_indentation: false
 73 |     character: tab # or 'tab'
 74 |     width: 2
 75 | 
 76 |   LeadingZero:
 77 |     enabled: true
 78 |     style: include_zero # or 'exclude_zero'
 79 | 
 80 |   MergeableSelector:
 81 |     enabled: true
 82 |     force_nesting: true
 83 | 
 84 |   NameFormat:
 85 |     enabled: true
 86 |     allow_leading_underscore: true
 87 |     convention: hyphenated_lowercase # or 'BEM', or a regex pattern
 88 | 
 89 |   NestingDepth:
 90 |     enabled: false
 91 |     max_depth: 6
 92 | 
 93 |   PlaceholderInExtend:
 94 |     enabled: true
 95 | 
 96 |   PropertyCount:
 97 |     enabled: false
 98 |     include_nested: false
 99 |     max_properties: 10
100 | 
101 |   PropertySortOrder:
102 |     enabled: false
103 | 
104 |   PropertySpelling:
105 |     enabled: true
106 |     extra_properties: ['animate']
107 | 
108 |   QualifyingElement:
109 |     enabled: true
110 |     allow_element_with_attribute: true
111 |     allow_element_with_class: true
112 |     allow_element_with_id: false
113 | 
114 |   SelectorDepth:
115 |     enabled: false
116 |     max_depth: 4
117 | 
118 |   SelectorFormat:
119 |     enabled: true
120 |     convention: hyphenated_BEM # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
121 | 
122 |   Shorthand:
123 |     enabled: true
124 | 
125 |   SingleLinePerProperty:
126 |     enabled: true
127 |     allow_single_line_rule_sets: true
128 | 
129 |   SingleLinePerSelector:
130 |     enabled: true
131 | 
132 |   SpaceAfterComma:
133 |     enabled: true
134 | 
135 |   SpaceAfterPropertyColon:
136 |     enabled: true
137 |     style: at_least_one_space # or 'no_space', or 'on_space', or 'at_least_one_space', or 'aligned'
138 | 
139 |   SpaceAfterPropertyName:
140 |     enabled: true
141 | 
142 |   SpaceBeforeBrace:
143 |     enabled: true
144 |     style: space # or 'new_line'
145 |     allow_single_line_padding: false
146 | 
147 |   SpaceBetweenParens:
148 |     enabled: true
149 |     spaces: 0
150 | 
151 |   StringQuotes:
152 |     enabled: false
153 |     style: single_quotes # or double_quotes
154 | 
155 |   TrailingSemicolon:
156 |     enabled: true
157 | 
158 |   TrailingZero:
159 |     enabled: false
160 | 
161 |   UnnecessaryMantissa:
162 |     enabled: true
163 | 
164 |   UnnecessaryParentReference:
165 |     enabled: true
166 | 
167 |   UrlFormat:
168 |     enabled: false
169 | 
170 |   UrlQuotes:
171 |     enabled: false
172 | 
173 |   VariableForProperty:
174 |     enabled: false
175 |     properties: []
176 | 
177 |   VendorPrefix:
178 |     enabled: false
179 | 
180 |   ZeroUnit:
181 |     enabled: false
182 | 
183 |   Compass::*:
184 |     enabled: false
185 | 


--------------------------------------------------------------------------------
/src/js/ConversationForm.js:
--------------------------------------------------------------------------------
  1 | // (C) Copyright 2014-2015 Hewlett Packard Enterprise Development LP
  2 | 
  3 | import React, { Component, PropTypes } from 'react';
  4 | import Article from 'grommet/components/Article';
  5 | import Header from 'grommet/components/Header';
  6 | import Form from 'grommet/components/Form';
  7 | import Footer from 'grommet/components/Footer';
  8 | import FormFields from 'grommet/components/FormFields';
  9 | import FormField from 'grommet/components/FormField';
 10 | import Button from 'grommet/components/Button';
 11 | import Anchor from 'grommet-addons/components/Anchor';
 12 | import CloseIcon from 'grommet/components/icons/base/Close';
 13 | import TrashIcon from 'grommet/components/icons/base/Trash';
 14 | // import SizeRemove from './SizeRemove';
 15 | 
 16 | export default class ConversationForm extends Component {
 17 | 
 18 |   constructor (props) {
 19 |     super(props);
 20 |     this._onSubmit = this._onSubmit.bind(this);
 21 |     this._onRemoveOpen = this._onRemoveOpen.bind(this);
 22 |     this._onRemoveClose = this._onRemoveClose.bind(this);
 23 | 
 24 |     this.state = {
 25 |       errors: {},
 26 |       removing: false,
 27 |       conversation: props.conversation
 28 |     };
 29 |   }
 30 | 
 31 |   componentWillReceiveProps (nextProps) {
 32 |     this.setState({ conversation: nextProps.conversation });
 33 |   }
 34 | 
 35 |   _onSubmit (event) {
 36 |     event.preventDefault();
 37 |     let conversation = this.state.conversation;
 38 |     let errors = {};
 39 |     let noErrors = true;
 40 |     if (! conversation.name) {
 41 |       errors.name = 'required';
 42 |       noErrors = false;
 43 |     }
 44 |     if (noErrors) {
 45 |       this.props.onSubmit(conversation);
 46 |     } else {
 47 |       this.setState({ errors: errors });
 48 |     }
 49 |   }
 50 | 
 51 |   _change (propertyName) {
 52 |     return (event) => {
 53 |       let conversation = { ...this.state.conversation };
 54 |       let value = event.target.value;
 55 |       let errors = this.state.errors;
 56 |       conversation[propertyName] = value;
 57 |       this.setState({ conversation: conversation, errors: errors });
 58 |     };
 59 |   }
 60 | 
 61 |   _onRemoveOpen () {
 62 |     this.setState({ removing: true });
 63 |   }
 64 | 
 65 |   _onRemoveClose () {
 66 |     this.setState({ removing: false });
 67 |   }
 68 | 
 69 |   render () {
 70 |     let { conversation, errors } = this.state;
 71 | 
 72 |     let removeControl;
 73 |     if (this.props.removable) {
 74 |       removeControl = (
 75 |         <Button plain={true} icon={<TrashIcon />} label="Remove"
 76 |           onClick={this._onRemoveOpen}
 77 |           a11yTitle={`Remove ${conversation.name} Conversation`} />
 78 |       );
 79 |     }
 80 | 
 81 |     let removeConfirm;
 82 |     // if (this.state.removing) {
 83 |     //   removeConfirm = (
 84 |     //     <SizeRemove size={size} onClose={this._onRemoveClose} />
 85 |     //   );
 86 |     // }
 87 | 
 88 |     return (
 89 |       <Article align="center" primary={true}>
 90 |         <Form onSubmit={this._onSubmit}>
 91 | 
 92 |           <Header size="large" justify="between" pad="none">
 93 |             <h2><strong>{this.props.heading}</strong></h2>
 94 |             <Anchor icon={<CloseIcon />} path="/conversations"
 95 |               a11yTitle={`Close ${this.props.heading} Form`} />
 96 |           </Header>
 97 | 
 98 |           <FormFields>
 99 | 
100 |             <fieldset>
101 |               <FormField label="Name" htmlFor="name" error={errors.name}>
102 |                 <input id="name" name="name" type="text"
103 |                   value={conversation.name || ''}
104 |                   onChange={this._change('name')} />
105 |               </FormField>
106 |             </fieldset>
107 | 
108 |           </FormFields>
109 | 
110 |           <Footer pad={{vertical: 'medium'}} justify="between">
111 |             <Button type="submit" primary={true} label={this.props.submitLabel}
112 |               onClick={this._onSubmit} />
113 |             {removeControl}
114 |           </Footer>
115 |         </Form>
116 | 
117 |         {removeConfirm}
118 |       </Article>
119 |     );
120 |   }
121 | }
122 | 
123 | ConversationForm.propTypes = {
124 |   busyMessage: PropTypes.string,
125 |   heading: PropTypes.string.isRequired,
126 |   onSubmit: PropTypes.func.isRequired,
127 |   removable: PropTypes.bool,
128 |   size: PropTypes.object,
129 |   submitLabel: PropTypes.string.isRequired
130 | };
131 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 
203 | 


--------------------------------------------------------------------------------