ant theme (#201)

* ant theme

* remove comments

* use yarn to install npm packages

* bump antd

.travis.yml

@@ -20,17 +20,15 @@ before_install:
     - docker pull lukasmartinelli/hadolint
 
 install:
+    - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+    - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     - docker run --rm -i lukasmartinelli/hadolint hadolint --ignore DL3008 --ignore DL3013 - < Dockerfile
     - google-chrome --version
     - google-chrome-stable --version
-    # get latest version of node
-    - curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
-    - source ~/.nvm/nvm.sh
-    - nvm install node
-    - npm install -g yarn
-    - npm install -g eslint babel-eslint eslint-plugin-react
+    - sudo apt-get update 
+    - yarn global add eslint babel-eslint eslint-plugin-react
     - make eslint
-    - sudo apt-get update
+    - sudo apt-get install yarn
     - sudo apt-get install xvfb
       # We do this conditionally because it saves us some downloading if the
       # version is the same.

bowtie/_app.py

@@ -463,8 +463,8 @@ class App(object):
     def __init__(self, rows=1, columns=1, sidebar=True,
                  title='Bowtie App', basic_auth=False,
                  username='username', password='password',
-                 background_color='White', host='0.0.0.0', port=9991,
-                 socketio='', debug=False):
+                 theme=None, background_color='White',
+                 host='0.0.0.0', port=9991, socketio='', debug=False):
         """Create a Bowtie App.
 
         Parameters
@@ -483,6 +483,8 @@ def __init__(self, rows=1, columns=1, sidebar=True,
             Username for basic authentication.
         password : str, optional
             Password for basic authentication.
+        theme : str, optional
+            Color for Ant Design components.
         background_color : str, optional
             Background color of the control pane.
         host : str, optional
@@ -511,6 +513,7 @@ def __init__(self, rows=1, columns=1, sidebar=True,
         self.title = title
         self.username = username
         self.uploads = {}
+        self.theme = theme
         self.root = View(rows=rows, columns=columns, sidebar=sidebar,
                          background_color=background_color)
         self.routes = [Route(view=self.root, path='/', exact=True)]
@@ -698,9 +701,16 @@ def _write_templates(self):
         server = self._jinjaenv.get_template('server.py.j2')
         indexhtml = self._jinjaenv.get_template('index.html.j2')
         indexjsx = self._jinjaenv.get_template('index.jsx.j2')
+        webpack = self._jinjaenv.get_template('webpack.config.js.j2')
 
         src, app, templates = create_directories()
 
+        webpack_path = os.path.join(_DIRECTORY, webpack.name[:-3])
+        with open(webpack_path, 'w') as f:
+            f.write(
+                webpack.render(color=self.theme)
+            )
+
         server_path = os.path.join(src, server.name[:-3])
         with open(server_path, 'w') as f:
             f.write(
@@ -770,10 +780,6 @@ def _build(self):
         """Compile the Bowtie application."""
         packages = self._write_templates()
 
-        if not os.path.isfile(os.path.join(_DIRECTORY, 'webpack.config.js')):
-            webpack_src = os.path.join(self._package_dir, 'src/webpack.config.js')
-            shutil.copy(webpack_src, _DIRECTORY)
-
         if not os.path.isfile(os.path.join(_DIRECTORY, 'package.json')):
             packagejson = os.path.join(self._package_dir, 'src/package.json')
             shutil.copy(packagejson, _DIRECTORY)

bowtie/src/button.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from 'antd';
-import 'antd/dist/antd.css';
 
 export default class SimpleButton extends React.Component {
 

bowtie/src/date.jsx

@@ -2,8 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { DatePicker, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
-import 'antd/dist/antd.css';
-// import 'antd/lib/date-picker/style/index.css';
 const { MonthPicker, RangePicker } = DatePicker;
 import { storeState } from './utils';
 

bowtie/src/number.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { InputNumber } from 'antd';
-import 'antd/dist/antd.css';
 import { storeState } from './utils';
 
 var msgpack = require('msgpack-lite');

bowtie/src/package.json

@@ -1,34 +1,35 @@
 {
-  "dependencies": {
-    "antd": "^3.1.6",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "classnames": "^2.2.5",
-    "compression-webpack-plugin": "^1.1.6",
-    "core-js": "^2.5.3",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "hard-source-webpack-plugin": "^0.5.16",
-    "less": "^2.7.3",
-    "less-loader": "^4.0.5",
-    "lodash.clonedeep": "^4.5.0",
-    "msgpack-lite": "^0.1.26",
-    "node-sass": "^4.7.2",
-    "normalize.css": "^7.0.0",
-    "postcss-modules-values": "^1.3.0",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
-    "sass-loader": "^6.0.6",
-    "socket.io-client": "^2.0.4",
-    "style-loader": "^0.19.1",
-    "webpack": "^3.10.0"
-  }
+    "dependencies": {
+        "antd": "^3.2.0",
+        "babel-core": "^6.26.0",
+        "babel-loader": "^7.1.2",
+        "babel-plugin-import": "^1.6.3",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.1",
+        "babel-preset-react": "^6.24.1",
+        "babel-preset-stage-0": "^6.24.1",
+        "classnames": "^2.2.5",
+        "compression-webpack-plugin": "^1.1.6",
+        "core-js": "^2.5.3",
+        "css-loader": "^0.28.7",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "hard-source-webpack-plugin": "^0.5.16",
+        "less": "^2.7.3",
+        "less-loader": "^4.0.5",
+        "lodash.clonedeep": "^4.5.0",
+        "msgpack-lite": "^0.1.26",
+        "node-sass": "^4.7.2",
+        "normalize.css": "^7.0.0",
+        "postcss-modules-values": "^1.3.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
+        "react-router": "^4.2.0",
+        "react-router-dom": "^4.2.2",
+        "sass-loader": "^6.0.6",
+        "socket.io-client": "^2.0.4",
+        "style-loader": "^0.19.1",
+        "webpack": "^3.10.0"
+    }
 }

bowtie/src/progress.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Progress } from 'antd';
-import 'antd/dist/antd.css';
 
 var msgpack = require('msgpack-lite');
 

bowtie/src/slider.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Slider } from 'antd';
-import 'antd/dist/antd.css';
 import { storeState } from './utils';
 
 var msgpack = require('msgpack-lite');

bowtie/src/switch.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Switch, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
-import 'antd/dist/antd.css';
 import { storeState } from './utils';
 
 var msgpack = require('msgpack-lite');

bowtie/src/table.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Table, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
-import 'antd/dist/antd.css';
 import { storeState } from './utils';
 
 var msgpack = require('msgpack-lite');

bowtie/src/textbox.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'antd';
-import 'antd/dist/antd.css';
 import { storeState } from './utils';
 
 var msgpack = require('msgpack-lite');

bowtie/src/upload.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Upload, Icon, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
-import 'antd/dist/antd.css';
 
 const Dragger = Upload.Dragger;
 

bowtie/templates/index.jsx.j2

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import io from 'socket.io-client';
 import {message} from 'antd';
-import 'antd/dist/antd.css';
 import {
     BrowserRouter,
     Switch,

bowtie/templates/view.jsx.j2

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {render} from 'react-dom';
 import {message} from 'antd';
-import 'antd/dist/antd.css'
 
 import AntProgress from './progress';
 

bowtie/src/webpack.config.js → bowtie/templates/webpack.config.js.j2

@@ -4,7 +4,6 @@ const prod = process.argv.indexOf('--define') !== -1;
 var path = require('path');
 var CompressionPlugin = require('compression-webpack-plugin');
 
-
 var BUILD_DIR = path.resolve(__dirname, 'src/static');
 var APP_DIR = path.resolve(__dirname, 'src/app');
 var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
@@ -27,11 +26,12 @@ var config = {
                 include: APP_DIR,
                 loader: 'babel-loader',
                 exclude: /node_modules/,
-                query: {
+                options: {
                     presets: [
                         ['env', {'modules': false}],
                         'react', 'stage-0'],
                     plugins: [
+                        ["import", { "libraryName": "antd", "style": true }],
                         'transform-object-rest-spread',
                     ],
                     babelrc: false
@@ -44,7 +44,20 @@ var config = {
                 loader: 'style-loader!css-loader!sass-loader',
             }, {
                 test: /\.less$/,
-                loader: 'style-loader!css-loader!less-loader?strictMath&noIeCompat&',
+                use: [
+                    {loader: "style-loader"},
+                    {loader: "css-loader"},
+                    {loader: "less-loader",
+                        options: {
+                            strictMath: false,
+                            noIeCompat: true,
+                            {% if color %}
+                            modifyVars: {"primary-color": "{{ color }}"},
+                            {% endif %}
+                            root: path.resolve(__dirname, './')
+                        }
+                    }
+                ]
             },
         ],
         noParse: [
@@ -102,3 +115,5 @@ if (prod) {
 }
 
 module.exports = config;
+
+// vim: set ft=javascript: