intial commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["env", "react","stage-2"],
+  "plugins": [
+    "react-hot-loader/babel",
+    "lodash",
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }]
+  ]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "import"
+  ],
+  "rules": {
+    "comma-dangle": 0,
+    "no-restricted-syntax": 1,
+    "new-cap": 1,
+    "no-continue": 1,
+    "no-underscore-dangle": 1,
+    "global-require": 1,
+    "react/no-multi-comp": 1,
+    "react/jsx-filename-extension": 0,
+    "camelcase": 1,
+    "import/no-unresolved": 1,
+    "import/prefer-default-export": 1,
+    "import/extensions": 1,
+    "no-return-assign": 1,
+    "max-len": 1,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/interactive-supports-focus": 0
+  },
+  "globals": {
+    "document": false,
+    "window": false,
+    "HTMLInputElement": false,
+    "HTMLDivElement": false
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/public
+/npm-debug.log
+/.idea

custom.d.ts

@@ -0,0 +1,14 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: {[className: string]: string};
+  export = content;
+}
+
+declare module '*.less' {
+  const content: {[className: string]: string};
+  export = content;
+}

package.json

@@ -0,0 +1,86 @@
+{
+  "name": "my-empty-react-project",
+  "version": "2.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "NODE_ENV=development webpack-dev-server --mode development --hot --open --inline --progress",
+    "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress -p",
+    "profile": "webpack --json > stats.json"
+  },
+  "author": "Fedor Katurov <gotham48@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muerwre/my-empty-react-project"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-rc.1",
+    "@babel/preset-env": "^7.0.0-rc.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-import-resolver-babel-module": "^4.0.0",
+    "eslint-import-resolver-webpack": "^0.9.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-babel": "^5.0.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "path": "^0.12.7",
+    "style-loader": "^0.21.0",
+    "ts-node": "^8.0.1",
+    "typescript": "^3.2.4",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@hot-loader/react-dom": "^16.8.1",
+    "@types/classnames": "^2.2.7",
+    "@types/node": "^11.9.0",
+    "@types/react": "16.8.1",
+    "axios": "^0.18.0",
+    "babel-runtime": "^6.26.0",
+    "classnames": "^2.2.6",
+    "clean-webpack-plugin": "^0.1.9",
+    "connected-react-router": "^6.3.2",
+    "history": "^4.7.2",
+    "http-errors": "~1.6.2",
+    "less": "^3.8.1",
+    "less-middleware": "~2.2.1",
+    "lodash": "^4.17.10",
+    "node-sass": "^4.11.0",
+    "react": "16.8.1",
+    "react-dom": "16.8.1",
+    "react-hot-loader": "^4.1.1",
+    "react-redux": "^6.0.1",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-scrollbar": "^0.5.4",
+    "redux": "^4.0.1",
+    "redux-persist": "^5.10.0",
+    "redux-saga": "^0.16.2",
+    "reduxsauce": "^1.0.0",
+    "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^2.0.0",
+    "scrypt": "^6.0.3",
+    "throttle-debounce": "^2.1.0"
+  }
+}

src/components/SomeComponent/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+const styles = require("./styles.scss");
+
+interface ISomeComponentProps {}
+
+export const SomeComponent: React.FunctionComponent<ISomeComponentProps> = (props) => {
+  const { } = props;
+
+  return (
+    <div className={styles.main}>This is some component</div>
+  );
+};
+
+export default SomeComponent;

src/components/SomeComponent/styles.scss

@@ -0,0 +1,2 @@
+.main {
+}

src/containers/App.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { hot } from 'react-hot-loader';
+import { SomeComponent } from '$components/SomeComponent';
+import { ConnectedRouter } from "connected-react-router";
+import { history } from "$redux/store";
+import { NavLink, Switch, Route } from 'react-router-dom';
+
+interface IAppProps {}
+interface IAppState {}
+
+class Component extends React.Component<IAppProps, IAppState> {
+  state = { };
+
+  render() {
+    return (
+      <ConnectedRouter history={history}>
+        <div>
+          <div>
+            <NavLink exact to="/" activeClassName="active">
+              Root
+            </NavLink>
+            <NavLink to="/somepath" activeClassName="active">
+              Something
+            </NavLink>
+          </div>
+          <Switch>
+            <Route
+              exact
+              path="/"
+              component={SomeComponent}
+            />
+            <Route
+              path="/somepath"
+              component={SomeComponent}
+            />
+          </Switch>
+        </div>
+      </ConnectedRouter>
+    );
+  }
+}
+
+const mapStateToProps = (state, props) => ({ });
+const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>

