initial

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "env": {
+    "start": {
+      "presets": [
+        "react-hmre"
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Pedro Mathias Nakibar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,47 @@
+# Materious
+## Buzzword Certified Admin UI
+
+### Technologies Used:
+* [Material-UI](https://github.com/callemall/material-ui)
+* [Webpack](https://webpack.github.io/)
+* [Flexbox](http://flexboxgrid.com/)
+* [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
+* [Babel](https://babeljs.io/)
+* [Material Icons](https://design.google.com/icons/) (general)
+* [Fonts Awesome](http://fortawesome.github.io/Font-Awesome/) (only some services)
+
+### How to use this
+The components are in the _./app_ directory.
+To run it in your own environment, for **testing** purposes, run:
+
+```bash
+  npm start
+```
+
+This command will launch webpack-dev-server, with hot-reload server, which is specified in _package.json_, in the section _scripts_.
+
+#### Building
+To build the project, simply install all its dependencies and run:
+
+```bash
+  npm run build
+```
+
+The generated code is spitted into the _./build_ directory.
+
+
+### Roadmap
+- [ ] Login/Signup component
+- [ ] User management screen (add users, delete, change password)
+- [ ] __React-Router__
+- [ ] Finish de dashboards container components
+- [ ] Get the left-navbar right
+- [ ] Make chart components using _d3_ and/or _c3_
+- [ ] Finish some Dashboards samples
+- [ ] Custom chart components
+- [ ] UI for generating components
+
+### Side-Roadmap
+- [ ] Tests
+- [ ] CI
+- [ ] Badges

app/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+
+const app = () => <p>Hello World!</p>
+
+import injectTapEventPlugin from 'react-tap-event-plugin'
+injectTapEventPlugin()
+
+const AuxApp = () => (
+  <MuiThemeProvider muiTheme={getMuiTheme()}>
+    <App />
+  </MuiThemeProvider>
+
+)
+
+ReactDOM.render(
+  <AuxApp />,
+  document.getElementById('app')
+)

app/main.css

@@ -0,0 +1,10 @@
+body {
+  padding-top: 44px; /* because appbar/topbar */
+  font-family: 'Roboto', Arial, serif;
+  font-weight: 400;
+}
+
+.flex-container {
+  -webkit-justify-content: center; /* Safari */
+  justify-content:         center;
+}

app/my-fonts.css

@@ -0,0 +1,25 @@
+h1 {
+    font-family: 'Roboto', Arial, serif;
+    font-weight: 400;
+}
+
+p {
+  font-family: 'Roboto', sans-serif;
+}
+
+div {
+    display: block;
+}
+
+body {
+  display: block;
+  font-size: 15px;
+  line-height: 24px;
+  margin: 0;
+  resize: none;
+}
+
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }

build/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Materious</title>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
+    <!-- Use minimum-scale=1 to enable GPU rasterization -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
+
+    <!-- Address Bar Color -->
+    <!-- Chrome, Firefox OS, Opera and Vivaldi -->
+    <meta name="theme-color" content="#4285f4" />
+    <!-- Windows Phone -->
+    <meta name="msapplication-navbutton-color" content="#4285f4" />
+    <!-- iOS Safari -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="#4285f4" />
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./bundle.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react_view",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack-dev-server",
+    "devtool": "source-map",
+    "publish": "npm run build && node publish_to_ghpages.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "css-loader": "^0.23.1",
+    "gh-pages": "^0.11.0",
+    "npm-install-webpack-plugin": "^3.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.12.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.3",
+    "flexboxgrid": "^6.3.0",
+    "font-awesome": "^4.6.1",
+    "material-ui": "^0.15.0-beta.2",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-flexbox-grid": "^0.9.6",
+    "react-tap-event-plugin": "^1.0.0"
+  }
+}

publish_to_ghpages.js

@@ -0,0 +1,4 @@
+var ghpages = require('gh-pages')
+var path = require('path')
+
+ghpages.publish(path.join(__dirname, 'build'), function (err) { console.log(err) })

webpack.config.js

@@ -0,0 +1,93 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const NpmInstallPlugin = require('npm-install-webpack-plugin')
+const TARGET = process.env.npm_lifecycle_event
+
+const PATHS = {
+  app: path.join(__dirname, 'app'),
+  build: path.join(__dirname, 'build')
+}
+
+process.env.BABEL_ENV = TARGET
+
+const common = {
+  // Entry accepts a path or an object of entries. We'll be using the
+  // latter form given it's convenient with more complex configurations.
+  devtool: 'eval-source-map',
+  entry: {
+    app: PATHS.app
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  output: {
+    path: PATHS.build,
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        // Test expects a RegExp! Note the slashes!
+        test: /\.css$/,
+        loaders: ['style', 'css'],
+        // Include accepts either a path or an array of paths.
+        include: PATHS.app
+      },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel',
+        query: {
+          cacheDirectory: true,
+          presets: ['react', 'es2015']
+        },
+        include: PATHS.app
+      },
+      {
+        test: /\.css$/,
+        loader: 'style!css?modules',
+        include: /flexboxgrid/
+      }
+    ]
+  }
+}
+
+// Default configuration. We will return this if
+// Webpack is called outside of npm.
+if (TARGET === 'start' || !TARGET) {
+  module.exports = merge(common, {
+    devServer: {
+      contentBase: PATHS.build,
+
+      // Enable history API fallback so HTML5 History API based
+      // routing works. This is a good default that will come
+      // in handy in more complicated setups.
+      historyApiFallback: true,
+      hot: true,
+      inline: true,
+      progress: true,
+
+      // Display only errors to reduce the amount of output.
+      stats: 'errors-only',
+
+      // Parse host and port from env so this is easy to customize.
+      //
+      // If you use Vagrant or Cloud9, set
+      // host: process.env.HOST || '0.0.0.0'
+      //
+      // 0.0.0.0 is available to all network devices unlike default
+      // localhost
+      host: process.env.HOST,
+      port: process.env.PORT
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+      new NpmInstallPlugin({
+        save: true // save
+      })
+    ]
+  })
+}
+if (TARGET === 'build') {
+  module.exports = merge(common, {})
+}