Reinit the webpack version

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.scss]
+indent_size = 2

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+webpack.config.js

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "dhis2"
+}

.gitignore

@@ -0,0 +1,15 @@
+*.iml
+.idea/*
+
+node_modules/*
+.sass-cache
+src/css/*
+coverage/*
+
+dist/*
+
+#TODO: Jshint is a dependency of the git hook which installs these files on install...
+.jshintignore
+.jshintrc
+
+build/*

.scss-lint.yml

@@ -0,0 +1,8 @@
+scss_files: ./src
+
+linters:
+  SelectorFormat:
+    convention: hyphenated_BEM
+
+  HexNotation:
+    style: uppercase

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+
+node_js:
+  - "iojs"
+
+script:
+  - npm run lint
+  - npm test
+  - cat ./coverage/phantomjs/lcov.info | ./node_modules/coveralls/bin/coveralls.js

config.rb

@@ -0,0 +1,14 @@
+require "normalize-scss"
+require "compass"
+require "breakpoint"
+require "susy"
+
+css_dir = "src/css"
+sass_dir = "scss"
+
+class CSSImporter < Sass::Importers::Filesystem
+  def extensions
+    super.merge('css' => :scss)
+  end
+end
+sass_options = {:filesystem_importer => CSSImporter}

package.json

@@ -0,0 +1,69 @@
+{
+  "name": "maintenance",
+  "version": "0.0.1",
+  "description": "maintenance",
+  "main": "index.js",
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start test/config/karma.config.js --single-run true",
+    "test-watch": "./node_modules/karma/bin/karma start test/config/karma.config.js",
+    "lint": "./node_modules/eslint/bin/eslint.js src && ./node_modules/eslint/bin/eslint.js --env node,mocha --global expect,sinon --rule 'no-unused-expressions: 0' test && scss-lint",
+    "prebuild": "npm test && npm run lint",
+    "build": "./node_modules/babel/bin/babel.js src --out-dir dist && compass compile && cp ./package.json ./dist/package.json && cp -r scss dist/scss",
+    "validate": "npm ls"
+  },
+  "devDependencies": {
+    "babel": "^5.8.23",
+    "babel-core": "^5.8.23",
+    "babel-eslint": "4.0.10",
+    "babel-loader": "^5.3.2",
+    "chai": "3.0.0",
+    "coveralls": "2.11.4",
+    "d2-testutils": "0.1.7",
+    "eslint": "1.2.0",
+    "eslint-config-dhis2": "0.0.5",
+    "eslint-plugin-react": "3.2.3",
+    "istanbul": "0.3.18",
+    "karma": "0.13.9",
+    "karma-babel-preprocessor": "5.2.1",
+    "karma-chai": "0.1.0",
+    "karma-coverage": "0.5.0",
+    "karma-mocha": "0.2.0",
+    "karma-mocha-reporter": "1.1.1",
+    "karma-phantomjs-launcher": "0.2.1",
+    "karma-sinon": "1.0.4",
+    "karma-sinon-chai": "1.0.0",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
+    "mocha": "2.2.5",
+    "phantomjs": "1.9.18",
+    "phantomjs-polyfill": "0.0.1",
+    "precommit-hook": "3.0.0",
+    "react": "0.13.3",
+    "sinon": "1.15.4",
+    "sinon-chai": "2.8.0",
+    "webpack": "^1.12.1",
+    "webpack-dev-server": "^1.10.1"
+  },
+  "dependencies": {
+    "babel-loader": "^5.3.2",
+    "classnames": "^2.1.3",
+    "d2": "0.0.11",
+    "d2-flux": "^0.4.0",
+    "d2-ui-basicfields": "^0.4.1",
+    "d2-ui-button": "0.0.2",
+    "d2-ui-datatable": "0.0.4",
+    "d2-ui-icon": "0.0.2",
+    "d2-ui-pagination": "0.0.4",
+    "d2-utils": "0.0.4",
+    "jquery": "^2.1.4",
+    "loglevel": "^1.4.0",
+    "react-router": "^0.13.3",
+    "react-select": "^0.5.5",
+    "rx": "^3.1.2"
+  },
+  "pre-commit": [
+    "lint",
+    "validate",
+    "test"
+  ]
+}

scss/App/App.scss

@@ -0,0 +1,3 @@
+.app {
+  color: inherit;
+}

scss/EditModel/EditModel.scss

@@ -0,0 +1,3 @@
+.edit-model {
+  color: inherit;
+}

scss/HeaderBar/HeaderBar.scss

@@ -0,0 +1,3 @@
+.header-bar {
+  color: inherit;
+}

scss/List/List.scss

@@ -0,0 +1,3 @@
+.list {
+  color: inherit;
+}

scss/MainContent/MainContent.scss

@@ -0,0 +1,3 @@
+.main-content {
+  color: inherit;
+}

scss/SideBar/SideBar.scss

@@ -0,0 +1,42 @@
+$sidebar__background-color: #f7f7f7;
+$sidebar__border-color: #e1e1e1;
+$sidebar__border-style: 1px solid;
+$sidebar--item__text-color: #303030;
+$sidebar--item__hover-color: #EEEEEE;
+
+@mixin search-box($border-color) {
+  width: 100%;
+  padding: .5rem 1rem;
+  border-radius: .5rem;
+  border: 1px solid $border-color;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.sidebar {
+  padding: 1rem;
+
+  .search-sidebar-items {
+    @include search-box($sidebar__border-color);
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  li {
+    border-bottom: $sidebar__border-style $sidebar__border-color;
+
+    &:hover {
+      background: $sidebar--item__hover-color;
+    }
+  }
+
+  a {
+    color: $sidebar--item__text-color;
+    display: block;
+    padding: 1rem;
+    text-decoration: none;
+  }
+}

scss/maintenance.scss

@@ -0,0 +1,79 @@
+@import "normalize";
+
+// Component stylesheets from dependencies
+@import '../node_modules/d2-ui-datatable/css/DataTable';
+@import '../node_modules/d2-ui-pagination/css/Pagination';
+@import '../node_modules/d2-ui-basicfields/css/BasicFields';
+@import '../node_modules/d2-ui-button/css/DefaultButton';
+
+// Other imports
+@import 'susy';
+
+$sidebar-background-color: #f7f7f7;
+$sidebar-border-color: #e1e1e1;
+$sidebar-border-style: 1px solid;
+
+/**
+ * D2 Mixins
+ */
+@mixin search-box($border-color) {
+  width: 100%;
+  padding: .5rem 1rem;
+  border-radius: .5rem;
+  border: 1px solid $border-color;
+  outline: none;
+  box-sizing: border-box;
+}
+//End mixins
+
+//Basic for all
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 12px;
+}
+
+//Components
+@import './SideBar/sidebar';
+
+//App
+#app {
+  @include container();
+}
+
+.sidebar-container {
+  @include span(3 of 12);
+
+  background: $sidebar-background-color;
+  border-right: $sidebar-border-style $sidebar-border-color;
+  height: 100%;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+}
+
+.sidebar-container--hide-scroll-bar {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-right: -2rem;
+  padding-right: 2rem;
+}
+
+.main-container {
+  @include span(9 of 12 last);
+  padding-right: 2rem;
+}
+
+//TODO: Distribute
+
+//list
+.search-list-items {
+  padding-bottom: 1rem;
+}
+
+.search-list-items--input {
+  @include search-box(#e1e1e1);
+}

src/App/App.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classes from 'classnames';
+import {RouteHandler} from 'react-router';
+
+import HeaderBar from '../HeaderBar/HeaderBar.component';
+import MainContent from '../MainContent/MainContent.component';
+import SideBar from '../SideBar/SideBarContainer.component';
+
+const App = React.createClass({
+    render() {
+        const classList = classes('app');
+
+        return (
+            <div className={classList}>
+                <HeaderBar />
+                <MainContent>
+                    <div className="sidebar-container">
+                        <div className="sidebar-container--hide-scroll-bar">
+                            <SideBar />
+                        </div>
+                    </div>
+                    <div className="main-container">
+                        <RouteHandler />
+                    </div>
+                </MainContent>
+            </div>
+        );
+    },
+});
+
+export default App;