basic working version

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", {
+      "es2015": {
+        "modules": false
+      }
+    }],
+    "react",
+    "stage-1"
+  ],
+  "plugins": [
+    "transform-decorators-legacy", "react-hot-loader/babel",
+  ]
+}

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-quotes": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "jsx-quotes": [2, "prefer-double"],
+    "new-cap": [2, {"newIsCapExceptions": ["loki"]}],
+    "react/prefer-stateless-function": "off",
+    "arrow-body-style": "off",
+    "strict": "off",
+    "no-script-url": "off",
+    "guard-for-in": "off",
+    "object-curly-newline": "off",
+    "jsx-a11y/anchor-is-valid": [ "error", {
+      "components": [],
+    }],
+    "react/prop-types": "off",
+    "function-paren-newline": "off",
+    "func-names": "off"
+  },
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "test": true,
+    "expect": true
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.DS_Store

Dockerfile

@@ -0,0 +1,5 @@
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY ./dist /html

README.md

@@ -0,0 +1,33 @@
+# Colors.sh
+
+## Requirements
+
+1. Node.js >= 8.7.0
+1. Yarn
+
+## Setup
+
+Run the following commands under the project root folder:
+
+1. `yarn install`
+2. `yarn dev` to launch the development server.
+
+
+## Production
+
+Build the production ready bundle by running
+
+```
+yarn prod:build
+```
+
+The production bundle will be generated under the `dist` folder.
+
+
+### Run production bundle in local machine
+
+Need to install node http-server first with `npm i -g http-server`, then run:
+
+```
+yarn prod:start
+```

nginx.conf

@@ -0,0 +1,52 @@
+
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+include /etc/nginx/modules/*.conf;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $z_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    aio             on;
+
+    gzip  on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
+
+
+    server {
+        listen       8080;
+        server_name  _;
+
+        location = /health {
+            # Use lua block instead of nginx echo to ensure that lua plugin works
+            content_by_lua_block {
+                ngx.header.content_type = 'text/plain'
+                ngx.say("OK")
+            }
+        }
+
+        root   /html;
+        index  index.html;
+    }
+}

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "frontend-template",
+  "version": "0.1.0",
+  "description": "Zalando Pricing & Forecasting frontend",
+  "main": "index.js",
+  "repository": "https://github.com/messutied/frontend-template",
+  "scripts": {
+    "test": "jest",
+    "dev": "webpack-dev-server --hot",
+    "debug": "DEBUG=true webpack-dev-server --hot",
+    "build": "webpack",
+    "prod:build": "NODE_ENV=production webpack -p",
+    "prod:start": "(cd dist; http-server -g)"
+  },
+  "author": "Eduardo Messuti",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-jest": "^21.2.0",
+    "jest": "^21.2.1",
+    "react-test-renderer": "^16.0.0",
+    "source-map-loader": "^0.2.2",
+    "webpack-dev-server": "^2.9.3"
+  },
+  "dependencies": {
+    "assets-webpack-plugin": "^3.5.1",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.2",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-import": "^1.6.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.17",
+    "compression-webpack-plugin": "^1.0.1",
+    "css-loader": "^0.28.7",
+    "dom-helpers": "^3.2.1",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "file-loader": "^1.1.5",
+    "jss": "^8.1.0",
+    "mobx": "^3.4.1",
+    "mobx-react": "^4.3.5",
+    "node-sass": "^4.5.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-hot-loader": "^3.1.1",
+    "react-router-dom": "^4.2.2",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.10.0"
+  },
+  "engines": {
+    "node": ">=8.7.0"
+  }
+}

src/components/HomeScreen/HomeScreen.js

@@ -0,0 +1,61 @@
+/* eslint no-octal-escape: 0 */
+
+import React from 'react';
+import { observer } from 'mobx-react';
+import Store from './store';
+import colors from './colors-256';
+import formats from './formats';
+
+const store = new Store();
+
+const HomeScreen = () => {
+  const formatsStr = store.formats.map(f => `\${F_${f.name.toUpperCase()}}`).join('');
+  console.log(store.formats);
+  const { selectedColor, text } = store;
+  return (
+    <div className="home-screen">
+      <select value={selectedColor.id} onChange={evt => store.setColor(evt.target.value)}>
+        {colors.map(([name, id]) => <option key={id} value={id}>{name}</option>)}
+      </select>
+      {
+        formats.map((format) => {
+          return (
+            <label key={format.name}>
+              <input
+                type="checkbox"
+                onChange={evt => store.setformat(format.name, evt.target.checked)}
+                checked={!!store.formats.find(f => f.name === format.name)}
+              />
+              {format.name}
+            </label>
+          );
+        })
+      }
+      <br />
+      <br />
+      <span style={{ color: selectedColor.hex }}>{text}</span>
+      <br />
+      <br />
+      {selectedColor.id && (
+        <div>
+          NO_FORMAT="\033[0m"
+          {
+            store.formats.map(({ name, code }) => {
+              return (
+                <div key={name}>
+                  {`F_${name.toUpperCase()}="\\033[${code}m"`}
+                </div>
+              );
+            })
+          }
+          <br />
+          C_{selectedColor.name.toUpperCase()}="\033[38;5;{selectedColor.id}"m
+          <br />
+          {`echo -e "${formatsStr}\${C_${selectedColor.name.toUpperCase()}}${text}\${NO_FORMAT}"`}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default observer(HomeScreen);