Create test repo

Author: olegstepura

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js --port 8080",
+    "build": "node_modules/.bin/cross-env NODE_ENV=production node_modules/.bin/webpack --config webpack.config.js -p"
+  },
+  "engines": {
+    "node": ">=7.4.0",
+    "npm": ">=4.0.5"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.23.0",
+    "classnames": "^2.2.5",
+    "connected-react-router": "^4.2.1",
+    "document-ready-promise": "^3.0.1",
+    "history": "^4.6.1",
+    "lodash": "^4.17.4",
+    "normalize.css": "^7.0.0",
+    "promise-native-deferred": "^3.0.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-css-themr": "^2.1.2",
+    "react-document-title": "^2.0.3",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.4",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
+    "react-toolbox": "^2.0.0-beta.8",
+    "recompose": "^0.23.4",
+    "redux": "^3.6.0",
+    "redux-actions": "^2.0.3",
+    "redux-devtools-extension": "^2.13.2",
+    "redux-form": "^6.7.0",
+    "redux-saga": "^0.15.3",
+    "store": "^2.0.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.0",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-idx": "^1.5.1",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-plugin-transform-dirname-filename": "^1.1.0",
+    "babel-plugin-transform-node-env-inline": "^6.8.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.1",
+    "eslint": "^3.19.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-control-statements": "^2.1.1",
+    "eslint-plugin-react": "^7.0.1",
+    "jsx-control-statements": "^3.1.5",
+    "postcss-cssnext": "^2.9.0",
+    "postcss-each": "^0.9.3",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
+    "postcss-mixins": "^6.0.0",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "redux-logger": "^3.0.1",
+    "style-loader": "^0.17.0",
+    "stylelint": "^7.10.1",
+    "stylelint-config-standard": "^16.0.0",
+    "webpack": "^2.5.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}

postcss.config.js

@@ -0,0 +1,31 @@
+module.exports = context => ({
+  options: {
+    sourceMap: true
+  },
+  plugins: {
+    'postcss-import': {
+      path: [
+        'node_modules',
+        'src/main/react', // allows importing modules using absolute path, @see https://goo.gl/luH0Xa
+      ]
+    },
+    'postcss-mixins': {},
+    'postcss-each': {},
+    'postcss-cssnext': {
+      features: {
+        customProperties: {
+          variables: {
+            'color-primary': 'var(--palette-indigo-500)',
+            'color-primary-dark': 'var(--palette-indigo-700)',
+            'color-primary-light': 'var(--palette-indigo-500)',
+            'color-accent': 'var(--palette-pink-a200)',
+            'color-accent-dark': 'var(--palette-pink-700)',
+            'color-primary-contrast': 'var(--color-dark-contrast)',
+            'color-accent-contrast': 'var(--color-dark-contrast)'
+          }
+        }
+      },
+      browsers: ['last 2 versions', '> 5%'],
+    },
+  },
+});

src/main/react/Layout.css

@@ -0,0 +1,12 @@
+@import "react-toolbox/lib/colors.css";
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--palette-grey-200);
+}
+
+/* http://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input */
+input:required {
+  box-shadow: none;
+}

src/main/react/Layout.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import { Layout as RTLayout, NavDrawer, Panel } from 'react-toolbox'
+import { AppBar } from 'react-toolbox'
+import isBrowser from 'react-toolbox/lib/utils/is-browser'
+import breakpoints from 'react-toolbox/lib/utils/breakpoints'
+import { getViewport } from 'react-toolbox/lib/utils/utils'
+import DocumentTitle from 'react-document-title'
+import 'Layout.css'
+
+class Layout extends Component {
+  state = {
+    drawerActive: false,
+    width: isBrowser() && getViewport().width
+  }
+
+  permanentAt = 'lg'
+
+  toggleDrawerActive = () => {
+    this.setState({ drawerActive: !this.state.drawerActive })
+  }
+
+  componentDidMount () {
+    if (!this.state.width) this.handleResize()
+    window.addEventListener('resize', this.handleResize)
+  }
+
+  hideDrawer = () => {
+    this.setState({ drawerActive: false })
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize)
+  }
+
+  handleResize = () => {
+    this.setState({ width: getViewport().width })
+  }
+
+  render() {
+    const appBarIconVisible = this.state.width <= breakpoints[this.permanentAt]
+
+    let appBarIcon
+    if (appBarIconVisible) {
+      appBarIcon = 'menu'
+    }
+
+    const navDrawerProps = {
+      active: this.state.drawerActive,
+      permanentAt: this.permanentAt,
+      onOverlayClick: this.toggleDrawerActive
+    }
+
+    return (
+      <DocumentTitle title="Test">
+        <RTLayout>
+          <NavDrawer { ...navDrawerProps }>
+            <ul>
+              <li>Menu item 1</li>
+              <li>Menu item 2</li>
+            </ul>
+          </NavDrawer>
+          <Panel>
+            <AppBar
+              title="Test"
+              leftIcon={appBarIcon}
+              onLeftIconClick={this.toggleDrawerActive}
+            />
+            <div>
+              Hello world
+            </div>
+          </Panel>
+        </RTLayout>
+      </DocumentTitle>
+    )
+  }
+}
+
+export default Layout