src/index.tsx

@@ -0,0 +1,25 @@
+/*
+  LAYOUT PACKING:
+  https://github.com/rexxars/react-layout-pack
+  https://github.com/gxapplications/react-gridifier
+  https://github.com/STRML/react-grid-layout
+ */
+import * as React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { configureStore } from '$redux/store';
+import App from '$containers/App';
+
+require('./styles/main.scss');
+
+const { store, persistor } = configureStore();
+
+render(
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <App />
+    </PersistGate>
+  </Provider>,
+  document.getElementById('app')
+);

src/redux/store.ts

@@ -0,0 +1,45 @@
+import { createStore, applyMiddleware, combineReducers, compose, Store } from 'redux';
+
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import createSagaMiddleware from 'redux-saga';
+import { connectRouter } from 'connected-react-router'
+import userReducer from '$redux/user/reducer';
+import userSaga from '$redux/user/sagas';
+import { createBrowserHistory } from 'history';
+import { PersistConfig, Persistor } from "redux-persist/es/types";
+import { routerMiddleware } from 'connected-react-router'
+
+const userPersistConfig: PersistConfig = {
+  key: 'user',
+  whitelist: ['user', 'logo', 'provider', 'speed'],
+  storage,
+};
+
+export const sagaMiddleware = createSagaMiddleware();
+export const history = createBrowserHistory();
+
+const composeEnhancers =
+  typeof window === 'object' &&
+  (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
+    : compose;
+
+export const store = createStore(
+  combineReducers({
+    user: persistReducer(userPersistConfig, userReducer),
+    router: connectRouter(history),
+  }),
+  composeEnhancers(applyMiddleware(
+    routerMiddleware(history),
+    sagaMiddleware
+  ))
+);
+
+export function configureStore(): { store: Store<any>, persistor: Persistor } {
+  sagaMiddleware.run(userSaga);
+
+  const persistor = persistStore(store);
+
+  return { store, persistor };
+}

src/redux/user/actions.ts

@@ -0,0 +1,3 @@
+import { USER_ACTIONS } from "$redux/user/constants";
+
+export const someAction = () => ({ type: USER_ACTIONS.SOME_ACTION });

src/redux/user/constants.ts

@@ -0,0 +1,3 @@
+export const USER_ACTIONS = {
+  SOME_ACTION: 'SOME_ACTION',
+};

src/redux/user/reducer.ts

@@ -0,0 +1,28 @@
+import { createReducer } from 'reduxsauce';
+import * as ACTIONS from "$redux/user/actions";
+import { USER_ACTIONS } from "$redux/user/constants";
+
+export type IRootState = Readonly<{
+  // key: string
+}>;
+
+type UnsafeReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
+interface ActionHandler<T> {
+  (state: IRootState, payload: UnsafeReturnType<T>): IRootState;
+}
+
+const someActionHandler: ActionHandler<typeof ACTIONS.someAction> = (state) => {
+  return { ...state };
+};
+
+const HANDLERS = {
+  [USER_ACTIONS.SOME_ACTION]: someActionHandler,
+};
+
+const INITIAL_STATE: IRootState = {
+  // key: val,
+  // key: val,
+  // key: val
+};
+
+export default createReducer(INITIAL_STATE, HANDLERS);

src/redux/user/sagas.ts

@@ -0,0 +1,25 @@
+import { call, put, takeEvery, takeLatest } from 'redux-saga/effects';
+import { delay } from 'redux-saga';
+import { USER_ACTIONS } from "$redux/user/constants";
+
+// Worker Saga for SET_EDITOR_LOCATION_INPUT reducer
+/*
+function* fetchSuggestions({ payload }) {
+  const { value } = payload;
+
+  yield delay(300);
+  try {
+    const results = yield call(someFunction, arguments);
+    yield put({ type: TYPES.ANOTHER_ACTION, payload: { results } });
+  } catch (e) {
+    yield put({ type: TYPES.ANOTHER_ACTION, payload: { results } });
+  }
+}
+*/
+
+function* mySaga() {
+  // fetch autocompletion on location input
+  //yield takeLatest(TYPES.ACTION, function);
+}
+
+export default mySaga;

src/styles/colors.scss

@@ -0,0 +1 @@
+

src/styles/global.scss

@@ -0,0 +1,2 @@
+body {
+}

src/styles/main.scss

@@ -0,0 +1,2 @@
+@import 'reset.scss';
+@import 'global.scss';

src/styles/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/styles/variables.scss

@@ -0,0 +1 @@
+@import 'colors';

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "allowSyntheticDefaultImports": true,
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react",
+    "lib": [ "es2015", "DOM", "es6" ],
+    "baseUrl": "./",
+    "paths": {
+      "$components/*": [ "src/components/*" ],
+      "$containers/*": [ "src/containers/*" ],
+      "$constants/*": [ "src/constants/*" ],
+      "$sprites/*": [ "src/sprites/*" ],
+      "$config/*": [ "./config/*" ],
+      "$styles/*": [ "src/styles/*" ],
+      "$redux/*": [ "src/redux/*" ],
+      "$utils/*": [ "src/utils/*" ]
+    }
+  },
+  "include": [
+    "./src/**/*",
+    "./custom.d.ts"
+  ]
+}

webpack.config.js

@@ -0,0 +1,176 @@
+// import webpack from 'webpack';
+const webpack = require('webpack');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const { join } = require('path');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: './src/index.html',
+  filename: './index.html',
+  title: 'Empty React Project',
+  hash: false,
+  // favicon: 'src/sprites/favicon.png',
+});
+
+const miniCssExractPlugin = new MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css'
+});
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map';
+
+const resolve = {
+  alias: {
+    'react-dom': '@hot-loader/react-dom',
+    $components: join(__dirname, 'src/components'),
+    $containers: join(__dirname, 'src/containers'),
+    $constants: join(__dirname, 'src/constants'),
+    $sprites: join(__dirname, 'src/sprites'),
+    $config: join(__dirname, './config'),
+    $styles: join(__dirname, 'src/styles'),
+    $redux: join(__dirname, 'src/redux'),
+    $utils: join(__dirname, 'src/utils'),
+  },
+  extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json']
+};
+
+/* Configuration */
+
+module.exports = () => {
+  /* Export */
+  const plugins = [
+    htmlPlugin,
+    miniCssExractPlugin,
+    new webpack.HashedModuleIdsPlugin(),
+  ];
+
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            { loader: 'style-loader' },
+            { loader: 'css-loader' }
+          ]
+        },
+        {
+          test: /\.less$/,
+          use: [
+            { loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader },
+            // { loader: 'css-loader' },
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                sourceMap: true,
+                importLoaders: 2,
+                localIdentName: '[name]__[local]__[hash:base64:5]'
+              }
+            },
+            { loader: 'less-loader' }
+          ]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            { loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader },
+            // { loader: 'css-loader' },
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                sourceMap: true,
+                importLoaders: 2,
+                localIdentName: '[name]__[local]__[hash:base64:5]'
+              }
+            },
+            { loader: 'sass-loader' },
+            {
+              loader: 'sass-resources-loader',
+              options: {
+                resources: ['src/styles/variables.scss'],
+              },
+            },
+          ]
+        },
+        {
+          test: /\.(ts|tsx|js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        { test: /\.(ts|tsx)?$/, loader: 'awesome-typescript-loader' },
+        {
+          test: /\.(eot|ttf|woff|woff2|otf)$/,
+          use: {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/'
+            }
+          }
+        },
+        {
+          test: /\.(png|svg)$/,
+          use: {
+            loader: 'file-loader',
+            options: {}
+          }
+        }
+      ]
+    },
+    devtool,
+    resolve,
+    plugins,
+    entry: {
+      app: './src/index.tsx',
+    },
+    output: {
+      publicPath: '/',
+      filename: isDevelopment ? '[name].[hash].js' : '[name].[contenthash].js',
+    },
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            name: 'vendor',
+            chunks: 'all',
+            test: /node_modules/,
+            priority: 20,
+            reuseExistingChunk: true,
+          },
+          commons: {
+            name: 'commons',
+            chunks: 'initial',
+            minChunks: 2,
+            minSize: 0,
+            reuseExistingChunk: true,
+          }
+        }
+      },
+      minimizer: [
+        new UglifyJsPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true // set to true if you want JS source maps
+        }),
+        new OptimizeCSSAssetsPlugin({})
+      ],
+      occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
+    },
+    devServer: {
+      historyApiFallback: true,
+      port: 8000,
+      // host: '192.168.88.40',
+      contentBase: 'dist',
+      publicPath: '/',
+      hot: true,
+    }
+  };
+};
+