src/main/react/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import Layout from './Layout'
+
+console.log('process.env.NODE_ENV =', process.env.NODE_ENV)
+
+const rootEl = document.getElementById('root')
+
+const render = () => {
+  console.debug('render()')
+  ReactDOM.render(
+    // Root component should be placed in separate file (module) to allow hot reload
+    // React Router leaves a warning (Warning: [react-router] You cannot change <Router routesGen>; it will be ignored)
+    // but it seems that hot reloading of routed components works.
+    <AppContainer>
+      <Layout />
+    </AppContainer>,
+    rootEl
+  )
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  // Should be gone @see https://github.com/react-toolbox/react-toolbox/pull/1164#issuecomment-276338422
+  const { overrideComponentTypeChecker } = require('react-toolbox')
+  const isComponentOfType = (classType, reactElement) => (
+    reactElement && reactElement.type && (
+      reactElement.type === classType ||
+      reactElement.type.name === classType.displayName
+    )
+  )
+  overrideComponentTypeChecker(isComponentOfType)
+  if (module.hot) {
+    module.hot.accept('./Layout', render)
+  }
+}
+
+render()

src/main/react/util/ProductionInit.js

@@ -0,0 +1,3 @@
+// nothing here yet ;)
+// it may remain empty, but this one is added to main entry point automatically in webpack.config.js,
+// so leave this file even if it's empty

src/main/webapp/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Test</title>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="http://localhost:8080/asset/test.js"></script>
+</body>
+</html> 

webpack.config.js

@@ -0,0 +1,99 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const noop = () => {}
+// simple DSL to allow writing simple switch: `dev('dev setting').prod('prod setting')`
+const dev = (dev) => {
+  return {
+    prod: (prod) => {
+      if (process.env.NODE_ENV === 'production') {
+        return prod
+      } else {
+        return dev
+      }
+    }
+  }
+}
+
+const webpackPort = 8080
+
+const settings = {
+  entry: {
+    test: [
+      dev('react-hot-loader/patch').prod('./src/main/react/util/ProductionInit.js'),
+      'babel-polyfill',
+      './src/main/react/index.js'
+    ]
+  },
+  output: {
+    filename: '[name].js',
+    publicPath: dev(`http://localhost:${webpackPort}/asset/`).prod('/asset/'),
+    path: path.resolve('src/main/webapp/asset')
+  },
+  resolve: {
+    extensions: ['.js', '.json', '.css'],
+    modules: [
+      'node_modules',
+      'src/main/react', // allows importing modules using absolute path, @see https://goo.gl/luH0Xa
+    ]
+  },
+  devtool: dev('eval-source-map').prod('source-map'), // this emits sources while development making it easier to debug
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['es2015', { modules: false }],
+            'stage-1',
+            'react'
+          ],
+          plugins: [
+            'transform-node-env-inline',
+            'jsx-control-statements',
+            'transform-dirname-filename',
+            'idx', // http://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html
+          ],
+          env: {
+            development: {
+              plugins: ['react-hot-loader/babel']
+            }
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true,
+              importLoaders: 1,
+              localIdentName: dev('[name]--[local]--[hash:base64:5]').prod('[hash:base64]')
+            }
+          },
+          'postcss-loader' // has separate config nearby
+        ]
+      },
+    ]
+  },
+  devServer: {
+    contentBase: path.resolve('src/main/webapp'),
+    publicPath: `http://localhost:${webpackPort}/asset/`, // full URL is necessary for Hot Module Replacement.
+    quiet: false,
+    hot: true,
+    historyApiFallback: true,
+    inline: true
+  },
+  plugins: [
+    dev(new webpack.HotModuleReplacementPlugin()).prod(noop),
+    dev(new webpack.NamedModulesPlugin()).prod(noop)
+  ]
+};
+
+//process.stdout.write(JSON.stringify(settings, null, '  '));
+
+module.exports = settings;